Workflow of Modern Web Design → Ideation, Wireframing, Mockups & Prototype

Ahsan Idrisi, UI UX Visual Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
62 Videos (7h 33m)
    • 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