فروم بچه های تولز

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

احتمالا برای شما هم پیش آمده است: یک بوم خالی را در نرم‌افزارهای طراحی (مثل فیگما، فتوشاپ یا ایلاستریتور) باز می‌کنید، چند کد رنگی هگزادسیمال (Hex codes) را به صورت تصادفی امتحان می‌کنید، از تک‌تک آن‌ها متنفر می‌شوید و در نهایت بیست دقیقه تمام با لغزنده‌های تنظیم اشباع رنگ (Saturation sliders) کلنجار می‌روید، به این امید که شاید این کار به نوعی یک پیشرفت در طراحی محسوب شود!

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

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

در ادامه این مقاله، پنج وب‌سایت فوق‌العاده کاربردی را معرفی می‌کنیم که ارزش بوکمارک کردن (ذخیره در مرورگر) را دارند و می‌توانند جریان کاری (Workflow) شما را برای همیشه تغییر دهند.

جذابیت اصلی و نقطه قوت این وب‌سایت، تولیدکننده پالت (Palette Generator) بسیار با سرعت و بصری آن است. فقط کافی است کلید فاصله (Spacebar) روی کیبورد خود را فشار دهید تا سایت بی‌وقفه ترکیب‌های رنگی نوینی را به شما پیشنهاد دهد، تا زمانی که بالاخره یک ترکیب چشمتان را بگیرد و به اصطلاح روی آن کلیک کنید. همین قابلیت به تنهایی، زمانی که به یک الهام‌بخش شتابان نیاز دارید، آن را به ابزاری بی‌نهایت کاربردی تبدیل می‌کند. اما تواناییات Coolors به همین جا ختم نمی‌شود.

این پلتفرم قابلیتات دیگری نظیر ابزار جستجو و مرور پالت‌ها، انتخاب‌گر رنگ از روی عکس (Image Picker – که برای استخراج رنگ‌های سازمانی از روی تصویرها برند بسیار مفید است)، تحلیل‌کننده کنتراست (Contrast Checker – برای اطمینان از خوانایی متن‌ها و رعایت استانداردهای دسترسی‌پذیری)، بصری‌ساز پالت (Palette Visualizer)، ابزارهای ساخت گرادیانت و حتی دستیارهای رنگی متمرکز بر فریم‌ورک Tailwind CSS را نیز در خود جای داده است.

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

سایت Grabient دقیقا همان ابزاری است که وقتی پروژه شما به جای رنگ‌های تخت (Flat palettes) به طیف‌های رنگی و گرادیانت‌های جذاب نیاز دارد، باید آن را باز کنید. در طراحی وب مدرن، استفاده از گرادیانت‌ها به شدت ترند شده است.

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

اگر در حال طراحی صفحات فرود (Landing Pages)، بخش‌های هیرو (Hero sections – بخش بالایی و اصلی سایت) یا تصویرها بصری مارکتینگ و بازاریابی هستید و به گرادیانت‌هایی نیاز دارید که بتوانید آن‌ها را بدون سر و کله زدن دستی با کدهای پیچیده CSS تنظیم و دستکاری کنید، Grabient یک میانبر بسیار کاربردی، با سرعت و ارزشمند برای شما خواهد بود.

سایت ColorHub در مقایسه با بسیاری از ابزارهای تولید پالت، رویکردی “محصول‌محورتر” (Product-minded) دارد. یکی از بزرگترین مشکلات طراحان این است که یک پالت رنگی روی یک بوم سفید بسیار زیبا به نظر می‌رسد، اما وقتی در یک قالب واقعی پیاده‌سازی می‌شود، برآیند ممکن است جالب نباشد.

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

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

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

شما می‌توانید دسته‌بندی‌های متنوعی مانند پالت‌های پاستلی (Pastel)، رترو و قدیمی (Retro)، تاریک (Dark)، تم عروسی، تم غذا، غروب خورشید، یا رنگ‌های نئونی را در آن پیدا کنید. کافی است فقط پنج دقیقه در این سایت بگردید و اسکرول کنید؛ معمولا محال است که دست خالی و بدون پیدا کردن یک پالت کاربردی از آن خارج شوید.

من شخصا Color Hunt را دوست دارم زیرا فرآیند کار را بیش از حد پیچیده نمی‌کند. گاهی اوقات شما اصلا نیازی به یک لابراتوار دقیق رنگ با ده‌ها ابزار تخصصی ندارید. فقط می‌خواهید ترکیب‌های رنگیِ خوب و امتحان‌پس‌داده را مرور کنید تا بالاخره یکی از آن‌ها حس درستی به شما بدهد. این دقیقا همان کاری است که Color Hunt در آن استاد است.

اگر تمام چیزی که نیاز دارید یک گرادیانت زیبا و کدهای CSS آماده‌ی آن برای استفاده در برنامه‌نویسی سایت است، Colorion همه‌چیز را به شکلی مستقیم و کارآمد در اختیار شما قرار می‌دهد.

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

این ابزار به ویژه برای کارهای با سرعت طراحی وب (زمانی که به دنبال یک پس‌زمینه نرم‌تر، یک بخش فراخوان یا Call-to-action جذاب‌تر، یا یک ترکیب رنگی هستید که صیقلی‌تر و حرفه‌ای‌تر از یک رنگ تخت به نظر برسد) بسیار کاربردی و نجات‌بخش است.

اگر به دنبال یک راهنمای سریع‌تر برای تصمیم‌گیری هستید:

واقعیت این است که بیشتر ما در زمینه طراحی با «مشکل رنگ» مواجه نیستیم، بلکه با «مشکل جریان کاری» (Workflow) دست و پنجه نرم می‌کنیم.

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