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

Muhammad Ahsan, UI UX Visual Designer 10+ Years

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
62 Lessons (7h 33m)
    • 1. Introduction

      2:50
    • 2. What we will cover in this course

      2:38
    • 3. Course Requriements

      1:58
    • 4. Photoshop Extensions we need

      6:41
    • 5. How to organize a web design project

      4:56
    • 6. Organizing your PSD layers and Groups

      5:40
    • 7. Maching naming conventions with Developers

      3:16
    • 8. What is a good Design Brief?

      9:47
    • 9. Getting Initial Ideas and early Sketches

      3:52
    • 10. Questions to ask your client before every Web Design Project

      5:25
    • 11. Using Content Gathering template for website's content

      3:25
    • 12. Mood Boards for Web Design

      5:40
    • 13. Ideation Phase (at least 3 layouts)

      5:07
    • 14. Introduction to Balsamiq Mockups

      9:33
    • 15. Wireframing in Balsamiq mockups part 1

      7:55
    • 16. Wireframing in Balsamiq mockups part 2

      14:24
    • 17. Atomic Design framework

      7:32
    • 18. 8-point Grid System

      8:57
    • 19. Typeface and Color Selection

      4:26
    • 20. What are UI Style Guides?

      7:26
    • 21. Examples of UI Style Guides

      3:10
    • 22. Lets create a Style Guide

      7:13
    • 23. Type Scale Explained

      2:35
    • 24. Online Tools for Grid Calcuations

      12:30
    • 25. Planning your Grid for Desktop View

      5:19
    • 26. How to use White Space in Web Design

      5:34
    • 27. Setting up artboard and grids for Desktop view

      6:36
    • 28. Designing Header/Hero area Part 1

      12:17
    • 29. Designing Header/Hero area Part 2

      8:32
    • 30. Designing Steps section Part 1

      10:00
    • 31. Designing Steps section Part 2

      8:36
    • 32. Designing User Reviews section

      8:49
    • 33. Adjusting white space and vertical rhythm

      5:46
    • 34. Designing Team section Part 1

      10:32
    • 35. Designing Team section Part 2

      6:42
    • 36. Designing Footer Part 1

      8:18
    • 37. Designing Footer Part 2

      10:37
    • 38. Responsive Web Design considerations Part 1

      6:29
    • 39. Responsive Web Design considerations Part 2

      5:45
    • 40. Planning grid for Tablet/Medium view

      7:20
    • 41. Designing Header/Hero area for Tablet

      11:17
    • 42. Designing Steps section (How it works) for Tablet

      10:17
    • 43. Designing Team Section for Tablets

      9:27
    • 44. Designing footer for tablet view

      8:48
    • 45. Setting up Art Boards for Mobile View

      3:59
    • 46. Designing Header for Small devices

      10:32
    • 47. Designing Steps Section for Small devices

      8:53
    • 48. Designing Team Section for Small devices

      9:08
    • 49. Designing footer for tablet view

      7:39
    • 50. What Developers need to know about your Web Design?

      4:55
    • 51. Creating Red Line Spacing specifications for Developers → Part 1

      10:15
    • 52. Creating Red Line Spacing specifications for Developers → Part 2

      6:13
    • 53. Which layer styles can be converted to Code (HTML)?

      7:48
    • 54. Installing Zeplin for Web Design Collaboration

      10:11
    • 55. Creating UI Style Guide with Zeplin

      14:12
    • 56. Zepling vs Avocode → Comparison of Designer/Developer Collaboration tools

      3:44
    • 57. Sympli vs Avocode → Comparison of Designer/Developer Collaboration tools

      5:40
    • 58. Introduction to Prototypes

      3:49
    • 59. Getting familiar with Invision App for Prototyping

      6:35
    • 60. Prototyping with Invision app

      6:16
    • 61. Creating Custom Icon Fonts using Iconmoon app

      8:13
    • 62. Using and Exporting SVG Icons in Web design

      10:36
26 students are watching this class

Project Description

Download all the Resources for this Course

You will create Wireframes, Mockups and Prototype in Invision app in this course. Below is what we will be designing in Photoshop

129c2982

Prototype for interactions in Invision App

b97b35b3

Student Projects