Design for Developers
Learning Paths:
Topics:
Table of Contents
Introduction
Introduction
Sarah Drasner introduces herself and the course.
Right vs. Left Brain
Sarah debunks the 'right brain vs the left brain' myth, and why it's important to move past this thinking.
What this Course Is & Setup
To set expectations - Sarah discusses what this course is, what it is not, and sets up the folders for the course.
Perfection
Sarah reframes the way students think about failure and the pursuit of perfection.
Designer vs. Developer
Sarah describes why she doesn't introduce herself as a designer, and discusses the roles of developer vs designer.
Layout
Introduction to Layouts & Grids
Sarah introduces the concept of layout in design, and explores how grids apply in a lot of cases.
Balance: Symmetry
Through the use of several examples, Sarah demonstrates how balance and symmetry can affect a composition. She then ties this into website examples, and sets up the benefits of breaking symmetry.
Balance: Asymmetry
In contrast to symmetry, Sarah demonstrates how asymmetry can add a compelling aspect to a design, while maintaining qualities of balance and composition.
Exploring Asymmetry: Learning from Art History
Sarah introduces rule of thirds, triad composition, and Swiss design which achieve balance, but are still asymmetrical.
Shape
Sarah discusses the properties of shapes, and their relationship to how you process and prioritize visual information.
Scale and Cropping
By highlighting examples of playing with scale and cropping, Sarah shows how these tools can be used to create visually interesting and dynamic compositions with simple shapes and subjects.
Grid
Sarah introduces the grid in the context of how it affects a design and its aesthetics, along with some supporting concepts like anchoring and layout. She also discusses how important it is to respect the grid, and why designers often fight to adhere to it's ruleset.
Layout Tools
Sarah reviews several tools designers use to lay out websites, along with their pros and cons.
Photoshop Keyboard Shortcuts
Sarah reviews some shortcut keys to utilize in photoshop that expedite the process of designing and using Photoshops more common commands.
Layout and Composition Demo
Sarah gives some live examples of how she thinks about laying out a page in Photoshop.
Primitive Shapes Exercise
For the first exercise Sarah instructs students to create three compositions with just primitive shapes.
Primitive Shapes Review
Sarah shows several student-created examples, and talks about the benefits of tackling composition outside of the mindset of programming layouts.
CSS Layout
Layout in CSS
Sarah reviews several resources and examples created by industry leaders that play around with layout and composition.
CSS Grid Demos
Sarah walks through several CSS grid examples in CodePen.
Grid Naming Example
Sarah highlights additional CodePen demonstrations that illustrate the ease with which grid can create complex and responsive layouts with little code, and using naming to create your own layout schema.
CSS Flexbox
Sarah presents her recommended guide on Flexbox, and shows the CSS properties 'shape-outside' and 'border-radius' to achieve her layout designs.
Using ClipPath & Other Masking Tools
Sarah gives an quick overview of how SVGs work, how they have a limited viewbox, and shows how preserveAspectRatio with SVG works. She then goes into multiple examples using both CSS ClipPaths and SVG to make masks.
CSS Writing Mode
Exploring the use of CSS writing-mode vs transform, Sarah walks through some examples of playing with text layout and orientation.
Grid By Example Demo
Starting with some examples on Grid by Example, Sarah shows you how to modify an existing grid layout to match an earlier layout sketch.
Layout Exercise
Sarah sets up an exercise involving one of the earlier shape composition you created.
Layout Q&A
Sarah answers a question that leads to covering topics like nested grids, layout approaches and thinking design updates.
Color Theory
Color Modes
Sarah explains additive and subtractive color mixing modes, and how it affects the end color product.
Color Mixing
Sarah covers Color Mixing and types of combinations on the color wheel, such as Monochromatic, Complementary, Analogous, Triadic. She also describes how color is affected by neighboring colors, contrast, and then she highlights tools for checking contrast for accessibility purposes and exploring color mixing on the color wheel.
Color Modes and Properties
Sarah goes over Monotone and Duotone, and some properties of light the real world.
Color in Code
Sarah reviews RGBA, Hex, HSL(A), and named color formats in code.
Color Variables
Sarah makes a strong case for the use of Color Variables in your CSS or Sass/SCSS code, and shows how you can mix, adjust, lighten, darken and saturate variable colors.
Limited Color
By placing limits to the color pallette, Sarah shows how this can change a look or feel to a design.
Color Tools
Sarah talks about her favorite color tools, and covers Dribble and Pallettetab to explore color palettes, Adobe Capture, Coolors, Paletton and more to generate your own palettes and gradients.
Animated Gradients
Sarah shows an example of best practices with animating a gradient in your code.
How to Create a Palette
By walking through practices like anchoring to a color, getting your greys and gathering accents, Sarah shows some tools to building a color palette.
Data Visualization with HSL(A) Example
Sarah highlights an example of using color to communicate in data visualization.
Creating a Palette Demo
Sarah demonstrates creating a color palette using some previously discussed techniques.
Creating a Palette Exercise
Sarah sets up the exercise where you take the previous color techniques and create your own color gradient.
Typography
Typography Basics
Sarah gives a real world example of when typography matters, and gives an overview of the basics.
Typography Resources
Sarah talks about some great sources from which to get fonts, and their pros and cons
Pairing Fonts
Sarah talks about font pairing, performance and best practices, and what to think about when pairing fonts.
Typography for Lawyers
Sarah draws out insights around attention span and line length from the book 'Typography for Lawyers'.
Typographic Color
Sarah covers the rythm and cadence of typography along with exploring tools and code to help you create responsive fluid typography.
Terminology
Sarah goes over common typography terminology and their meanings along with highlighting some resources.
Typography Demo
Sarah grabs selects some fonts to pair and assembles a layout using them and the layout from the previous exercise.
Typography Exercise and Q&A
Sarah sets up adding typography to the ongoing layout exercise, and answers questions regarding typography pairing, variable fonts, color and best practices.
Inspiration
Remixing
Sarah discusses the importance of taking inspiration from other sources and finding your heroes, but not copying them - remixing them.
Sources of Inspiration
Sarah shares several sources to pull from when looking for inspiration.
UI Kit Demo
Sarah walks through how to take a design, and make it a different product that is your own through remixing.
Images and Performance
Image Formats & Resources
Sarah discusses some resources to get images, and goes on to discuss the different qualities of different image formats along with the importance of image optimization to web performance.
Exporting Tips
Sarah covers best practices exporting images with emphasis on performance and optimal size.
SVG
Sarah explains how the SVG image format works, and why its ideal for many uses. She also dives into some tooling around SVG.
SVG Handling and Full Page Background
Sarah shows examples of SVG scaling, cropping, clipping, and masking and then highlights some great uses for SVG . Sarah also briefly covers full page backgrounds.
Images Demo: Image Overlay Effects
Sarah explores more color and blending options in Photoshop.
Layout Demo: Coding Compositions
Adding to her previous design, Sarah brings in colors from her palette using color variables and adds an SVG icon.
Images & Layout Exercise
Sarah sets up the exercise focusing on working with masking and clipping an image or background shape.
Prototyping
Loaders
Sarah highlights the importance of using loaders on a page and it's percieved affect on loading times.
User Experience & Tools
Sarah walks through how to approach feature requirements and story maps, and how to frame up thinking about the user experience end to end.
Motion Design Language
Sarah discusses the importance of establishing your own motion design language and how it can stregthen your brand.
Types of Prototypes
Sarah covers some different ways to create prototypes and what their purpose is.
Page Transitions
Sarah shows examples of page transitions, from working code in the wild to concepts created by video effects.
Interaction Exercise
Sarah sets up the exercise involving making two thumbnails and one story board of a possible interaction on your example site.
