Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

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

About This Class

From the past few years, the job of a traditional Web Designer has been drastically changed. Designing for each and every screen (Responsive Web Design) is not easy. Questions like these come to mind of every young web designer e.g. How to change the layout? How to set up grids for responsive web design? Which content to hide and show?

Now in every Web Design project, we designers

  • Gather project requirements (from client and users)
  • Sketch early Ideas
  • Wire-frame those ideas
  • Convert wireframes to Mockups
  • Getting Specs and Style Guides ready for Developers
  • Creating Prototypes to show the flows and interactions

Every modern designer uses more than 2 to 3 tools in Web Design process. Designers also need to collaborate with Developers a lot so how to solve all these problems.

So in this course, I will show you the modern process of creating Responsive web design from gathering information and design briefs from client to creating sketches, wireframes and prototypes or even style guides for developers.

Tools you will learn during this course are

  • Adobe Photoshop
  • Balsamiq Mockups
  • Invision App
  • Zeplin App

Design frameworks you will touch in this course are

  • Atomic Design framework
  • 8-Point Grid System

I will show other similar online apps for Web Designers at the end and compare their pros and cons.

Now if you are ready to learn the modern web design and become a top notch Web Designer

Start this course Now

16 of 16 students recommendSee All

One of the best web design class I have seen online. I am so surprised there are only 443 students enrolled.
I have given 5 star rating which means it really deserves 5 stars because of quality of teaching, use of easy language, best way of teaching from the very beginning to high level.

495

Students

--

Projects

Ahsan Idrisi

UI UX Visual Designer

I started my Freelancing Career just 8 years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 1 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have...

See full profile