روانشناسی رنگ در طراحی وب سایت روانشناسی رنگ در طراحی وب سایت

روانشناسی رنگ در طراحی وب سایت

روانشناسی رنگ بطور گسترده در همه جنبه های طراحی مورد استفاده قرار می گیرد. از رنگ های به کار رفته در فروش کالاهای روزانه گرفته تا طراحی برندها و طراحی وب سایت. رنگ، عنصر مهمی است که می تواند پیام خاصی را به کاربران منتقل کند.
هنگامی که ما یک رنگ را مشاهده می کنیم، چشمان ما پیامی را به منطقه ای از مغز به نام هیپوتالاموس می فرستند و به نوبه خود، باعث می شود تا سیگنالهای بیشتری را به غده هیپوفیز و سپس به غدد تیروئید ارسال کند. این عمل موجب آزادی هورمون هایی می شود که باعث نوسان در خلق و خوی، احساسات و در نتیجه رفتار ما می شوند. بنابراین انتخاب رنگی که احساسات را بر می انگیزاند می تواند منجر به ایجاد احساسات منفی یا مثبت شود.
فقط 90 ثانیه طول می کشد تا یک بازدید کننده وب سایت تصمیم بگیرد که در سایت بماند  یا خیر. علاوه بر این ، "62-90٪ از این تعامل فقط با رنگ طراحی آن وب سایت تعیین می شود." زیرا رنگ نقش مهمی در ایجاد اولین تصور قوی برای کاربران دارد.

روانشناسی رنگ چگونه عمل می کند ؟

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

طراحی سایت

تعیین یک طرح رنگی

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

ترکیب رنگ سه گانه

شماره 2: ترکیب (تقسیم کاملی)
روش دوم کمی دشوارتر است و ممکن است برای درست کردن آن مجبور به آزمایش باشید، اما اگر به خوبی انجام شود می تواند بسیار مؤثر باشد. این مفهوم از چهار رنگ استفاده می کند؛ دو جفت متضاد (نزدیک روی چرخ رنگ) و دو جفت مکمل (در سراسر چرخ رنگ).

ترکیب رنگ

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

ترکیب رنگ آنالوگ

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

طراحی سایت

  1. رنگ زمینه: پس زمینه سیاه نشانگر برتری، تشریفات و شرکت است. بدیهی است، هنگام در نظر گرفتن سایتی که مربیگری را ارائه می دهد ، تعالی چیزی است که شما می خواهید آنرا انتقال دهید. تشریفات بیانگر این است که این امر با یادگیری مرتبط است در حالی که "شرکتی" نشان می دهد که کاربران ممکن است به عنوان یک سرگرمی در یادگیری کد نویسی حضور نداشته باشند، بلکه به عنوان یک حرفه به پیش می روند.
  2. رنگ دکمه: این سایت از دکمه های قرمز برای دکمه های CTA استفاده می کند که به وضوح در برابر پس زمینه سیاه به منظور تشویق ثبت نام ها استفاده می شود. با استفاده از طرح کلی، از رنگ سیاه با حاشیه سفید برای دکمه های کم اهمیت استفاده شده است.
  3. رنگ متن: برای متن، رنگ متضاد سفید انتخاب شده، در حالی که هنوز هم با طرح رنگ مطابقت دارد. نمادهای مشخص شده به رنگ سفید (و دکمه های شبح سفید) درست روی صفحه قرار می گیرند تا کاربران را ترغیب نمایند در صورت لزوم برای اطلاعات بیشتر به پایین حرکت کنند.

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

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

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

  • Adobe Color CC- ارائه دهنده قابل اعتماد برای همه کاربران
  • پالتون- انتخاب رنگ ساده برای مبتدیان.
  • Flat UI Color Picker- برای ایجاد طرح های تخت رنگارنگ
  • Sphere Color Mudcube- مجموعه ای از موضوعات را ارائه می دهد.
  • Color- به شما امکان می دهد با حرکت دادن موشواره روی صفحه ، رنگی را انتخاب کنید ، اشباع را تنظیم کرده و سپس کد HEX را دریافت کنید. 

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

تاثیر انتخاب رنگ مناسب در انتقال مفهوم

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

ترکیب رنگ مناسب در تبلیغات

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

صفحات مشابه

ارسال نظر