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

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

اما با این حال استفاده مناسب از رنگ‌ها فرصت‌های زیادی را برای اثربخشی بهتر فراهم می‌کند.

جلب توجه کاربران به سمت دلخواه شما

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

وب سایت های سیاه سفید

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

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

وب سایت takeitapp

ایجاد شخصیت

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

وب سایت getbeagle

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

وب سایت aninterestingday

ایجاد یک توضیح بزرگ

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

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

وب سایت gagasymphonyorchestra

ایجاد یک‌پارچگی

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

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

وب سایت‌های یکپارچه

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

وب سایت designmodo

رنگ‌های تصاویر

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

رنگ در عکس ها

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

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

رنگ بندی

استفاده نکردن از رنگ!

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

رنگ در وب سایت

Visual Soldiers و Tomasz Wysocki’s portfolio هر دو به خوبی از این طرح‌بندی سیاه و سفید بهره جسته‌اند. هر دو وب‌سایت از ظرافت خاصی برخوردارند و به واسطه استفاده نکردن از رنگ، توجه مخاطبانشان را به خود جلب می‌کنند. ممکن است در این وب‌سایت‌ها شما از روی عادت به دنبال یک لینک یا راهنمایی با رنگی متفاوت باشید اما آن را نخواهید یافت. اما مشکلی نیست. زیرا بی‌رنگی بخشی از برند‌های این وب‌سایت‌ها است. هر دو این وب‌سایت‌ها فقط با استفاده از رنگ‌های سیاه و سفید، شیک و عالی به نظر می‌رسند.

رنگ در وب سایت

نتیجه‌گیری

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

سعید مداحی

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