colortheory

کاربرد رنگ و روانشناسی رنگ در طراحی وب -بخش اول

رنگ و روانشناسی رنگ در دنیای وب

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

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

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

در طراحی یک سایت شما باید رنگ هایتان را بین چندین میلیون رنگ انتخاب نمایید.

در ضمن یادتان باشد که هیچ الگوی دقیق و متمرکزی را نمیتوان به عنوان یک الگوی قطعی برای طراحی و رنگبندی سایت ها متصور شد. طراح باید با هوش و سلیقه ی خود و دانایی و تسلطی که  نسبت به رنگ و روانشناسی رنگ دارد سایت را طراحی کند.

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

هر رنگ دارای یک پیام مخصوص به خود به چشمان بازدید کنندگان بوده و به راحتی میتواند پیام محتوای سایت ما را بیشتر به مشتری القا کند.

همچنین یادمان باشد که در فرهنگ های مختلف هر رنگی می تواند دارای اثر گذاری و پیام مختلفی باشد.

خوب حالا قبل از هر توضیح اضافی بیایید با برخی از مفاهیم پایه در مورد رنگ ها آشنا شویم.

 رنگ های اصلی (Primary Colors) در طراحی و نقاشی یا مدل CMYK:

رنگ های اصلی در اصل سه رنگ فیروزه ای  (Cyan) ، ارغوانی (Magenta) و زرد (Yellow) هستند که ترکیب این سه رنگ به همراه نور ، میزان تشدید یکی از آنها و میزان سایه باعث ایجاد رنگ های دیگر می شود.

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

primary colors

رنگ های اصلی از دیدگاه نور (رنگ های اصلی سنتی) یا مدل RGB:

از دیدگاه نور که یک دیدگاه سنتی در طبقه بندی رنگ ها به حساب می آید ، رنگ های اصلی شامل سه رنگ قرمز (Red) ، سبز (Green) و آبی هستند که به آن مدل RGB می گویند.

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

RGB-color-

رنگ های گرم (Warm Colours) و رنگ های گرم (Colod Colours) :

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

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

warm-cool-colours

درجه حرارت رنگ (Color Tempratute) :

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

color temprature

سیری رنگ (Color Tint) و سایه رنگ (Color Shade)  : 

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

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

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

tint and shade example

تعریف اشباع رنگ (Saturation) ، رنگ مایه (Hue) و روشنایی  (Lightness) :

اشباع رنگ (Saturation) در اصل میزان شدت یک رنگ است. هرچقدر اشباع بیشتر باشد ، رنگ تیره تر شده و اثرگذاری و قدرت رنگ بیشتر می شود.اما کاسته شدن از اشباع باعث روشن تر شدن و در نتیجه اثرگذاری ضعیف تر رنگ خواهد بود.

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

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

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

روشنایی (Lightness) نیز مشخص می کند که درجه نور و روشنی رنگ در چه حدی قرار دارد.

hue saturation lightness

دایره رنگ (Color Wheel) :

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

color weel 1

برای ایجاد دایره رنگ ، ابتدا سه رنگ اصلی یعنی آبی ، زرد و قرمز به شکل ذیل قرار می گیرند.

color wheel create 1

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

color wheel secondary colors

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

هر کدام از رنگ های دایره رنگی در اصل خانواده ای از رنگ هاست.

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

الگوی تک رنگ (Monochrome Color Shceme) :

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

monochrome sample 1

 

monochrome site design sample

الگوی رنگ های مکمل (Complementary Color Shceme)  :

رنگ های مکمل در اصل رنگ های مقابل هم در دایره رنگی هستند، مثل قرمز و سبز ، یا نارنجی و آبی . 

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

complementary colors

 

complementary colors site sample

الگوی رنگ های مشابه (Analogous  Color Shceme) :

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

Analogous Colors Analogous Colors site design sample 2

Analogous Colors site design sample 3

الگوی رنگ های سه گانه (Triadic Color Shceme) :

در این الگو ، پس از قرار دادن یک مثلث متساوی الاضلاع در دایره رنگی ، سه رنگ که در سه راس این مثلث قرار می گیرند ، تشکیل الگوی سه گانه یا Triadic را می دهند.

این الگوی دارای تنوع رنگی و پرتحرک در کنار حفظ تعادل بین رنگ ها میباشد.

نکته ی مهم در زمان استفاده از این الگو این است که باید توجه کنید در این الگو کدام رنگ را رنگ اصلی و دو رنگ دیگر را رنگ های فرعی قرار می دهید.

triadic colors

Triadic Colors site sample

الگوی رنگ های مکمل مستطیلی  (Rectanglular Tetratic Color Shceme) :

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

نکته ی مهم در زمان استفاده از این الگو این است که باید توجه کنید در این الگو کدام رنگ را رنگ اصلی و سه رنگ دیگر را رنگ های فرعی قرار می دهید.

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

 

tetradic colour

الگوی رنگ های مربع (Square Color Shceme) :

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

نکته ی مهم در زمان استفاده از این الگو این است که باید توجه کنید در این الگو کدام رنگ را رنگ اصلی و سه رنگ دیگر را رنگ های فرعی قرار می دهید.

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

square color scheme

 

 

روانشناسی رنگ ها (Color Psychology) :

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

روانشناسی رنگ قرمز :

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

این رنگ در سایت های مرتبط با ورزش ، غذا ، مد و فشن ، تبلیغات ، سرویس های اضطراری و مراقبت های بهداشتی استفاده بیشتری دارد.

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

روانشناسی رنگ نارنجی :

این رنگ نشانی از مضامینی مثل سرزندگی ، چالاکی ، شادی ، لذت جویی ، تحمل ، بلند همتی ، ارتباط و جلب توجه و جنب و جوش است.

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

از نارنجی برای جلت توجه کردن مشتری برای بخش هایی مثل عضویت خرید و غیره استفاده می شود.

این رنگ در سایت هایی که در زمینه غذا ، سرگرمی ، تکنولوژی ، خودرو ، تجارت الکترونیک و غیره فعالیت می کنند بکار میرود.

روانشناسی رنگ زرد :

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

 این رنگ نشان از ارزانی است. همچنین در تجارت نشان از درخواست روشنفکرانه نیز می باشد. از این رنگ برای تاکید بر روی عنوانی خاص میتوانیم استفاده کنیم.

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

روانشناسی رنگ آبی :

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

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

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

روانشناسی رنگ سبز :

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

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

روانشناسی رنگ مشکی :

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

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

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

روانشناسی رنگ سفید :

این رنگ نشان از مضامینی مانند پاکی  و معصومیت ، خلوص ، تمیزی ، صمیمیت ، شادی ، امنیت ، انرژی بخشی و آرامش است.

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

روانشناسی رنگ بنفش :

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

روانشناسی رنگ صورتی :

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

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

روانشناسی رنگ خاکستری :

این رنگ نشان از مضامینی مانند اعتبار و نفوذ ، جدیت ، رسمی بودن و اصالت ، ثبات و آرامش ، خنثی بودن ، میانه رویی ، بدبینی و مرگ دارد. همچنین در تجارت به معنای سنت گرایی است.

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

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

علی امیدوار

مهندس کامپیوتر هستم و عاشق یادگیری و آموزش. مدیر سایت 20آموز .

نوشته های دیگر نویسنده

0 پاسخ

دیدگاه خود را ثبت کنید

Want to join the discussion?
Feel free to contribute!

پاسخ دهید