چگونه با رنگ ظاهری حرفه ای داشته باشیم

چه چیزی باعث می شود یک طراحی هماهنگ، برنامه ریزی شده و حرفه ای به نظر برسد؟ پاسخ این است: «رنگ».

هر پروژه ای برای حرفه ای به نظر رسیدن نیازی به رنگ آبی ملایم شرکتی ندارد. برنامه ریزی رنگ به معنای ایجاد چارچوبی است که توضیح می دهد از کدام رنگ ها و نحوه استفاده از آنها استفاده کنید.

رنگ لغزنده ترین عنصر طراحی است. رنگ “خوب” بسیار نزدیک به چیزهای گریزان مانند سلیقه و شهود شخصی و همچنین ملاحظات فنی مانند کنتراست و کالیبراسیون مانیتور است.

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

در این مقاله چند تکنیک برای دستیابی به پالت های رنگی زیبا برای طراحی های وب شما را بررسی می کنیم.

بهترین راه برای اینکه یک وب سایت برنامه ریزی نشده به نظر برسد، انتخاب رنگ های آن به صورت تصادفی است.

حتی زمانی که بازدیدکنندگان برای اولین بار از صفحه اصلی وب سایت بازدید می کنند، رنگ ها بر نگرش آنها نسبت به محتوا تأثیر می گذارد. آیا این وب سایت هیجان انگیز است؟ اطمینان بخش؟ شجاعانه؟ ملايم؟ سیاسی؟ رسمی؟

رنگ به اندازه تایپوگرافی بر نحوه تفسیر افراد از آنچه می بینند تأثیر می گذارد.

پیدا کردن رنگ‌های مناسب آسان نیست، اما این فرآیند می‌تواند سیستماتیک باشد.

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

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

طرح رنگ به ماهیت خاص وب سایت بستگی دارد. برای مثال، هم بانک ها و هم گل فروشی ها می توانند وب سایت هایی با ظاهر حرفه ای داشته باشند.

اما مردم ممکن است تمایل کمتری به خرید گل از وب سایتی داشته باشند که آبی شرکتی و خاکستری اقیانوسی است. و وب‌سایت بانک آمریکا را به رنگ یاسی و زرد-سبز تصور کنید.

یک طراحی «حرفه‌ای» به بازدیدکنندگان می‌گوید که وب‌سایتی پیدا کرده‌اند که موضوع آن را جدی می‌گیرد، حتی اگر آن موضوع ساده‌تر باشد. هر رنگ و ارزشی که باشد، “حرفه ای” به معنای هماهنگ، برنامه ریزی شده و اندیشیده شده است.

 

رفتن به مقیاس خاکستری

بهترین راه برای کار با رنگ این است که با رنگ شروع کنید.

حذف رنگ از طرح، مشکلات اساسی را آشکار می‌کند که باید قبل از نگرانی در مورد اینکه کدام سایه استفاده از چارتر بهتر عمل می‌کند، مورد توجه قرار گیرد. اگر طراحی در سیاه و سفید به نظر نمی رسد، وقت آن است که تغییراتی ایجاد کنید.

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

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

گاهی اوقات حذف رنگ به خودی خود یک راه حل است.

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

به طور ناگهانی، لایه‌های فتوشاپ را صاف کردم و “Desaturate” را فشار دادم و طرح پر جنب و جوش مسی و دریایی را به سایه‌های خاکستری تبدیل کردم. در کمال تعجب همه، کار کرد.

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

طرح رنگ خود را با آزمون فتوشاپ squint تجزیه و تحلیل کنید:

1. حداقل از سه صفحه از وب سایت خود اسکرین شات بگیرید. آنها را در فتوشاپ باز کنید.
2. لایه پس زمینه را در هر اسکرین شات کپی کنید (لایه → لایه تکراری، یا Command + J در Mac، یا Control + J در پنجره ها).
3. یک تاری گاوسی در حدود 10 پیکسل روی لایه های جدید اعمال کنید.
4. به تصویر ← تنظیمات ← Posterize بروید. از 8 تا 12 سطح استفاده کنید یا به Filter → Pixellate → Mosaic بروید. از 15 تا 30 پیکسل استفاده کنید.

این نشان می‌دهد که کدام رنگ‌ها واقعاً غالب هستند. هرچه رنگ‌ها غالب‌تر باشند، طرح به شدت در ذهن بازدیدکننده نقش می‌بندد.

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

 

رنگ های خود را تراز کنید

رنگ دارای سه ویژگی است: رنگ، اشباع و ارزش (گاهی اوقات به آن سبکی می‌گویند).

اشباع به معنای غنی بودن یک رنگ است: رنگ‌های نئون بسیار اشباع شده‌اند، در حالی که رنگ‌های پاستلی کمتر اشباع می‌شوند.

مقدار نشان می‌دهد که یک رنگ چقدر روشن است (یعنی چقدر به سیاه یا سفید نزدیک است).

رنگ به این اشاره دارد که یک رنگ به کدام قسمت از رنگین کمان تعلق دارد، مانند قرمز یا سبز. این ملکی است که مردم به آن سفر می کنند.

هیچ چیز مانند تضاد رنگ ها، طرح رنگ را از بین نمی برد. یک طرح می تواند صد رنگ از یک رنگ، از پاستلی گرفته تا نئون داشته باشد و همچنان برنامه ریزی شده به نظر برسد. اما اگر رنگ‌ها به روش اشتباهی ترکیب شوند، طرح از هم می‌پاشد.

یک راه برای جلوگیری از برخورد رنگ ها جدا کردن آنها با رنگ سوم است. بافر سیاه، خاکستری یا سفید ایمن ترین است، زیرا مقیاس خاکستری خنثی است: می توانید هر قسمت از رنگین کمان را با سیاه، سفید و خاکستری هماهنگ کنید.

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

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

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

 

کشف طرح‌های عالی

طرح های رنگی عالی از کجا می آیند؟ با صدها رنگ و هزاران ترکیب، چگونه تصمیم می گیرید؟

طراحان وب‌سایت‌های استاتیک کوچک باید از محتوا رنگ بگیرند. این معمولاً به معنای عکس است.

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

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

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

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

اگر به اندازه کافی خوش شانس هستید که از مخاطبان هدف خود عکس بگیرید، آنها را به صورت انبوه مشاهده کنید. شما یک متوسط از جمعیت را می خواهید. اما اگر عکس‌ها در دسترس نیستند، به خرید بروید.

طراحان لباسی که می‌توانند در تجارت باقی بمانند، حس رنگی عالی برای هر روحیه و سبک زندگی دارند. لزومی ندارد که مد لباس 5th Avenue باشد. جستجوی گوگل برای «فروشگاه‌های کمپینگ»، «لباس کودک»، «اسکی و لباس شنا» و «زندگی معمولی» ترکیب‌های رنگی خوب بسیاری را نشان می‌دهد.

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

 

استفاده از بافت‌ها

تغییرات جزئی در رنگ، اشباع یا ارزش بافت‌ها را ایجاد می‌کند.

بافت‌های تک رنگ (یعنی بافت‌هایی با تنها یک رنگ) و الگوها ابعاد ظریفی را برای اکثر وب‌سایت‌ها بدون تداخل ایجاد می‌کنند.

بخصوص پس‌زمینه‌های بافت ساده، ساختن آسان است:

• از یک دیوار داخلی یا چیزی که برهنه است اما خشن است عکس بگیرید.
• آن را در فتوشاپ باز کنید.
• لایه پس زمینه را کپی کنید و آن را “بافت 1” بنامید.
• لایه پس زمینه را با رنگ های طرح رنگ خود پر کنید.
• حالت ترکیبی لایه “بافت 1” را روی “”نور نرم” و کدورت آن را روی 30٪ تنظیم کنید.
• آن را در وب سایت خود امتحان کنید. اگر درست به نظر نمی رسد، با opacity لایه بازی کنید.

نام لایه عمدی است. ممکن است با بیش از یک عکس بازی کنید، اما از دادن نام هایی مانند «بافت دیوار» یا «بافت کاغذ» به لایه ها خودداری کنید. شما می خواهید بر روی تأثیر روی وب سایت خود تمرکز کنید، نه اینکه از کجا آمده است.

 

ایجاد یک طرح خوب

یک طرح رنگ خوب ویژگی های خاصی دارد. آن را به عنوان یک چارچوب یا مجموعه ای از دستورالعمل ها برای ثابت نگه داشتن یک طراحی در نظر بگیرید. این طرح باید:

• دو تا پنج رنگ را فهرست کنید که به خوبی با هم کار می کنند،
• توضیح دهید که یک طرح چقدر می تواند از آن رنگ ها متفاوت باشد،
• سایه های هر رنگ را در نظر بگیرید،
• در برابر سیاه و سفید به خوبی کار کنید.

یک مثال در اینجا آمده است:

طراح با انتخاب رنگ‌های عمدتاً گرم شروع کرد. هیچ منطقی وجود نداشت، فقط هدف مبهم “پاییز” و شهود او بود.

در فتوشاپ، دو لایه سایه های سیاه و سفید را ارائه می دهند. حالت ترکیبی هر لایه روی “نور نرم” تنظیم شد. رنگ سیاه خالص برای رنگ مناسب خیلی تیره بود، بنابراین تیرگی لایه سیاه تنظیم شد.

برای یکسان سازی رنگ ها، یک لایه جدید ایجاد شد و با قرمز خالص پر شد. حالت ترکیبی آن روی “Color” تنظیم شد و کدورت آن به حدود 40٪ کاهش یافت. (توجه: ترتیب لایه‌ها بسیار مهم است. اگر لایه رنگی زیر لایه‌های سیاه و سفید قرار گیرد، رنگ‌ها تغییر می‌کنند.)

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

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

اگر آنها را به طور کلی تغییر دهیم چه؟ استفاده از تصویر ← تنظیمات ← Hue/Saturation در لایه “tint” حسی کاملاً غیر پاییزی ایجاد می‌کند، اما رنگ‌ها همچنان هماهنگ هستند. شاید بتوان از آن پالت برای عید پاک استفاده کرد.

نتیجه نهایی یک طرح رنگ است: مرجعی که رنگ های متفاوت (اما نه خیلی متفاوت) و طیف وسیعی از سایه ها را ارائه می دهد که به خوبی با هم کار می کنند. فایل نمونه را دانلود کنید.

 

استفاده از چارچوب

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

می‌توانید این مشکل را با قرار دادن تصاویر خود از طرح رنگ یا پیروی از طرح رنگی تصاویر خود حل کنید.

اجرا کردن طرح رنگی خود، حتی با عکس‌ها، راهی عالی برای دستیابی به ظاهری یکپارچه در همه صفحات است.

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

اگر تصویری با طرح رنگ شما مطابقت ندارد، به آن رنگ بدهید:

1. تصویر را در فتوشاپ باز کنید.
2. یک لایه جدید ایجاد کنید. حالت ترکیبی آن را روی “Color” تنظیم کنید.
3. آن لایه را با یکی از رنگ های پالت خود پر کنید، ترجیحاً رنگی که بیشتر با تصویر مطابقت دارد.
4. Opacity لایه رنگ را روی 50% تنظیم کنید.
5. تا زمانی که تعادل خوبی بین رنگ اصلی تصویر و پالت رنگ وب سایت خود بدست آورید، با کدورت بازی کنید.
6. این تکنیک برای عکس‌ها، تصاویر و نمادها کار می‌کند – هر چیزی که مبتنی بر پیکسل باشد. (اگر صاحب تصویر نیستید، حتماً قبل از تغییر آن اجازه بگیرید. ممکن است ظاهر آن را در وب‌سایت خود بهبود ببخشید، اما همچنان از هنر شخص دیگری استفاده می‌کنید.)

 

به نظر حرفه ای

هیچ مجموعه ای از رنگ ها به خودی خود «حرفه ای» به نظر نمی رسند. بلکه باید فرآیندی را دنبال کنید تا به یک احساس هماهنگ و برنامه ریزی شده برسید.

مهم نیست که وب سایت در مورد چه چیزی باشد، مخاطب متوجه خواهد شد که آن را جدی می گیرد.

نکات

• وقتی فکر می کنید که رنگ بندی خوبی دارید، حداقل یک هفته آن را امتحان کنید. ارزیابی رنگ نیاز به شهودی دارد که در طول زمان ایجاد می شود. به خودتان زمان بدهید تا شخصیت طرح را به طور کامل جذب کنید.
• وقتی فکر می کنید که رنگ بندی خوبی دارید، اجازه ندهید که کهنه شود. سلیقه بازدیدکنندگان شما، مانند سلیقه شما، در طول زمان تغییر می کند. یادداشت کنید تا بعد از چهار ماه رنگ ها را مرور کنید. سپس بپرسید آیا آنها هنوز مناسب هستند؟ اگر نه، چه چیزی تغییر کرده است؟ چه عواملی بر تنظیم شما تأثیر می گذارد؟
• از رنگ های درخشان کم استفاده کنید. پاشیدن چیزی رنگین کمانی بازدیدکنندگان را به آنجا می کشاند، اما اگر آن را همه جا ببینند، بی هدف سرگردان خواهند شد.
• برخی از مردم فکر می کنند که طرح های رنگی محدوده باریکی دارند. اجازه دهید تا به طرح های شما عمق بیشتری بدهد.
• از غذاهای اولیه خالص مانند قرمز، سبز، آبی و زرد خودداری کنید. به آنها رنگی برای شخصیت واقعی بدهید: قرمز، اما کمی بنفش، آبی با لمس سبز، زرد “گرم” با رنگ نارنجی.
• مطمئن شوید که رنگ‌های شما وقتی محو می‌شوند کار می‌کنند. اگر قرمز را انتخاب می کنید، توجه داشته باشید که قرمز روشن می تواند زنانه باشد و قرمز تیره می تواند شبیه زنگ یا خون باشد. رنگ زرد از نور محو شده خورشید به قهوه ای تیره می رسد. آبی تیره اسرارآمیز است و آبی روشن آرام است – یا اگر آن را بیش از حد اشباع کنید، برقی است.
• کاربران مک، صفحه نمایش خود را تنظیم کنید. به «System Preferences» بروید و روی «Universal Access» کلیک کنید. صفحه نمایش خود را روی «استفاده از مقیاس خاکستری» تنظیم کنید. این همچنین زمانی که در حال و هوای فیلم نوآر هستید مفید است.
• مهم نیست که چقدر می خواهید وب سایت شما فعال باشد، از پس زمینه خنثی استفاده کنید. سیاه، سفید و خاکستری تقریباً با هر رنگی به خوبی کار می کنند.
• اگر می‌خواهید متن کوچک (مثلاً 14 نقطه یا کمتر) با یک میدان رنگی بزرگ مطابقت داشته باشد، متن را چند درجه تیره‌تر از حالت عادی قرار دهید. با این کار شمارنده های نور درون کاراکترها جبران می شود.
• از سایه های بیشتر با رنگ های کمتر استفاده کنید.
• آنچه “خوب به نظر می رسد” بصری است. اما شهود، نبردی است بین نفس شما، دقت نظر مخاطبان و اقتدار افرادی که بودجه پروژه را تامین می کنند.
• از پس‌زمینه‌های بی‌صدا برای برجسته کردن محتوا استفاده کنید:
  

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

چگونه طرح های رنگی موفق ایجاد می کنید؟ چه چیزی برای شما مفید است و چه چیزی برای شما کار نمی کند؟