Design for Developers
Table of Contents
IntroductionSarah Drasner introduces herself and the course.
Right vs. Left BrainSarah debunks the 'right brain vs the left brain' myth, and why it's important to move past this thinking.
What this Course Is & SetupTo set expectations - Sarah discusses what this course is, what it is not, and sets up the folders for the course.
PerfectionSarah reframes the way students think about failure and the pursuit of perfection.
Designer vs. DeveloperSarah describes why she doesn't introduce herself as a designer, and discusses the roles of developer vs designer.
Introduction to Layouts & GridsSarah introduces the concept of layout in design, and explores how grids apply in a lot of cases.
Balance: SymmetryThrough 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: AsymmetryIn 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 HistorySarah introduces rule of thirds, triad composition, and Swiss design which achieve balance, but are still asymmetrical.
ShapeSarah discusses the properties of shapes, and their relationship to how you process and prioritize visual information.
Scale and CroppingBy 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.
GridSarah 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 ToolsSarah reviews several tools designers use to lay out websites, along with their pros and cons.
Photoshop Keyboard ShortcutsSarah reviews some shortcut keys to utilize in photoshop that expedite the process of designing and using Photoshops more common commands.
Layout and Composition DemoSarah gives some live examples of how she thinks about laying out a page in Photoshop.
Primitive Shapes ExerciseFor the first exercise Sarah instructs students to create three compositions with just primitive shapes.
Primitive Shapes ReviewSarah shows several student-created examples, and talks about the benefits of tackling composition outside of the mindset of programming layouts.
Layout in CSSSarah reviews several resources and examples created by industry leaders that play around with layout and composition.
CSS Grid DemosSarah walks through several CSS grid examples in CodePen.
Grid Naming ExampleSarah 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 FlexboxSarah 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 ToolsSarah 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 ModeExploring the use of CSS writing-mode vs transform, Sarah walks through some examples of playing with text layout and orientation.
Grid By Example DemoStarting with some examples on Grid by Example, Sarah shows you how to modify an existing grid layout to match an earlier layout sketch.
Layout ExerciseSarah sets up an exercise involving one of the earlier shape composition you created.
Layout Q&ASarah answers a question that leads to covering topics like nested grids, layout approaches and thinking design updates.
Color ModesSarah explains additive and subtractive color mixing modes, and how it affects the end color product.
Color MixingSarah 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 PropertiesSarah goes over Monotone and Duotone, and some properties of light the real world.
Color in CodeSarah reviews RGBA, Hex, HSL(A), and named color formats in code.
Color VariablesSarah 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 ColorBy placing limits to the color pallette, Sarah shows how this can change a look or feel to a design.
Color ToolsSarah 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 GradientsSarah shows an example of best practices with animating a gradient in your code.
How to Create a PaletteBy 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) ExampleSarah highlights an example of using color to communicate in data visualization.
Creating a Palette DemoSarah demonstrates creating a color palette using some previously discussed techniques.
Creating a Palette ExerciseSarah sets up the exercise where you take the previous color techniques and create your own color gradient.
Typography BasicsSarah gives a real world example of when typography matters, and gives an overview of the basics.
Typography ResourcesSarah talks about some great sources from which to get fonts, and their pros and cons
Pairing FontsSarah talks about font pairing, performance and best practices, and what to think about when pairing fonts.
Typography for LawyersSarah draws out insights around attention span and line length from the book 'Typography for Lawyers'.
Typographic ColorSarah covers the rythm and cadence of typography along with exploring tools and code to help you create responsive fluid typography.
TerminologySarah goes over common typography terminology and their meanings along with highlighting some resources.
Typography DemoSarah grabs selects some fonts to pair and assembles a layout using them and the layout from the previous exercise.
Typography Exercise and Q&ASarah sets up adding typography to the ongoing layout exercise, and answers questions regarding typography pairing, variable fonts, color and best practices.
RemixingSarah discusses the importance of taking inspiration from other sources and finding your heroes, but not copying them - remixing them.
Sources of InspirationSarah shares several sources to pull from when looking for inspiration.
UI Kit DemoSarah walks through how to take a design, and make it a different product that is your own through remixing.
Images and Performance
Image Formats & ResourcesSarah 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 TipsSarah covers best practices exporting images with emphasis on performance and optimal size.
SVGSarah 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 BackgroundSarah 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 EffectsSarah explores more color and blending options in Photoshop.
Layout Demo: Coding CompositionsAdding to her previous design, Sarah brings in colors from her palette using color variables and adds an SVG icon.
Images & Layout ExerciseSarah sets up the exercise focusing on working with masking and clipping an image or background shape.
LoadersSarah highlights the importance of using loaders on a page and it's percieved affect on loading times.
User Experience & ToolsSarah 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 LanguageSarah discusses the importance of establishing your own motion design language and how it can stregthen your brand.
Types of PrototypesSarah covers some different ways to create prototypes and what their purpose is.
Page TransitionsSarah shows examples of page transitions, from working code in the wild to concepts created by video effects.
Interaction ExerciseSarah sets up the exercise involving making two thumbnails and one story board of a possible interaction on your example site.