مقدمه‌ای بر رنگ‌ها و تایپوگرافی در طراحی محصول

در این آموزش ابتدا با سیستم‌های رنگی موجود آشنا خواهیم شد. اینکه هر کدام چه مزیت و معایبی دارد و طراحی‌های روز دنیا از کدام‌یک استفاده می‌کنند. در ادامه به توضیح این سیستم‌های رنگی با نام‌های RGB، HSB، HSL و همچنین CMYK می‌پردازیم و اینکه بهترین انتخاب برای ما کدام خواهد بود.

اینکه چطور در سیستم رنگی HSB رنگ‌های مورد نظر خود را بسازیم و چطور از آن در طراحی‌هایمان استفاده کنید. با نحوه ساختن رنگ‌های Secondary، Primary و همچنین Tertiary آشنا می‌شویم و رنگ‌های مرتبط با این ترکیب‌ها را می‌سازیم. با تاثیرات تایپوگرافی بر طراحی‌هایمان آشنا می‌شویم و نحوه استفاده صحیح آن را مشاهده می‌کنیم.

در نهایت با قواعد متریال ۳ گوگل در این بخش‌ها آشنا می‌شویم و کار را با آن جلو می‌بریم.

ساخت و نامگذاری رنگ‌ها

در ابتدا به معرفی سه دسته‌بندی رنگ‌ها شامل رنگ‌های Neutral، Accent Colors و همچنین Neutral Variant می‌پردازیم و ساخت صحیح این مجموعه‌ها را با هم جلو خواهیم رفت. اینکه هر کدام از رنگ‌ها در کجا و به چه شکلی استفاده می‌شوند را نیز فراموش نکردیم! با نحوه نامگذاری صحیح رنگ‌های این بخش به طور کامل آشنا می‌شویم تا در آینده دچار مشکلاتی نظیر عدم هماهنگی، عدم کاربری مناسب و … نشویم و همچنان رنگ‌هایمان به طور کامل قابلیت توسعه و تغییر داشته باشند.

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

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

ساخت و نامگذاری تایپوگرافی

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

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

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

نکات آخر

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