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

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

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

1. نمونه های رنگی را زودتر اضافه کنید

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

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

چگونه پالت رنگ خود را به طراح Webflow اضافه کنید

هنگامی که آماده فرو رفتن در Webflow Designer هستید، پانل Style را در سمت راست باز کنید و به بخش “پس زمینه” بروید تا انتخابگر رنگ را پیدا کنید (می توانید با کلیک کردن بر مربع کنار “Color” به انتخابگر رنگ دسترسی پیدا کنید). .

‌

با کلیک بر روی نماد “plus” در پایین انتخابگر رنگ، نمونه ها را به پالت طراحی وب خود اضافه کنید. با این کار یک منوی کشویی اضافی باز می شود که در آن می توانید نمونه رنگ خود را نام ببرید. وقتی از نام و رنگ راضی بودید، روی «ایجاد» کلیک کنید.

‌

راه های مختلفی برای تنظیم یا انتخاب رنگ ها در انتخابگر رنگ وجود دارد :

1. کلیک کنید و نشانگر خود را در اطراف صفحه رنگ بلغزانید
2. از لغزنده های رنگ و شفاف در زیر صفحه رنگ استفاده کنید
3. کد HEX سایه مورد نظر خود را وارد کنید
4. فیلدهای ورودی HSB (رنگ، ​​اشباع، روشنایی) یا RGB (قرمز، سبز، آبی) و A (آلفا) را به صورت دستی تنظیم کنید (اگر روی “HSB” کلیک کنید به “RGB” تغییر می کند و اگر دوباره کلیک کنید تغییر می کند. بازگشت)
5. یک اسکرین شات یا تصویر از پالت رنگ خود را روی بوم Webflow قرار دهید و سپس از ابزار قطره چکان استفاده کنید (این یک برنامه افزودنی کروم است )

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

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

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

یک وب سایت باید چند رنگ داشته باشد؟

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

طرح Conzai در تصویر بالا عمدتاً از رنگ مشکی (تقریباً 60٪) تشکیل شده است که حدود 30٪ دیگر سفید است و 10٪ رنگ برجسته سبز است (اینها تخمین زده می شوند و درصد دقیق نیستند). قانون 60-30-10 واقعاً مفید است زیرا همانطور که می بینید، معمولاً نتایج چشم نوازی ایجاد می کند. اما من طرح‌های زیادی را دیده‌ام که این قانون را خم می‌کنند یا حتی کاملاً می‌شکنند و خیره‌کننده به نظر می‌رسند.

وب سایت آبی پاپریکا یک مثال عالی است. حداقل 9 رنگ مختلف در وب سایت Blue Paprika وجود دارد. در تصویر بالا می بینیم که رنگ سفید رنگ اصلی است، سیاه یک رنگ برجسته و سپس تقریباً 30٪ باقیمانده یک گرادیان یا ترکیبی از حداقل هفت رنگ مختلف است. همچنین می توانید قانون 60-30-10 را با استفاده از یک رنگ برای 60 درصد وب سایت خود، یک رنگ دیگر برای 30 درصد تغییر دهید و سپس 10 درصد باقی مانده را به سه رنگ مشابه یا حتی چهار رنگ چهارتایی تقسیم کنید.

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

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

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

با حرکت دادن انتخابگر در امتداد صفحه رنگ به سمت گوشه سمت چپ بالا و نزدیک‌تر و نزدیک‌تر به سفید (یا کد HEX #ffffff) رنگ‌هایی را در طراح Webflow اضافه کنید. افزودن رنگ‌های آبی تیره، رنگ‌های آبی روشن را به شما می‌دهد. از آنجایی که نمی‌توانید رنگ سفید بیشتری به سفید مطلق اضافه کنید، نمی‌توانید رنگ‌های سفید اضافه کنید.

برای افزودن سایه، انتخابگر را مستقیماً به سمت پایین صفحه رنگ (به سمت کد HEX #000000) حرکت دهید. همچنین می‌توانید با حرکت انتخابگر در امتداد صفحه رنگ به سمت چپ وسط (یا به سمت رنگ‌های خاکستری بین سفید و سیاه)، سایه‌ها را اضافه کنید.

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

4. از نمونه های جهانی برای ایجاد تغییرات آسان استفاده کنید

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

برای اینکه تطبیق پذیری نمونه های جهانی را برای خود تجربه کنید، الگوی وب سایت Fitnesso را در طراح Webflow باز کنید. روی دکمه «مربی آنلاین» در صفحه اصلی کلیک کنید و سپس روی مربع آبی تیره زیر بخش «پس‌زمینه» در پانل Style کلیک کنید، که پالت رنگ را باز می‌کند.

‌

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

‌

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

5. کنتراست را برای دسترسی و جامع بودن بررسی کنید

یکی از جالب‌ترین ویژگی‌های Webflow Designer، بررسی کنتراست داخلی است که بررسی دسترسی و جامع بودن را آسان‌تر می‌کند.

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

شما به راحتی می توانید بررسی کنید که آیا سرصفحه ها، پاراگراف ها و سایر متن ها نسبت کنتراست مناسبی در انتخابگر رنگ Webflow دارند یا خیر. انتخابگر رنگ را در قسمت «تایپوگرافی» در پانل سبک باز کنید. درست بالای پالت رنگ خود، امتیاز نسبت کنتراست را خواهید دید.

‌

اگر نسبت کنتراست شما با توصیه‌های تنظیم شده توسط WCAG مطابقت نداشته باشد، یک نشانگر با خواندن “Fail” مشاهده خواهید کرد. روی نماد “چشم” در سمت راست امتیاز کنتراست خود کلیک کنید تا دو خط را در صفحه رنگی روشن یا خاموش کنید. این خطوط نشان می‌دهند که انتخابگر رنگ شما باید کجا را بگذراند تا بتواند حداقل امتیاز کنتراست توصیه شده را بدست آورد یا به یک امتیاز افزایش یافته دست یابد. در این راهنمای دانشگاه Webflow می‌توانید درباره نحوه ایجاد این امتیاز و چرایی اهمیت آن اطلاعات بیشتری کسب کنید .