This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
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)
What Developers needs to know
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock