در این روش ما سه رنگ اصلی برای استفاده در محصولی که باهاش سر و کار داریم ایجاد میکنیم که این سه رنگ باید در طراحی به سه درصد استفاده بشن؛ یعنی یکی از رنگ ها 60 درصد یکی دیگه 30 درصد و دیگری 10 درصد. یکی از ویژگی های خاص این روش این هست که شما میتونید چند بار ازش استفاده کنید و رنگ های متفاوتی در محصول داشته باشید.
برای ساختار کلی محصول سه رنگ اصلی داشته باشید و مجدد برای یکی از عناصر سه رنگ مخصوص خودش رو داشته باشید البته این مساله که این دو پالت رنگی هم نسبت به هم از قوانین تمایز یا تکامل تئوری رنگی یا هر قانون دیگه ای که باعث بشه در جای درستی باشن استفاده کنن.
اغلباً پیش میاد که شما برای یک محصول خیلی راحت یک رنگ رو انتخاب میکنید. مثلا یک رنگ سبز خاص یا آبی خاص؛ اما هیچ پیش فرضی ندارید که چه رنگ هایی کنار این رنگ جذاب میشن !
برای همین شاید مجبور بشید سایت های پالت رنگی رو زیر و رو کنید که رنگی نزدیک به رنگ خودتون پیدا کنید که از اونجایی هم که ما در سیستم HSB میتونیم 3.6 میلیون رنگ مختلف بسازیم احتمال اینکه رنگ مورد نظرتون رو پیدا کنید خیلی خیلی کمه!
و یا:
در اکثر پروژه هایی که برای شرکت های خاص و یا پلتفرم هایی که خودشون برند بوک رو ایجاد کردن و هویت بصری خاص خودشون رو دارن اینطور پیش میاد که معمولا رنگ اصلی ای که قرار هست در پروژه استفاده بشه توسط کسانی که برند بوک رو گردآوری کردن انتخاب میشه پس رنگ های دیگه باید حتما بر اساس رنگ اصلی و مرجعیت این رنگ طراحی بشن!
این روش دقیقاً همینجا به کمک شما میاد!
مرحله اول (رنگ اولیه)
اول از همه نیاز هست که رنگ اصلی که خودتون انتخاب کردید و یا از سفارش دهنده تحویل گرفتید رو وارد محیط فیگما یا اکس دی کنید.
از این به بعد به این رنگ که رنگ اصلی شما هست رنگ اولیه (Primary color) میگیم!
رنگ اولیه دقیقا همون رنگیه که باید اکشن های اصلی شما مثل باتن ها ، بار ها ، متن های کال تو اکشن و ... ازش استفاده کنن و یه جورایی میشه بهش گفت Action color و این رنگ در حالی که مهم تر هست اما باید حدود 10 درصد ازش در طراحی استفاده کنید!
بعدش حتما حالت رنگی موجود در Color picker رو روی حالت HSB بزارید.
در حالت رنگی HSB حرف H (Hue) حرف S (Saturation) و حرف B (Brightness) هست که بعداً حتما یک مقاله هم درباره سیستم های پالت رنگی براتون آماده میکنم ;)
مرحله دوم (رنگ زمینه)
رنگ اصلی شما باید داخل طرح باقی بمونه پس ازش یک کپی بگیرید و روی کپی این تغییرات رو ایجاد کنید:
وارد بخش Color picker بشید و Saturation(S) رو بین 5 تا 10 و Brightness(B) رو روی بین 95 تا 100 تنظیم کنید تا اولین رنگ ساخته بشه به این رنگ میتونید رنگ خنثی و یا رنگ زمینه (Background color ) بگید و از این به بعد همونطوری که از اسمش مشخصه میتونه رنگ زمینه شما باشه.
در حالت دارک مد B(Brightness) رو بین 5 تا 10 تنظیم کنید.
این رنگ باید حدود 60 درصد از فضای طراحی شما رو در بر بگیره .
مرحله سوم (رنگ ثانویه)
یک بار دیگه از رنگ اولیه کپی بگیرید و این بار H(Hue) رو می تونید 30 تا 50 عدد بیشتر و یا کمتر کنید. بیشتر کردن و یا کمتر کردن این عدد بستگی به این داره که شما تمایل داشته باشید که این رنگ چه تغییراتی داشته باشه، توصیه من به شما اینه که هر دو حالت هم تست کنید و رنگی که بهتر هست رو انتخاب کنید. Saturation(S) رو بین 5 تا 20 تنظیم کنید. Brightness(B) رو 10 تا 40 عدد بیشتر کنید.
در حالت دارک مد S(Saturation) رو بین 50 تا 60 تنظیم کنید و B(Brightness) رو بین 10 تا 20 عدد کمتر کنید.
این رنگ هم رنگ ثانویه شماست و از اون میتونید برای عناصری که اکشن ندارن استفاده کنید. برای مثال میتونید ازش به عنوان رنگ بخشی از یک کارد باکس استفاده کنید.
از این رنگ هم میتونید در حدود 30 درصد طراحی استفاده کنید.
حالا سه تا رنگ اصلی دارید که با رعایت نسبت هاشون میتونید رد طرح ازشون استفاده کنید، یادتون باشه این تنها روش برای ساخت پالت رنگی نیست و در آینده دوباره براتون روش جدید اضافه میکنم.
نکته ای که باید مجدد بهتون بگم و بدونید اینه که این روش رو هم میتونید برای رنگ های اصلی محصول و هم میتونید برای بخشی از محصول استفاده کنید.
درفضاهای مجازی (اینستاگرام،تلگرام،بیهانس،کامیونیتی فیگما) با آیدی @soroushof منو دنبال کنید!
