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!
Overview
Syllabus
- Introduction
- Right vs. Left Brain
- What this Course Is & Setup
- Perfection
- Designer vs. Developer
- Introduction to Layouts & Grids
- Balance: Symmetry
- Balance: Asymmetry
- Exploring Asymmetry: Learning from Art History
- Shape
- Scale and Cropping
- Grid
- Layout Tools
- Photoshop Keyboard Shortcuts
- Layout and Composition Demo
- Primitive Shapes Exercise
- Primitive Shapes Review
- Layout in CSS
- CSS Grid Demos
- Grid Naming Example
- CSS Flexbox
- Using ClipPath & Other Masking Tools
- CSS Writing Mode
- Grid By Example Demo
- Layout Exercise
- Layout Q&A
- Color Modes
- Color Mixing
- Color Modes and Properties
- Color in Code
- Color Variables
- Limited Color
- Color Tools
- Animated Gradients
- How to Create a Palette
- Data Visualization with HSL(A) Example
- Creating a Palette Demo
- Creating a Palette Exercise
- Typography Basics
- Typography Resources
- Pairing Fonts
- Typography for Lawyers
- Typographic Color
- Terminology
- Typography Demo
- Typography Exercise and Q&A
- Remixing
- Sources of Inspiration
- UI Kit Demo
- Image Formats & Resources
- Exporting Tips
- SVG
- SVG Handling and Full Page Background
- Images Demo: Image Overlay Effects
- Layout Demo: Coding Compositions
- Images & Layout Exercise
- Loaders
- User Experience & Tools
- Motion Design Language
- Types of Prototypes
- Page Transitions
- Interaction Exercise
- Conclusion
Taught by
Sarah Drasner
