رنگ بندی مناسب برای وب سایت

تئوری رنگ

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

کنتراست

هر تیره از رنگ یک مجموعه مخالف دارد- یک رنگ “دوست مخالف” (Arch-Nemesis) که کنتراست آن بسیار بیشتر از هر رنگ دیگری است. برای مثال در رنگ آبی، رنگ سرمه ایی و آبی آسمانی با یکدیگر بیشترین کنتراست را دارند (برای دقت بیشتر می توانید از نمودار چرخ رنگ Color Wheel یا از یک برنامه کاربردی استفاده کنید).

مکمل

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

طراوت Vibrancy

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

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

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

 

رنگ ها در فرهنگ های مختلف

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

 

قرمز

در فرهنگ های غربی (شمال امریکا و اروپا) قرمز رنگ شور و هیجان است. این رنگ هم ارتباطات مثبت و هم منفی دارد – خطر، عشق و هیجان، و زمانیکه در ارتباط با بلوک سابق شرق مورد استفاده قرار می گرفت، و نشان دهنده کمونیسم است. قرمز نیز با قدرت همراه است و دارای برخی از المان های مذهبی نیز می باشد و زمانی که قرمز با سبز به کار می رود یاد آور کریسمس است. ترکیب چندگانه و متفاوت غربی با سایر فرهنگ ها باعث بوجود آمدن معانی مختلف این رنگ می شود.

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

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

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

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

 

نارنجی

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

در فرهنگ های شرقی و آسیایی نارنجی به ویژه زعفرانی در فرهنگ های هند مقدس است. و در ژاپن رنگ نارنجی نماد شجاعت و عشق است.

در آمریکای لاتین نارنجی به عنوان رنگ آفتاب در نظر گرفته شده است؛ همچنین در بعضی از کشورها به علت رنگ قرمز و نارنجی خاک، به عنوان رنگ زمین نیز در نظر گرفته می شود.

در برخی از فرهنگ های خاورمیانه نارنجی با عزاداری و از دست دادن در ارتباط است.

در سراسر جهان نارنجی می تواند با مذاهب در ارتباط باشد، و در مسیحیت نشانه پرخوری و طمع است.

 

زرد

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

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

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

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

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

 

آبی

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

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

در آمریکای لاتین به علت جمعیت بالای کاتولیک آمریکای مرکزی و جنوبی، آبی اغلب با دین در رنگ روبان مریم مقدس و روسری مرتبط است. آبی نیز رنگ اعتماد و آرامش در مکزیک و رنگ صابون در کلمبیا است.

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

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

 

سبز

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

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

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

سبز، بخصوص سبز زیتونی، تقریبا در هر کشوری با نیروی های ارتشی و نظامی در ارتباط است.

 

بنفش

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

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

در خاورمیانه بنفش و ثروت با هم مترادف هستند. در مصر، تعریف بنفش نیز شامل فضیلت می شود.

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

 

صورتی

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

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

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

در خاورمیانه صورتی معنی متمایزی ندارد.

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

 

قهوه ای

در فرهنگ های غربی (آمریکای شمالی و اروپا) قهوه ای رنگ زمین است، اما می تواند با سلامتی یا نازایی (بیابان) همراه باشد. در ایالات متحده، این رنگ اغلب برای بسته بندی (در شرکت حمل و نقل موفق UPS استفاده شده است) و ظروف غذا استفاده می شود. قهوه ای پایدار، قابل اعتماد و سالم است، که با رنگ دانه ها نیز در ارتباط است.

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

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

خاورمیانه قهوه ای با زمین و آسایش همراه است.

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

 

سیاه

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

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

در آمریکای لاتین سیاه با مردانگی مرتبط است.

در خاورمیانه، سیاه تا حدودی متضاد است، با معانی به هم همبسته، تولد، تولد دوباره و عزاداری. یا شر و رمز و راز نیز با سیاه مرتبط است.

تقریبا در سراسر جهان سیاه با سحر و جادو و ناشناخته در ارتباط است.

 

سفید

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

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

در آمریکای لاتین سفید مشابه آمریکای شمالی به خلوص و صلح متصل است.

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

در سراسر جهان پرچم سفید نماد جهانی آتش بس است.

 

انواع طرح رنگ Color Scheme

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

در حالی که روش های مختلفی برای ترکیب رنگ ها وجود دارد، ما بر روی ۳ مورد موفق و رایج تمرکز می کنیم:

Triadic

ساده ترین و متعادل ترین از سه ساختار (کنتراست، مکمل و طراوت) است. با استفاده از شدت و مکمل، و دوری از کنتراست زیاد، ساختار سه گانه امن ترین و قابل اطمینان ترین طرح است. در چرخ رنگ ۱۲ گامی، سه رنگ که ۱۲۰ درجه از یکدیگر قرار دارند را انتخاب کنید: یک رنگ برای پس زمینه، و دو رنگ برای محتوا و ناوبری (برای مثال زرد روشن، قرمز و آبی پر رنگ).

ترکیب و تقسیم مکمل Compound Split Complementary

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

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

مشابه Analogous

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

برای مثال سایت Blinksale با استفاده از آبی، فیروزه ای و سبز برای سایت یک فضای رام و امن ایجاد می کند. و از زرد (متضاد) برای جلب توجه و تحریک به عمل استفاده می برد.

آنچه که ما در مورد آن بحث کردیم، تنها مبانی نظریه ترسیم رنگ است که نشان می دهد تئوری رنگ چطور می تواند طراحی و رابط کاربری شما را ارتقاء دهد. اما هیچ محدودیتی برای عمق و تاثیر گذاری رنگ ها وجود ندارد.

 

ابزارهای انتخاب رنگ

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

Adobe Colour CC

شما ممکن است آن را با نام قبلی Adobe Kuler بشناسید. اما Adobe به تازگی نام این برنامه محبوب را تغییر داده است که در طول سالها از ابزار ساده رنگ مبتنی بر وب به نسل کامل تم و اشتراک گذاری منابع به عنوان Adobe Color CC تبدیل شده است.

با این وجود، طبیعت اساسی آن تغییر نکرده است: Colour CC به شما امکان می دهد تا طرح های مختلف رنگی را ایجاد و ذخیره کنید، که هر کدام شامل یک مجموعه پنج رنگی است. همچنین این ابزار در انواع نسخه browser-hosted و desktop موجود است. اگر شما از نسخه دسکتاپ استفاده می کنید می توانید یک طرح رنگ را مستقیما به فتوشاپ، Illustrator و InDesign اکسپورت کنید.

Mudcube Colour Sphere

یک منبع رنگی مفید برای طراحان است. که نه تنها hex numbers هر رنگ را فراهم می کند؛ همچنین به شما کمک می کند تا یک طرح رنگی را از یک Shade انتخابی ایجاد کنید. اگر شما مطمئن نیستید که چه طرح رنگی باید داشته باشید، Mudcube یک انتخاب از تم ها را از یک منوی کشویی فراهم می کند.

Check my Colours

این ابزار طراحی وب برای بررسی ترکیب رنگ پیش زمینه و پس زمینه تمام عناصر DOM طراحی شده است، تا تعیین کند که آیا آنها برای کسی که دارای مشکل شناسایی رنگ است، کنتراست کافی را دارد یا خیر. تمام آزمایش ها بر اساس الگوریتم هایی است که توسط کنسرسیوم جهانی وب (W3C) ارائه شده است. و این برنامه توسط طراح وب Giovanni Scala ایجاد شده است.

The Color App

این ابزار iOS با هدف یافتن ساده تر رنگ ها، با شبکه بزرگی از رنگ، شما را قادر می سازد رنگ نمونه، RGB، Hex و HSLA را پیدا کرده و پالت های رنگی ایجاد کنید تا ببینید که چگونه با هم کار می کنند.

Paletton

عالی برای مبتدیان- اگر شما نیاز به یک ابزار سریع و آسان دارید این ابزار کمکی می تواند برای شما بسیار مناسب باشد.

Flat UI Color Picker

که برای Flat-UI طراحی شده، هنوز یک ابزار مفید و راحت برای انتخاب رنگ است.

 

از برخی دیگر از ابزار های انتخاب رنگ می توان به Color Hunter, TinEye, SpyColor.com, Designspiration, ColorExplorer, Hex Color Scheme Generator, COLOURlovers, Color Scheme Designer, COPASO, ColorZilla, Colormunki, colr.org, ColourGrab, ColorBlender, GrayBit, Shutterstock Spectrum, Stripe Generator, Colors on the Web, Pictaculous, Contrast-A, ColoRotate اشاره کرد.

رنگ بندی مناسب برای وب سایت