Design for Developers
Sarah Drasner
4 hours, 20 minutes CC
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!
This course and others like it are available as part of our Frontend Masters video subscription.
Sarah Drasner introduces herself and the course. - https://github.com/sdras/design-for-developers/blob/master/slides-pdf/Des4Dev2.pdf https://github.com/sdras/design-for-developers
Right vs. Left Brain
Sarah debunks the 'right brain vs the left brain' myth, and why it's important to move past this thinking. - https://www.health.harvard.edu/blog/right-brainleft-brain-right-2017082512222 http://www.oecd.org/education/ceri/neuromyth6.htm https://www.britannica.com/story/are-there-really-right-brained-and-left-brained-people
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.
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.
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. - https://dribbble.com/Orizon
Exploring Asymmetry: Learning from Art History
Sarah introduces rule of thirds, triad composition, and Swiss design which achieve balance, but are still asymmetrical.
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.
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. - https://www.amazon.com/Making-Breaking-Second-Updated-Expanded/dp/163159284X
Sarah reviews several tools designers use to lay out websites, along with their pros and cons. - https://www.adobe.com/products/photoshop.html https://www.adobe.com/products/illustrator.html https://www.sketchapp.com/
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. - https://github.com/sdras/design-for-developers/blob/master/image-resources/Shape.png
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. - https://gridbyexample.com/ - https://labs.jensimmons.com/ - http://cssgridgarden.com/
CSS Grid Demos
Sarah walks through several CSS grid examples in CodePen. - https://codepen.io/sdras/pen/54dcd199a9f3dbf851b9a8f9c706b8f7 https://chrome.google.com/webstore/detail/codopen/agnkphdgffianchpipdbkeaclfbobaak?hl=en https://codepen.io/sdras/pen/927251d94ada804fea3af69537dbe212
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. - https://codepen.io/sdras/pen/f79830e540a17a3690ab9a9e103b5256 https://codepen.io/sdras/pen/74d210572cdd934e60982fa742243ebd https://codepen.io/sdras/pen/2c40c78b80eda0f03010a6182376f29e
CSS Flexbox
Sarah presents her recommended guide on Flexbox, and shows the CSS properties 'shape-outside' and 'border-radius' to achieve her layout designs. - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://webanimationworkshops.com/
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. - https://bennettfeely.com/clippy/ https://s.codepen.io/yoksel/debug/fsdbu/yYryLOPwEydM https://codepen.io/sdras/full/XdgBOa
CSS Writing Mode
Exploring the use of CSS writing-mode vs transform, Sarah walks through some examples of playing with text layout and orientation. - https://24ways.org/2016/css-writing-modes/ https://dribbble.com/shots/3925911-Visual-exploration
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. - https://gridbyexample.com/ https://codepen.io/rachelandrew/pen/GJVgOV
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 Modes
Sarah explains additive and subtractive color mixing modes, and how it affects the end color product.
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. - https://colorable.jxnblk.com/ https://color.adobe.com http://smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/
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. - https://www.smashingmagazine.com/2012/10/the-code-side-of-color/ http://codepo8.github.io/css-colour-names/
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. - https://twitter.com/JustinMezzell
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. - https://dribbble.com/ https://coolors.co http://paletton.com/ https://color.adobe.com https://palettab.com/ https://www.adobe.com/products/capture.html http://www.colorzilla.com/gradient-editor/ https://uigradients.com/
Animated Gradients
Sarah shows an example of best practices with animating a gradient in your code. - https://codepen.io/sdras/pen/akAWPR/
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. - https://ich.unesco.org/dive/biome/?language=en
Creating a Palette Demo
Sarah demonstrates creating a color palette using some previously discussed techniques. - https://unsplash.com/
Creating a Palette Exercise
Sarah sets up the exercise where you take the previous color techniques and create your own color gradient.
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 - https://fonts.google.com/ https://www.fontsquirrel.com/ https://www.fonts.com/ https://www.myfonts.com/WhatTheFont/ https://www.typography.com/
Pairing Fonts
Sarah talks about font pairing, performance and best practices, and what to think about when pairing fonts. - https://fontjoy.com/
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. - https://codepen.io/MadeByMike/ https://css-tricks.com/snippets/svg/text-lock-up/
Sarah goes over common typography terminology and their meanings along with highlighting some resources. - https://crmrkt.com/MNdAPQ https://www.zachleat.com/web/ https://github.com/Munter/subfont https://robinrendle.com/adventures/ https://baconipsum.com/ http://www.catipsum.com/ https://pirateipsum.me/
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.
Sarah discusses the importance of taking inspiration from other sources and finding your heroes, but not copying them - remixing them. - https://dribbble.com/ https://www.behance.net/ https://codepen.io/ https://glitch.com/ https://codesandbox.io/
Sources of Inspiration
Sarah shares several sources to pull from when looking for inspiration. - http://give-n-go.co/ https://codepen.io/sdras/full/oMZjZa https://codepen.io/mirisuzanne/full/LmrEmb/ https://www.shutterstock.com/ https://www.istockphoto.com/ https://creativemarket.com/add-ons/actions https://codepen.io/patterns/
UI Kit Demo
Sarah walks through how to take a design, and make it a different product that is your own through remixing. - https://thenounproject.com/
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. - https://unsplash.com/ https://images.google.com/ https://www.freepik.com/ https://www.freeimages.com/ https://www.pexels.com/) https://creativemarket.com/ https://stock.adobe.com/ https://www.shutterstock.com/ https://www.shutterstock.com/ https://99designs.com/blog/tips/image-file-types/
Exporting Tips
Sarah covers best practices exporting images with emphasis on performance and optimal size. - https://tinyjpg.com/ https://tinypng.com/ https://jakearchibald.github.io/svgomg/
Sarah explains how the SVG image format works, and why its ideal for many uses. She also dives into some tooling around SVG. - https://css-tricks.com/high-performance-svgs/ https://codepen.io/sdras/full/waXKPw https://codepen.io/shshaw/full/LVKEdv
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. - https://css-tricks.com/masking-vs-clipping-use/ https://codepen.io/shshaw/full/LVKEdv https://s.codepen.io/yoksel/debug/fsdbu/yYryLOPwEydM https://codepen.io/noeldelgado/pen/ByxQjL https://css-tricks.com/perfect-full-page-background-image/
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.
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. - https://css-tricks.com/writing-feature-requirements/ https://medium.com/design-story/story-map-3cc64033128e
Motion Design Language
Sarah discusses the importance of establishing your own motion design language and how it can stregthen your brand. - https://codepen.io/sdras/pen/JbaGwg
Types of Prototypes
Sarah covers some different ways to create prototypes and what their purpose is. - https://codepen.io/sdras/pen/594d891abedf804e87bffe48ee30aace https://codepen.io/yusufbkr/pen/ORBArk https://codepen.io/sdras/pen/2ae1eadb3a80e26daf3aae54cd148c61
Page Transitions
Sarah shows examples of page transitions, from working code in the wild to concepts created by video effects. - https://page-transitions.com/ http://rallyinteractive.com/ https://tympanus.net/codrops/ https://tympanus.net/Development/PageFlipLayout/ https://github.com/davidkpiano/flipping
Interaction Exercise
Sarah sets up the exercise involving making two thumbnails and one story board of a possible interaction on your example site.
Sarah closes out the workshop by thanking the audience.