عنصر خیلی مهم بعدی در طراحی وب
که نیاز به فکر و توجه زیادی داره رنگ هست
حالا کار کردن با رنگ می‌تونه سخت باشه
چون چیزی وجود داره به اسم نظریه رنگ (Color Theory)
که در واقع خیلی پیچیده‌ست
اما خوشبختانه برای ساختن طراحی‌های عالی نیازی نیست
که نظریه رنگ رو یاد بگیرید
همه‌ی چیزی که باید بدونید توی همین درس هست
و اولین چند تا دستورالعمل اینجا
در مورد انتخاب رنگ درست برای طراحی شماست
و درست مثل تایپوگرافی
باید مطمئن بشید که رنگ وب‌سایتتون
با شخصیت وب‌سایت هماهنگ باشه
و این فوق‌العاده مهمه حتی می‌تونم بگم
یکی از مهم‌ترین انتخاب‌های طراحی هست
چون رنگ‌ها در واقع معنا رو منتقل می‌کنن
و ما همه اینو تا حدی به صورت شهودی می‌دونیم
مثلاً شما از رنگ صورتی استفاده نمی‌کنید
توی وب‌سایت یک وکیل شیک و رسمی درسته؟
یا از رنگ طلایی برای یک استارتاپ سرگرم‌کننده و بازی‌گونه
چون این رنگ‌ها در واقع با اون شخصیت هماهنگ نیستن
و بنابراین خیلی منطقی به نظر نمیان
پس برای اینکه انتخاب رنگ درست براتون راحت‌تر بشه
بیایید سریع در مورد معنی هر رنگ صحبت کنیم
خب قرمز رنگیه که بیشتر از همه توجه جلب می‌کنه
و همین‌طور نماد قدرت شور و هیجان هم هست
خب من زیاد درباره هر کدوم از این رنگ‌ها توضیح نمی‌دم
بیشتر اینجا فقط می‌خونم تا سریع‌تر پیش بریم
خب نارنجی شبیه به قرمز هست
اما کمی کمتر تهاجمیه
و نماد شادی سرزندگی
و همچنین خلاقیت هست
بعد مشابه این دو رنگ زرد هست
که اساساً به معنای شادی روشنایی و هوشه
بعدی رنگ سبز رو داریم که رنگ مورد علاقه‌ی منه
و این رنگ نماینده طبیعته
رشد سلامتی و همین‌طور هماهنگی
بعد رنگ آبی رو داریم که شاید پرکاربردترین رنگ
در طراحی وب هست و دلیل خوبی براش وجود داره
و دلیلش اینه که ما انسان‌ها
تمایل داریم رنگ آبی رو مرتبط بدونیم
با آرامش قابل اعتماد بودن و حرفه‌ای بودن
و بنابراین این‌ها ویژگی‌هایی هستن که وب‌سایت‌ها
خیلی وقت‌ها می‌خوان منتقل کنن
و به همین دلیل از این رنگ استفاده می‌کنن چون جواب می‌ده
خب بعد از اون رنگ بنفش رو داریم
که نماد ثروت خرد و همین‌طور جادوعه
اگر دنبال اون حس باشید
بعد رنگ صورتی نشون‌دهنده‌ی عشق توجه و محبت هست
که فکر می‌کنم معنیش خیلی طبیعی به ما منتقل می‌شه
معنای این رنگ واضحه
بعد رنگ قهوه‌ای رو داریم
که معمولاً نشون‌دهنده‌ی طبیعت راحتی و دوام هست
و در نهایت رنگ مشکی خالص رو هم داریم
که دوباره تا حدی مثل قرمز نماد قدرته
اما همین‌طور نماد ظرافت و مینیمالیسم هم هست
ولی از طرف دیگه نشون‌دهنده‌ی غم و اندوه هم هست
پس مشکی رنگ سختیه برای استفاده
و خیلی وقت‌ها برای تازه‌کارها
احتمالاً بهترین گزینه برای انتخاب نیست
خُب
و وقتی رنگ پایه‌تون رو انتخاب کردید
باید مطمئن بشید
که از تونالیته‌ی خوبی از اون رنگ استفاده می‌کنید
مثلاً فقط نرید داخل Color Picker توی VS Code
و یه تونالیته‌ی تصادفی انتخاب کنید
یا بدتر از اون یکی از رنگ‌های اسم‌دار CSS رو استفاده کنید
به جاش ابزارهای زیادی داریم که می‌تونیم برای این کار استفاده کنیم
یکی از اون‌ها در واقع یه لیست رنگه
که بهش می‌گن Open Color
و این‌ها رنگ‌های عالی‌ای هستن که
با دقت طراحی شدن تا رابط‌های کاربری زیبا بسازن
و دوباره لینک این ابزار توی صفحه منابع من هست
و در واقع ما قراره از این استفاده کنیم
توی درس بعدی برای پروژه‌مون
یه ابزار دیگه هم هست که اسمش Tailwind CSS هست
و Tailwind در واقع یه فریم‌ورک خیلی بزرگ CSS هست
اما خیلی‌ها فقط رنگ‌هاشو انتخاب می‌کنن
و از بقیه فریم‌ورک استفاده نمی‌کنن
چون این رنگ‌ها واقعاً خیلی خوب انتخاب شدن
و خیلی قشنگ و متوازن هستن
بعد یه ابزار دیگه هم هست به اسم Flat UI Colors
که سایه‌های کمتری داره
اما این یکی هم خیلی پرطرفداره برای استفاده
به عنوان نقطه شروع طراحی شما
خب حالا شما رنگ اصلی‌تون رو انتخاب کردید
بر اساس شخصیت سایتتون
و همین‌طور تونالیته درستش رو هم انتخاب کردید
با استفاده از یکی از این ابزارها
اما حالا وقتشه که یه سیستم رنگی بسازید
پس توی هر طراحی حداقل به دو نوع رنگ نیاز دارید
در یک پالت رنگی
شما به یک رنگ اصلی و یک رنگ خاکستری نیاز دارید
پس دوباره بیاید به این مثالی نگاه کنیم
که قبلاً در تایپوگرافی بررسی کردیم
و اینجا رنگ اصلی به وضوح همین آبیه اینجا هست
بعد برای چیزهایی مثل متن از رنگ خاکستری استفاده کردن
که در این مورد در واقع همین آبی خیلی تیره‌ست
و این خیلی مهمه که اینو درک کنید
فقط چون بهش می‌گیم رنگ خاکستری
لزومی نداره که واقعاً خاکستری خالص باشه
این رنگ می‌تونه فقط یک نسخه‌ی خیلی تیره از یک رنگ دیگه باشه
پس در خیلی از طراحی‌ها داشتن یک رنگ اصلی
و یک رنگ خاکستری در واقع بیشتر از کافی هست
اما اگر بخواید یک قدم جلوتر برید
و کمی پیچیدگی بیشتری به طراحی‌هاتون اضافه کنید
وقتی تجربه بیشتری به دست آوردید
مسلماً می‌تونید رنگ‌های بیشتری اضافه کنید
پس به‌جز رنگ اصلی یا Primary Color
می‌تونید یک رنگ ثانویه هم اضافه کنید
که بهش Accent Color هم گفته میشه
و در این مثال طراحی که اینجا داریم
این رنگ تأکیدی (Accent) همین قرمز خوش‌رنگه
حالا این رنگ تأکیدی نباید یه رنگ تصادفی باشه
در عوض باید یک رابطه‌ای وجود داشته باشه
بین رنگ اصلی و رنگ تأکیدی
بنابراین شما نیاز دارید که از
یک ابزار استفاده کنید تا رنگ تأکیدی رو انتخاب کنید
خب فرض کنیم الان شما دارید
رنگ اصلی تأکیدی و خاکستری رو
حالا وقتی طراحی رابط‌های واقعی رو انجام می‌دید
همیشه به نسخه‌های روشن‌تر
و نسخه‌های تیره‌تر از این سه رنگ نیاز خواهید داشت
به نسخه‌های روشن‌تر می‌گیم Tint
و به نسخه‌های تیره‌تر می‌گیم Shade
این موضوع مخصوصاً برای رنگ‌های خاکستری مهمه
چون معمولاً به تون‌های مختلف خاکستری نیاز دارید
برای متن‌ها در جاها یا حالت‌های مختلف
مثلاً برای حالت‌های مختلف دکمه‌ها
حالا وقتی سیستم Open Color
یا رنگ‌های Tailwind رو انتخاب می‌کنید
اینا از قبل همراه با Tint و Shade می‌آن
ولی اگر از ابزار دیگه‌ای استفاده کنید
یا خودتون رنگ رو انتخاب کرده باشید
می‌تونید خیلی راحت Tint و Shade بسازید
با استفاده از ابزاری به نام Tint and Shade Generator
و حالا که داریم درباره ابزارها حرف می‌زنیم
برای قانون شماره ۴
یعنی ساختن یک رنگ تأکیدی خوب
باید برای این کار هم از ابزار استفاده کنید
همونطور که قبل‌تر گفتم
و نه اینکه همینطوری یه رنگ دوم تصادفی بسازید
برای این کار ابزاری مثل Paletton عالیه
یا ابزاری مثل Coolors
که می‌تونه در واقع پالت‌های رنگی کامل بسازه
خب
پس با این کار همه رنگ‌هاتون رو انتخاب کردید
و یک سیستم رنگی خوب ایجاد کردید
و حالا تنها چیزی که باید یاد بگیریم اینه که چه موقع و چطور
در طراحی‌تون از رنگ‌ها استفاده کنید
معمولاً هدف اصلی استفاده از رنگ‌ها اینه که
توجه رو به مهم‌ترین عنصر یک صفحه جلب کنیم
پس در این نمونه‌های طراحی
می‌بینید که رنگ اصلی همیشه استفاده شده
برای جلب توجه به دکمه
که خیلی وقت‌ها مهم‌ترین عنصر صفحه‌ست
چون خب همون‌جاست که واقعاً
می‌خوایم کاربر روی اون کلیک کنه درسته؟
همچنین رنگ اصلی خیلی وقت‌ها در لوگو هم
به کار گرفته میشه
و اتفاقاً
همه این طراحی‌هایی که دارم اینجا نشونتون میدم
می‌تونن به عنوان الهام برای شما باشن
برای بقیه عناصر طراحی مثلاً تایپوگرافی
پس چیزای زیادی هست
که میشه از این طراحی‌هایی که انتخاب کردم یاد گرفت
نه فقط درباره رنگ‌ها توی این مورد
به‌هرحال اینجا دوباره می‌بینیم که رنگ اصلی
روی دکمه‌ها استفاده شده
و دقیقاً همین موضوع هم اینجا تکرار شده
دوباره دارم سریع از روی این مثال‌ها
و این طراحی‌ها رد میشم اما باز هم
واقعاً می‌خوام که PDF اسلایدها رو دانلود کنید
و خودتون با وقت بیشتری بررسیش کنید
باشه؟ فقط نمی‌خوام ویدیو خیلی طولانی بشه
به‌هرحال می‌تونیم از رنگ‌ها استفاده کنیم
برای اضافه کردن یک تأکید جالب
یا حتی برای برجسته کردن کامل یک کامپوننت در صفحه
پس دوباره اینجا چند نمونه داریم
مثلاً می‌بینید که چند تا کادر دور داریم
یا متن‌هایی که زیرش خط کشیده شده یا متن‌های هایلایت شده
رنگ پشت آیکن‌ها داریم
یا حتی متن‌های رنگی داریم
و همینطور اینجا در مثال‌های بعدی
و اینجا هم چیزی که قبل‌تر اشاره کردم رو می‌بینیم
جایی که دو بخش کامل صفحه برجسته شدن
از بقیه قسمت‌ها
فقط با دادن یک رنگ پس‌زمینه‌ی جذاب
و اینجا هم چندتا مثال دیگه و باز هم
بخش‌هایی داریم که برجسته شدن
و همچنین متن‌های رنگی قشنگی داریم
اینجا وسط
و حتی این یکی گرادیان داره
که یه مرحله جلوتر محسوب میشه
حالا یک ترفند جالب دیگه
که خیلی از طراح‌ها استفاده می‌کنن اینه که رنگ رو به‌صورت استراتژیک
در تصاویر و Illustrationها به کار ببرن دقیقاً مثل اینجا
پس اینجا در سمت چپ می‌بینید
رنگ اصلی زرد ظاهر شده
توی اون عکس‌های بالا و همینطور وسط
رنگ قرمز هم به نوعی داخل خود تصویر دیده میشه
و در سمت راست هم رنگ اصلی نارنجی
به نوعی داخل Illustrationها ظاهر شده
پس استفاده از رنگ‌ها به این شکل به طراحی
یک ظاهر و حس کاملاً منسجم می‌دهد
این در واقع یک تکنیک فوق‌العاده است
اگر بتوانید آن را به‌خوبی اجرا کنید
حالا در نهایت باید درباره‌ی
رابطه بین رنگ‌ها و تایپوگرافی صحبت کنیم
و اولین دستورالعملی که اینجا برای شما دارم
اینه که روی پس‌زمینه‌های تیره می‌توانید امتحان کنید
که از یک تینت یا نسخه روشن‌تر رنگ پس‌زمینه برای متن استفاده کنید
یعنی در اصل یک نسخه روشن‌تر از رنگ پس‌زمینه
و مثل این دو مثال اینجا
این کار می‌تواند به متن شما جلوه‌ی خیلی خوبی بدهد
این یک قانون سخت‌گیرانه نیست که حتماً باید رعایت کنید
اما چیزی است که بسیاری از طراحان دوست دارند انجام دهند
چون واقعاً می‌تواند ظاهر زیبایی داشته باشد
و همچنین خیلی طبیعی‌تر به نظر برسد
و این موضوع به‌ویژه در این مثال اول خیلی واضح است
مورد بعدی این است که متن
واقعاً نباید کاملاً سیاه باشد
مثل این مثال اینجا
متن سمت راست
خیلی سنگین و ناخوشایند برای خواندن به نظر می‌رسد
و بنابراین باید آن را کمی روشن‌تر کنیم
و از یک رنگ خاکستری استفاده کنیم
و همین موضوع در این مثال دوم دوباره صدق می‌کند
که فکر می‌کنم نمونه سمت چپ
خیلی خیلی بهتر از نمونه سمت راست به نظر می‌رسد
و دوباره شاید فکر کنید که این
یک تفاوت خیلی ظریف است
اما وقتی با بقیه دستورالعمل‌های طراحی
که اینجا دارم به شما نشان می‌دهم ترکیب شود
کاملاً تفاوت ایجاد می‌کند
و در نهایت این مورد مهم است
به خاطر دلایل دسترس‌پذیری
و آن این است که هرگز نباید متن خود را بیش از حد روشن کنید خب؟
چند سال پیش
یک ترند بزرگ طراحی این بود که
متن‌های خاکستری خیلی روشن داشته باشند
برای مثال روی پس‌زمینه سفید
و این خواندن را برای کسانی که
دید کامل ندارند واقعاً سخت می‌کرد
بنابراین برای اینکه وب‌سایت شما برای همه قابل دسترس باشد
حتی برای کسانی که مشکل بینایی دارند
همیشه از یک ابزار برای بررسی کنتراست
بین رنگ متن و پس‌زمینه استفاده کنید مثل ابزار Coolors
چون چنین ابزاری به شما چیزی می‌دهد به نام
نسبت کنتراست که باید حداقل 45 به 1
برای متن عادی و 3 به 1 برای متن بزرگ باشد
برای مثال اینجا در سمت راست یک نسبت کنتراست 29 به 1 داریم
و بنابراین خواندن آن می‌تواند سخت باشد
برای کسانی که دید کامل ندارند
از طرف دیگر در سمت چپ
ما روش درست انجام کار را داریم
پس یک نسبت کنتراست خیلی بالا داریم 13 به 1
و این خیلی راحت‌تر خوانده می‌شود
و نه فقط برای کسانی که دید کامل ندارند
و همین موضوع برای این یکی هم صدق می‌کند
پس دوباره 29 در سمت راست
و این یکی واقعاً مشکل‌دار به نظر می‌رسد
چون متن خیلی بیش از حد تاریک است
در حالی که در سمت چپ با نسبت 51
این در واقع قابل قبول است
خب این هم از دستورالعمل‌ها درباره رنگ‌ها
بیایید حالا برخی از آن‌ها را اعمال کنیم
در پروژه‌مان در ویدیوی بعدی