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

 

۷ نکته طراحی آیکون تأثیرگذار

۱-رویکرد جامع طراحی آیکون

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

در مقاله Designing an iconic language در سایت Turbo Mil ، Yegor Gilyov که نویسنده آن است اظهار داشته: “اگر قرار است چندین آیکون رسم کنید، باید قبل از پرداختن به طراحی‌ها، به تصاویر کل مجموعه بیاندیشید”. این یکی از دو نکته اصلی است که در این مقاله درباره طراحی آیکون به آن پرداخته شده است. او به این مسئله می‌پردازد که چگونه قصور در برنامه‌ریزی برای اینکه ببینیم آیکون‌ها چگونه با یکدیگر کارخواهند کرد، از همان ابتدای کار، تبدیل به وقت تلفی شده و طراحی دوباره را اجتناب ناپذیر می‌کند.

۲-مخاطب خود را در نظر داشته باشید

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

سایت Turbo Milk یک مقاله خوب دیگری به نام ۱۰ Mistakes in Icon Design دارد. در این مقاله، به چند مورد واضحی اشاره شده است که در بسیاری از طراحی‌های آیکون اتفاق می‌افتد. در نکته هفتم مقاله در خصوص ویژگی‌های ملی و اجتماعی بحث شده است. “همیشه لحاظ کردن این مورد که آیکون شما قرار است در چه وضعیت و موقعیتی مورد استفاده قرار گیرد، اهمیت دارد. یک جنبه مهم در اینجا، خصوصیات ملی است. رسوم فرهنگی، محیط اطراف و ژست‌ها می‌توانند از کشوری به کشوری دیگر به طور کلی متفاوت باشند.” سپس در این مقاله مثالی از صندوق‌های نامه ارائه شده که در کشورهای مختلف تفاوت‌های بسیار زیادی با هم دارند. اپل از همین مثال در دستورالعمل‌های رابط انسانی استفاده می‌کند.

پس طراحی یک آیکون بین‌المللی بر اساس صندوق نامه یکی کشور، ایده خوبی نیست (مثالی خاص از کارهایی که نباید در طراحی انجام داد). در ادامه نیز، این مقاله به آیکون اپل اشاره می‌کند که به دلیل جهانی بودن شکل تمبر نامه‌ها، بهتر قابل تشخیص است.

۳-طراحی برای سایزی که آیکون قرار است مورد استفاده قرار گیرد

اگر به صورت برداری (vector) کار کنید و آیکون خود را در نرم‌افزار Illustrator طراحی نمایید، ممکن است بخواهید اندازه آن را بزرگ کرده و در هر سایزی از آن استفاده کنید. این کار برای آیکون‌ها جواب نمی‌دهد. چیزی که در سایز ۵۱۲ پیکسل خوب به نظر می‌آید، در اندازه ۱۶ پیکسل مانند یک لکه تار دیده می‌شود. آیکون‌ها باید دارای طراحی پایه‌ای باشند که به عنوان نقطه شروع مورد استفاده قرار گیرند، اما هر سایز خروجی باید طراحی بهینه خود را داشته باشد.

اگرچه طراحی آیکون * . این یکی از دلایلی است که فتوشاپ مانند سایر نرم‌افزارها، راه‌حل خوبی است. طراحانی که آیکون را در ایلاستریتور طراحی می‌کند، از فتوشاپ برای تمیز کردن کار استفاده می‌کنند یا از چند حلقه برای بهتر به نظر رسیدن آیکون در سایزهای کوچک استفاده می‌کنند. پس این باور را کنار بگذارید که طراحی آیکون حتماً مبتنی بر طراحی برداری (vector-based) است. چراکه در نهایت کار را به صورت پیکسلی خروجی خواهیم گرفت.

در فتوشاپ نیز ابزارهای برداری و ماسک‌ها وجود دارد که می‌توانید مانند محیط مقیاس‌پذیر برداری سایر برنامه‌ها از آن بهره ببرید. اگر با فتوشاپ و ایلاستریتور به یک اندازه آشنا باشید، ممکن است از یک گردش کاری استفاده کنید که از هر دو برنامه استفاده نمایید. استفاده از Smart Object ها را در نظر داشته باشید. برای فتوشاپ می‌توانید از یک افزونه به نام Icon Builder نیز استفاده نمایید.

رویکردی که برای طراحی آیکون‌های بزرگ و کوچک لحاظ می‌شود کاملاً متفاوت است. سایت Firewheel مقاله خوبی به نام Icon Design: Bitmap vs Vector دارد که موضوع مقیاس‌پذیری و بزرگنمایی را نیز آورده است. مقاله Icon Design Sizing را نیز در سایت Mezzoblue بخوانید. این مقاله در خصوص مشکلات طبیعی طراحی آیکون‌ها در سایز کوچک را بررسی کرده است.

۴-آیکون را ساده و نمادین نگه دارید

در سیستم‌های عامل امروزی آیکون‌هایی وجود دارد که تا اندازه بزرگ (۵۱۲ در ۵۱۲ پیکسل برای اندازه بزرگ آیکون) مقیاس‌پذیر هستند و این وسوسه را به وجود می‌آورد که در این اندازه باید جزئیات بیشتری را در آن جای داد. درحالی‌که افزودن جزئیات واقع‌گرایانه به آیکون آن را جالب می‌کند، نباید سادگی و اثرگذاری آن را از بین ببرد.

مجله Smashing Magazine مقاله‌ای در خصوص دستورالعمل‌های رابط انسان در طراحی آیکون شرکت اپل دارد. بخش Realism in Aqua به نکات خوبی در خصوص محدودیت‌های رئالیسم در طراحی آیکون اشاره می‌کند و این مورد را نیز بررسی می‌کند که چه زمانی به نمادپردازی نیاز است. این بخش مقاله مسئله تفاوت بین رئالیسم و سادگی در طراحی آیکون را مورد بحث قرار می‌دهد.

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

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

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

۵-نورپردازی، بازتاب و سایه‌ها

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

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

۶-استفاده از پرسپکتیو محدود

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

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

۷-ساخت سبک‌های یکسان مجموعه آیکون‌ها

نورپردازی و پرسپکتیو قطعاً در ایجاد استایل یک آیکون مشارکت دارند؛ اگرچه عوامل زیاد دیگری وجود دارند که بر سبک و استایل تأثیرگذارند. اگر سعی دارید که آیکون خود را با سبک Grunge-Style طراحی وبسایت سازگار کنید، می‌توانید به استایل طراحی آیکون خود، بافت (texture) بیفزایید.

مجموعه‌های آیکون ویژگی‌های خاصی دارند که آن‌ها را برجسته می‌کند. در دستورالعمل Echo Icon ، مجموعه آیکون اینگونه شرح داده شده است: “مجموعه جدیدی از آیکون‌ها برای گنجاندن در Fedora. آیکون‌های Echo با پرسپکتیو پویا، استفاده از کنتراست بالا و رنگ‌های پرجنب و جوش سعی دارند با حفظ تمیزی و طراحی ساده خود، واقعی‌تر به نظر برسند.” مورد دیگری که این مجموعه را برجسته می‌کند، استفاده از نمای کلی یکسانی است. تصویر زیر مثالی از این مورد را نشان می‌دهد.

شروع به کار طراحی آیکون

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

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

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

مجموعه‌های آیکونی حرفه‌ای الهام‌بخش

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

مجموعه آیکون کلاسیک از وبسایت Icon Drawer

این مجموعه دارای آیکون‌های حرفه‌ای نمادین، رئالیسم کارتونی و طراحی‌های جالب است. بعد از اینکه Jesse Bennet-Chamberlain آن‌ها را برای بازطراحی Expression Engine استفاده کرد واقعاً شگفت‌زده شدم. این یک طراحی سایت عالی است و آیکون‌ها با استایل آن همخوان و سازگار هستند.

خانواده Chalkwork از سایت Mezzoblue

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

نتیجه‌گیری

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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام مدرسه گرافیک پلاس عضو شوید.

کلمات کلیدی: 7 نکته طراحی آیکون تأثیرگذار_آیکون تاثیرگذار_طراحی_طراحی آیکون_مقاله گرافیک_نکات طراحی آیکون