Workflow of Modern Web Design from Wireframes to Style Guide
4.2 (481 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,501 students enrolled

Workflow of Modern Web Design from Wireframes to Style Guide

Make your Web Design process Simple and effective by using Wireframes, Style guides, Photoshop, Zeplin and Invision App
4.3 (480 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,500 students enrolled
Last updated 1/2020
English
English
Current price: $129.99 Original price: $199.99 Discount: 35% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7.5 hours on-demand video
  • 13 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • How to design and develop a coded Style Guide for Developers
  • Learn all about building and using Mood Boards in your projects
  • Learn tools like Zeplin, Balsamiq Mockups and Invision App
  • Learn the professional process of a Responsive Web Design Project
  • Know the Questions to get project details from Clients
  • What a Design Brief should have?
  • Understand the IDEATION process (early Sketching)
  • Design and Develop Grid system for different screens e.g PC, Tablet or Smart Phones
  • Design Wireframes using Balsamiq Mockups
  • How to setup Grids and Guides for Responsive Web Design
  • Learn the developers mind "How Developers code your design "
  • Build Prototypes to show website flows and interactions
  • Create Online Style Guide using Zeplin
  • How to Design for Developers
  • Understand design frameworks like Atomic Design or Content first approach
Requirements
  • Good knowledge of Adobe Photoshop CC
Description

Make your Web Design process simple, effective and painless with this Web Design course


From the past few years, 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 layout? How to setup 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 of your website

  • Wire-frame those ideas   

  • Convert wireframes to Design Mockups   

  • Getting Specs and Style Guides ready for Developers   

  • Creating Prototypes to show the flows and interactions

  • How to design Responsive views of your Website in Photoshop

  • Save time by improving your Web Design Workflow

           

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 modern process of creating Responsive web design from gathering information and design briefs from client to creating sketches, wire-frames 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  

Who this course is for:
  • Web Designer
  • UI Designer
  • Web Developer
  • Graphic Designer
  • Creative Director
  • Project Managers
  • Frontend Developers
Course content
Expand all 74 lectures 07:30:46
+ Introduction
1 lecture 02:38

Watch this lesson to see a bit more inside the workflow of a modern web designer course

Preview 02:38
+ Requirements to take this course
2 lectures 05:56

In this lesson, i will show you the skills you should have before taking this advance web design course

Preview 05:37

Links to download Photoshop extensions for Web Design

→ Links to download extensions
00:19
+ Organizing your Web Design Project
4 lectures 13:54

Folder organization or organizing your Design project is a necessary skill. I will show you my process of managing all the folders and sub folders of every Web Design project i take

How to organize a design project
04:56

Web Design is all about better and easier conversion to developed Code. So if you are naming your Photoshop layers and groups poorly, your developers will get into trouble.

You will learn how to name your Photoshop files, layers and groups so your web developers really start loving your Photoshop files

Preview 05:40

You will learn the naming conventions used by Web Developers in this lesson. I will show you how Developers name their assets and how you are going to name your web design files and assets to make this process seamless

Matching naming conventions with Developers
03:16

Lets see how well you can organize your web design projects

Quiz for organizing Web Design project
5 questions

Further reading about naming and organizing your Photoshop Web Design project

→ Links Organizing your design project
00:02
+ Gathering project information from client
6 lectures 22:33

In this lesson, you will learn what makes a good design brief and what you client needs to send you as a design brief. I will also show you different important sections of Design briefs with few actual examples

Preview 09:47

Links with few examples of good Design briefs

Links and examples of Design Breifs
00:01

Initial sketches or Ideation is very necessary phase of any digital design project. In this lesson, you will learn how early sketching can help you get ideas out which are hidden in your client's head.

Preview 03:52

Getting wrong information from a client about a web design project is very common. I will show you few questions i ask every time i start a web design or graphic design project.

Questions to ask your client before every Web Design Project
05:25

Website copy and content of any website is one of most important things you must have before starting your web design. But it must be in some proper format. I will show you and share with you a simple content gathering template i use to gather website content

Using Content Gathering template for website's content
03:25

Download content gathering templates to gather website content

→ Links and resources for this sections
00:03
+ Sketching, Wireframing, Atomic Design & 8point Grid system
8 lectures 59:16

Mood boards are essential part of any design project whether its Web Design or a Branding design project. I will show you how i created a Mood Board using a free online tool

Preview 05:40

In this lesson, we are just going to build the layout of our website design project leaving out all the details. These early sketches are just to get the ideas flowing and should not be debated on.

 I will show you my 3 quick different layouts using ideation and sketching

Sketching and Ideation (early sketches)
05:07

In this lesson, you will learn the basics of using a wireframing tools called Balsamiq Mockups. I will introduce the interface of Balsamiq mock ups and how simple it is to use

Preview 09:33

We will create Wireframe using Balsamiq mockups during this lesson. I will show you few shortcut keys to speed up your workflow

Wireframing in Balsamiq mockups part 1
07:55

We will finalize our wire frame in this lesson using Balsamiq mockups. I will also annotate and put my suggestions and comments on this wire frame

Wireframing in Balsamiq mockups part 2
14:24

Web Designers follow different frameworks and some don't follow any framework. I will show you the idea behind Atomic Design framework and how we can implement it in our Web Design workflow

Atomic Design framework
07:32

8 point grid system is widely used by Google Material Design. I will show you why it is worth using this method in all your Web Design projects

8-point Grid System
08:57

Links to download Wireframes, mood boards and further reading on Atomic Design and 8 point grid system

→ Links and resources for this sections
00:08
+ Style Guides, colors and typographics scales
6 lectures 24:58

In this lesson, you will learn how i mix typefaces and get color combinations. And how i picked the fonts for this Wstudio Web Design project

Experimenting with Colors and Font Combinations
04:26

In this lesson, you will learn about Style Guides and why they are important in any UI Design or Web Design project.

Preview 07:26

In this lesson, i will show you how big companies like Yelp or Sales force use UI Style guides

Preview 03:10

In this lesson, you will create a Style guide in Photoshop using a PSD template. I will show you what you need to include in your Style Guides and how you can improve them further

Creating UI Style Guide using Photoshop
07:13

In this lesson, i will show you how i created my Typography Scale for this design project. How i have selected different scales for Tablet or Mobile devices or views

Selecting Type Scale for Responsive Web Design
02:35

Lets see how well you got the ideas

Quiz for Wireframes, Ideation and UI Style guides
6 questions

Resources, examples and links to wireframes and UI Style guides

→ Links and resources for this sections
00:08
As you already know about Style Guide so I need you to create a style guide with all the colors, gradients, typography and icons in it and show me what you have learned so far
Create a Style Guide of any Website or App
1 question
+ Designing for Desktop/Large View (Wstudio Web Design Project)
16 lectures 02:00:14

In every web design project, grids and guides play an important role. In this lesson, i will show you how i plan my grids and layout. I will share with you the online tools i normally use to calculate my grid

Preview 12:30

Links and resources for Modular Grid

→Links Online tools for Grid Calculations
00:01

How to create a Bootstrap 4 grid along with Baseline Grid using Photoshop?

Creating Modular Bootstrap 4 Grid in Photoshop manuallay
00:04

Lets plan our grid for Desktop or Large browser view using Gridulator and other online grid tools.

Planning your Grid for Desktop View
05:19

You will learn the techniques of planning and using White space using vertical rhythm in your web design projects. I will show you my scale of paddings and margins

How to use White Space in your Web Design
05:34

In this lesson, you will learn how to set up art boards in Photoshop for Desktop view or large screen design

Setting up Art Boards in Photoshop
06:36

You will design step by step Hero or header area of my Wstudio web design project

Designing Header/Hero area Part 1
12:17

You will design step by step Hero or header area of my Wstudio web design project and we will use Style guide to import buttons and styles and icons

Designing Header/Hero area Part 2
08:32

You will design Steps or Our Process area of my Wstudio web design project

Designing Steps section Part 1
10:00

You will design Steps or Our Process area of my Wstudio web design project and we will use Style guide to import buttons and styles and icons

Designing Steps section Part 2
08:36

You will design the User Reviews section of Wstudio Desktop view and we will use Vertical Rhythm and fine tuning at the end of this lesson as always

Designing User Reviews section
08:49

Adjusting White space and vertical rhythm sets your web designs apart from other designer. Even few colors and one font with good white space can take your breath away

Adjusting white space and vertical rhythm
05:46

You will design the TEAM section of Wstudio Desktop view

Designing Team section Part 1
10:32

You will design the TEAM section of Wstudio Desktop view and we will use Vertical Rhythm and fine tuning at the end of this lesson as always

Designing Team section Part 2
06:42

Footer and end of your web design project is very important as it will have all extras and contact forms. In this lesson, will design a nice modern footer of a website

Designing Footer Part 1
08:18

Footer and end of your web design project is very important as it will have all extras and contact forms. In this lesson, will finalize our design by adjusting white space and vertical rhythm

Designing Footer Part 2
10:37
+ Planning Responsive Web Design
2 lectures 12:14

A lot of Web Designers don't know what factors to consider before starting a Responsive Web design. 

How many images can we use?

Can this design slow down our page?

Will this site be able to load on mobiles in less than 3 seconds?

Can we load different images on different screen sizes?

Responsive Web Design considerations Part 1
06:29

A lot of Web Designers don't know what factors to consider before starting a Responsive Web design. 

How many images can we use?

Can this design slow down our page?

Will this site be able to load on mobiles in less than 3 seconds?

Can we load different images on different screen sizes?

Preview 05:45
+ Designing for Tablet/Medium View (Wstudio Web Design Project)
5 lectures 47:09

Here we are going to design for Tablet or Medium view. You will learn how to plan your grid and how much margins we will use on both sides of our Tablet view

Planning grid for Tablet/Medium view
07:20

In this lesson, you will see how the design changes and switches from Desktop view to Tablet view. You will also convert your site's navigation to hamburger menu icon

Designing Header/Hero area
11:17

In this lesson, you will design the how it works or our process area for Tablet view or Medium sized devices

Designing Steps section (How it works)
10:17

In this lesson, you will design the TEAM SECTION for Tablet view or Medium sized devices

Desining and adjusting Team section
09:27

In this lesson, you will design the FOOTER area of our Tablet view or Medium sized devices

Designing footer for tablet view
08:48
+ Designing for Mobile/Small View (Wstudio Web Design Project)
6 lectures 40:13

In this lesson, we will calculate our mobile grid which is 400px wide for this exercise. I will show you why i left margins around the design and how it can effect our grid calculations

Preview 03:59

Adjusting our header of Wstudio Web Design project for Mobile Device view is not easy. You will learn how i shifted my heading and text sizes down to another scale for mobile devices

Designing Header for Small devices
10:32

In this lesson, we will design the "Our Process Steps" section for small devices

Designing Steps Section for Small devices
08:53

In this lesson, we will design the "Our Team" section for small devices

Designing Team Section for Small devices
09:08

In this lesson, we will design the "Footer" section for small devices. And i will show you how i give the final touches to a web design project by zooming out and in to view problems in design hierarchy and sizes

Desinging Footer for Small devices
07:39

Please download PSD files and design files used in this course

→ PSD and Design Source Files
00:02