ایجاد: ۱۰:۴۳ ۱۳۹۱/۸/۴
ویرایش: ۱۸:۴۱ ۱۳۹۳/۵/۱

یادداشت‌ها »
رنگ‌ها و طراحی وب

روانشناسی رنگ‌ها

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

آیا تاثیر رنگ‌ها بر هر ملتی یکسان است؟

خیر. هر رنگی بر هر قومیت و منطقه، می‌تواند تاثیر و معنایی متفاوت داشته باشد. مثلا در چین و ژاپن قرمز رنگ خوشبختی است برخلاف اغلب جاها که سفید چنین جایگاهی دارد. برای همین لباس عروس در کشور آنها قرمز است و لباس عروس بقیه سفید :)
لذا اینکه مخاطب شما در کدام کشور قرار دارد، نوع انتخاب رنگ مناسب برای سایت می‌تواند متفاوت باشد.
همچنین کنتراست و شدت درخشندگی رنگ‌ها نیز مهم است و برخی ملیت‌ها (مثل عرب زبانان) طراحی‌های با کنتراست بالا را ترجیح می‌دهند در حالی که بقیه کنتراست متوسط یا حتی پایین‌تر از متوسط را ترجیح می‌دهند.
Color Meanings by Culture مطلبی است که در آن به معنای رنگ‌های مختلف، در ملت‌های مختلف پرداخته و در انتهای جدول مفیدی که ارائه کرده است، منابع و رفرنس‌های بیشتری نیز معرفی نموده است.

رنگ‌های مناسب طراحی وب

با معیار RGB ما امکان تعریف 16,777,216 رنگ را داریم و اغلب نمایشگرهای امروزی و LCD/LED های ما نیز توانایی نمایش این 16 میلیون رنگ متفاوت را دارا هستند اما فقط 216 رنگ مناسب وب در نرم افزارهای طراحی وب (فوتوشاپ و ...) می‌بینیم:

رنگ های مناسب برای طراحی وب در نرم افزار فوتوشاپ photoshop
لیست رنگهای مناسب برای طراحی وب که در نرم افزارهای مختلف طراحی دیده میشود

دلیل اینکه از بین 16 میلیون رنگ این رنگ‌ها انتخاب شد، وسایلی هستند که تنها 256 رنگ را می‌توانند نمایش دهند. در صورتی که شما از این 256 رنگ استفاده کنید، می‌توانید مطمئن باشید که نمایشگرهای قدیمی و همچنین نمایشگرهای وسایل ارزان (مثل برخی موبایل‌ها و وسایلی که تعداد محدودی رنگ را می‌توانند نمایش دهند) دقیقا سایت شما را به همان رنگی می‌بینند که شما طراحی کرده‌اید.
البته ممکن است شما این محدودیت را نپسندید و بگویید من می‌خواهم حتما از 1D6F97 یا 00588C یا 93A93F استفاده کنم و نمی‌خواهم محدود به آن 256 رنگ باشم که خب انتخاب با شماست و این کار مزایایی مثل زیباتر بودن را برای سایت شما دارد اما همانطور که گفتیم، نمی‌توانید اطمینان داشته باشید که رنگ‌بندی سایت شما در همه وسایل لزوما خوش ترکیب خواهد ماند هرچند شما ممکن است با توجه به شناختی که از مخاطبین یا آمار آنها دارید، رعایت این مساله برایتان مهم نباشد.

انتخاب طرح رنگ (color scheme)

یک سایت فقط از یک رنگ تشکیل نشده است بلکه از یک مجموعه رنگ تشکیل شده است که این مجموعه نیز باید با هم تناسب و همخوانی داشته باشند و این تناسب و همخوانی، امری نیست که توسط فرمول‌ها قابل بیان باشد بلکه امری سلیقه‌ای بوده و افرادی که طبع هنری و سلیقه‌های بهتری دارند، در این زمینه انتخاب‌های جالب‌تری خواهند داشت اما من که طبع هنری و سلیقه ندارم، آیا راه یا ابزاری برای کمک به من وجود دارد؟
پاسخ مثبت است!
سایت‌های زیادی وجود دارند که به شما مجموعه رنگ‌های مختلف را ارائه می‌دهند و شما می‌توانید حسب محبوبیت آنها و همچنین نزدیک بودنش ترکیب رنگ‌هایش به کار شما، یکی از آنها را انتخاب نمایید.
  • kuler که یکی از سرویس‌های شرکت گرافیکی معروف Adobe است، می‌تواند ایده های بسیار خوبی در مورد ترکیب رنگهایی را که توسط کاربران پیشنهاد شده است، به شما معرفی کند.
  • سایت color scheme designer نیز یکی از بهترین سایت‌هایی است که در زمینه انتخاب طرح رنگ سایت به شما کمک زیادی می‌تواند بکند.
  • سرویس image palette همانطور که از نامش پیداست، برای ساخت پلت رنگ با الهام از یک تصویر است. شما ممکن است از ترکیب رنگ موجود در یک تصویر خوشتان بیاید و بخواهید یک تناسب رنگ سایت‌تان را بر اساس آن پیاده کنید. در اینصورت می‌توانید تصویر مربوطه را در لینک فوق آپلود و پالت رنگ آن را تحویل بگیرید.
    سایت Pictaculous و ColourGrab نیز سرویسی مشابه ارائه کرده است.

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

یک نکته ساده و بدیهی که هر طراح وبی سعی می‌کند آن را رعایت کند، تناسب کنتراست متن و بکگراند است تا متن به راحتی خوانده شود.
منتها گاهی ممکن است رنگ انتخابی طراح، رنگ مناسبی نباشد یا حواس طراح به یک تداخل رنگ نباشد. سرویس check my colours برای کمک به طراحان در همین زمینه ایجاد شده است.
گاهی طراحان وب، بجای رنگ از تصویر به عنوان بکگراند استفاده می‌کنند که امری طبیعی است اما یک اشتباه بزرگ اکثر طراحان، این است که لود شدن تصویر بکگراند را حتمی می‌انگارند! در حالی که ممکن است کاربری نمایش تصاویر را غیرفعال کرده باشد (بدلیل سرعت پایین یا کاهش مصرف پهنای باند) یا به هر دلیل دیگر تصویر برای وی لود نشود، خب در این صورت اگر طراح وب برای خوانا شدن متن سفیدش، «تصویر» سیاهی را در بکگراند آن قرار داده باشد اما بدلیل لود نشدن آن تصویر، بکگراند سفید آن نمایش داده شود، متن برای کاربر قابل خواندن نیست (متن سفید روی زمینه سفید!)
لذا طراحانی که برای المان‌های صفحه در CSS یک بکگراند تصویری قرار می‌دهند، حتما رنگ پیش‌فرض را نیز تعریف کنند تا اگر تصویر لود نشد، مشکلی پیش نیاید:
background:#597 url(...);

لینک‌های بیشتر در مورد رنگ‌ها:


یادداشت‌های مرتبط
  1. رنگ‌ها و برنامه‌نویسی وب

... لیست تمام یادداشت‌ها