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
27 students are watching this class