آموزش دوره کامل طرح 5 - طراحی اپلیکیشن ها و وب سایت ها 2021

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

معرفی Introduction

• چرا این دوره را ساختم Why I built this course

• به انجمن بپیوندید! Join the Community!

• نسخه های طرح (لطفاً تماشا کنید) - به روز شده در سال 2020 Sketch Versions (PLEASE WATCH) - UPDATED 2020

دانشگاه اسکچ Sketch University

• مقدمه ای بر دانشگاه اسکچ Intro to Sketch University

• الزامات طرح Sketch Requirements

• واسط The Interface

• رابط طرح جدید (به روز رسانی 2020) New Sketch Interface (UPDATED 2020)

• حالت تاریک - (به روز شده در سال 2020) Dark Mode - (UPDATED 2020)

• مبانی لایه Layer Basics

• مبانی لایه: محدودیت های هوشمند، مرتب، و شبکه سازی (به روز شده در سال 2020) Layer Basics: Smart Constraints, Tidy, & Make Grid (UPDATED 2020)

• ویرایش اشکال Editing Shapes

• جای‌گذاری کد SVG (به‌روزرسانی‌شده در سال 2020) Pasting SVG Code (UPDATED 2020)

• عملیات بولی Boolean Operations

• عملیات بولی: عناصر و طرح‌های متنی (به‌روزرسانی‌شده در سال 2020) Boolean Operations: Text Elements & Outlines (UPDATED 2020)

• سایر ابزارهای شکل Other Shape Tools

• مقدمه ای بر متن Intro to Text

• اطلاعات بیشتر در مورد متن (به روز شده در سال 2020) More on Text (UPDATED 2020)

• تصاویر و بیت مپ Images & Bitmaps

• بهترین ویژگی جدید: داده (به روز رسانی شده در سال 2020) Best New Feature: Data (UPDATED 2020)

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

• سبک‌های متن جدید (به‌روزرسانی‌شده در سال 2020) New Text Styles (UPDATED 2020)

• گروه بندی لایه ها Grouping Layers

• یک ظاهر طراحی قسمت 1: پر کردن و مرزها Styling Part 1: Fills & Borders

• استایل بخش 2: سایه ها و تاری ها Styling Part 2: Shadows & Blurs

• استایل بخش 3: رنگ ها، گرادیان ها و سبک های لایه مشترک Styling Part 3: Colors, Gradients, and Shared Layer Styles

• نمادها Symbols

• بوم The Canvas

• صادرات Exporting

پروژه سرعت: طراحی صفحه نمایش اپلیکیشن موبایل Speed Project: Designing a Mobile App Screen

• معرفی پروژه سرعت Intro to Speed Project

• طراحی مجدد اپلیکیشن Headspace Re-designing Headspace App

• پس زمینه سربرگ Header Background

• متن و دکمه سرصفحه Header Text & Button

• نوار پیشرفت و سبک متن Progress Bar and Text Style

• اشکال بد بو Funky Shapes

• بخش پایانی Final Section

• آینه طرح Sketch Mirror

ایده کسب و کار Business Idea

• مقدمه ای بر ایده Intro to The Idea

• ایده The Idea

راه‌اندازی راهنمای سبک ما: رنگ‌ها Setting up our Style Guide: Colors

• مقدمه ای بر سبک های رنگی Intro to Color Styles

• سبک های پایه Basic Styles

• رنگ های خاکستری Grey Colors

• رنگ های تاکیدی Accent Colors

• مرزها و خطوط نمودار Borders & Chart Lines

• ورودی ها و سایه ها Inputs & Shadows

راهنمای سبک: تایپوگرافی Style Guide: Typography

• مقدمه ای بر سبک های تایپوگرافی Intro to Typography Styles

• راهنمای تایپوگرافی Typography Guide

• تایپوگرافی ادامه دارد Typography Continued

• دانلود طرح تایپوگرافی Typography Sketch Download

طراحی لوگو Logo Design

• مقدمه ای بر طراحی لوگو Intro to Logo Design

• فایل های مورد نیاز Required Files

• شروع نماد لوگوی ما Starting our Logo Icon

• نماد لوگو به پایان رسید Finishing Logo Icon

• نهایی کردن لوگوی ما Finalizing our Logo

• تبدیل لوگوی خود به نمادها Turning our Logo into Symbols

وایرفریمینگ Wireframing

• مقدمه ای بر Wireframing Intro to Wireframing

• مقدمه ای بر Wireframing Intro to Wireframing

• صفحه نمایش وایرفریم Wireframe Screens

• ابزارهای Wireframe مبتنی بر وب: رایگان و پولی Web Based Wireframe tools: Free & Paid

طراحی اپلیکیشن موبایل اسپندو Designing the Spendo Mobile App

• مقدمه ای بر طراحی اپلیکیشن موبایل Intro to Mobile App Design

• صفحه ورود Login Page

• پایان صفحه ورود Finishing Login Page

• نمادها Icons

• نمایه و پلاگین رابط کاربری متنوع Profile & Diverse UI Plugin

• نمایه ادامه دارد Profile Continued

• اتمام صفحه نمایه Finishing Profile Screen

• صفحه نمایش هزینه Expense Screen

• ایجاد نمادهای هزینه Creating Expense Symbols

• صفحه کارت های من My Cards Screen

• کارت اعتباری مجازی Virtual Credit Card

• اطلاعات کارت Card Info

• فراخوانی برای اقدام Call to Action

• چالش: آخرین صفحه را خودتان بسازید! CHALLENGE: Create the last screen on your own!

• REVEAL: چالش کامل شد REVEAL: Challenge Completed

طراحی اپلیکیشن وب اسپندو Designing the Spendo Web App

• مقدمه ای بر طراحی اپلیکیشن وب Intro to Web App Design

• طرح بندی برنامه وب Web App Layout

• نوار کناری: سربرگ Sidebar: Header

• نوار کناری: هدر ادامه دارد Sidebar: Header Continued

• آیتم های منو Menu Items

• حالت فعال Active State

• منوی بالا Top Menu

• منوی بالا را کامل کنید Complete Top Menu

• نمای اصلی: معاملات Main View: Transactions

• معاملات ادامه دارد Transactions Continued

• ایجاد نماد معامله Creating Transaction Symbol

• اضافه کردن صفحه بندی Adding Pagination

• در حال اتمام صفحه ما Finishing our Page

• راه اندازی صفحه تیم ما Setting up our Team Page

• صفحه تیم ادامه دارد Team Page Continued

• اضافه کردن یک عضو تیم جدید Adding a new Team Member

• بعدش چی میخوای ببینی؟ What do you want to see next?

شبکه بوت استرپ 12 ستونی 12 Column Bootstrap Grid

• معرفی گریدز Intro to Grids

• معرفی Bootstrap Grid Intro to Bootstrap Grid

• Bootstrap Grid ادامه دارد Bootstrap Grid Continued

• معرفی سیستم شبکه 8 نقطه ای Intro to 8 Point Grid System

• خواندن اضافی: سیستم شبکه 8 Pt Additional Reading: 8 Pt Grid System

صفحه فرود Spendo Spendo Landing Page

• معرفی صفحه فرود Intro to Landing Page

• صفحه فرود مثال: طرح Landing Page Example: Sketch

• راه اندازی Grid ما Setting up our Grid

• منو Menu

• بخش قهرمان Hero Section

• ماکت آیفون Iphone Mockup

• ماکت مرورگر Browser Mockup

• ماکت کارت اعتباری Credit Card Mockup

• نماد قلب Heart Icon

• نماد سپر Shield Icon

• نماد هشدار Alarm Icon

• پس از چرخش، جعبه مرزی را بازنشانی کنید Reset bounding box after rotation

• نماد دوربین Camera Icon

• نماد ابر Cloud Icon

• نماد حباب چت Chat Bubble Icon

• تبدیل آیکون Icon Conversion

• بخش ویژگی Feature Section

• ویژگی 1: محتوای متنی Feature 1: Text Content

• ویژگی 1 و 2 Feature 1 & 2

• گواهی بخش 1 Testimonial Part 1

• گواهی بخش 2 Testimonial Part 2

• منابع اضافی Additional Resources

• فراخوانی برای اقدام Call to Action

• پاورقی Footer

• فایل دانلود مستر اسپندو Master Spendo Download File

نمونه سازی Prototyping

• نمونه سازی سریع با طرح Speed Prototyping with Sketch

• نمونه اولیه برنامه Spendo Prototyping the Spendo App

• معرفی Invision Intro to Invision

• نمونه سازی با Invision Prototyping with Invision

• Craft by Invision Craft by Invision

• داده ها و تکراری در Craft Data & Duplicate in Craft

• نمونه سازی در Sketch and Sharing Prototyping in Sketch and Sharing

مقدمه ای بر UX Introduction to UX

• تجربه کاربری چیست؟ What is User Experience?

• جایی که UX شروع شد Where UX Started

• قابلیت استفاده Usability

• طراحی کاربر محور User Centered Design

• 10 اصل طراحی کاربر محور 10 Principles of User Centered Design

• نیازهای تجاری در مقابل نیازهای کاربر Business Needs vs User Needs

• ویژگی های یک طراح UX خوب Qualities of a good UX Designer

• فرآیند طراحی UX UX Design Proccess

ادامه تحصیل Continued Education

• منابع طرح Sketch Resources

• Dribble: Show & Tell for Designers Dribble: Show & Tell for Designers

• توسعه دهنده Handoff: Zeplin Developer Handoff: Zeplin