Download appDownload App

Workflow of Modern Web Design from Wireframes to Style Guide

NEW LECTURE? Using and Exporting SVG in Web Design From the past few years, job of a traditional Web Designer has been drastically changed. Designing for each and every screen (Responsive Web Desig...

  • All levels
  • English

Course Description

NEW LECTURE? Using and Exporting SVG in Web Design 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? style guides...

NEW LECTURE? Using and Exporting SVG in Web Design 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? style guides for developers.

What you’ll learn
  • Gather project requirements (from client and users)
  • Sketch early Ideas
  • Wire-frame those ideas
  • Convert wireframes to Mockups
  • Getting Specs and Style Guides ready for Developers
  • Creating Prototypes to show the flows and interactions

Covering Topics

1
Section 1 : Introduction
2
Section 2 : Requirements to take this course
3
Section 3 : Organizing your Web Design Project
4
Section 4 : Gathering project information from client
5
Section 5 : Sketching, Wireframing, Atomic Design & 8point Grid system
6
Section 6 : Style Guides, colors and typographics scales
7
Section 7 : Designing for Desktop/Large View (Wstudio Web Design Project)
8
Section 8 : Planning Responsive Web Design
9
Section 9 : Designing for Tablet/Medium View (Wstudio Web Design Project)
10
Section 10 : Designing for Mobile/Small View (Wstudio Web Design Project)

Curriculum

      Section 1 : Introduction
1
Introduction to Modern Web Design Workflow Preview
2
What you will learn in this course?
      Section 2 : Requirements to take this course
3
Skills and Apps you need to take this course
4
Photoshop extensions we need
      Section 3 : Organizing your Web Design Project
5
How to organize a design project Preview
6
Naming PSD, layers and groups
7
Matching naming conventions with Developers
      Section 4 : Gathering project information from client
8
What are design briefs?
9
Getting client's initial Sketches and ideas
10
Questions to ask your client before every Web Design Project
11
Questions to ask your client before every Web Design Project
      Section 5 : Sketching, Wireframing, Atomic Design & 8point Grid system
12
Using Mood Boards for Web Design projects (Design Direction)
13
Sketching and Ideation (early sketches) Preview
14
Introduction to Balsamiq Mockups
15
Wireframing in Balsamiq mockups part 1
16
Wireframing in Balsamiq mockups part 2
17
Atomic Design framework
18
8-point Grid System
      Section 6 : Style Guides, colors and typographics scales
19
Experimenting with Colors and Font Combinations Preview
20
What are UI Style Guides?
21
Examples of UI Style Guides
22
Creating UI Style Guide using Photoshop
23
Selecting Type Scale for Responsive Web Design
      Section 7 : Designing for Desktop/Large View (Wstudio Web Design Project)
24
Calculating your grid and guides using online tools Preview
25
Planning your Grid for Desktop View
26
How to use White Space in your Web Design
27
Setting up Art Boards in Photoshop
28
Designing Header/Hero area Part 1
29
Designing Header/Hero area Part 2
30
Designing Steps section Part 1
31
Designing Steps section Part 2
32
Designing User Reviews section
33
Adjusting white space and vertical rhythm
34
Designing Team section Part 1
35
Designing Team section Part 2
36
Designing Footer Part 1
37
Designing Footer Part 2
      Section 8 : Planning Responsive Web Design
38
Responsive Web Design considerations Part 1 Preview
39
Responsive Web Design considerations Part 2
      Section 9 : Designing for Tablet/Medium View (Wstudio Web Design Project)
40
Planning grid for Tablet/Medium view
41
Designing Header/Hero area
      Section 10 : Designing for Mobile/Small View (Wstudio Web Design Project)
42
Setting up artboard and grids for Mobile view Preview
43
Designing Header for Small devices
44
Designing Steps Section for Small devices
45
Designing Team Section for Small devices
46
Desinging Footer for Small devices

Frequently Asked Questions

It is an online tutorial that covers a specific part of a topic in several sections. An Expert teaches the students with theoretical knowledge as well as with practical examples which makes it easy for students to understand.

A Course helps the user understand a specific part of a concept. While a path and E-Degrees are broader aspects and help the user understand more than just a small area of the concept.

A Course will help you understand any particular topic. For instance, if you are a beginner and want to learn about the basics of any topic in a fluent manner within a short period of time, a Course would be best for you to choose.

We have an inbuilt question-answer system to help you with your queries. Our support staff will be answering all your questions regarding the content of the Course.