اصول استفاده از رنگها در طراحي سايت با تحليلي بر كتب روانشناسي رنگهاي پنتون، رنگها براي زندگي بهتر اثر مري لامبرت، هارموني رنگها اثر تينا ساتن و كتاب مدريريت رنگ براي طراحان ديجيتال از انتشارات For.Dummies نگاشته شده است.

اصول استفاده از رنگها در طراحي سايت   با طراحي ديجيتال و يا حتي طراحي كلاسيك تفاوت چنداني ندارد. اصولا براي انتخاب رنگ در طراحي سه كتاب مرجع Color the Dreams و The Psychology و Word and Image هر سه نوشته Carl Jung روانشناس سوئدي مورد استناد قرار ميگيرد. يونگ يكي از روانشناساني بود كه براي اولين بار از رنگ براي پي بردن به عواطف و احساسات و رنج هاي آدمي استفاده كرد.

نكته اي كه استفاده از رنگها در طراحي سايت را با طراحي روي كاغذ متمايز ميكند. تفاوت رنگ و نور است. در طراحي ديجيتال و طراحي وب ما از سه نور قرمز، سبز، زرد براي ايجاد تصاوير استفاده مي كنيم. هركدام از اين سه نورها 255 شيب رنگي در اختيار ما قرار ميدهد كه عملا بيش از شانزده ميليون رنگ مختلف براي طراحي در اختيار ما قرار مي گيرد.

برخي از شيب رنگ ها براي چشم انسان قابل تمايز نيست.

اصول استفاده از رنگها در طراحي سايت

براي طراحي سايت ميتوان از رنگهاي مكمل، رنگهاي مشابه و... استفاده كرد. همانطور كه گفتيم رنگ با نور متفاوت است. هنگاميكه صحبت از رنگ هاي مكمل، مشابه و مانند آن ميشود منظور ما ارتباط رنگ ها در دايره رنگ است. دايره رنگ دايره اي است كه ابتدا با سه رنگ اصلي آبي، زرد، قرمز در سه قسمت مساوي پر ميشود. سپس با تركيب اين سه رنگ حاشيه بين رنگ ها را پر مي كنند. تركيب دو رنگ كنارهم در دايره رنگ و ايجاد رنگ جديد ميتواند تا بينهايت ادامه يابد.

 

براي انتخاب رنگ مناسب در قسمت هاي مختلف سايت، ابزارهاي انتخاب رنگ آنلاين را نيز ميتوان استفاده كرد. از ميان ابزار هاي آنلاين موجود ابزار Color Wheel از مجموعه ابزارهاي شركت ادوبي خالق فتوشاپ يكي از بهترين ها است. اين ابزار در آدرس https://color.adobe.com/create/color-wheel بصورت يك ابزار آنلاين رايگان در دسترس است. با كمك اين ابزار ميتوان براي قسمت هاي مختلف سايت انتخاب رنگ را انجام داد.

 

اصولا با هر روشي كه بخواهيد رنگ هاي سايت را انتخاب كنيد. بايد ابتدا يك رنگ يا تم اصلي براي سايت خود در نظر بگيريد. رنگ هاي مانند آبي براي سايت هاي آموزشي و دولتي، رنگ هاي سبز براي سايت هاي مرتبط با طبيعت و كودكان، رنگ بنفش براي سايت هاي خدماتي و رنگ صورتي براي سايت هاي فروش محصولات آرايشي زنانه بصورت پيش فرض توسط اغلب افراد رعايت ميشوند.

هنگاميكه مشتري به شما مراجعه ميكند و از قبل رنگ سازماني خود را انتخاب كرده است. شما ديگر نميتوانيد براساس الگوي فوق رنگ ها را انتخاب كنيد. اگر رنگ سازماني شركتي با رنگ هاي از پيش تعيين شده تفاوت داشت شما بايد با كمك رنگ هاي مشابه و مكمل تركيب رنگ سايت را به سمتي ببريد كه حس خوبي به مشتري القاء كند.

مثال: شركتي در حوزه انرژي با فيلد كاري استخراج گاز طبيعي و فراوري و فروش آن به شما مراجعه ميكند و رنگ سازماني خود را زرد اعلام ميكند. اين شركت از قبل كارت ويزيت و ساير ملزومات اداري را براساس اين رنگ سازماني خريداري كرده است و امكان تغيير رنگ سازماني خود را ندارد. در اين حالت شما ميتوانيد با استفاده از رنگ هايي مانند آبي و مشكي بعنوان رنگ مكمل و از رنگ نارنجي بعنوان رنگ مشابه زرد در طراحي استفاده كنيد. تركيب اين چهار رنگ ميتواند سايتي زيبا ايجاد كند.

 

 

 

نكته : براي طراحي بخش اصلي محتوا كه غالب آن متن است از پس زمينه سفيد و رنگ مشكي براي فونت استفاده كنيد. برخي از سايت هاي ايراني از رنگ طوسي براي فونت بهره مي گيرند. اينكار از نظر گرافيكي غلط است. رنگ طوسي بعنوان رنگ نوشته از نظر روانشناسي به معني بي اهميت بودن و مرده بودن موضوع است. قطعا ما نميخواهيم چنين حسي را به مشتريانمان القاء كنيم.

نكته : رنگ طوسي بعنوان رنگ خنثي در گرافيك وب بسيار كاربرد دارد. ولي استفاد از آن بعنوان رنگ نوشته غالب سايت ميتواند خواننده را خسته كند. 

براي اطمينان از صحت اين حرف كافيست در گوگل عبارت graphic tutorial را جستجو كرده و ده سايت اول را در مرورگر خود باز كنيد. تمام سايت هاي مطرح از رنگ فونت سياه خالص در پس زمينه سفيد خالص بهره ميبرند.

در سايت  رايان شما رنگ سازماني سبز را در هدر مشاهده مي كنيد. لوگو سايت با رنگي كمي تيره تر همراه با رنگ سفيد بعنوان رنگ خنثي طراحي شده است. رنگ فونت نوشته ها در متن مقالات مشكي و رنگ تيتر ها با رنگ سازماني همرنگ انتخاب شده اند. لينك ها و رنگ هاور آنها از رنگ هاي مشابه رنگ سازماني ميباشد. در پايين مقالات از رنگ مكمل براي دكمه بخش نظرات استفاده شده است. رنگ مكمل توجه كاربر را به اين بخش جلب كند.

بيشتر بخوانيد: قيمت طراحي سايت   طراحي پورتال سازماني

  

اهميت و نقش رنگ در طراحي سايت چيست؟

زماني كه نوبت به طراحي سايت شما مي‌رسد، انتخاب پالت رنگي مناسب يكي از مهمترين تصميمات طراحي وب است كه بايد به آن توجه كرد. رنگ، شناخت برند را ۸۰٪ افزايش مي‌دهد. به اين معني كه انتخاب پالت رنگي در طراحي وب نه تنها براي مخاطبان خود جذاب است بلكه باعث به ياد ماندن آن در ذهن مخاطب مي‌شود.

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

 

براي استفاده از رنگ ها در سايت بايد از چه اصولي پيروي كنيم؟

سفيد:

در نرم افزار فتوشاپ رنگ سفيد خالص و سياه خالص رنگ تشخيص داده نمي شوند. بلكه نور و سايه شناخته ميشوند. اگر شما سعي كنيد با لايه هاي تنظيمي اين دو رنگ را تغيير دهيد. نتيجه اي حاصل نخواهيد كرد. در طبيعت سفيد و سياه رنگ محسوب ميشوند.

كاربرد رنگ سفيد در طراحي سايت: رنگ سفيد بعنوان فونت روي پس زمنيه هاي تيره خوانايي بسيار بالايي دارد. امروزه با توجه به تمايل كاربران به استفاده از پس زمينه تيره (نرم افزار هايي مانند فتوشاپ، 3D max و... در نسخه هاي 2017 خود از رنگ زمينه طوسي و يا مشكي بهره گرفته اند) رنگ فونت سفيد براي فونت بسيار پر كاربرد شده است.

فراموش نكنيد كه رنگ فونت سفيد روي پس زمينه سياه مطلق چشم را خسته ميكند.

گرافيك سفيد رنگ چه تاثيري در مخاطب ميگذارد: آرامش و امنيت و سلامت و ملايمت

نكته : در طراحي سايت رنگ سفيد خالص اغلب براي پس زمينه محتوا متني سايت استفاده ميشود.

سياه :

بهترين رنگ براي نوشته هاي غالب سايت در مقالات و متن هاي طولاني است. بهترين نتيجه رنگ سياه در پس زمنيه سفيد خالص مي باشد.

نكته : رنگ سياه و سفيد در طراحي هاي گورخري و لانه زنبوري و زيگزاگي افراد استيگمات را آزار ميدهند.

قرمز:

رنگ زمينه دكمه هاي CTA ميتواند شيب رنگي از قرمز باشد تا كاربران را براي كليك كردن روي دكمه ترغيب كند.

رنگ قرمز رنگ مكمل مناسبي براي نوار هاي حاشيه اي نيست. يعني اگر ديزاين شما آبي يا سبز است از رنگ قرمز براي خط دور يا همان Border استفاده نكنيد. اينكار بيننده را عصبي مي كند.

رنگ قرمز ميتواند بيننده را به ياد مواردي زير بياندازد: بستني يخي، عشق، غذا، لذت، حرارت

شيب رنگ قرمز و ميزان تركيب آن با رنگهاي مشابه مانند نارنجي ميتواند حس هاي مختلفي در بيننده ايجاد كند.

مثال: شركت شانل از رنگ قرمز جگري براي تشويق بيننده به خريد رژلب استفاده مي كند. اين رنگ در اين تبليغ حس قدرت انتخاب را در مخاطب تداعي خواهد كرد.

رنگ جگري تيره در جاي ديگر ممكن است حس كاملا متفاوتي ايجاد كند. مثال در يك سايت عرضه محصولات گوشتي ممكن است باعث شود حس كهنگي را تداعي نمايد.

آبي:

آبي و سرمه اي رنگ پس زمنيه هدر سايت هاي دولتي و آموزشي ميباشد. ميتوانيد براي يك سايت رسمي از اين رنگ بعنوان رنگ اصلي سايت استفاده كنيد. رنگ آبي تيره با رنگ سفيد تركيب زيبايي را ايجاد مي كند.

رنگ آبي ميتواند حس هاي مختلفي را در بيننده تداعي كند مانند : حس سرما، وفاداري، ضمانت

سبز:

رنگ سبز در بنگاه هاي تجاري به معناي درستي و صداقت در انجام كار است.اين رنگ بيشتر در سايت هاي مربوط به طبيعت و كودكان به كار گرفته شده است. با اين حال رنگ سبز رنگ سازماني شركت ها و سازمان هاي مختلفي با حوزه هاي فعاليت متفاوت در سرتاسر دنيا ميباشد.

رنگ سبز در كنار رنگ هايي مانند سفيد، مشكي و آبي تركيب زيبايي ايجاد مي كند. براي رنگ مكمك سبز ميتوان از قرمز و يا نارنجي استفاده كرد.

زرد :

رنگ زرد كمترين تباين را در پس زمينه سفيد دارد. اگر رنگ پس زمينه سايت شما سفيد است در داخل مقالات خود از رنگ زرد استفاده نكنيد. رنگ زرد بيشترين تاثير را روي پس زمينه سياه مطلق از خود ايجاد ميكند. رنگ زرد كه روي سياه مطلق قرار داشته باشد. بشدت توجه را جلب مي كند.
 بيشتر بدانيد: طراحي سايت پزشكي   ساخت وب سايت

 

از كدام رنگ ها ميتوان در وب استفاده كرد

در بسياري از سايت هاي فارسي به 216 رنگي كه در وب ميتوان استفاده كرد اشاره شده است. اين سايت ها از منابعي مانند https://websafecolors.info/color-chart و http://www.color-hex.com/216-web-safe-colors/ اين اطلاعات را انتشار ميدهند. اين اطلاعات براي دوره زمانه ما غلط است. امروزه مانيتورهاي بسيار ارزان قيمت هم ميتوانند دامنه بسيار وسيعتري از 216 رنگ را پوشش دهند. بنابراين هيچ نيازي به محدود كردن خود نداريد.

سايت https://websafecolors.info/learn توضيح داده است كه رنگ هاي معرفي شده بعنوان 216 رنگ استاندارد وب امروز ديگر فاقد اعتبار هستند.

اصول تركيب رنگ براي طراحي سايت

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

۱- تك‌رنگ يا رنگ پايه

يك طرح رنگي تك‌رنگ فقط بر اساس يك رنگ پايه بنا شده است و سايه‌ها و رنگ‌هاي مختلفي با همان رنگ را شامل مي‌شود.

۲-رنگ‌هاي مكمل و آنالوگ

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

۳- رنگ‌هاي شاد و پويا

اين رنگ‌ها مي‌تواند از سايه‌هاي مختلفي از طيف رنگ موردنظر استفاده كند. اين رنگ‌ها، رنگ‌هايي هستند كه انرژي را به كاربر منتقل مي‌كنند و براي تبليغات و جلب توجه بهترين گزينه‌اند.

۴- رنگ‌هاي تاريك و روشن

زماني‌كه شما سايتي براي محتواهاي آموزشي و امنيتي طراحي مي‌كنيد بهتر است از رنگ‌‌هاي تيره‌تر در قسمت‌هاي جزئي در سايت استفاده كنيد. با توجه به كسب‌وكارتان رنگ مناسب سايت خود را انتخاب كنيد تا در نگاه كاربرانتان متفاوت به‌نظر بياييد.

رنگ و نحوه ايجاد يك پالت رنگي براي وب‌سايت بسيار ساده و گسترده است. در حقيقت، وقتي صحبت از طراحي رنگ مي‌شود مهم‌ترين كار اين است كه تعادل مناسب را پيدا كنيد كه براي سايت مناسب باشد. هرچه دانش شما در اين زمينه بيشتر باشد طراحي و رنگ‌بندي بهتري در سايت‌تان خواهيد داشت.

بيشتر بخوانيد: شركت طراحي وب سايت    طراحي سايت فروشگاهي