یک راهنمای ساده ی رنگ برای توسعه دهنده وب

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

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

انتخاب یک رنگ پایه

ما می توانیم در هر لحظه چیزی حدود 10 میلیون رنگ را ببینیم. یک لحظه بهش فکر کن . 10 میلیون !!!!!

جدای از این، ما باید فقط یک رنگ (فقط یک رنگ) انتخاب  کنیم که رنگ پایه وب سایت و برند ما باشه.

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

 اما نگران نباشید: شما مرتکب اشتباه نخواهید شد.

چطور رنگ آغازین را انتخاب کنیم؟

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

درباره اش فکر نکنید. فقط مطمئن شوید که پشت انتخاب این رنگ دلیلی وجود داره. با این کار خوب به نظر می رسید.

نکاتی برای انتخاب رنگ آغازین 

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

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

فرض می کنیم آبی را انتخاب کردید.

انتخاب یک رنگ پایه دلچسب!

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

اول به Dribbble و Designspiration برید و در هر دو روی لینک "color " کلیک کنید.صفحه ای شبیه تصویر زیر به شما نشان داده میشه:

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

در مرحله بعد می توانید یک سایه آبی مناسب را پیدا کنید.

برای یک برند پرانرژی ، آبی روشن تر انتخاب کنید، آبی روشن ( یکی از 5 انتخاب برتر است) برای شرکت های جدی تر و بزرگتر 5 رنگ پایین تر مناسب ترند.

سایه های مختلف آبی کاراکتر متفاوتی دارند. عاقلانه انتخاب کنید

یک سایه را انتخاب کنید و از وب سایت های مختلف که از آن رنگ استفاده کرده اند دیدن کنید. سپس می توانید روش CSS-Tricks’ color-picking  را برای گرفتن دقیق تر رنگ در مرورگر استفاده کنید.

چقدر  آّبی !!! کار شما اینه که ابی را انتخای کنید که فکر می کنید بهتر با برند شما تناسب دارد.

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

یک پالت رنگ چسبان درست کنید

خوب حالا باید یک مقدار HEX برای رنگ انتخابی تان داشته باشید مال من اینه : #30c9e8

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

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

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

اگر بخواهیم 5 یا 6 رنگ اضافه کنیم شلوغ کاری میشه. همه شما در واقع دو رنگ نیاز دارید:

• یک رنگ پایه ( که مال من اینه: #30c9e8)
• یک رنگ تاکید کننده (accent)

اگر شما بتوانید یک سایت با استفاده از این پنچ رنگ بسازید ،نسبت  به مکمل ها، split-complementarie و triads و بقیه روشها، خیلی بهتر نتیجه می گیرید.

برای داشتن وب سایتی که بزرگ به نظر برسد شبیه Thoughtbotو TedTodd  شما به یک طرح رنگ پیچیده نیاز ندارید

رنگ تاکید کننده را پیدا کنید

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

گام بعدی اینه که به Paletton برید و کد HEX رنگ تان را در جعبه رنگ وارد کنید.

از این بخش می توانید رنگ تاکید کننده تان را به دو روش پیدا کنید:

می توانید روی دکمه اضافه کردن مکمل کلیک کنید . برای رنگ آبی انتخابی ما رنگ مکمل ، نارنجی است.

Paletton به طور خودکار یک رنگ مکمل خوب برای شما ایجاد می کند.

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

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

البته کاری که Paletton انجام میده پشتوانه علمی دارد اما در اینده درباره تئوری آن می اموزید و همه چیز روشن خواهد شد.

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

جای خاکستری خالیه .

اضافه کردن رنگ خاکستری

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

تیره معمولا برای متن و روشن وقتی که می خواهید تمایز ظریفی با سفید داشته باشید استفاده میشه (معمولا برای پس زمینه)

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

     1. می توانید از Dribbble یا Designspiration برای پیدا کردن یک خاکستری مناسب استفاده کنید  اما راه ساده تر اینه که عبارت blue website را در نوارجستجو تایپ کنید که خاکستری های بیشتری را به شما نشان می دهد.
     2. اگر فتوشاپ دارید می توانید از Erica Schoonmaker’s technique برای هماهنگ کردن خاکستری با رنگ پایه تان استفاده کنید.

هماهنگ ساختن خاکستری ها

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

   1. دو شکل بکشید و آنها را با رنگ های #424242 و #fafafa پر کنید
   2. یک لایه رنگ را روی دو شکل قرار دهید
   3. لایه رنگ را به رنگ پایه تان تغیر دهید #30c9e8
   4. مد میکس کردن را روی overlay بزارید  و opacity را پایین بیاورید بین 5 تا 40 درصد (در مثال زیر 40 درصد ست شده)
   5. از انتخاب کننده رنگ استفاده کنید و مقادیر جدید را کپی کنید
لازم به ذکر است که این روش وقتی که رنگ آبی را پوشش میدهید به خوبی کار می کند. برای هر رنگ دیگری می توانید opacity را بین 5 تا 10 درصد قرار بدید یا با خاکستری های اصلی تان بچسبانید.

هورااا  انجامش دادیم!

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

طرح رنگ تان را به کار ببرید

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

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

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

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

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

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

باید توجه داشته باشید که وقتی از رنگ و متن استفاده می کنید باید مطمئن شوید که تناسب مناسبی بین پس زمینه کپی وجود دارد. این به مردمی که کوررنگی یا کم بینایی دارند و متن وب سایت شما را می خوانند کمک می کند. چند ابزار وجود داره که می توانید برای پیدا کردن رنگ هایی که با WCAG Guidelines تطابق دارند استفاده کنید. دو تا از مشهورترین این ابزارها WebAim Color Contrast Checker و Contrast Ratio با Lea Verou هستند.

نکته نهایی:

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

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

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

منبع : smashingmagazine