- Sarah introduces the concept of layout in design, and explores how grids apply in a lot of cases.
- 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.
- 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
- 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.
- 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/
- Sarah reviews some shortcut keys to utilize in photoshop that expedite the process of designing and using Photoshops more common commands.
- Sarah gives some live examples of how she thinks about laying out a page in Photoshop.
- 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
- Sarah shows several student-created examples, and talks about the benefits of tackling composition outside of the mindset of programming layouts.
- 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/
- Sarah goes over Monotone and Duotone, and some properties of light the real world.
- 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/
- 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.
- 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/
- Sarah shows an example of best practices with animating a gradient in your code. - https://codepen.io/sdras/pen/akAWPR/
- By walking through practices like anchoring to a color, getting your greys and gathering accents, Sarah shows some tools to building a color palette.
- Sarah highlights an example of using color to communicate in data visualization. - https://ich.unesco.org/dive/biome/?language=en
- Sarah demonstrates creating a color palette using some previously discussed techniques. - https://unsplash.com/
- Sarah sets up the exercise where you take the previous color techniques and create your own color gradient.