Workflow of Modern Web Design → Ideation, Wireframing, Mockups & Prototype
Ahsan Idrisi, UI UX Visual Designer
-
-
Introduction
2:50 -
What we will cover in this course
2:38 -
Course Requriements
1:58 -
Photoshop Extensions we need
6:41 -
How to organize a web design project
4:56 -
Organizing your PSD layers and Groups
5:40 -
Maching naming conventions with Developers
3:16 -
What is a good Design Brief?
9:47 -
Getting Initial Ideas and early Sketches
3:52 -
Questions to ask your client before every Web Design Project
5:25 -
Using Content Gathering template for website's content
3:25 -
Mood Boards for Web Design
5:40 -
Ideation Phase (at least 3 layouts)
5:07 -
Introduction to Balsamiq Mockups
9:33 -
Wireframing in Balsamiq mockups part 1
7:55 -
Wireframing in Balsamiq mockups part 2
14:24 -
Atomic Design framework
7:32 -
8-point Grid System
8:57 -
Typeface and Color Selection
4:26 -
What are UI Style Guides?
7:26 -
Examples of UI Style Guides
3:10 -
Lets create a Style Guide
7:13 -
Type Scale Explained
2:35 -
Online Tools for Grid Calcuations
12:30 -
Planning your Grid for Desktop View
5:19 -
How to use White Space in Web Design
5:34 -
Setting up artboard and grids for Desktop view
6:36 -
Designing Header/Hero area Part 1
12:17 -
Designing Header/Hero area Part 2
8:32 -
Designing Steps section Part 1
10:00 -
Designing Steps section Part 2
8:36 -
Designing User Reviews section
8:49 -
Adjusting white space and vertical rhythm
5:46 -
Designing Team section Part 1
10:32 -
Designing Team section Part 2
6:42 -
Designing Footer Part 1
8:18 -
Designing Footer Part 2
10:37 -
Responsive Web Design considerations Part 1
6:29 -
Responsive Web Design considerations Part 2
5:45 -
Planning grid for Tablet/Medium view
7:20 -
Designing Header/Hero area for Tablet
11:17 -
Designing Steps section (How it works) for Tablet
10:17 -
Designing Team Section for Tablets
9:27 -
Designing footer for tablet view
8:48 -
Setting up Art Boards for Mobile View
3:59 -
Designing Header for Small devices
10:32 -
Designing Steps Section for Small devices
8:53 -
Designing Team Section for Small devices
9:08 -
Designing footer for tablet view
7:39 -
What Developers need to know about your Web Design?
4:55 -
Creating Red Line Spacing specifications for Developers → Part 1
10:15 -
Creating Red Line Spacing specifications for Developers → Part 2
6:13 -
Which layer styles can be converted to Code (HTML)?
7:48 -
Installing Zeplin for Web Design Collaboration
10:11 -
Creating UI Style Guide with Zeplin
14:12 -
Zepling vs Avocode → Comparison of Designer/Developer Collaboration tools
3:44 -
Sympli vs Avocode → Comparison of Designer/Developer Collaboration tools
5:40 -
Introduction to Prototypes
3:49 -
Getting familiar with Invision App for Prototyping
6:35 -
Prototyping with Invision app
6:16 -
Creating Custom Icon Fonts using Iconmoon app
8:13 -
Using and Exporting SVG Icons in Web design
10:36
-