Workflow of Modern Web Design from Wireframes to Style Guide

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

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

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 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 this course is for:

Web Designer
UI Designer
Web Developer
Graphic Designer
Creative Director
Project Managers
Frontend Developers