Design for Developers

Design for Developers
Design for Developers
English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 4h 20m | 1.49 GB

Learn how to become self-sufficient for the entire process of execution from concept to design to implementation. Also, understand the rules for designing to become a better collaborator to design team members and better able to execute the creation of complex and beautiful front-end experiences!

Table of Contents

Introduction
1 Introduction
2 Right vs. Left Brain
3 What this Course Is & Setup
4 Perfection
5 Designer vs. Developer

Layout
6 Introduction to Layouts & Grids
7 Layout and Composition Demo
8 Primitive Shapes Exercise
9 Primitive Shapes Review
10 Balance- Symmetry
11 Balance- Asymmetry
12 Exploring Asymmetry- Learning from Art History
13 Shape
14 Scale and Cropping
15 Grid
16 Layout Tools
17 Photoshop Keyboard Shortcuts

CSS Layout
18 Layout in CSS
19 CSS Grid Demos
20 Grid Naming Example
21 CSS Flexbox
22 Using ClipPath & Other Masking Tools
23 CSS Writing Mode
24 Grid By Example Demo
25 Layout Exercise
26 Layout Q&A

Color Theory
27 Color Modes
28 Data Visualization with HSL(A) Example
29 Creating a Palette Demo
30 Creating a Palette Exercise
31 Color Mixing
32 Color Modes and Properties
33 Color in Code
34 Color Variables
35 Limited Color
36 Color Tools
37 Animated Gradients
38 How to Create a Palette

Typography
39 Typography Basics
40 Typography Resources
41 Pairing Fonts
42 Typography for Lawyers
43 Typographic Color
44 Terminology
45 Typography Demo
46 Typography Exercise and Q&A

Inspiration
47 Remixing
48 Sources of Inspiration
49 UI Kit Demo

Images and Performance
50 Image Formats & Resources
51 Exporting Tips
52 SVG
53 SVG Handling and Full Page Background
54 Images Demo- Image Overlay Effects
55 Layout Demo- Coding Compositions
56 Images & Layout Exercise

Prototyping
57 Loaders
58 User Experience & Tools
59 Motion Design Language
60 Page Transitions
61 Types of Prototypes
62 Interaction Exercise

Wrapping Up
63 Conclusion