اصول استفاده از رنگ و لعاب در طراحی وبسایت 

نویسنده: دیسان

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

خودتان که بهتر میدانید، گاهی رنگ‌ها با احساسات ما گره می‌خورند و این جوری میشود که دلمان می‌خواهد زمان بیشتری را در یک وبسایت بگذرانیم.

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

چرا رنگ‌های وبسایت مهم هستند؟
چرا رنگ‌های وبسایت مهم هستند؟

چرا رنگ‌های وبسایت مهم هستند؟

آیا تا به حال دقت کرده‌اید که تقریباً هر رستوران یا فست فودی از رنگ قرمز و زرد در لوگوی خود استفاده می‌کند؟

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

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

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

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

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

با وجود همه‌ی این‌ها، فکر نکنید که قرمز پادشاه است، زیرا هیچ قانون واقعی برای این موضوع وجود ندارد. اگر سایت شما عمدتاً قرمز است، دعوت به انجام کاری (call to action) با رنگ قرمز چندان برجسته نخواهد بود و توجه زیادی را به خودش جلب نمی‌کند، بنابراین تا زمانی که ترکیب رنگ مناسبی برای شما پیدا شود، باید با رنگ‌ها بازی کنید.

 

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

اکنون می‌دانید که رنگ‌ها چقدر برای برند و میزان رضایت بازدیدکنندگان وب‌سایت شما مهم هستند، پس بیایید نگاهی به این موضوع بیندازیم که برای تصمیم‌گیری در مورد رنگ‌ها چه نکاتی را باید در نظر بگیرید.

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

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

 

رنگ اصلی را انتخاب کنید

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

 

  • قرمز: رنگ برندهای کوکاکولا و kitkat است که دلالت بر هیجان یا شادی دارد.
  • نارنجی: رنگ برندهای Nickelodeon و Fanta است که خبر از لحظاتی دوستانه و سرگرم‌کننده در پیش رو می‌دهد.
  • زرد: رنگ برندهای نیکون (Nikon) و مک دونالد است که دلالت بر خوش بینی و شادی دارد.
  • سبز: رنگ برندهایWhole Foods  و  Animal Planetاست که دلالت بر طراوت و شادابی طبیعت دارد.
  • آبی: رنگ برندهای Walmart و  American Express است که دلالت بر قابل‌اطمینان بودن دارد.
  • بنفش: رنگ برندهای Hallmark و Cadbury است و به برندی متمایز اشاره دارد که از نظر کیفیت ثابت شده است.
  • قهوه‌ای: رنگ برندهای Hallmark  و  Cadbury است که به عنوان محصولی معتبر شناخته میشود و توسط هر کسی قابل استفاده است.
  • مشکی: رنگ برندهای Chanel  و  Adidas است که دلالت بر تجمل یا ظرافت دارد.
  • سفید: رنگ برندهای اپل و نایک است که به محصولات شیک و مخاطب پسند اشاره دارد.

 

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

رنگ‌های فرعی خود را انتخاب کنید
رنگ‌های فرعی خود را انتخاب کنید

رنگ‌های فرعی خود را انتخاب کنید

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

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

بنابراین اگر رنگ اصلی وب‌سایت شما سبز باشد، ایده خوبی است که برای دعوت به انجام کاری (call to action) از رنگ قرمز استفاده کنید، یا از قرمز برای برجسته کردن ویژگی‌های مهمی که می‌خواهید چشم هر خواننده‌ای را به خود جلب کند، استفاده کنید.

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

برندEargo
برندEargo

برند Eargo نمونه‌ی خوبی برای نشان دادن به شماست که چطور می‌توان از رنگ‌های فرعی در کنار رنگ اصلی استفاده کرد. همان طور که در تصویر بالا می‌بینید، رنگ اصلی آن نارنجی است، بنابراین از آبی تیره برای برجسته کردن این بخش مهم از وب سایت خود استفاده کرده است. اگر رنگ‌هایی که مکمل یکدیگر هستند را در نظر بگیرید، متوجه می‌شوید که این آبی تیره و نارنجی روشن چقدر در کنار یکدیگر تضاد دارند. رنگ نارنجی همچنین باعث می‌شود عناصر مهمی مانند آیکن «افزودن به سبد خرید» و «لوگو» بهتر دیده شوند.

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

رنگ پس زمینه را انتخاب کنید
رنگ پس زمینه را انتخاب کنید

رنگ پس زمینه را انتخاب کنید

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

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

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

 

رنگ فونت را انتخاب کنید

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

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

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

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

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

منابع مفید برای کمک به شما در پیدا کردن و انتخاب رنگ‌ها
منابع مفید برای کمک به شما در پیدا کردن و انتخاب رنگ‌ها

منابع مفید برای کمک به شما در پیدا کردن و انتخاب رنگ‌ها

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

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

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

 Color Safe
Color Safe

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

انتخاب رنگ
انتخاب رنگ

در مرحله‌ی آخر، یعنی زمانی که تمام کارهای انتخاب رنگ را انجام داده‌اید و آن وب‌سایت جذاب و مورد پسند خودتان را آماده کرده‌اید، نوبت می‌رسد به اینکه بررسی کنید آیا طرح رنگی وب‌سایت واقعاً خوب از کار درآمده یا نه؟

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

 

جمع‌بندی نحوه انتخاب رنگ برای وب‌سایت

مراحلی وجود دارد که در هنگام انتخاب رنگ برای وب‌سایت خود باید دنبال کنید:

 

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

 

در نهایت، برای انتخاب بهترین رنگ و ترکیب رنگی مناسب وب‌سایت خود نگران نباشید، چرا که وب‌سایت‌هایی وجود دارند برای مشاوره و راهنمایی شما در این زمینه که انتخاب را راحت کرده‌اند. چند مورد از این وب‌سایت‌ها و ابزارهای کمکی عبارت‌اند از؛

  • سایت Coolors از آن دست ابزارهای مورد نیازتان است که به شما کمک می‌کند یک طرح رنگی از پیش‌ساخته شده را دریافت و آن را در وب سایت خود پیاده‌سازی کنید.
  • وب‌سایت Color Safe است که به شما کمک می‌کند رنگ‌ها را بر اساس نوعی که مورد نیازتان است تولید کنید و چرخی در میان رنگ‌های موجود بزنید تا شاید یکی دو مورد نظرتان را جلب کند.
  • وب‌سایت checkmycolours.com برای تجزیه و تحلیل وبسایت شما بعد از اتمام فرایند طراحی رنگی آن و ارائه ی بازخورد فنی.

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

 

 

خانهنمونه کارهاتماس