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



visibility  
mode_comment   ۰

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

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

1. همه رنگهای مورد نظرتون رو جمع آوری کنید

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

2. یک فایل رو برای تعریف کردن رنگها اختصاص بدین

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

3. به متغیرها نام رنگ مورد نظرتون رو نسبت بدین

بهتره که برای هر رنگ یک نام متناسب با اون رو بهش نسبت بدین تا بتونین از اونا در جاهای مورد نظرتون استفاده کنید. برای نامگذاری میتونین مشخص کنید که این رنگ برای فونت هست و یا برای پس زمینه و یا ... و اینکه این رنگ تیره هست یا روشن و چیزای دیگه که خودتون میتونین در مورد اونا تصمیم بگیرید و قاعده خاصی برای اون وجود نداره.

4. از Sass map برای رنگها استفاده کنید

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

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

میبینید که از @each استفاده شده و برای هر رنگ یک بار این حلقه اجرا میشه و کلاسهای متناظر به وجود میان.

5. از Sass برای Opacity، روشنایی و تیرگی رنگها استفاده کنید

فرض کنید که شما تعدادی رنگ رو تعریف کردید و یک جا از سایت به رنگ تیره تر یا روشنتری از اون رنگهایی که تعریف کردید نیاز دارید. در این مواقع بهتره که رنگ جدیدی رو تعریف نکنید و با استفاده از توابع مفیدی که Sass در اختیارتون قرار میده، رنگهای موجود رو روشنتر یا تیره تر کنید. با استفاده از تابع rgba هم میتونین به رنگ خودتون شفافیت نسبت بدین.

Sass متدهای زیاد دیگه ای برای مدیریت رنگ از جمله ترکیب رنگها، تغییر دادن hue و Saturation و ... داره که میتونین خودتون اونا رو مطالعه کنید. شما میتونین به رنگهای تولید شده با استفاده از این توابع متغیری رو نسبت بدین و از اونا در جاهای مورد نظرتون استفاده کنید. کد زیر رو ببینید:

6. از پالت رنگ سفارشی در Chrome devtools استفاده کنید

Google chrome devtools امکاناتی رو در اختیارتون قرار میده که به راحتی میتونین با استفاده از اونا رنگ مورد نظرتون رو انتخاب کنید. شما به راحتی میتونین با استفاده از اون رنگهای Border و پس زمینه و ... رو عوض کنید و خروجی رو همون لحظه در مرورگر مشاهده کنید.

7. نشان دادن رنگها در ویرایشگر

بیشتر ویرایشگرهایی معروفی که در زمینه طراحی وب وجود داره رنگ رو درون ویرایشگر نمایش میدن و میتونین همونجا خروجی رنگ رو ببینید و اگر خوب نبود اون رو عوض کنید تا به چیزی که میخواید برسید. بعضی از ویرایشگرها این ویژگی رو درون خودشون دارن و بعضی دیگر هم به کمک یک افزونه چنین کاری رو انجام میدن. مثلا ویرایشگر معروف Atom یک افزونه بنام Pigments داره که ویژگی های جالبی رو در اختیارتون قرار میده.

این افزونه پشتیبانی خوبی از Sass داره و هر تغییری که توابع Sass در رنگها به وجود میارن رو نیز نمایش میده.

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

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.