استفاده از آیکون های زیبا در طراحی وب

آیکون

استفاده از آیکون های زیبا در طراحی وب

آیکون

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

آیکون

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

به همین دلیل توسعه دهندگان وب به فکر دیگری افتادند؛ استفاده از Icon ها به صورت وکتور!

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

آیکون

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

در این مقاله می‌خواهیم طراحی‌ها و مجموعهIcon ‌های زیبا برای طراحی سایت و برنامه نویسی پرکاربرد و زیباتر را معرفی کنیم.

1. The Noun Project

آیکون

The Noun Project یکی از بزرگترین کتابخانه های Icon در کل دنیا است و برای هر کاری که شما بخواهید آیکونی سراغ دارد. اکثر Icon های این کتابخانه از سمت طراحان حرفه ای ایجاد و منتشر شده اند. بنابراین چه توسعه دهنده‌ی وب هستید و چه توسعه دهنده برنامه های موبایلی، می توانید مطمئن باشید که آیکون های حرفه ای و بسیار با کیفیتی را در این سایت پیدا خواهید کرد.

? ویژگی های اصلی این کتابخانه:

آیکون های رایگان و پولی
دارای مجموعه آیکون (با یک تم و طرح)
دارای نرم افزار برای کاربران Mac
بروزرسانی و اضافه کردن آیکون های جدید به صورت هر روزه

2. Icon Monster

آیکون

Icon Monstr کتابخانه ای بسیار بزرگ با بیش از 4300 آیکون و 304 مجموعه است. تمام آیکون ها به دو صورت filled (تو پُر) و outline موجود می باشند تا شما بتوانید از آن ها در هر برنامه ای استفاده کنید. قابلیت جستجوی این وب سایت بسیار قوی است و به کاربران اجازه می دهد که Icon های مورد علاقه شان را در فهرست favorites ذخیره کنند.

? ویژگی های اصلی این کتابخانه:

تمام آیکون ها رایگان هستند
مجموعه آیکون های کاربردی
قابلیت دانلود آیکون ها با 4 فرمت متفاوت
دارای آیکون های کوچک شده مخصوص استفاده در وب

3. Good Stuff No Nonsense

آیکون

تعداد Icon های کارتونی و طراحی شده با دست در Good Stuff No Nonsense کم نیست! حتما دیده اید که برخی از وب سایت ها ظاهری دارند که انگاری با دست طراحی شده اند تا تجربه‌ی کاربری را از سمت مدرن و صنعتی دور کنند. در این نوع از وب سایت ها استفاده از Icon های Good Stuff No Nonsense بسیار به کار می آید. تمامی Icon های این وب سایت توسط یک طراح طراحی شده اند بنابراین می توان مطمئن بود که همگی یک دست و مرتب هستند. همچنین اکثر آیکون ها به صورت وکتور شده نیز در دسترس هستند.

? ویژگی های اصلی این کتابخانه:

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

4. Orion Icon library

آیکون

Orion از تازه وارد های دنیای Icon ها محسوب می شود. این پروژه توسط Pixeden شروع شده است و هدف آن ایجاد آیکون های انعطاف پذیر و مختلف برای طراحی وب است. این Icon ها در خود وب سایت و با ویژگی های آن قابل شخصی سازی و تغییر هستند؛ به طور مثال می توانید طول و عرض Icon ها را تغییر دهید، زاویه‌ی گوشه ها را تغییر دهید، stroke اضافه کنید، رنگ های اولیه و ثانویه Icon را تغییر دهید و … . قابلیت جستجوی این سایت نیز بسیار قوی می باشد و می توانید به راحتی آیکون های مورد نظرتان را پیدا کنید.

? ویژگی های اصلی این کتابخانه:

هزاران Icon به صورت رایگان + Icon های بیشتر در صورت خرید حساب pro
حساب pro به شما اجازه می دهد به هر شکلی که دوست دارید از Icon ها استفاده کنید (بدون license)
استفاده‌ی بسیار آسان و ویرایش ساده‌ی Icon ها

5. IcoMoon

آیکون

کتابخانه‌ی IcoMoon مورد استفاده‌ی شرکت های بزرگ و کوچک است و از یک نظر با بقیه‌ی کتابخانه ها تفاوت اساسی دارد؛ این کتابخانه آیکون ها را به صورت فونت های شخصی سازی شده نیز ارائه میدهد و به شما اجازه می دهد glyph ها را ویرایش کنید. این وب سایت 4000 آیکون برای طراحی سایت و نرم افزارها را به صورت رایگان در اختیار شما قرار می دهد. قوانین استفاده و license برای مجموعه آیکون ها به طور شفاف و کامل توضیح داده شده است بنابراین جای هیچ گونه ابهام و سردرگمی را باقی نمی گذارد. از ویژگی های بسیار عالی این کتابخانه این است که به شما اجازه می دهد آیکون های انتخاب شده و شخصی سازی شده‌ی خود را به صورت یک فایل فونت در آورده و در وب سایت خود استفاده کنید؛ بدین صورت هیچ گاه از آیکون هایی که مورد نیازتان نباشد استفاده نخواهید کرد.

? ویژگی های اصلی این وب سایت:

دارای آیکون های رایگان و پولی
وجود گزینه های مختلف جهت انتخاب نوع فرمت آیکون ها
دارای ابزاری کامل برای مدیریت آیکون های شما
بروزرسانی های رایگان و ساده از طریق Cloud synching (همگام سازی ابری)

6. Freepik

آیکون

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

? ویژگی های اصلی این کتابخانه:

رایگان برای استفاده‌ی شخصی و تجاری
دارای سه فرمت PNG و EPS و SVG برای دانلود آیکون ها
فایل های گرافیکی و وکتور های دیگر این وب سایت به راحتی قابل ویرایش هستند بنابراین می توان از آن ها به عنوان آیکون استفاده کرد.
مرتبا آیکون های جدیدی به سایت اضافه می شوند.

7. Pictos

Pictos آیکون ها را هم به صورت فونت و هم به صورت Pictos Redux ارائه می دهد که سیستمی برای ویرایش و تغییر اندازه‌ی آیکون ها و مخصوص طراحان وب است. Icon های این سایت به سه صورت line (خطی) و solid (تو پُر) و color (رنگی) ارائه می شوند بنابراین هر نوع نیازی را تامین می کنند. تعداد Icon های کلاسیک این وب سایت به 800 مورد می رسد که به صورت خطی هستند.

? ویژگی های اصلی این کتابخانه:

دانلود رایگان و پولی Icon ها
ارائه‌ی Icon ها در فرمت های مختلف
آیکون ها در سه نوع Line و color و solid موجود اند
تمامی Icon ها به صورت 24 در 24 پیکسل طراحی شده اند

8. Flaticon

Flaticon با مجموع 1 میلیون (!) Icon وکتوری یکی از غول های این لیست محسوب می شود. کاربران این کتابخانه می توانند تعداد نامحدودی Icon را دانلود کرده و به ویژگی های شخصی سازی آن ها نیز دسترسی داشته باشند. تمامی Icon ها قابلیت شخصی سازی دارند. بنابراین می توانید بر اساس نیاز خود آن ها را تغییر دهید تا پاسخگوی پروژه های شما باشند. Flaticon قابلیت تولید Icon به صورت فونت را نیز می دهد که می توانید از آن استفاده‌ی شخصی و یا حتی تجاری داشته باشید. همچنین اگر از کاربران Mac هستید، می توانید نرم افزار Flaticon را دانلود کنید تا به راحتی با Icon ها در برنامه های Photoshop و Sketch و Illustrator و … کار کنید.

? ویژگی های اصلی این کتابخانه:

دارای ثبت نام رایگان و پولی
هر ماه مجموعه Icon های جدیدی اضافه می شود
می توانید Icon ها را در چندین فرمت مختلف دانلود کنید
علاوه بر Icon های بر پایه‌ی وکتور، Icon های raster (پیکسلی) نیز قابل دانلود هستند.

9. Font Awesome

کتابخانه‌ی Font Awesome در واقع یک فونت است که شامل 1500 Icon می باشد. این Icon ها به راحتی و با دستورات CSS ویرایش می شوند و با انواع فریم ورک ها سازگاری دارند. تمامی Icon های Font Awesome بر پایه‌ی وکتور هستند بنابراین هیچ جای نگرانی برای کیفیت نیست و همه چیز دست طراح خواهد بود. نکته‌ی مهم اینجاست که هیچ کدام از این Icon ها به جاوا اسکریپت وابسته نیستند بنابراین در زمینه‌ی پشتیبانی از مرورگر ها مشکلی ندارند. همچنین Icon های متحرک و دارای انیمیشن نیز در این لیست موجود می باشند.

? ویژگی های اصلی این کتابخانه:

تمامی آیکون ها رایگان هستند.
لحاظ کردن موضوع accessibility
بروزرسانی آیکون ها در وب سایت های مختلف بسیار آسان است.
برای تمامی Icon ها یک cheat sheet (فایلی که تمامی کلاس ها و دستورات در آن آمده است) در نظر گرفته شده است

10. Behance

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

? ویژگی های اصلی این کتابخانه:

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

 

بیشتر بخوانید : فاوآیکون چیست؟

Share this post

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.