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

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

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

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

1. آیکون چیست؟

ریشه یونانی کلمه آیکون

طبق گفته گوگل این کلمه از ریشه یونانی “eikόn” گرفته شده و به این شکل تعریف می شود:

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

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

فرقی نمی کند که از ویندوز استفاده می کنید یا مک، آیفون یا اندروید، هر یک از این موارد دارای interface (رابط کاربری) خاص خود هستند که بر مبنای آیکون هایی با اشکال، رنگ ها و اندازه های مختلف بنا شده اند.

2. چرا از آیکون ها استفاده می‌کنیم؟

از نظر تاریخی اولین مجموعه از آیکون های رایانه ای تقریبا 37 سال پیش تصویرسازی شد. هنگامیکه یک دانشمند علوم کامپیوتر، به نام David Canfield Smith به طراحی به نام Norman Lloyd Cox که درحال کار روی GUI (رابط کاربری گرافیکی) Xerox Star 8010 بود، پیوست. وظیفه آنها تسهیل تعامل کاربر با ماشین بود. آنها به شکلی خلاقانه با معرفی نمادهای گرافیکی که بازتاب دهنده اشیای دنیای واقعی بودند و کاربر می‌توانست بین این دو ارتباط برقرار کند، این کار را انجام دادند.

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

تسهیل کننده تعامل

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

تسهیل تعامل با رابط کاربری به واسطه آیکون ها

از بین برنده موانع زبانی

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

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

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

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

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

چشم نواز اما تفکر برانگیز

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

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

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

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

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

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