آموزش UI و طراحی وب با استفاده از Adobe Illustrator CC

سرفصل ها و درس ها

بررسی اجمالی Overview

• معرفی Introduction

• آیا من اکنون یک طراح UI UX هستم؟ Am I a UI UX designer now?

• طراحی رابط کاربری فتوشاپ در مقابل ایلاستریتور در مقابل اسکچ در مقابل InDesign در مقابل Adobe XP UI Design Photoshop vs Illustrator vs Sketch vs InDesign vs Adobe XP

• نقش ایلاستریتور در طراحی وب سایت چیست؟ What is Illustrator’s role when designing a website

شروع شدن Getting started

• فایل های تمرین، فایل های تکمیل شده و برگه تقلب را دانلود کنید Download the exercise files, completed files & cheat sheet

• آماده کردن فضای کاری و تنظیمات برگزیده Illustrator برای کار UI Getting your workspace & Illustrator preferences ready for UI work

برنامه ریزی Planning

• تفاوت بین نقشه سایت و وایرفریم چیست؟ What is the difference between a sitemap and a wireframe?

• ایجاد نقشه سایت در ایلاستریتور Creating a sitemap in Illustrator

راه اندازی صفحات اول شما Setting up your first pages

• از چه اندازه صفحه برای طراحی وب دسکتاپ، تبلت و موبایل استفاده کنید What screen sizes to use for desktop, tablet & mobile web design

• سیستم شبکه و طراحی پاسخگو برای موبایل و تبلت چیست؟ What is a grid system & responsive mobile & tablet design

• نحوه ایجاد یک شبکه 12 ستونی پاسخگو در ایلاستریتور How to make a responsive 12 column grid in Illustrator

همه چیز با Wireframing شروع می شود It all begins with Wireframing

• ایجاد یک قاب سیمی - وفاداری کم - طراحی شده با دست Creating a wireframe - Low fidelity - hand drawn

• ایجاد یک قاب سیمی - وفاداری بالا - ایلاستریتور Creating a wireframe - High Fidelity - Illustrator

• ایجاد وایرفریم تبلت و موبایل در ایلاستریتور Creating the Tablet and Mobile wireframes in Illustrator

طراحی صفحه اول شما Designing your first page

• الهام بخش برای طراحی وب شما Inspiration for your web design

• طراحی وب خود را با استفاده از قالب های Illustrator شروع کنید Starting your web design using Illustrator templates

• لوگوی برداری خود را به طرح بندی وارد کنید Bring in your vector logo to the layout

رنگ Color

• Color.Adobe.com Color.Adobe.com

• تطبیق رنگ برند با استفاده از Adobe Illustrator Matching brand colors using Adobe Illustrator

فونت ها Fonts

• استفاده از فونت های وب مناسب Google Fonts & Typekit Using the right web fonts Google Fonts & Typekit

• فیلم تولید - نهایی کردن ناوبری، جعبه قهرمان و فونت Production video - finalising nav, hero box and fonts

تصاویر Images

• تصاویر رایگان در مقابل حق امتیاز Free vs Royalty Free images

• افزودن پیوند برش و ماسک کردن تصاویر در ایلاستریتور Adding Linking Cropping & Masking images in Illustrator

• شستشوی تصاویر در ایلاستریتور با پس زمینه رنگی Washing out images in Illustrator with with coloured background

• نحوه استفاده از لایه ها در ایلاستریتور 2017 How to use layers in Illustrator 2017

ایجاد نمادها و نمادها Creating symbols & icons

• استفاده از Adobe Market برای نمادهای رایگان Using the Adobe Market for free icons

• استفاده از آیکون یاب برای آیکون های اجتماعی UI وب سایت رایگان Using Icon finder for free website UI social icons

• تراز و توزیع نمادها در Illustrator برای طراحی وب Align & distribute icons in Illustrator for web design

• نحوه تنظیم اشکال برداری در ایلاستریتور How to adjust vector shapes in Illustrator

• ایجاد نمادها و لوگوهای سفارشی با استفاده از ابزار شکل ساز در ایلاستریتور Creating custom icons & logos using the shape builder tool in Illustrator

• طراحی نمادها و لوگوها در ایلاستریتور با استفاده از ابزار قلم Drawing icons & logos in Illustrator using the pen tool

ساخت نسخه موبایل و تبلت وب سایت ها Creating mobile & tablet versions of websites

• ایجاد یک نسخه رایانه لوحی از طراحی وب رابط کاربری ما در Illustrator Creating a tablet version of our UI web design in Illustrator

• ایجاد یک طراحی وب سایت UI واکنش گرا برای موبایل در Illustrator 2017 Creating a mobile responsive UI website design in Illustrator 2017

صادرات Exporting

• مدل‌های رابط کاربری وب کامل صفحه خود را از Illustrator 2017 صادر کنید Export your full page web ui mockups from Illustrator 2017

• آیا باید از صادرات SVG در Illustrator 2017 برای طراحی وب استفاده کنم؟ Should I be using SVG export in Illustrator 2017 for web design

• صادرات تصاویر و تصاویر از Illustrator 2017 برای وب Exporting images and pictures from Illustrator 2017 for web

• صادرات لوگوها و نمادها از Illustrator 2017 برای رابط کاربری Exporting logos and icons from Illustrator 2017 for UI

• Retina - HiDPI و صادرات تصویر پاسخگو از Illustrator 2017 Retina - HiDPI and responsive image export from Illustrator 2017

• صادرات رابط کاربری خود برای طراحی برنامه با استفاده از Illustrator 2017 Exporting your UI for App design using Illustrator 2017

• صدور CSS برای توسعه دهندگان با استفاده از Adobe Illustrator 2017 Exporting CSS for developers using Adobe Illustrator 2017

کار به عنوان طراح رابط کاربری Working as a UI designer

• یادگیری زبان طراحی تعامل با کاربر UI Learning the language of UI user interaction design

• چگونه اولین کار خود را به عنوان یک طراح رابط کاربری دریافت کنید How to get your first work as a UI designer

مراحل بعدی Next steps

• مراحل بعدی برای تبدیل شدن به یک طراح UI شگفت انگیز Next steps to becoming an amazing UI designer

• اولین پروژه شما Your first project

برگه تقلب Cheat Sheet

• برگه تقلب Cheat sheet