iHMahmoodi
Visual Designer

آموزش UI/UX : مدیریت و دانلود پک ‌های رایگان آیکان ‌های SVG

How to search and organize SVG icons offline + Free SVG Icon Packs

آموزش UI/UX : مدیریت و دانلود پک ‌های رایگان آیکان ‌های SVG
آموزش UI/UX : مدیریت و دانلود پک ‌های رایگان آیکان ‌های SVG

مدیریت و دانلود پک ‌آیکان های SVG برای طراحی رابط کاربری

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

همچنین 15 پک ایکان SVG شامل هزاران آیکان مختلف بصورت مرتب و دسته بندی آماده کرده‌ام که می توانید از طریق ثبت ایمیل خود در فرم زیر لینک دانلود آنها را در ایمیل خود دریافت کنید.

این پک ها شامل:

  1. 70 Social Icons
  2. BigMug Line
  3. Dripicons
  4. Essential Icons
  5. Evericons
  6. Feather
  7. InVision Essentials
  8. Ionicons
  9. Line Awesome
  10. macOS Cursors
  11. Micon
  12. Mobirise Icons
  13. Phosphor
  14. Themify Icons
  15. Unicons

چطور قرار هست آِیکان ها را مدیریت و دسته بندی کنیم؟

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

از جمله دیگر قابلیت های این نرم افزارها:
1- مدیریت و دسته بندی آیکان ها
2- ساخت گروه آیکان جدید و اختصاصی
3- جستجو درآیکان ها
4- داشتن قابلیت تیمی برای استفاده از آیکان های SVG
5- تغییر رنگ و ویرایش آیکان ها

 

آیکان‌های SVG چیست؟

SVG یا Scalabe Vector Graphics به گرافیک‌های وکتوری اجازه می‌دهد تا در محیط مرورگر به اجرا در بیاید. در حال حاضر SVG در حال تبدیل شدن به یک استاندارد اصلی برای وب آیکون‌ها و انیمیشن‌ها است. نه تنها میزان مقیاس‌پذیری بیشتری ارائه می‌دهند بلکه سرعت و پایداری بسیار بیشتری را نیز به نسبت فونت آيکون‌ها در اختیار شما می‌گذارند. از آنجایی که SVGها به صورت کامل از کدهایی تشکیل می‌شود نیازی به import کردن از فایل‌های بزرگ خارجی ندارند. همچنین باید بگویم که در مقایسه با JPG و PNG اندازه کمتری دارند.

SVG چگونه کار می‌کند؟ 

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

اگر می‌خواهید چنین محدودیت‌هایی را پشت سر بگذارید پس باید به صورت مستقیم با خود SVG ارتباط برقرار کنید. می‌توانید این کار را به صورت inline در سندهای HTMLتان انجام دهید. حتی می‌توانید از CSS نیز استفاده کنید.

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

 

پک های آیکان های SVG دیگر را از کجا دانلود کنیم؟

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

  1. FlatIcon
  2. Icons8
  3. freeicons
  4.  Iconscout

 

طراحی رابط کاربری (UI/UX) را از صفر از کجا یاد بگیرم؟

شما می توانید با عضویت در کانال یوتیوب من آموزش های دیگر طراحی رابط و تجربه کاربری ( UI / UX ) را دنبال و یاد بگیرید.

عضویت در کانال آموزشی یوتیوب : Youtube.com/AsteriXarts

 

اگر سوالی در مورد طراحی رابط کاربری UI داشتید، می توانید در قسمت نظرات بپرسید تا به آن ها جواب دهم.

بعد از روشن کردن VPN یا فیلترشکن، بر روی تصویر یا لینک یوتیوب پایین کلیک کنید تا ویدیوی آموزش را ببینید

 

نمونه کارهای طراحی رابط و تجربه کاربری ( UI/UX )

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

همچنین می توانید نمونه کارهای من را ببینید و من را در این شبکه ها دنبال کنید.

  1. Dribbble.com/iHMahmoodi
  2. Behance.net/iHMahmoodi
  3. Instagram.com/iHMahmoodi

 

در صورتی که سوالی داشتید در قسمت نظرات بپرسید و حتما جواب خواهم داد.

عضویت در کانال آموزشی: Youtube.com/AsteriXarts

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

 

UI/UX سفارش طراحی رابط و تجربه کاربری

 

 

خبرنامه هفتگی دیزاین DeXigner News
خبرنامه هفتگی دیزاین DeXigner News
هر هفته آموزش‌ها، مطالب و لینک های مفید در زمینه دیزاین را در ایمیل خود داشته باشید!
شما در هر زمانی می‌توانید ارسال خبرنامه را لغو کنید.

 

در خبرنامه ما عضو شوید
در خبرنامه ما عضو شوید
آخرین مطالب آموزش های ما را هر هفته در ایمیل خود داشته باشید.
شما می توانید در هر زمان عضویت خود را لغو کنید.
عضویت
اطلاع از
guest
0 نظرات
Inline Feedbacks
نمایش همه‌ی نظرات