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

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

پالت رنگ چیست؟

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

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

چرا به رنگ های سیستم طراحی نیاز دارید؟

یک پالت رنگ صدا باید:

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

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

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

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

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

11 مرحله برای ایجاد یک پالت رنگ برای سیستم طراحی شما

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

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

1. هر رنگ اصلی را در موجودی رنگ خود شناسایی کنید

ساخت یک پالت رنگی موثر یکی از متداول ترین مدل های ذهنی: استفاده از چیزهایی که در حال حاضر دارید (یا می توانید به راحتی به دست آورید) برای رسیدن به ناشناخته ها (یا آنچه که ندارید) ندارد).

در این مورد، اینها رنگهای پایه شما هستند. رنگ‌های پایه به رنگ‌هایی که اغلب در UI شما استفاده می‌شوند و رنگ‌هایی که محصول شما را متمایز می‌کنند، اشاره دارد.

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

برخی از قوانین رنگ های اصلی عبارتند از:

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

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

2. طراحی سیستمی برای ساخت پالت های توسعه یافته

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

یک روش معمول این است که هر رنگ تاکیدی را در سه رنگ برای استفاده در موقعیت‌های مختلف تعریف کنید:

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

• • • آبی (یا رنگ روشن دیگر) برای برجسته کردن یک ویژگی جدید، مانند یک پیام
    • قرمز برای تأیید یک اقدام جدی (مانند غیرفعال کردن حساب)
    • یا سبز برای پیام مثبتی مانند تراکنش موفق

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

• • • مجاور یا مشابه (یک رنگ اصلی را انتخاب کنید و رنگ های کنار آن را انتخاب کنید)
    • سه گانه (یک مثلث متساوی الاضلاع روی چرخ رنگ بکشید)
    • سایه ها (شما می توانید یک رنگ اصلی و تغییرات آن با اشباع های مختلف را انتخاب کنید)

3. یک قرارداد نامگذاری ایجاد کنید

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

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

می‌توانید از نام‌های انتزاعی مانند bx7300 استفاده کنید، اما برخی از رویکردهای رایج عبارتند از انتخاب نام‌های رنگ واقعی (مانند آبی) یا نام‌های شماره‌دار مانند 07000.

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

برخی از قوانین نامگذاری عبارتند از:

• • • از نامگذاری درجه بندی رنگ مانند آبی تیره استفاده نکنید
    • یک نام دقیق برای هر رنگ ارائه دهید
    • قانون نامگذاری خود را ساده نگه دارید

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

4. تست پالت رنگ در برابر رنگ های موجودی

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

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

5. پالت و دستورالعمل های استفاده را تعریف کنید

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

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

• • • پس‌زمینه
    • متن
    • کانتینر
    • دکمه‌ها

6. پالت های رنگی را در سیستم رنگی CSS خود پیاده سازی کنید

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

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

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

/*نام متغیرها باید بصری باشد*/

$primary-color: #bada55;
$secondary-color: #c0ffee;

/*استفاده*/

.چند کلاس {
 رنگ: $primary-color; /*با این کار رنگ متن عنصر برابر با bada55 */ }

می شود

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

7. تأثیر پالت های رنگی جدید را روی رابط

آزمایش کنید

رنگ‌های جدیدی که انتخاب کرده‌اید چه تأثیراتی بر رابط موجود دارند؟

شما بدون شک این پالت را از نظر اندازه در مدل‌های طراحی امتحان کرده‌اید، اما هیچ چیز مانند استفاده واقعی برای یافتن نقاط بهبود وجود ندارد.

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

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

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

• آیا این پالت جدید رابط کاربری را بهبود می‌بخشد؟
• آیا این پالت جدید رابط را بدتر می‌کند؟
• این تغییرات چقدر با رنگ‌های موجود ادغام می‌شوند؟

8. کنتراست بین رنگ ها را در رابط کاربری جدید

خود تأیید کنید

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

می‌توانیم این کار را با بررسی اینکه عناصر رابط کاربری ما دارای امتیاز کنتراست کافی هستند که توسط دستورالعمل‌های دسترسی به محتوای وب.

ساده ترین راه این است که از یک افزونه در ابزار طراحی رابط کاربری انتخابی خود استفاده کنید. کنتراست برای Figma یک مثال است . Stark یک پلت فرم طراحی دسترسی کاملتر است که افزونه هایی را برای Figma، Adobe XD ارائه می دهد. ، و طرح. این بررسی کنتراست را در طرح رایگان ارائه می دهد.

9. پالت و رابط کاربری جدید خود را به همه طراحان محصول معرفی کنید

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

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

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

در این مرحله، پالت رنگ شما آماده است تا به سایر ذینفعان فرآیند طراحی، مانند همکاران، اعضای تیم، شرکا یا مشتریان شما معرفی شود.

10. از انتقادات خلاقانه، بازخوردها و پیشنهادهای تغییر دعوت کنید

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

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

11. پالت را نهایی کنید

تبریک می‌گویم، شما تقریباً تمام شده‌اید. با این حال، قبل از رفتن، چند نکته نهایی وجود دارد که باید قبل از آماده شدن پالت خود انجام دهید.

شما باید:

• این پالت را به مستندات سیستم طراحی و راهنمای سبک خود اضافه کنید.
• متغیرهای پردازنده CSS خود (بومی یا دیگر) را در سیستم طراحی مستند کنید.

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

بیشتر اوقات، چشم شما قاضی خواهد بود، و زمانی که نمی توانید به آن اعتماد کنید، اعضای تیم خود را برای مشاوره دارید.

هنگام نهایی کردن، هر گونه ناسازگاری، ترفند یا بهبودی را که می‌توانید انجام دهید، جستجو کنید.

درک نظریه رنگ: کلید پالت های بهتر

طراحی پالت‌های رنگی نباید برای کسی شب‌های بی‌خوابی ایجاد کند.