صفر تا صد طراحی آیکون | درس دوم

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

3. چگونه یک آیکون طراحی کنیم

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

3.1 مرحله تحقیق

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

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

مرحله تحقیق در طراحی آیکون

سوال اول: به چه اندازه هایی نیاز دارید؟

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

باید بدانید آیکون قرار است کجا مورد استفاده قرار بگیرد و برای استفاده در آن محل به چه اندازه هایی نیاز دارید؟

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

سایز (اندازه) های مختلف آیکون ها

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

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

آیکون های کوچک:

• 12 * 12
• 16 * 16
• 24 * 24
• 32 * 32
• 48 * 48

آیکون های متوسط:

• 64 * 64
• 96 * 96
• 128 * 128
• 256 * 256

آیکون های بزرگ:

• 512 * 512
• 1024 * 1024

در برخی موارد، مانند اپلیکیشن ها، می توانید اندازه های دقیق را مستقیما از تولیدکنندگان سیستم عامل ها پیدا کنید، مانند نمونه های زیر:

دستورالعمل های آیکون اپل

دستورالعمل های آیکون گوگل (اندروید)

اندازه پایه شما چه مقدار باید باشد؟

اکیداً توصیه می کنم که هنگام کار روی پروژه های چند اندازه، همیشه از کوچکترین اندازه ی ممکن، کار را شروع کنید. این اندازه به «اندازه پایه» شما تبدیل می شود، که بعدا به منظور ایجاد سایر اندازه ها از آن استفاده خواهید کرد. دلیل این امر ماهیت Pixel-Perfect آیکون های شماست که در صورت بزرگ ساخته شدن و سپس کوچیک کردن آنها، دچار مشکل می شوند.

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

اندازه پایه (base-size) آیکون ها

به عنوان مثال اگر من نیاز به آیکون با سه اندازه گوناگون (16 در 16، 32 در 32 و 64 در 64) دارم، همیشه اطمینان حاصل می کنم که از 16 در 16 پیکسل به عنوان اندازه پایه خود شروع کنم و سپس موارد دیگر را با دوبرابر کردن آن ایجاد کنم.

ویژگی های اصلی موضوع موردنظر (برای طراحی آیکون) چیست؟

وقتی مسئله اندازه را فهمیدیم، باید لحظاتی را درباره ویژگی های اصلی موضوع موردنظرمان تامل کنیم. (همان مفهومی که می خواهیم به وسیله آیکون آن را تصویرسازی کنیم.) به طور مثال اگر می خواهیم برای دکمه ای که عمل Save را انجام می‌دهد، آیکون طراحی کنیم؛ باید بررسی کنیم و پاسخ این سوال را پیدا کنیم که کدام اشیاء یادآور مفهوم ذخیره سازی (Save) برای کاربر ما خواهد بود. از نظر من، این مرحله ضروری ترین مرحله است، چرا که به ما این امکان را می دهد تا صفات اصلی آن موضوع را شناسایی کرده و بهترینِ آنها را انتخاب کنیم.

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

در حالی که برخی تمایل دارند وقت کمتری را برای این بخش از تحقیق اختصاص دهند، افزودن حتی یک دقیقه زمان اضافی در این بخش می تواند چندین برابر مفید باشد، به خصوص اگر تازه کار را شروع کرده اید. زیرا با رسیدن به «درکی درست» از موضوع به احساس خوشایندی دست خواهید یافت که غیر قابل وصف است.

از کدام سبک استفاده کنید؟

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

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

امروزه از آن سد و محدودیت پیکسلی عبور کرده ایم و همین مسئله به ما امکان رشد و ایجاد سبک های جدید را داده است، سبک هایی که دائما در حال تغییر و تکامل هستند.

محبوب ترین سبک های امروزی عبارتند از:

• pixel art
• flat
• material
• line art
• isometric
• glyph
• skeuomorphic
• dimensional
• hand-drawn
• animated

سبک ها و استایل های مختلف در طراحی آیکون

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

همانطور که قبلا هم گفتم، اکیداً توصیه می کنم که از همان ابتدا، سبک مناسب برای موضوع مورد نظرتان را پیدا کنید، زیرا در غیر این صورت ممکن است با امتحان سبک های مختلف، وقت زیادی را از دست دهید.

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

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