Skip to content
Write a review
UdemyLifestylePaid courseIntermediate levelCertificate

Workflow of Modern Web Design from Wireframes to Style Guide (Udemy.com)

Make your Web Design process Simple and effective by using Wireframes, Style guides, Photoshop, Zeplin and Invision App

4.4
550 reviews

Created by: Muhammad Ahsan Pervaiz

Last updated December 2021

icon
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

How it compares

Against the other 418 rated Udemy courses in Lifestyle on CourseDuck:

  • Rating4.4 out of 5higher than 20% of them
  • Reviews550#149 of 419 by number of reviews
  • Length7.3 hourslonger than 89% of them
  • Last updatedDecember 2021earlier than 61% of them

icon
Course Description

UPDATED Oct 2021 (New Lectures added about Figma and Adobe XD)Make your Web Design process simple, effective and painless with this Web Design courseFrom 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 websiteWire-frame those ideas Convert wireframes to Design Mockups Getting Specs and Style Guides ready for Developers Creating Prototypes to show the flows and interactionsHow to design Responsive views of your Website in PhotoshopSave 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 FigmaAdobe XD Zeplin App Design frameworks you will touch in this course areAtomic Design framework8-Point Grid SystemI 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 DesignerUI DesignerWeb DeveloperGraphic DesignerCreative DirectorProject ManagersFrontend Developers
Read More Intermediate Intermediate Level product length iconTime: 7.3h

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Get the Udemy discount

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Muhammad Ahsan Pervaiz

I started my Freelance Design Career 10 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.
Improved User Experience of UK GP Tools Mobile App, few Games and e-commerce websites and created new Design patterns for showing passwords safely in password fields

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 nation-wide Poster Design competition from PANASONIC and won many Landing Page design contests on 99designs.
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 8 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

Read More

icon
More courses by Muhammad Ahsan Pervaiz

$69.99

$13.99

$13.99

$89.99

$84.99

$69.99

All courses by Muhammad Ahsan Pervaiz

icon
More Lifestyle courses

$49.99

$24.99

$59.99

$69.99

$74.99

$79.99

All Lifestyle courses

icon
Reviews

4.4

550 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

Write a review

By Krithiga Gopal on 10/19/2020

This is one of the best courses I've taken on Udemy. The Instructions are very practical and handy.
I've selected this course to improve my coding efficiency and to get an idea on web design from design perspective. Ahsan has really worked hard to put the entire process in a comprehensive way and his extensive experience shows up thorough out the course.
I appreciate his attitude towards understanding the needs of a developer and his ideas to improve the team communication.
Overall This course is developer friendly and really going to help me plan my projects efficiently and save my time.

By Kriti Verma on 10/13/2020

Those who want to dive into UI design then this course is a must to join. This course is so insightful and has helped me a lot. Thank you so much for explaining everything so clearly. I learned a lot from this course.

By Abdullah Mushtaq on 10/8/2020

The course was an absolute delight. Muhammad Ahsan Pervaiz exposed to all the different aspects of the Modern Web Design: Sketching, Wireframing, Atomic Design, 8 Point Grid system, and a lot regarding the modern web. The instructor was terrific.

By Pawe Matysiak on 10/3/2020

I highly recommend this course. It is well structured and thought through. Muhammad guides you through the topic sharing his vast knowledge of the field and a great sense of practicality.
You'll dive in designing technics, gain an understanding of style guides, atomic design, grid systems, wireframes, and prototypes. On top of that, there is a fair number of useful tools mentioned with links provided.
Finally, a topic rarely touched or well delivered - a good designer-developer communication.
Thank you, Muhammad. I enjoyed the knowledge and delivery.

By Luka Dudic on 7/26/2020

Thorough and exactly what I was missing in my UI/UX learning journey

By Heidi Kirby on 6/26/2020

Just starting out so no real judgement yet

By Praveen Parambath on 5/25/2020

hi. your program is really inspiring and kept me interested to complete the program .However Some issues that I incurred were lectures were blurred and were not readable.
Also one request if you could have included a live project and golive scenario would have a complete 360 web design and golive program.

By Carlos Tijerina on 5/7/2020

Amazing Course. This is really nice for developers to think about how to layout a Web Page, Mobile App. Thanks, it was very detailed and I learned so much...

By Soikot Sarkar on 4/8/2020

i am very happy for buying this great course.long time i am follow parvaiz sir. he is a great teacher ever....love u sir

By Roland Akanimo on 4/4/2020

Smart instructor with broad ideas about ui/ux

By Mostafa El-fishawy on 2/15/2020

just need to give deep experience using zeplin and invasion

By Christopher Alvarez on 2/12/2020

Very thorough and informative. Covers all the steps in the workflow process!!

Showing 12 of 113 reviews

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 88 / 100

Workflow of Modern Web Design from Wireframes to Style Guide
Visit course on Udemy Write a review
  • Video Duration: icon 7.3h
  • Price: $64.99
  • Provider: icon Udemy
  • Updated: icon December 2021
  • Level: Intermediate Intermediate
  • Language: icon English
  • Certificate: icon Yes
30-day money-back guarantee on most paid courses

Udemy Coupon Price Tracker

Udemy price history

For any issues or feature requests please email CourseDuck's Co-Founder at mkuhlman12@gmail.com