آموزش گردش کار طراحی وب مدرن → ایده پردازی، قالب بندی سیمی، مدل سازی و نمونه اولیه

درس ها Lessons

• تنظیم فضای سفید و ریتم عمودی Adjusting white space and vertical rhythm

• نصب Zeplin برای همکاری در طراحی وب Installing Zeplin for Web Design Collaboration

• نوع مقیاس توضیح داده شده است Type Scale Explained

• ایجاد فونت آیکون سفارشی با استفاده از برنامه Iconmoon Creating Custom Icon Fonts using Iconmoon app

• چگونه یک پروژه طراحی وب را سازماندهی کنیم How to organize a web design project

• راهنماهای سبک رابط کاربری چیست؟ What are UI Style Guides?

• طراحی قسمت هدر/قهرمان قسمت 2 Designing Header/Hero area Part 2

• بخش طراحی مراحل برای دستگاه های کوچک Designing Steps Section for Small devices

• Zepling در مقابل Avocode → مقایسه ابزارهای همکاری طراح/توسعه‌دهنده Zepling vs Avocode → Comparison of Designer/Developer Collaboration tools

• راه اندازی تابلوهای هنری برای نمایش موبایل Setting up Art Boards for Mobile View

• ایجاد مشخصات فاصله خطوط قرمز برای توسعه دهندگان → قسمت 2 Creating Red Line Spacing specifications for Developers → Part 2

• شبکه برنامه ریزی برای نمایش تبلت/متوسط Planning grid for Tablet/Medium view

• معرفی Introduction

• چارچوب طراحی اتمی Atomic Design framework

• نمونه سازی با اپلیکیشن Invision Prototyping with Invision app

• نحوه استفاده از فضای سفید در طراحی وب How to use White Space in Web Design

• طراحی بخش تیم برای دستگاه های کوچک Designing Team Section for Small devices

• وایرفریم در ماکت های Balsamiq قسمت 1 Wireframing in Balsamiq mockups part 1

• طراحی فوتر برای نمایش تبلت Designing footer for tablet view

• استفاده از قراردادهای نامگذاری با توسعه دهندگان Maching naming conventions with Developers

• وایرفریم در ماکت های Balsamiq قسمت 2 Wireframing in Balsamiq mockups part 2

• طراحی ناحیه هدر/قهرمان برای تبلت Designing Header/Hero area for Tablet

• طراحی قسمت هدر/قهرمان قسمت 1 Designing Header/Hero area Part 1

• کدام سبک لایه ها را می توان به کد (HTML) تبدیل کرد؟ Which layer styles can be converted to Code (HTML)?

• بخش تیم طراحی قسمت 1 Designing Team section Part 1

• نمونه سازی با استفاده از Adobe XD و Figma 2020 Prototyping using Adobe XD and Figma 2020

• استفاده از قالب جمع آوری محتوا برای محتوای وب سایت Using Content Gathering template for website's content

• بیایید یک راهنمای سبک ایجاد کنیم Lets create a Style Guide

• مقدمه ای بر نمونه های اولیه Introduction to Prototypes

• سوالاتی که باید قبل از هر پروژه طراحی وب از مشتری خود بپرسید Questions to ask your client before every Web Design Project

• ملاحظات طراحی وب واکنشگرا قسمت 1 Responsive Web Design considerations Part 1

• طراحی هدر برای دستگاه های کوچک Designing Header for Small devices

• ایجاد مشخصات فاصله خطوط قرمز برای توسعه دهندگان → قسمت 1 Creating Red Line Spacing specifications for Developers → Part 1

• ایجاد راهنمای سبک رابط کاربری با Zeplin Creating UI Style Guide with Zeplin

• بخش مراحل طراحی قسمت 1 Designing Steps section Part 1

• فاز ایده پردازی (حداقل 3 طرح بندی) Ideation Phase (at least 3 layouts)

• Handoff در Figma و Adobe XD 2020 Handoff in Figma and Adobe XD 2020

• دریافت ایده های اولیه و طرح های اولیه Getting Initial Ideas and early Sketches

• ابزار آنلاین برای محاسبات شبکه Online Tools for Grid Calcuations

• نمونه هایی از راهنماهای سبک رابط کاربری Examples of UI Style Guides

• استفاده و صادرات آیکون های SVG در طراحی وب Using and Exporting SVG Icons in Web design

• راهنمای سبک در سال 2020 با استفاده از Figma Style Guide in 2020 using Figma

• سازماندهی لایه ها و گروه های PSD خود Organizing your PSD layers and Groups

• آشنایی با اپلیکیشن Invision برای نمونه سازی Getting familiar with Invision App for Prototyping

• بخش طراحی تیم قسمت 2 Designing Team section Part 2

• طراحی پاورقی قسمت 2 Designing Footer Part 2

• بخش مراحل طراحی قسمت 2 Designing Steps section Part 2

• الزامات دوره Course Requriements

• برنامه ریزی Grid خود برای نمای دسکتاپ Planning your Grid for Desktop View

• آنچه در این دوره به آن خواهیم پرداخت What we will cover in this course

• طراحی بخش تیم برای تبلت ها Designing Team Section for Tablets

• تابلوهای خلقی برای طراحی وب Mood Boards for Web Design

• طراحی پاورقی قسمت 1 Designing Footer Part 1

• طراحی بخش نظرات کاربران Designing User Reviews section

• طراحی فوتر برای نمایش تبلت Designing footer for tablet view

• توسعه دهندگان چه چیزی باید در مورد طراحی وب شما بدانند؟ What Developers need to know about your Web Design?

• خلاصه طراحی خوب چیست؟ What is a good Design Brief?

• برنامه های افزودنی فتوشاپ که ما نیاز داریم Photoshop Extensions we need

• Sympli در مقابل Avocode → مقایسه ابزارهای همکاری طراح/توسعه‌دهنده Sympli vs Avocode → Comparison of Designer/Developer Collaboration tools

• راه اندازی آرتبورد و گریدها برای نمای دسکتاپ Setting up artboard and grids for Desktop view

• آشنایی با ماکت های Balsamiq Introduction to Balsamiq Mockups

• بخش مراحل طراحی (چگونه کار می کند) برای تبلت Designing Steps section (How it works) for Tablet

• ملاحظات طراحی وب واکنشگرا قسمت 2 Responsive Web Design considerations Part 2

• تایپ فیس و انتخاب رنگ Typeface and Color Selection

• سیستم شبکه 8 نقطه ای 8-point Grid System