Design for Developers

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!

• 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