آیکون گرافی چیست؟ | راهنمای طراحی آیکون‌ها

‌آیکون‌ها بخش‌های کوچک اما اصلی طراحی هستند. هر سیستم طراحی بزرگی از واحدهای کوچکی تشکیل شده که بیشتر این واحدها را آیکون‌ها تشکیل می‌دهند. این آيکون‌های ریزمیزه می‌توانند هریک مفهوم مستقلی را به طرح ما بدهند و فضای زیادی هم اشغال نکنند. به همین دلیل دیجیتال مارکتینگ باید بسیار از آیکون گرافی متشکر باشد! در این مطلب از آژانس دیجیتال مارکتینگ تاس به بررسی همه جانبه‌ی آيکون‌ها و چگونگی به کارگیری آن‌ها خواهیم پرداخت:

• آیکون گرافی چیست؟
• عناصر اصلی در آیکون گرافی چیست؟ 
• تصویرسازی در آیکون گرافی چگونه است؟
• بهترین ابزارهای طراحی آیکون

پیشنهاد می کنیم مطالعه کنید:

کاربرد قوانین گشتالت در طراحی و هک کردن ذهن مخاطب 

آیکون گرافی چیست؟

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

برای تغییر ظاهر وب سایت خود یا بهتره مندی از خدمات UI  می توانید از خدمات طراحی ui  تاس استفاده کنید

عناصر اصلی در آيکون گرافی

۱. شبکه/ Grid

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

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

۲. رنگ

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

۳. اندازه

تعیین اندازه در طراحی آیکون سلیقه‌ای نیست و قوانینی در این زمینه وجود دارند. تمام آیکون‌هایی که برای یک طرح انتخاب می‌کنید باید یک اندازه باشند. اندازه آيکون را براساس گرید صفحه تعیین می‌کنیم. مثلا اگر پایه گرید شما ۸ باشد، شما باید آیکون‌هایتان را در اندازه‌های ۱۶، ۲۴ و ۳۲ (مضرب‌های ۸) بسازید. در نهایت هر سایزی که برای آیکون خود تعیین می‌کنید بهتر است دو پیکسل اضافه هم برای حاشیه‌ها در نظر بگیرید.

۴. Fill یا Stroke ؟ مساله این است!

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

۵. انتخاب سبک و استایل

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

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

تصویرسازی در آیکون گرافی

برای ایجاد یک تصویر که منعکس کننده مفهومی باشد، بایستی به موارد زیر توجه کنید:

۱. اشکال هندسی

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

۲. اشکال ارگانیک

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

۳. گوشه‌ها

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

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

در ابزار Inspector می‌توانید با استفاده از ویژگی Corner Radius گوشه‌ها را گرد کنید. اگر تمام مسیر یا Path را انتخاب کنید می‌توانید تمام گوشه‌ها را همزمان دور و نزدیک کنید. اگر لازم است آن‌ها را جداگانه تنظیم کنید باید به حالت ویرایش بروید.

۴. تشبیه

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

برای تغییر ظاهر وب سایت خود یا بهتره مندی از خدمات UI  می توانید از خدمات طراحی ui  تاس استفاده کنید

۵. پرسپکتیو

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

۶. تایپ

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

ابزارهای مناسب برای طراحی آیکون

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

جمع‌بندی

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