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

( 113 Reviews )

Created by: Muhammad Ahsan Pervaiz

Produced in 2021

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

Quality Score

Content Quality

Video Quality

Qualified Instructor

Course Pace

Course Depth & Coverage

Overall Score : 96 / 100

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

Time: 7.5h

Instructor Details

Muhammad Ahsan Pervaiz

4.8 Rating
113 Reviews

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

Reviews

4.8

113 total reviews

5 star 4 star 3 star 2 star 1 star

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