Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Wireframes, Style Guides and Atomic Design - Modern Web Design Process
Managing your Web Design Project
Requirements to start this Class (5:37)
How to Organize a Design Project (4:56)
Naming Conventions to help designers (3:16)
Naming PSD and Layers Groups (5:40)
Download Resources for this Class
Watch these Videos before starting this Class
Getting project requirements from your Client
Design Brief - How they look like (9:47)
Getting started with Client's sketches (3:52)
Extracting more information about the Web Design Project (5:25)
Template to gather content for web design (3:25)
Wireframes, 8px Grid System and Atomic Design
What are moodboards (5:40)
Ideation Phase (5:07)
Intro to Balsamiq (9:33)
Designing Wireframes Part 1 (7:55)
Designing Wireframes Part 2 (14:24)
Atomic Design (7:32)
8 Point or 8px Grid System (8:57)
Creating Style Guide for your Web Design
Typeface and Color Combination (4:26)
What are UI Style Guides (7:26)
Examples of Style Guides (3:10)
How I created my Style Guide (7:13)
TypeScale Explained (2:35)
Style Guide Assignment ► Project (0:36)
Design Desktop Wide Screen Version of WStudio Website
Online tools for Grid Calculations (12:30)
Planning your Grid (5:19)
White Space Plan (5:34)
Setting up artboard for Desktop Design (6:36)
Designing Hero Header Section Part 1 (12:17)
Designing Header Hero Section Part 2 (8:32)
Designing Process Section Part 1 (10:00)
Designing Process Section Part 2 (8:36)
User Reviews Section (8:49)
Web Design Adjustments and Fine tuning (5:46)
Designing Team Section Part 1 (10:32)
Designing Team Section Part 2 (6:42)
Design Footer Section Part 1 (8:18)
Design Footer Section Part 2 (10:37)
Tablet Medium View Design
Responsive Design Considerations Part1 (6:29)
Responsive Design Considerations Part2 (5:45)
Establishing Grid For Tablets (7:20)
Header Design for Tablet View (11:17)
Tablet View - How it works section (10:17)
Designing Team Section for Tablet Medium view (9:27)
Designing footer for Tablet Devices (8:48)
Mobile Small View Design for Wstudio Website
Mobile Artboard and Grids (3:59)
Header Mobile View Design (10:32)
Process Section Mobile View (8:53)
Team Members Section Mobile view (9:08)
Footer Design for Mobile and Final Adjustments (7:39)
Designing for Developers
What Developers needs to know (4:55)
Which Layer styles to CSS Code in Photoshop? (7:48)
Installing and using Zeplin App (10:11)
Style Guides with Zeplin (14:12)
Zeplin vs Avocode (3:44)
Avocode vs Simpli tools (5:40)
Handoff using Figma and Adobe XD 2020 (11:23)
Prototyping for Web Design
What are Prototypes (3:49)
Prototyping using Adobe Xd and Figma App (6:32)
SVG and Icon Fonts
Using IconMoo to create custom Icon sets (8:13)
Using SVG in Web Design (10:36)
Teach online with
Designing Process Section Part 1
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock