Workflow of Modern Web Design from Wireframes to Style Guide

Workflow of Modern Web Design from Wireframes to Style Guide, available at $69.99, has an average rating of 4.55, with 74 lectures, 2 quizzes, based on 547 reviews, and has 6893 subscribers.

You will learn about 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 This course is ideal for individuals who are Web Designer or UI Designer or Web Developer or Graphic Designer or Creative Director or Project Managers or Frontend Developers It is particularly useful for Web Designer or UI Designer or Web Developer or Graphic Designer or Creative Director or Project Managers or Frontend Developers.

Enroll now: Workflow of Modern Web Design from Wireframes to Style Guide

Summary

Title: Workflow of Modern Web Design from Wireframes to Style Guide

Price: $69.99

Average Rating: 4.55

Number of Lectures: 74

Number of Quizzes: 2

Number of Published Lectures: 73

Number of Published Quizzes: 2

Number of Curriculum Items: 77

Number of Published Curriculum Objects: 76

Original Price: $69.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

Web Designer

UI Designer

Web Developer

Graphic Designer

Creative Director

Project Managers

Frontend Developers

Target Audiences

Web Designer

UI Designer

Web Developer

Graphic Designer

Creative Director

Project Managers

Frontend Developers

UPDATED ? Oct 2020 (New Lectures added about Figma and Adobe XD)

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 use during this course are   

Adobe Photoshop 

Balsamiq Mockups   

Figma

Adobe XD   

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

 

Course Curriculum

Chapter 1: Introduction

Lecture 1: What you will learn in this course?

Chapter 2: Requirements to take this course

Lecture 1: Skills and Apps you need to take this course

Lecture 2: → Links to download extensions

Lecture 3: Download all course resources and PDF files

Chapter 3: Organizing your Web Design Project

Lecture 1: How to organize a design project

Lecture 2: Naming PSD, layers and groups

Lecture 3: Matching naming conventions with Developers

Lecture 4: → Links Organizing your design project

Chapter 4: Gathering project information from client

Lecture 1: What are design briefs?

Lecture 2: Links and examples of Design Breifs

Lecture 3: Getting client's initial Sketches and ideas

Lecture 4: Questions to ask your client before every Web Design Project

Lecture 5: Using Content Gathering template for website's content

Lecture 6: → Links and resources for this sections

Chapter 5: Sketching, Wireframing, Atomic Design & 8point Grid system

Lecture 1: Using Mood Boards for Web Design projects (Design Direction)

Lecture 2: Sketching and Ideation (early sketches)

Lecture 3: Introduction to Balsamiq Mockups

Lecture 4: Wireframing in Balsamiq mockups part 1

Lecture 5: Wireframing in Balsamiq mockups part 2

Lecture 6: Atomic Design framework

Lecture 7: 8-point Grid System

Lecture 8: → Links and resources for this sections

Chapter 6: Style Guides, colors and typographics scales

Lecture 1: Experimenting with Colors and Font Combinations

Lecture 2: What are UI Style Guides?

Lecture 3: Examples of UI Style Guides

Lecture 4: Creating UI Style Guide using Photoshop

Lecture 5: Selecting Type Scale for Responsive Web Design

Lecture 6: → Links and resources for this sections

Chapter 7: Designing for Desktop/Large View (Wstudio Web Design Project)

Lecture 1: Calculating your grid and guides using online tools

Lecture 2: →Links Online tools for Grid Calculations

Lecture 3: Creating Modular Bootstrap 4 Grid in Photoshop manuallay

Lecture 4: Planning your Grid for Desktop View

Lecture 5: How to use White Space in your Web Design

Lecture 6: Setting up Art Boards in Photoshop

Lecture 7: Designing Header/Hero area Part 1

Lecture 8: Designing Header/Hero area Part 2

Lecture 9: Designing Steps section Part 1

Lecture 10: Designing Steps section Part 2

Lecture 11: Designing User Reviews section

Lecture 12: Adjusting white space and vertical rhythm

Lecture 13: Designing Team section Part 1

Lecture 14: Designing Team section Part 2

Lecture 15: Designing Footer Part 1

Lecture 16: Designing Footer Part 2

Chapter 8: Planning Responsive Web Design

Lecture 1: Responsive Web Design considerations Part 1

Lecture 2: Responsive Web Design considerations Part 2

Chapter 9: Designing for Tablet/Medium View (Wstudio Web Design Project)

Lecture 1: Planning grid for Tablet/Medium view

Lecture 2: Designing Header/Hero area

Lecture 3: Designing Steps section (How it works)

Lecture 4: Desining and adjusting Team section

Lecture 5: Designing footer for tablet view

Chapter 10: Designing for Mobile/Small View (Wstudio Web Design Project)

Lecture 1: Setting up artboard and grids for Mobile view

Lecture 2: Designing Header for Small devices

Lecture 3: Designing Steps Section for Small devices

Lecture 4: Designing Team Section for Small devices

Lecture 5: Desinging Footer for Small devices

Lecture 6: → PSD and Design Source Files

Chapter 11: Designing for Developers

Lecture 1: What Developers need to know about your Web Design?

Lecture 2: Which layer styles can be converted to Code (HTML)?

Lecture 3: → Links to see live web design inspirations or coded solutions

Lecture 4: Installing Zeplin for Web Design Collaboration

Lecture 5: Creating UI Style Guide with code using Zeplin

Lecture 6: Zepling vs Avocode → Comparison of Designer/Developer Collaboration tools

Lecture 7: Sympli vs Avocode → Comparison of Designer/Developer Collaboration tools

Lecture 8: Handoff using Figma or Adobe XD – NEW 2020

Lecture 9: → Link and resources for Design Developer Collaboration and code generation

Chapter 12: Prototyping with Invision app

Lecture 1: Introduction to Prototypes

Lecture 2: Web Prototypes using Figma and Adobe XD

Lecture 3: → Links to prototyping tools

Chapter 13: SVGs and Icon Fonts in Web Design

Lecture 1: Using Iconmoon App to create Custom Icon Fonts

Lecture 2: Using and Exporting SVG Graphics

Lecture 3: What to do NEXT?

Lecture 4: BONUS LECTURE

Instructors

Muhammad Ahsan Pervaiz
Product Designer | UX Consultant | Web Developer

Rating Distribution

1 stars: 6 votes

2 stars: 14 votes

3 stars: 51 votes

4 stars: 162 votes

5 stars: 314 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!