Workflow of Modern Web Design from Wireframes to Style Guide
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
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
Who this course is for:
- Web Designer
- UI Designer
- Web Developer
- Graphic Designer
- Creative Director
- Project Managers
- Frontend Developers
Course content
- Preview02:38
Instructor
![Muhammad Ahsan Pervaiz](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
- 4.5 Instructor Rating
- 4,840 Reviews
- 47,136 Students
- 16 Courses
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