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

خانه / آموزشی / مبانی طراحی وب سایت / رنگ ها در طراحی وب سایت

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

انتخاب یک رنگ درست برای وب سایت :

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

download (23)در این مقاله مایل هستیم که مهم ترین جنبه های رنگ ها، مهم ترین اصول ترکیب آنها و معنی آن ها در طراحی وب سایت را -به اندازه معنی نمادین آن- مطرح کنیم. همچنین شما می توانید مثال های خوبی از وب سایت های خوبی که بر طبق رنگ های موجود طراحی شده اند را ببینید و همزمان با یکسری نکات لازم  از طراحان حرفه ای وب سایت ها که رنگ ها را به طور مؤثر برای ایجاد سایت استفاده کرده اند آشنا شوید.

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

مردمی که خیلی با اصول طراحی وب سایت آشنایی ندارند، رنگ های وب سایتشان را بر اساس سلیقه شخصی خودشان انتخاب می کنند و در آخر با رنگ هایی که فقط در ترکیب به نظرجالب هستند به نتیجه می رسند.این خیلی خوب است که شما با سلیقه باشید و حس کنید که باید چه ترکیب رنگی را باید برای وب سایتتان انتخاب کنید.اما به طور قطع هیچ کس نمی تواند این کار را به خوبی انجام دهد.بنابراین برای همه آنهایی که مطمئن نیستند چه ترکیب رنگ هایی در وب سایت شان خوب است به آن پیشنهاد می کنم که در مورد پایه و اساس تئوری رنگ ها یادبگیرند-که فهم آن خیلی واضح و ساده است.
کاربردی ترین موضوعی که می شود با آن شرع کرد چرخ رنگ ها است .
کمی از تاریخچه: چرخ رنگ توسط Isaak Newton   در سال ۱۶۶۶ کشف شد.ن یوتن ستون رنگ ها را با عبور دادن نور از منشور دریافت کرد و به یک دایره ی بخش بخش شده انتقال داد. طور یکه سایز هر بخش براساس محاسباتش  از طول موج ها و عرض مربوط به آن رنگ متغییر بود.

download (24)چرخ رنگ یک خصوصیت دوست داشتنی و لازم برای خیلی از طراحان در سراسر دنیاست.این وسیله خیلی خوب یک اثبات عالی برای ساده بودن مفهوم تئوری رنگ ها است .چرخ رنگ به شما این امکان را می دهدتا رنگ هایی را که با هم هارمونی دارند را انتخاب کنید.
این چرخ شامل ۶ رنگ اصلی است:قرمز ،نارنجی،زرد،سبز،آبی و بنفش.علاوه بر رنگ های اصلی رنگ های فرعی هم داریم-که ترکیب رنگ های اصلی است.بنابراین برای پیدا کردن یک طرح رنگ هماهنگ ، شما باید هر دو رنگی را که   در چرخ رنگ مخالف هم هستند،هر سه رنگی که فاصله های مساوی از هم دارند و یک مثلث را در طول چرخ رنگ تشکیل می دهند،یا هر چهار رنگی که یک مستطیل(دو جفت از رنگ های روبروی هم)را تشکیل می دهند انتخاب کنید.

رنگ های اولیه:
سه رنگ اصلی و اولیه وجود دارند:قرمز(#ff0000 in HTML or #f00 in CSS)، زرد((#ffff00 in HTML or #ff0 in CSS و آبی
(#۰۰۰۰ff in HTML or #00f in CSS).ما نمی توانیم این رنگ ها را از ترکیب رنگ های دیگر بدست آوریم.هر رنگ دیگری به جز این رنگ ها می تواند از ترکیب این سه رنگ به وجود بیاید.اگر شما دو تا از رنگ های اصلی را با هم ترکیب کنید،  رنگ هایی به غیر از دسته رنگ های اصلی (رنگ های نوع دوم)بدست می آورید.

رنگ های دسته دوم:
سه رنگ نوع دوم داریم  : نارنجی(#ff9900 in HTML or #f90 in CSS) ،سبز(#۰۰ff00 in HTML or #0f0 in CSS) و بنفش(#ff00ff in HTML or #f0f in CSS)،شما می توانید این رنگ ها را با ترکیب قرمز  و زرد، زرد و آبی، قرمز و آبی بدست بیاوریم.

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

رنگ در فرهنگ های مختلف:نماد سازی

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

قرمز:

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

آبی:

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

زرد:

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

نارنجی:

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

قهوه ای:

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

 سبز:
چین:
جن گیری،کلاه سبز نماد این است که زنی به شوهرش خیانت میکند.
ژاپن: زندگی
اسلام: امید- تصور می شده که حاله ی پیامبران سبز بوده،تقوا-فقط اونهایی که تقوا کامل دارند می توانند سبز بپوشند.
ایرلند: سمبل کشور،کاتولیک
اروپایی /آمریکایی ها:بهار ،تولد جدید،رفتن ،روز پاتریک مقدس،کریسمس (با قرمز)
هند: اسلام
فنگ شویی: یین،چوب،افزایش انرژی،بازیابی انرژی،پرورش،تعادل،نرمال سازی،هماهنگی،شفا،سلامتی،صلح،آرامش

بنفش:

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

سفید:

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

سیاه:

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

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

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

download (25)آبی:

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

download (26)زرد:

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

download (27)

نارنجی:

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

یک نمونه طرح وب سایت  نارنجی جذاب و دوستانه:download (28)

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

download (30)سبز:
سبز رنگ توازن،طبیعت،شفا،زندگی،غذا و سلامتی است.همچنین اغلب مربوط به پول است.
یک طرح سبز متعادل و با استایل برای وب سایت :download (31)قهوه ای:

قهوه ای رنگ آرامش و اعتماد بنفس است .به معنی خاکی بودن،طبیعت،دوام،قبیله،آسایش،اعتمادو… است همچنین می تواند مربوط به پیچیدگی،جسم جامد و رسم و رسوم  هم باشد.
یک نمونه طرح وب سایت عالی با رنگ قهوه ای:download (33)

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

یک نمونه طرح وب سایت کار خلاقانه از رنگ خاکستری:

download (34)

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

یک طرح وب سایت صورتی شگفت انگیز:

download (35)مشکی:
رنگ سیاه با استایل وزیبا است که مربوط به قدرت،پیچیدگی،رسمیت،سلامت،و… است.سیاه یک رنگ عالی و تکنیکی است و کمک می کندتا کمی پیچیدگی رمز و راز به طرحتان اضافه کنید.اما اگر شما نمی خواهید وب سایت تان احساسات استرس زا را برانگیزد،از رنگ سیاه روی یک سطح بزرگ(به صورت وسیع)استفاده نکنید.از طرف دیگر ،اگر یک زمینه ی مشکی استفاده می کنید،این رنگ می تواند افق و عمق دید را گسترش دهد.
مشکی برای وب سایت های هنری و عکاسی خیلی عالی است،برای اینکه کمک کند رنگ های دیگر پر انرژی تر به نظر برسند.
یک طرح وب سایت تجاری که با مشکی رنگ شده:

download (36)سفید:
رنگ سفید مربوط به پاکی ،سادگی،تازگی،خوبی،بی گناهی،تمیزی و… می باشد.این رنگ برای به کار بردن در زمینه طرح ها عالی است.زیرا رنگ های دیگر را نمایان می کند.
یک طرح وب  سایت مرتب و تمیز:

 

download (37)نتیجه گیری:

در کل ،چند تذکر هستند که برای انتخاب طرح رنگ خوب برای وب سایت تان به شما کمک می کنند.این نکات کوچک به طور گسترده توسط طراحان وب حرفه ای استفاده می شود.
۱٫    اگر دوست دارید متن صفحه شما به راحتی خوانده شود،از رنگ های متضاد در سایت هم استفاده کنید.این موضوع مهم است که بین متن و زمینه تضاد ایجاد کنید.
۲٫    از رنگ های کمتری استفاده کنید.کاری نکنید که وب سایت تان مثل سیرک به نظر بیاید.برای گذاشتن بهترین تأثیر می توانید یک رنگ را برای عنوان و یک رنگ دیگر را(رنگ مکمل)برای متن انتخاب کنید.
۳٫    از رنگ ها به طور کافی درطراحی  وب سایت استفاده کنید ،کم اما کافی.اگر از رنگ ها خیلی کم استفاده کردید این ریسک را پذیرفتید که وب سایت تان را خسته کننده بکنید،یا اینکه از رنگ کم استفاده کردیداما از ابزار دیگری برای معلوم کردن اجزای دیگر استفاده کردید.
۴٫    اگر می خواهید،توجه بیننده تان را به دست آوریداز رنگ های تند استفاده کنید.اما مراقب باشید اگر طرح رنگ وب سایت تان خیلی پر رنگ است،این موضوع توجه بینندگان را از خیلی جهات جلب میکند وباعث می شود تکنیک ها تأثیر گذاریشان را از دست بدهند.
۵٫    از طبیعت الهام بگیرید.می توانید از طبیعت رنگ های مکمل واقعأ خوبی را برای طراحی سایت بگیرید.