۱۴ وب‌سایتی که به روش‌های مختلف از روانشناسی رنگ‌ها استفاده می‌کنند

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

مقدمه‌ای سریع بر رنگ‌ها

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

قدرت رنگ‌ها

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

۱) لینک‌های متنی

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

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

۲) ناوبری

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

۳) دکمه‌ها

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

رنگ دکمه ها
Live Resto نیز در دکمه‌های فراخوان عمل خود از مکمل رنگ‌های آبی استفاده کرده است تا آن‌ها را متمایزتر از سایر قسمت‌ها نشان دهد و تاکید ویژه‌ای بر روی آن‌ها داشته باشد.

۴) هدینگ‌ها

رنگ ها در هدینگ
هدینگ آبی رنگ وب‌سایت Billings بر روی مینیمالیستی و تمیز بودن طراحی آن تاکید دارد.

۵) لیست آیتم‌ها

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

تاثیر رنگ‌ها بر روی خوانایی

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

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

تاثیر رنگ‌ها بر روی قابلیت دسترسی

ما نباید از ایجاد قابلیت دسترسی برای کاربران کور‌رنگ خود غافل شویم. زیرا ۸% از مردان و ۰.۵% از زنانی که به وب‌سایت ما سر می‌زنند، رنگ‌ها را متفاوت‌تر از آنچه که ما می‌بینیم مشاهده می‌کنند. یک طراحی خوب باید تمام عیار باشد و از همه جوانب مورد قبول واقع شود. برای حل این مشکل بهتر است که از رنگ‌هایی که دارای روشنایی مشابهی هستند، در کنار یکدیگر و یا به عنوان مکمل هم استفاده نکنید. در غیر این صورت باعث آزار چشمان مخاطبان‌تان خواهید شد.

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

حرکت به سمت تک‌رنگی : تاثیر رنگ‌ها

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

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

طراحی_تک_رنگ2
طراحی وب‌سایت Davroc Interiors باعث ایجاد یک تجربه آرامش بصری در مخاطبانش می‌شود. در این طراحی این وب‌سایت از تصاویر تک‌رنگ زیبایی بهره گرفته شده است. همچنین از رنگ آبی (رنگ عمومی لینک‌ها) در بخش‌های مختلف سایت جهت افزایش تجربه کاربری استفاده شده است.

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

طراحی_تک_رنگ4
عدم استفاده از رنگ‌ها در وب‌سایت The Grid System باعث شده است که آن‌ها در صورت نیاز بتوانند از فضاهای خالی و تایپو‌گرافی به نحو احسن استفاده کنند. این عناصر باعث شده‌اند که سلسه مراتب موضوعات هم‌موضوع در کنار یکدیگر رعایت شود. هرجند که میلیون‌ها رنگ در این دنیا وجود دارد، اما هدف ما انتخاب رنگ‌هایی است که به بهترین شکل ممکن با مخاطبانمان ارتباط برقرار کند.
همانطور که مشاهده کردید، روش‌های مناسبی برای استفاده از رنگ‌ها وجود دارد. برخی از طراحان از رنگ‌های راوان جهت ایجاد پویایی در وب‌سایت استفاده می‌کنند و برخی دیگر فقط در موارد معدودی آن‌ها را وارد طراحی خود می‌کنند. در هر صورت امیدواریم با مثال‌هایی که در این مطلب آورده شده‌ است، بتوانند ترکیب و تعادل مناسبی از رنگ‌ها را برای وب‌سایت خود ایجاد کنید.

سعید مداحی

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