حسین محمودی هستم، طراح محصول و UI/UX، طراح گرافیکی، صفحه آراء.
تصمیم گرفتم مطالبی در زمینه های مختلفی که بهشون علاقه دارم رو در اینجا قرار بدم که از جمله میشه به طراحی رابط کاربری و تجربه کاربری (UI/UX)، طراحی گرافیک و صفحه آرایی اشاره کرد.
در این قسمت از آموزش یوتیوبر شدن من نکاتی رو که به شما کمک میکنه 100 سابسکرایبر اول کانال یوتیوبتون رو بگیرید رو بیان میکنم.
گرفتن 100 سابسکرایبر اول باعث میشه شما انگیزه بیشتری برای ادامه فعالیت داشته باشید و از طرفی بعضی از امکانات مهم یوتیوب که هنوز در دسترس نیستن، در دسترس شما قرار می گیرد.
از جمله آن میشه به گرفتن و ساخت لینک اختصاصی کانالتون اشاره کرد.
از دیگر مزیت های 100 سابسکرایبر اول اینه که باعث میشه یوتیوب کانال شما را به کسانی که هنوز عضو کانال شما نیستن پیشنهاد بده و در نتیجه زمان و تعداد بازدید از کانال شما افزایش پیدا می کند.
در این قسمت من میخوام 5 پلاگین کاربردی دیگه که سرعت کار شما در طراحی رو افزایش میدن رو بهتون معرفی کنم.
شما بوسیله این پلاگین ها سریع می توانید آرتبورد های خود را مرتب کنید، با استفاده از آبجکت های مختلف شکل های منظمی درست کنید، اگر ویژگی گرد کردن گوشه های یک آبجکت از بین رفته، اون رو برگردونید و ...
در آخرین قسمت از آموزش جدول ها در ایندیزاین من به سراغ استایل دادن و مرتب کردن سلول های جدول می روم و به شما آموزش می دهم که چطور با تغییر اندازه سطر و ستون و تغییر فونت و سایز آن خوانایی محتوای جدول را افزایش و آن را زیباتر کنید.
در این قسمت من به شما نحوه اینکه چطور جدول را زیباتر کنیم را آموزش می دهم و به عنوان مثال به شما یاد خواهم داد که چطور ردیف های جدول را بصورت یکی در میان تغییر رنگ دهید تا زیبایی خاصی به جدول شما بدهد و خوانایی آن افزایش یابد.
در قسمت قبل آموزش طراحی جدول در ایندیزاین، من راه های ساخت جدول در ایندیزاین رو به شما آموزش و نشان دادم که چطور میتونید یک سری تنظیمات اولیه جدول ها رو انجام بدید.
اگر این فیلم رو ندیدید می توانید در لیست پخش اندیزاین کانال آن را مشاهده کنید. در این قسمت من میرم سراغ تنظیمات بیشتر جدول و در واقع به شما نشان می دهم که چطور بصورت تکی و یا گروهی سطرها و یا ستون های یک جدول را جا به جا و یا تنظیم کنید. در ابتدای این فیلم هم به این می پردازم که چطور بتوانید سطر و یا ستون جدیدی را به هر قسمت از جدول اضافه و یا حذف کنید.
در یک سری 4 قسمتی من به نحوه ایجاد و تنظیم جدول ها در ایندیزاین می پردازم. در اولین قسمت این سری من به شما نشان می دهم که چطور یک جدول را ایجاد کنید و یا چطور آن را از فایل های دیگر مثل ورد و یا اکسل به داخل ایندیزاین بیاورید و آن را بدرستی به نمایش بگذارید.
در مراحل و قسمت های بعد به تنظیم و استایل دادن سطر و ستون های جدول می پردازم تا در نهایت شما یک جدول اطلاعات با خوانایی بالا را در صفحه آرایی با ایندیزاین بوجود آورید.
توسط ویژگی border می توان عرض، نوع و رنگ حاشیه هر چهار سمت یک عنصر را تعریف کرد.
ویژگی border سه مقدار می پذیرد و اگر هر کدام از مقادیر را تعیین نکنیم به مقدار اولیه اش ریست می شود که همه ی این موارد در فیلم بررسی می شود.
همینطور که در مثال های بالا دیده می شود با استفاده از این ویژگی نمی توان فقط حاشیه یک سمت خاص عنصر را تعریف کرد.
در این قسمت اول سری ویدیو های معرفی پلاگین های ادوبی ایکس دی قصد دارم پلاگین خیلی کاربردی این برنامه را که به ما در طراحی رابط کاربری سرعت میدهند و در واقع کار ما را آسان می کند را به شما معرفی و سپس نحوه ی کارکرد آنها را به شما آموزش دهم. در اولین قسمت از این آموزش و در معرفی اولین پلاگین سراغ پلاگینی می‌روم که بوسیله آن شما می توانید مشکل فارسی نویسی و بصورت دقیق تر مشکل راست چین نویسی در ادوبی ایکس را رفع کنید.
پلاگین خیلی کاربردی دیگه ای که به معرفی اون می پردازم برای خروجی گرفتن از آرتبورد های شما با کیفیت بالاست.
ویژگی text-indent تعیین می کند که خط اول محتوای یک عنصر بلاک چقدر فاصله افقی با لبه عنصر داشته باشد.
به بیان دیگر این ویژگی مقدار تورفتگی خط اول محتوا را مشخص می کند.
اگر جهت عنصر از راست به چپ باشد (direction: rtl;) فضای خالی بین محتوا و لبه سمت راست بوجود می آید و اگر جهت از چپ به راست باشد محتوا از لبه سمت چپ فاصله می گیرد.
با استفاده از ویژگی text-align می توان تصمیم گرفت که چیدمان محتوای خطی (مثل متن یا تصویر) داخل یک عنصر بلاک به چه صورت باشد.
همانطور که در نرم افزارهای ویرایش متن مثل ورد می توان بر روی چیدمان نوشته کنترل داشت در سی اس اس نیز این امکان وجود دارد که با مقادیری مثل left، right، center و یا justify عناصر خطی را تراز کنیم.
از ویژگی font برای خلاصه نویسی چندین ویژگی مربوط به فونت و متن در سی اس اس استفاده می شود. سیستم عامل ها برای قسمت های مختلف سیستم از فونت و استایل های مختلفی استفاده می کنند.
مثلا برای منوها از فونت مخصوص برای منوها و برای نوارهای حالت از استایل دیگر و غیره… نکته مهم اینکه این کلمات کلیدی فقط برای ویژگی font تعیین می شوند و نمی توان از ویژگی font-family برای استفاده کردن از این فونت ها استفاده کنیم.
ویژگی text-transform مشخص کننده این است که کلمات و حروف از نظر کوچک و بزرگی در چه حالتی نمایش داده شوند.
منظور اندازه حروف نیست بلکه صحبت از حروف کوچک و بزرگ مثلا زبانی مثل زبان انگلیسی می باشد.
در حالت capitalizeحرف اول هر کلمه بزرگ می شود و حروف دیگر کلمه همانطور که در HTML نوشته شده اند باقی می مانند.
در قسمت قبل به بعضی از خاصیت های پراپرتی Display پرداختیم در این قسمت با استفاده از مقدار none می توانید یک عنصر را از صفحه حذف کنید.
اما توجه داشته باشید که این کار عنصر را از DOM حذف نمی کند اما اثری از عنصر در صفحه باقی نمی ماند و فضایی که گرفته بود کاملا خالی می شود و عناصر مجاور جای آن را پر می کنند.
زمانی که عنصر حذف شود تمام فرزندان آن (عناصر داخل) نیز حذف خواهند شد.
نکته مهم اینکه وقتی عنصری را با این روش حذف کنید ربات های صفحه خوان و موتورهای جستجو به آن عنصر دسترسی نخواهند داشت. این موارد را با مثال و بصورت کامل در ویدیو آموزشی ببینید.
از ویژگی display برای تعیین نوع ساختار یک عنصر استفاده می شود. هر عنصری در صفحات وب یک مستطیل محسوب می شود و نوع ساختار هر عنصر رفتار آن عنصر را در یک صفحه مشخص می کند.
در CSS دو نوع چارچوب اصلی وجود دارند: inline و block. اگر عنصری دارای چارچوبی از نوع inline باشد زمانی که در ادامه یک خط قرار می گیرد, آن خط شکسته نمی شود و عنصر به خط بعدی نخواهد رفت و عناصر بعد از آن هم اگر از همین نوع باشند در ادامه آن عنصر در همان خط قرار خواهند گرفت.
در مقابل عناصر خطی, عناصری که چارچوب block دارند در حالت پیشفرض در یک خط با عناصر دیگر قرار نمی گیرند و کل فضای افقی را می گیرند عناصر block در مقابل با عناصر inline می توانند هر نوع عنصری (block و inline) را درون خود داشته باشند.
از پراپرتی color برای تعریف رنگ ها در سی اس اس استفاده می شود. رنگ ها می توانند یک کلمه کلیدی باشند, یا دسته ای از اعداد و یا آنها را می توان از طریق فرمت های متفاوت که در ادامه آمده اند معرفی کرد.
می توان از یک رنگ با استفاده از کلمه کلیدی تعریف شده برای آن در سی اس اس استفاده کرد.به عنوان نمونه کلمات کلیدی balck, white و غیره… در رنگهای RGB که کوتاه شده کلمات قرمز, سبز و آبی می باشد.
وسط قرار دادن عناصر در طراحی صفحات وب یکی از موارد رایج می باشد و کسانی که تازه شروع به یادگیری سی اس اس کرده اند خیلی با این مورد درگیر هستند.
در این فیلم آموزشی قصد دارم شرایطی که شما می توانید یک عنصر را در وسط صفحه قرار دهید را به شما آموزش دهم.
برای وسط قرار دادن عنصر در وسط صفحه روش های زیادی وجود دارد که من در این فیلم به ساده ترین و کلی ترین روش موجود یعنی با استفاده از تنظیم پراپرتی Margin این کار را انجام می دهم.
در این قسمت از آموزش جامع CSS – CSS3 من آموزش کار با ویژگی های Height و Width در CSS را به شما آموزش می دهم. ویژگی یا پراپرتی Height برای کنترل ارتفاع یک عنصر و ویژگی width برای کنترل…
یکی دیگر از مشکلات بزرگ کاربران در صفحه آرایی به خصوص در صفحه آرایی مطالب علمی طراحی چارت و نمودار در ایندیزاین است، زیرا ایندیزاین بصورت داخلی از طراحی چارت بهره نمی برد. در این قسمت از فیلم های آموزشی ایندیزاین اَستریکس آرتس من میخواهم 3 روش مختلف را به شما نشان دهم که چطور بتوانید براحتی انواع چارت و نمودار های پیچیده از قبیل نمودار میله ای، دایره ای و... را در ایندیزاین طراحی و استفاده کنید.
دو روش آن بوسیله نرم افزار های دیگر انجام می گیرد و نتیجه آن که نمودار است به داخل ایندیزاین وارد می شود و روش آخر در داخل خود ایندیزاین و بوسیله فونتی خاص صورت می گیرد.
کانسپت سالن زیبایی Xbeauty بر اساس این طراحی شد که زمانی که یک کاربر وارد سایت می شود، متوجه خدمات زیبایی با کیفیت، تمیز و تا تجهیزات مدرن بشود و در واقع این حس را به آن ها القا کند.
در همان ابتدای سایت خدمات ویژه سایت بصورت اسلایدر درآمده و نمایش داده میشود و بلافاصله همه ی خدمات این سالن آرایشی در دید کاربر قرار میگیرد. بعد از این مرحله به معرفی سالن زیبایی XBeauty پرداخته می شود و پس آن نمونه کارهای این سالن زیبایی به کاربر ارائه می شود.
نظرات مشتریان در مرحله بعد نمایش داده می شود و پس از آن یک آفر یا پیشنهاد ویژه به کاربر ارائه می شود تا وارد مرحله سفارش خدمات زیبایی شود و اگر از این مرحله عبور کرد در انتها قسمت رزرو نوبت قرار داده شد که بتواند یک نوبت بصورت آنلاین رزرو کند.
یکی از مشکلات بزرگ کاربران در صفحه آرایی به خصوص در صفحه آرایی مطالب علمی نوشتن و یا وارد کردن فرمول ها است. در این قسمت ازفیلم های آموزشی ایندیزاین اَستریکس آرتس من میخوام به شما نشان دهم که چطور براحتی می توانید فرمول های پیچیده (ریاضی و ...) را براحتی در ایندیزاین وارد و ویرایش کنید.
