Workflow of Modern Web Design from Wireframes to Style Guide

Watch this lesson to see a bit more inside the workflow of a modern web designer course

In this lesson, i will show you the skills you should have before taking this advance web design course

Links to download Photoshop extensions for Web Design

Download all course resources and PDF files

Folder organization or organizing your Design project is a necessary skill. I will show you my process of managing all the folders and sub folders of every Web Design project i take

Web Design is all about better and easier conversion to developed Code. So if you are naming your Photoshop layers and groups poorly, your developers will get into trouble.

You will learn how to name your Photoshop files, layers and groups so your web developers really start loving your Photoshop files

You will learn the naming conventions used by Web Developers in this lesson. I will show you how Developers name their assets and how you are going to name your web design files and assets to make this process seamless

Lets see how well you can organize your web design projects

Further reading about naming and organizing your Photoshop Web Design project

In this lesson, you will learn what makes a good design brief and what you client needs to send you as a design brief. I will also show you different important sections of Design briefs with few actual examples

Links with few examples of good Design briefs

Initial sketches or Ideation is very necessary phase of any digital design project. In this lesson, you will learn how early sketching can help you get ideas out which are hidden in your client's head.

Getting wrong information from a client about a web design project is very common. I will show you few questions i ask every time i start a web design or graphic design project.

Website copy and content of any website is one of most important things you must have before starting your web design. But it must be in some proper format. I will show you and share with you a simple content gathering template i use to gather website content

Download content gathering templates to gather website content

Mood boards are essential part of any design project whether its Web Design or a Branding design project. I will show you how i created a Mood Board using a free online tool

In this lesson, we are just going to build the layout of our website design project leaving out all the details. These early sketches are just to get the ideas flowing and should not be debated on.

 I will show you my 3 quick different layouts using ideation and sketching

In this lesson, you will learn the basics of using a wireframing tools called Balsamiq Mockups. I will introduce the interface of Balsamiq mock ups and how simple it is to use

We will create Wireframe using Balsamiq mockups during this lesson. I will show you few shortcut keys to speed up your workflow

We will finalize our wire frame in this lesson using Balsamiq mockups. I will also annotate and put my suggestions and comments on this wire frame

Web Designers follow different frameworks and some don't follow any framework. I will show you the idea behind Atomic Design framework and how we can implement it in our Web Design workflow

8 point grid system is widely used by Google Material Design. I will show you why it is worth using this method in all your Web Design projects

Links to download Wireframes, mood boards and further reading on Atomic Design and 8 point grid system

In this lesson, you will learn how i mix typefaces and get color combinations. And how i picked the fonts for this Wstudio Web Design project

In this lesson, you will learn about Style Guides and why they are important in any UI Design or Web Design project.

In this lesson, i will show you how big companies like Yelp or Sales force use UI Style guides

In this lesson, you will create a Style guide in Photoshop using a PSD template. I will show you what you need to include in your Style Guides and how you can improve them further

In this lesson, i will show you how i created my Typography Scale for this design project. How i have selected different scales for Tablet or Mobile devices or views

Lets see how well you got the ideas

Resources, examples and links to wireframes and UI Style guides

In every web design project, grids and guides play an important role. In this lesson, i will show you how i plan my grids and layout. I will share with you the online tools i normally use to calculate my grid

Links and resources for Modular Grid

How to create a Bootstrap 4 grid along with Baseline Grid using Photoshop?

Lets plan our grid for Desktop or Large browser view using Gridulator and other online grid tools.

You will learn the techniques of planning and using White space using vertical rhythm in your web design projects. I will show you my scale of paddings and margins

In this lesson, you will learn how to set up art boards in Photoshop for Desktop view or large screen design

You will design step by step Hero or header area of my Wstudio web design project

You will design step by step Hero or header area of my Wstudio web design project and we will use Style guide to import buttons and styles and icons

You will design Steps or Our Process area of my Wstudio web design project

You will design Steps or Our Process area of my Wstudio web design project and we will use Style guide to import buttons and styles and icons

You will design the User Reviews section of Wstudio Desktop view and we will use Vertical Rhythm and fine tuning at the end of this lesson as always

Adjusting White space and vertical rhythm sets your web designs apart from other designer. Even few colors and one font with good white space can take your breath away

You will design the TEAM section of Wstudio Desktop view

You will design the TEAM section of Wstudio Desktop view and we will use Vertical Rhythm and fine tuning at the end of this lesson as always

Footer and end of your web design project is very important as it will have all extras and contact forms. In this lesson, will design a nice modern footer of a website

Footer and end of your web design project is very important as it will have all extras and contact forms. In this lesson, will finalize our design by adjusting white space and vertical rhythm

A lot of Web Designers don't know what factors to consider before starting a Responsive Web design. 

How many images can we use?

Can this design slow down our page?

Will this site be able to load on mobiles in less than 3 seconds?

Can we load different images on different screen sizes?

A lot of Web Designers don't know what factors to consider before starting a Responsive Web design. 

How many images can we use?

Can this design slow down our page?

Will this site be able to load on mobiles in less than 3 seconds?

Can we load different images on different screen sizes?

Here we are going to design for Tablet or Medium view. You will learn how to plan your grid and how much margins we will use on both sides of our Tablet view

In this lesson, you will see how the design changes and switches from Desktop view to Tablet view. You will also convert your site's navigation to hamburger menu icon

In this lesson, you will design the how it works or our process area for Tablet view or Medium sized devices

In this lesson, you will design the TEAM SECTION for Tablet view or Medium sized devices

In this lesson, you will design the FOOTER area of our Tablet view or Medium sized devices

In this lesson, we will calculate our mobile grid which is 400px wide for this exercise. I will show you why i left margins around the design and how it can effect our grid calculations

Adjusting our header of Wstudio Web Design project for Mobile Device view is not easy. You will learn how i shifted my heading and text sizes down to another scale for mobile devices

In this lesson, we will design the "Our Process Steps" section for small devices

In this lesson, we will design the "Our Team" section for small devices

In this lesson, we will design the "Footer" section for small devices. And i will show you how i give the final touches to a web design project by zooming out and in to view problems in design hierarchy and sizes

Please download PSD files and design files used in this course

Most of the designers don't know how their web designs are going to be translated into Code. In this lesson, you will learn what developers need to know about your Web Design

In this lesson, i will show you which Photoshop layer styles can be converted into code easily and which Photoshop styles you need to avoid while designing for web sites

Links to see inspirations and live designs that were once Photoshop Mock ups or images. You should know and see what's possible and whats not

In this lesson, you will learn how to download, install and use Zeplin.io with Photoshop to generate Style Guide for your developers

In this lesson, you will learn generate Style Guide for your developers using Zeplin online tool. You will create different CSS styles for Headings, paragraphs and colors auto-magically

In this lecture, i will compare and show you pros and cons of different Designer and Developer collaboration tools

For this lesson, i will be discussing about Zeplin and Avocode mainly

In this lecture, i will compare and show you pros and cons of different Designer and Developer collaboration tools

I will show you actually working with Avocode and also i will show you few features of Sympli

Handoff to Developers using Figma and Adobe XD

Few top rated tools for Designer and Developer Collaborations

In this lesson, you will learn

• What are Prototypes
• What is their purpose?
• Why do we need a Prototype in a web design project?
• Types and examples of Prototypes

New video showing how to use Figma or Adobe XD for showing your Website Prototypes with Developers and Clients

Check out the prototype created in this course along with links to other popular prototyping online apps and tools

In this lesson, i will show you a great method to use icon libraries to create Custom Icon Fonts. You will learn how to use them in HTML and your Photoshop so good news for both Developers and Designers

Scale-able vector graphics are far better than using multiple PNG files or images files. In this lesson, i will show you methods on how to convert your graphics/icons to SVG code and use it in HTML

Now I will tell you where to go next

Discount Coupons for all my other courses about UI, UX and Freelancing