Sarah Drasner
Google
Design for Developers
4 hours, 20 minutes CC
Course Description
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.
Preview
CloseCourse Details
Published: January 13, 2019
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 11 minutes
Sarah Drasner introduces herself and the course.
Sarah debunks the 'right brain vs the left brain' myth, and why it's important to move past this thinking.
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.
Sarah describes why she doesn't introduce herself as a designer, and discusses the roles of developer vs designer.
Layout
Section Duration: 45 minutes
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.
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.
Sarah reviews several tools designers use to lay out websites, along with their pros and cons.
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.
Sarah shows several student-created examples, and talks about the benefits of tackling composition outside of the mindset of programming layouts.
CSS Layout
Section Duration: 45 minutes
Sarah reviews several resources and examples created by industry leaders that play around with layout and composition.
Sarah walks through several CSS grid examples in CodePen.
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.
Sarah presents her recommended guide on Flexbox, and shows the CSS properties 'shape-outside' and 'border-radius' to achieve her layout designs.
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.
Exploring the use of CSS writing-mode vs transform, Sarah walks through some examples of playing with text layout and orientation.
Starting with some examples on Grid by Example, Sarah shows you how to modify an existing grid layout to match an earlier layout sketch.
Sarah sets up an exercise involving one of the earlier shape composition you created.
Sarah answers a question that leads to covering topics like nested grids, layout approaches and thinking design updates.
Color Theory
Section Duration: 41 minutes
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.
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.
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.
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.
Sarah shows an example of best practices with animating a gradient in your code.
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.
Sarah demonstrates creating a color palette using some previously discussed techniques.
Sarah sets up the exercise where you take the previous color techniques and create your own color gradient.
Typography
Section Duration: 40 minutes
Sarah gives a real world example of when typography matters, and gives an overview of the basics.
Sarah talks about some great sources from which to get fonts, and their pros and cons
Sarah talks about font pairing, performance and best practices, and what to think about when pairing fonts.
Sarah draws out insights around attention span and line length from the book 'Typography for Lawyers'.
Sarah covers the rythm and cadence of typography along with exploring tools and code to help you create responsive fluid typography.
Sarah goes over common typography terminology and their meanings along with highlighting some resources.
Sarah grabs selects some fonts to pair and assembles a layout using them and the layout from the previous exercise.
Sarah sets up adding typography to the ongoing layout exercise, and answers questions regarding typography pairing, variable fonts, color and best practices.
Inspiration
Section Duration: 18 minutes
Sarah discusses the importance of taking inspiration from other sources and finding your heroes, but not copying them - remixing them.
Sarah shares several sources to pull from when looking for inspiration.
Sarah walks through how to take a design, and make it a different product that is your own through remixing.
Images and Performance
Section Duration: 35 minutes
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.
Sarah covers best practices exporting images with emphasis on performance and optimal size.
Sarah explains how the SVG image format works, and why its ideal for many uses. She also dives into some tooling around SVG.
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.
Sarah explores more color and blending options in Photoshop.
Adding to her previous design, Sarah brings in colors from her palette using color variables and adds an SVG icon.
Sarah sets up the exercise focusing on working with masking and clipping an image or background shape.
Prototyping
Section Duration: 20 minutes
Sarah highlights the importance of using loaders on a page and it's percieved affect on loading times.
Sarah walks through how to approach feature requirements and story maps, and how to frame up thinking about the user experience end to end.
Sarah discusses the importance of establishing your own motion design language and how it can stregthen your brand.
Sarah covers some different ways to create prototypes and what their purpose is.
Sarah shows examples of page transitions, from working code in the wild to concepts created by video effects.
Sarah sets up the exercise involving making two thumbnails and one story board of a possible interaction on your example site.
Wrapping Up
Section Duration:
Sarah closes out the workshop by thanking the audience.
The Frontend Masters course, Design for Developers, by Sarah Drasner, explains the design process for developers, but it’s also a great resource for designers.
Mahawa
sandyhawa1
As a designer transitioning to UI, it's easy to get caught up in the visual side of things and forget about the code that makes it all work. Sarah Drasner's Design for Developers course on Frontend Masters changed my perspective. Don't be afraid to bridge the gap between design and development.
jinjon
EugeneAdewole
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops