Workflow of Modern Web Design from Wireframes to Style Guide
4.6 (97 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,053 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Workflow of Modern Web Design from Wireframes to Style Guide to your Wishlist.

Add to Wishlist

Workflow of Modern Web Design from Wireframes to Style Guide

Learn the modern process and tools of Responsive web design using Balsamiq Mockups, Photoshop, Zeplin and Invision App
4.6 (97 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,053 students enrolled
Created by Ahsan Pervaiz
Last updated 9/2017
English
Current price: $50 Original price: $70 Discount: 29% off
30-Day Money-Back Guarantee
Includes:
  • 7.5 hours on-demand video
  • 16 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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?
  • Learn all about building and using Mood Boards in your projects
  • 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 "
  • How to design and develop a coded Style Guide for Developers
  • 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
  • Learn tools like Zeplin, Balsamiq Mockups and Invision App
View Curriculum
Requirements
  • Good knowledge of Adobe Photoshop CC
Description

LAST UPDATE April 2017

NEW LECTURE→ Using and Exporting SVG in Web Design

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
  • 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 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

Who is the target audience?
  • Web Designer
  • UI Designer
  • Web Developer
  • Graphic Designer
  • Creative Director
  • Project Managers
  • Frontend Developers
Curriculum For This Course
78 Lectures
07:33:53
+
Introduction
2 Lectures 05:28

In this lesson, you will learn the topics i am going to cover in this course. I will show you the Web Design project, wireframes, sketches and prototype we are going to build during this course.

Preview 02:50

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
4 Lectures 09:12

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

Preview 01:58

This lesson contains all the links and material you need to learn before taking this course. All these web design topics has been discussed before in my UI Design course and Typography course

Preview 00:14

This quiz will test your Photoshop knowledge which is necessary to advance in this course

Quiz Course Requirements test
5 questions

In this lesson, you will learn all the extension you need or i have used during this web design course

Photoshop extensions we need
06:41

Links to download Photoshop extensions for Web Design

→ Links to download extensions
00:18
+
Organizing your Web Design Project
4 Lectures 13:55

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:03
+
Gathering project information from client
6 Lectures 22:36

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:02

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:05
+
Sketching, Wireframing, Atomic Design & 8point Grid system
8 Lectures 59:24

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:16
+
Style Guides, colors and typographics scales
6 Lectures 25:05

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:15
+
Designing for Desktop/Large View (Wstudio Web Design Project)
15 Lectures 02:00:11

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:03

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:14

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:03
4 More Sections
About the Instructor
Ahsan Pervaiz
4.6 Average rating
1,098 Reviews
19,605 Students
5 Courses
UI/UX Interaction Design Expert + Freelancer

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 UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wire-frames, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects
I am multi-talented person who have won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing Page design contests.

Worked with Clients all over the world mostly from USA, Australia, UK, and United Arab Emirates while learning a lot on how to deal with clients while freelancing and how to present your work to them

Although I started as a UI Designer 6 years ago but I am playing with Photoshop since year 2002

My ultimate aim is to make more Awesome UI Designers and ease the pain of learning from new comers in this field of UI Design