Coursera Plus Annual is 40% Off — Ends July 13.

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Frontend Masters

Design for Developers

via Frontend Masters

Go to class Write review
Boot.dev Ad

The Fastest Way to Become a Backend Developer Online

Learn More → Simplilearn Ad

Become an AI & ML Engineer with Cal Poly EPaCE — IBM-Certified Training

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
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!

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

Reviews

Start your review of Design for Developers

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.