چگونه مثل طراحان حرفه‌ای، ترکیب رنگ انتخاب کنیم؟

در زمان طراحی UI کلی یک سایت یا اپلیکیشن، رنگ یکی از مهم‌ترین اجزا است. فقط انتخاب رنگ‌های اصلی و مکمل می‌تواند روزها زمان ببرد.  اگر بخواهیم انتخاب ترکیب رنگ حرفه‌ای‌تری داشته باشیم باید با قوانین انتخاب ترکیب رنگ و همچنین ابزار انتخاب مناسب آشنا باشیم،  ۶ روشی که در ادامه گفته‌ایم، مواردی است که طراحان حرفه‌ای در انتخاب ترکیب‌های رنگی به آن‌ها توجه می‌کنند.

۱- از قانون ۱۰-۳۰-۶۰ استفاده کنید

یکی از جالب‌ترین روش‌ها برای اینکه میزان استفاده از رنگ‌ها را در طراحی بسنجیم، قانون ۱۰-۳۰-۶۰ است. بر اساس این قانون بهتر است ۶۰ درصد صفحه را رنگی پر کند که می‌خواهید بیشتر از همه استفاده شود( معمولا این رنگ خنثی است)، ۳۰ درصد را به رنگ دوم اختصاص دهید( در سایت‌ها معمولا این رنگ همان رنگ اصلی لوگو و برند سایت است) و ۱۰ درصد هم به رنگ حاشیه‌ای اختصاص می‌یابد.

روش ۱۰-۳۰-۶۰ از انتخاب رنگ در طراحی داخلی الهام گرفته شده است

البته گاهی در بنرهای تبلیغاتی و بعضی از صفحات وب، سهم اصلی رنگ را رنگ اصلی( رنگ برند) می‌گیرد. کاملا مشخص است که در این صورت چشم خیلی سریع خسته می‌شود و بهتر است در طراحی سایت، سهم اصلی به رنگ خنثی برسد.  همچنین دقت کنید که این اعداد حدودی هستند و در انتخاب و استفاده از این قانون نباید سخت گرفت.

۲- به کنتراست( تضاد) رنگ‌ها توجه کنیم

استفاده از کنتراست رنگ‌ها در تصاویر و طراحی سایت یکی از معمول‌ترین روش‌های انتخاب ترکیب رنگ است. برای بخش‌های متنی استفاده از ترکیب رنگ سیاه برای نوشته‌ها و سفید برای پس‌زمینه پرکاربردترین انتخاب است. کنتراست یک سکه‌ی دو رو است. از طرفی با ایجاد تضاد، توجه را به بخش اصلی( متن) جلب می‌کند و از طرفی دیگر، کنتراست کمی آزاردهنده است و چشم کاربر را خسته می‌کند.

کنتراست روشی فوق‌العاده برای کشیدن نگاه مخاطب به بخش اصلی طراحی ما است. در دکمه‌های CTA، متن‌های تبلیغی و  ایمیل مارکتینگ می‌توانیم از کنتراست بیشترین بهره را ببریم. استفاده از کنتراست را فقط به قسمت اصلی طراحی خود محدود کنید. مثلا در مورد متن‌ها، پس‌زمینه‌ی متن‌ها را در کنتراست با متن قرار دهید اما بخش‌های خالی صفحه را با رنگ‌های خنثی( مثلا خاکستری) پر کنید تا هم تضاد بیشتر به چشم بیاید و هم چشم خسته نشود.

قبلا در مقاله‌ی “۳ نکته‌ی بسیار ساده در مورد انتخاب رنگ برای کسانی که گرافیست نیستند” به صورت کلی در این مورد صحبت کرده‌ایم.

۳- در مورد روان‌شناسی رنگ‌ها مطالعه کنید

هر رنگ به صورت جداگانه و ترکیب با رنگ‌های دیگر، تاثیری خاص بر احساسات و حتی رفتار ما می‌گذارد. این حقیقتی است که همه‌جا از آن استفاده می‌شود از علائم راهنمایی و رانندگی گرفته تا تبلیغات زرد و …

روان‌شناسی رنگ‌ها یک علم است و برای حرفه‌ای بودن باید در این مورد مطالعه کنیم. کتاب‌های زیادی در ایران با این موضوع ترجمه یا منتشر شده است. پیشنهاد می‌کنم در دفتر کار خود حتما یکی از این کتاب‌ها را داشته باشید.

۴- به تفسیرهای فرهنگی از رنگ‌ها توجه کنید

جالب است که بسیاری از رنگ‌ها معنای متفاوتی در فرهنگ‌های مختلف دارند. مثلا ما در ایران سفید را رنگ پاکی و صلح می‌دانیم و در شادی‌ها از آن استفاده می‌کنیم( مثل لباس عروس) اما در هند مردم برای مراسم تدفین و عزا لباس سفید می‌پوشند. در ایران رنگ آبی به نشانه‌ی آرامش و معنویت استفاده می‌شود ولی در برخی کشورها این رنگ برای شکوه و عظمت( از نوع دنیایی) کاربرد دارد. درک این مفاهیم مخصوصا در مورد فرهنگ کشور مقصد به انتخاب رنگ بهتر و البته گاهی جلوگیری از یک فاجعه کمک می‌کند.

۵-  به هماهنگی رنگ‌ها توجه کنید

وقتی می‌خواهیم چند رنگ را در کنار هم استفاده کنیم، مهم‌ترین کار توجه به هماهنگی( harmony) بین ‌آن‌ها است. در طی سال‌ها دانشمندان با ایده‌ گرفتن از شکست نور و ترکیب رنگ‌های اصلی برای ساخت رنگ‌های دیگر، دایره رنگی( یا چرخه‌ی رنگ) را خلق کردند. استفاده از چرخه‌ی رنگ می‌تواند در انتخاب رنگ‌های متناسب با رنگ اصلی به ما کمک کند اما شما باید استفاده از این ابزار را فقط برای ایده گرفتن استفاده کنید وگرنه ممکن است رنگ‌های دلنشینی را انتخاب نکنید.

نمونه‌ی ساده‌ی چرخه‌ی رنگ( فقط ۱۲ رنگ)

• در این چرخه‌ها رنگ روبرو، همان رنگ مکمل است و می‌توان با آن دو بهترین کنتراست را گرفت
• همچنین برای انتخاب ترکیب‌های سه یا چهار رنگ می‌توانیم یک مثلت یا مربع فرضی روی این چرخه بکشیم.
• اگر بخواهیم رنگ‌هایی را برای سایه انتخاب کنیم، می‌توانیم رنگ‌های کناری رنگ انتخابی خود را استفاده کنیم.

یک چرخه‌ی رنگ خوب باید تمام رنگ‌ها را پوشش دهد. برای اینکه راحت‌تر از چرخه‌ی رنگی استفاده کنیم. می‌توانیم از سایت‌هایی نظیر:

• paletton حرفه‌ای‌ترین و پرکاربردترین چرخه‌ی رنگ
• sessions با محیط کاربری بسیار ساده
• adobe بسیار مناسب برای محیط وب

استفاده کنیم. باز هم توجه کنید که در این میان هرچه سلیقه‌ی شما حرفه‌ای‌تر شود، انتخاب ترکیب رنگ هم بهتر خواهد بود. به چرخه‌ی رنگ به چشم ابزار نگاه کنید نه یک قانون.

از طرف دیگر، شما می‌توانید از ترکیب‌های رنگی که دیگران پیشنهاد داده‌اند استفاده کنید، برای این کار بخش explore سایت ادوبی عالی است.

۶- از طبیعت الهام بگیرید

همه‌‌ی ما فرزندان طبیعت هستیم و ترکیب رنگ‌های استفاده شده  در طبیعت برای ما چشم‌نواز است. ما ناخوداگاه به سمت این ترکیب رنگ‌ها تمایل داریم. پس می‌توانیم در طراحی‌های خود به سمت طبیعت برویم، عکس‌هایی از طبیعت را ببینیم و ترکیب رنگ‌های استفاده شده در آن را پیدا کنیم و در طراحی‌های خود( حتی طراحی سایت ای اپلیکیشن) به کار ببریم.

ترکیب رنگی که خداوند در صحنه‌ی بالا استفاده کرده است

توجه به هر یک از موارد گفته شده در بالا به ما در انتخاب ترکیب رنگ حرفه‌ای تر کمک می‌کند. اما موضوع اصلی این است که تجربه و سلیقه در این مورد خیلی با اهمیت است. پیشنهاد می‌کنم اگر یک طراحی به نظر شما زیبا آمد، به ترکیب رنگی استفاده شده در طراحی دقت کنید و با این ۶ مورد آن را بسنجید تا درک بهتری نسبت به موضوع ترکیب رنگ پیدا کنید.