8 Point or 8px Grid System | LEARNUXID

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

8 Point or 8px Grid System

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock