آموزش انیمیشن UI با استفاده از Sketch 3، Principle App و Flinto

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

معرفی/تبلیغاتی Intro / Promo

• معرفی/تبلیغاتی Intro / Promo

طرح 3 مبانی Sketch 3 Basics

• معرفی Introduction

• شناخت تابلوهای هنری Understanding Artboards

• استفاده از رنگ ها و سبک های گرافیکی Using Colors and Graphic Styles

• ایجاد سبک های متن Creating Text Styles

• با استفاده از نمادها Using Symbols

• 10 نکته سریع! 10 Quick Tips!

طرح 3 چیزهای سطح متوسط Sketch 3 Intermediate Level Stuff

• طراحی با شبکه های چیدمان Designing with Layout Grids

• ایجاد اشکال سفارشی Creating Custom Shapes

• نقاب زدن Masking

• افزونه: دکمه پویا Plugin: Dynamic Button

• پلاگین: Craft Duplicate توسط InVision Plugin: Craft Duplicate by InVision

• پلاگین: Craft Photos توسط InVision Plugin: Craft Photos by InVision

• پلاگین: Craft Library توسط InVision Plugin: Craft Library by InVision

• پلاگین: Craft Prototype توسط InVision Plugin: Craft Prototype by InVision

• میانبرهای صفحه کلید مورد علاقه من My Favorite Keyboard Shortcuts

• میانبرهای رایج و ایجاد خود Common Shortcuts and Creating your Own

• پلاگین های طرح مورد علاقه (نسخه 2017) Favorite Sketch Plugins (2017 Version)

طرح مطالب پیشرفته Sketch Advanced Stuff

• ایجاد یک سیستم دکمه با نمادهای تودرتو Creating a Button System with Nested Symbols

• ایجاد یک نوار ناوبری چپ با نمادهای تودرتو Creating a Left Navigation Bar with Nested Symbols

اصل - ابزار ساده UI انیمیشن و نمونه سازی Principle - Simple UI Animation and Prototyping Tool

• مقدمه ای بر اصل Introduction to Principle

• اتصال صفحات و ایجاد پیوند با رویدادها Connecting Screens and Creating Links with Events

• ایجاد انیمیشن های سفارشی در اصل Creating Custom Animations on Principle

• تمرین: یک ناوبری زبانه دار ایجاد کنید PRACTICE: Create a tabbed Navigation

• تعاملات مداوم: کشیدن، پیمایش و صفحه‌بندی Continuous Interactions: Dragging, Scrolling and Paging

• تمرین: ایجاد یک نمونه اولیه قابل پیمایش PRACTICE: Creating a Scrollable Prototype

• قدرت رانندگان در اصل The Power of Drivers on Principle

• تمرین: ایجاد یک حرکت کاراکتر با کشیدن تعامل PRACTICE: Creating a Character Move With Dragging Interaction

• تمرین: پیمایش صفحه شده با استفاده از درایورها PRACTICE: Paged Scrolling using Drivers

• تمرین: ایجاد یک اثر اختلاف منظر PRACTICE: Creating a Parallax Effect

• تمرین: کشیدن و رها کردن ساده PRACTICE: Simple Drag And Drop

• تمرین: انیمیشن کاراکتر با استفاده از اصل PRACTICE: Character Animation Using Principle

• نمونه اولیه خود را به GIF صادر می کنید و روی دستگاه Mocking up on Device Exporting your prototype to GIF and Mocking up on Device

Flinto - ابزار انیمیشن رابط کاربری Flinto - User Interface Animations Tool

• معرفی فلینتو Intro to Flinto

• مبانی و رابط کاربری Flinto برای مک The Basics and the UI of Flinto for Mac

• ایجاد انتقال صفحه در Flinto Creating Screen Transitions on Flinto

• ایجاد روکش های معین با استفاده از Flinto Creating Modal Overlays Using Flinto

• افزودن لایه‌های انتقال در فلینتو برای مک Adding Layer Transitions On Flinto for Mac

• اتصال لایه ها در فلینتو Connecting Layers on Flinto

• ایجاد مناطق قابل پیمایش با استفاده از Flinto برای Mac Creating Scrollable Areas using Flinto for Mac

• ایجاد جریان انیمیشن کارت در فلینتو Creating Cards Animation Flow on Flinto

• اضافه کردن صدا به نمونه اولیه خود در فلینتو Adding Sound To Your Prototype on Flinto

• استفاده از ژست‌های ماوس روی و خروج ماوس (هور) - ایجاد آزمون Using Mouse Over and Mouse Out Gestures (hover) – Creating Quiz

پروژه ها Projects

• نمونه سازی یک پوشش مودال در فلینتو Prototyping a modal overlay on Flinto

• ایجاد یک انیمیشن اختلاف منظر گام به گام Creating an onboarding walkthrough parallax animation

• طراحی یک تصویر بابانوئل (ویژه تعطیلات) Designing a Santa Illustration (Holiday Special)

• ایجاد افکت اختلاف منظر با استفاده از فلینتو Creating a Parallax Effect Using Flinto

• ایجاد یک نمونه اولیه کامل با استفاده از Marvel و Sketch Creating a full Prototype using Marvel and Sketch

• ایجاد آیکون های متحرک با استفاده از Flinto Create Animated Icons Using Flinto

• طراحی انیمیشن Refresh Designing a Refresh Animation

• نمونه سازی یک انیمیشن Refresh Prototyping a Refresh Animation

• ایجاد یک جریان ثبت نام ساده در Sketch 3 Creating a simple signup flow on Sketch 3

• ایجاد یک نمونه اولیه از یک جریان ثبت نام با استفاده از برنامه Marvel Creating a prototype of a Signup Flow using Marvel App

• اضافه کردن صدا به نمونه های اولیه خود - ایجاد Drumpad Adding Sound to your Prototypes - Creating a Drumpad

EXTRA: مقدمه ای بر طراحی و نمونه سازی EXTRA: Intro to Design and Prototyping

• مقدمه ای بر نمونه سازی Introduction to Prototyping

• ابزار طراحی Design Tools

• ابزارهای نمونه سازی Prototyping Tools

• ابزارهای انیمیشن Animation Tools

• پلاگین های طرح مورد علاقه من (ضبط شده به صورت زنده) My Favorite Sketch Plugins (recorded live)