روان شناسی رنگ ها در طراحی سایت (چه رنگی را برای سایت خود انتخاب کنیم؟)

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

ما اصول تئوری رنگ و طرح رنگ را بررسی خواهیم کرد، سپس تأثیرات احساسی برخی از رنگ ها را برای طراحی سایت بررسی خواهیم کرد.

نظریه رنگ شناسی

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

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

تئوری رنگ در طراحی سایت چیزی فراتر از یک تزئین بصری است، می تواند تأثیرات تغییر دهنده ای را بر روی تجارت شما بگذارد.

جنب و جوش: پیامد های احساسی رنگ

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

قرمز

قدرت، اهمیت، جوانی

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

رنگ قرمز برای وب سایت No Way NSA بسیار مناسب است، هدف آن ایجاد زنگ خطر برای تهدید ادعا شده توسط NSA است. استفاده از رنگ قرمز در قسمت اول سایت های تک صفحه ای بسیار هوشمندانه است زیرا توجه را به پیام اصلی جلب می کند، در حالی که از نظر فیزیولوژیکی مردم را به "خارج شدن از منطقه خطر" با پیمایش به پایین ترغیب می کند. این البته فقط باعث می شود کاربر با محتوای بیشتری درگیر شود.

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

نارنجی

دوستی، انرژی، منحصر به فرد بودن

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

جدا از اینکه بخشی از سبک برند باشد، نارنجی با سایت Fanta’s به خوبی کار می کند. این رنگ ضمن حفظ آشنایی، خلاقیت را نشان می دهد.

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

رنگ زرد

شادی، اشتیاق، قدمت (سایه های تیره)

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

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

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

سبز

رشد، ثبات، مضامین مالی، مضامین زیست محیطی

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

آبی

آرامش، ایمنی، گشودگی (سایه روشن)، قابلیت اطمینان (سایه های تیره)

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

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

رنگ بنفش

لوکس، عاشقانه (سایه روشن)، رمز و راز (سایه های تیره)

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

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

سیاه

قدرت، جنون، پیچیدگی

قوی ترین رنگ خنثی، سیاه تقریباً در همه وب سایت ها وجود دارد.

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

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

سفید

تمیزی، فضیلت، سادگی

سفید در فرهنگ های غربی بیشترین ارتباط را با فضیلت، خلوص و برائت دارد.

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

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

خاکستری

بی طرفی، رسمیت

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

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

رنگ بژ

صفات رنگ های اطراف

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

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

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

عاج

راحتی، ظرافت، سادگی

از نظر پاسخ عاطفی، عاج (و کرم) تغییرات جزئی روی رنگ سفید است.

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

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

طرح رنگی

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

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

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

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

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

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

ابزار کمکی انتخاب رنگ

خوشبختانه ابزار های زیادی برای کمک به شما در عمل به نظریه رنگ وجود دارد. این پالت های رنگی از پیش ساخته شده را بررسی کنید تا نیازی به شروع کار از ابتدا نباشد.

• Adobe Color CC: این ابزار قبلاً با نام Kuler شناخته می شد و یکی از معتبر ترین ابزار های کمک رنگ موجود است.
• Paletton: اگر به ابزاری برای سرعت یا سهولت استفاده ساده نیاز دارید، این حداقل ابزاری است که می تواند به شما کمک کند. عالی برای مبتدیان
• Flat UI Color Picker: در حالی که فقط برای طراحی های Flat UI است، این ابزار همچنان یک ابزار مفید و مناسب برای انتخاب رنگ است.

نتیجه

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

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