Notes on setting up and documenting a prototype design system for email

What is a Design System?

A design system includes the design components and code assets along with the standards and documentation that accompanies the assets. The documentation includes guidelines on why and how to use the design components.

“Understanding not only the what, but the why, behind the design of a system is critical to creating an exceptional user experience. Defining and adhering to standards is how we create that understanding.” – Marco Suarez https://www.invisionapp.com/blog/guide-to-design-systems/

A design system is a set of rules and assets that define how to express everything a visual system needs to say – Micah Godbolt

https://forumone.com/ideas/what-is-design-system

https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/

Rationale

Design systems will continue to be essential vehicles for creating great digital work.

“Digital teams are tasked with creating more products, services, and features that need to work on more devices and environments than ever before,” he explains. “To tackle this herculean task, they need solid ground to stand on. Design systems help collect institutional knowledge, so that different product teams and different disciplines can all speak the same language in order to produce higher-quality work faster than ever.” https://www.shopify.com/partners/blog/web-design-trends-2018

https://www.emailonacid.com/blog/article/email-development/budgeted-fun-how-a-design-system-can-facilitate-innovation

Code and Design Content to Include

  • CSS: both “entire header CSS file” and relevant snippets for each content type
  • Preheaders
  • Social Follow
  • Footers
  • Wrapper code and tables
  • CSS buttons
  • redirects
  • Naming conventions
  • Standardized content

Design System Components

  • Editorial:
    • Voice + Tone: Include guidelines for voice and how the tone adjusts for various use cases and types of campaigns.
  • Design
    • Color Palette: Specify the color usage: call-to-action, background, body text, title, etc.
    • Call-to-Actions: Include buttons, text links, and any CTA approaches (standalone buttons, buttons on hero or banners, etc.). Address styling for  color, spacing, borders, font sizes, standard text, and colors.  Include guidelines on when and where to use the various types of CTAs.
    • Fonts: include the full font-stack and how the font renders across different email clients. You may also want to show how the text will appear in clients that do not support the primary font.
    • Icons: Include a repository of current icons and design guidelines for future icon creation.
    • Images: Include widths, image ratios, cropping, and treatment for content areas such as full-width hero images, banners, and smaller images (as with 2 or more side-by-side items).
    • Typography: Show the font family, weight, font sizes, and line heights used for  headlines, subtitles, body copy, disclaimers, etc. Include variations for when the typography is embedded in an image vs rendered as HTML text. Include content hierarchy for accessibility.
  • Code
    • Include a pattern library of code snippets, CSS, and examples of appearance across devices.

Relevant Quotes

“Design systems don’t just create consistency across UI components — they should advocate for consistent experiences too.”  quote from “Drag and Drop for Design Systems
Defining UX patterns for drag and drop across components” article on UX Collective https://uxdesign.cc  by Grace Noh January 12, 2018
https://uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d  accessed 1/19/2018

Resources

https://www.invisionapp.com/blog/guide-to-design-systems/

http://news.design.systems/

https://blog.prototypr.io/design-system-ac88c6740f53

A lot of good tips here: https://www.smashingmagazine.com/2014/08/improve-your-email-workflow-with-modular-design/