Modern Web Design

COURSE CURRICULUM

Introduction

0.1 promo-workflow
0.2 what we will cover in this course

Requirements to take this course

1.1 skills-and-apps-you-need-to-take-this-courseautogenerated
1.2. Photoshop extensions We Need

Organizing your Web Design Project

2.1.how To Organize A Design Project
2.2 client’s Sketches
2.2 naming psd layers and groups
2.3.naming Conventions To Help Developers

Gathering project information from client

3.1.design Briefs
3.3 getting More Info On Project
3.4.content_template for gathering information

Sketching, Wireframing, Atomic Design & 8point Grid system

4.1.moodboards
4.2.ideation Phase
4.3.introduction To Balsamiq
4.4desining Wireframes Part 1
4.5.desining Wireframes Part 2
4.6.atomic Design
4.7.8pt Grid

Style Guides, colors and typographics scales

5.1.typeface And Color Combinations
5.2.ui Style Guides
5.3.examples Of Ui Style Guides
5.4.how I Created My Style Guide
5.5.styleguide-typescale Explained
5.6.Styleguide-assignment

Designing for Desktop/Large View (Wstudio Web Design Project)

6.1.online tools for grid calcuations
6.2.planning your grid
6.3.whitespace-plan
6.4.setting Up Artboard For Desktop Design
6.5.designing Header And Hero Part 1
6.6 designing Header And Hero Part 2
6.7.designing Steps Area Part 1
6.8.designing Step Area Part 2
6.9.userreviews Area Design
6.10.adjusting White Space And Vertical Rhythem
6.11.desining Team Part1
6.12.desining Team Part2
6.13.footer Design Part1
6.14.footer Design Part2

Planning Responsive Web Design

7.1.Responsive Design Considerations Part 1
7.2.Responsive Design Considerations Part 2

Designing for Tablet/Medium View (Wstudio Web Design Project)

7.3.Establishing Grid For Tablets
7.4.Header Area For Tablet View
7.5.Section how it work – steps
7.6.Section team Tablet View
7.7 footer Design

Designing for Mobile/Small View (Wstudio Web Design Project)

8.1.mobile Artboard And Grids
8.2.header Mobile View
8.3.steps Section-mobile
8.4.section 2 Team Members For Mobile
8.5.footer And Final Adjustments

Designing for Developers

9.1.what Developes Needs To Know
9.2.Red Line Document with Ink 1
9.3.Red Line Document with Ink 2
9.4.which layer styles you can use photoshop
9.5.installing Using Zeplin
9.6.style Guides With Zeplin
9.7.tools-zeplin-avocode-1
9.8.avocode And Sympli

Prototyping with Invision app

10.1. What Are Prototypes
10.2.getting Familiar With Invision App For Prototyping
10.3.creating First Prototype With Invision App

SVGs and Icon Fonts in Web Design

11.1 using iconmoon app to create custom icon fonts set
11.2 Using SVG in Web design

Mock Exam

Final Exam