Wilson Mar bio photo

Wilson Mar

Hello!

Email me Calendar Skype call

LinkedIn Twitter Gitter Instagram Youtube

Github Stackoverflow Pinterest

Specifications for look and feel

US (English)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Cyrillic Russian   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

Overview

“Design systems allow designers to make better decisions”

Behind every major organization creating websites is a “Design System” publication which specifies the UX (User Experience) and provides tools for website designers that UX.

UX includes more than colors, fonts (typography), icons (iconography), Design Tokens, line height, and other aspects of styling websites and Andriod/iOS mobile apps. Design Systems provide Guidelines on Voice and Tone, Animation, Accessibility, Layout, Navigation, Search, Messaging, Data Visualization, Localization, etc. Component blueprints provide examples to code components such as Accordion, Checkbox, etc. in the form of

  • Bootstrap theme file
  • React component library
  • Custom font files
  • Sketch core library specifying fonts
  • Sketch icon library
  • Sketch Grid library
  • Sketch illustration library

To create design systems, many use the Tailwind CSS compiler. It’s called an “atomic/utility-first” CSS framework (UI-kit). It’s best installed via npm. For better performance, Tailwind removes unused CSS using PurgeCSS, which can be incorporated into Jekyll and themes.

Examples

Your guide to design systems from the world’s leading brands Oct. 9, 2017

US Government has the U.S. Web Design System (USWDS) at designsystem.digital.gov (Slack channel chat.18f.gov)

Salesforce has their Salesforce Lightning Design System (SLDS) at lightningdesignsystem.com

SAP Fiori at experience.sap.com/fiori-design announced in 2015.

Shopify’s “Polaris” Design System shows Ecommerce giant

Amazon

Apple developer.apple.com/design for “Human Interface Guidelines” Apple hands out awards for those who designed apps using their system. Videos The sans-serif “San Francisco” is Apple’s system font across macOS, iOS, watchOS, and tvOS.

Microsoft’s Fluent Design System at fluent.microsoft.com and microsoft.com/design/fluent

Google Material Design

Facebook

Tools

Many provide their Design System as a plugin for the Sketch graphic program on macOS.

Salesforce provides a SLDS Validator for VS Code at https://www.lightningdesignsystem.com/tools/validator/ which scans your markup, validates it against a database of guidelines/tips/gotchas/etc. extracted from the SLDS documentation, and offers suggestions on how to improve your code.

Figma

Design tokens

“You can think of a design token as a key that unlocks a specific value.”

Tokens are like nicknames for colors, opacity, shadows, etc. See VIDEO “What are Design Tokens”. Alias tokens are diverged Global Tokens made for context-specific purpose, to separate concerns.

The Future of Design Systems | Hayley Hughes | Airbnb | Awwwards Conf San Fran

Tokens are specified in SASS files, not token values.

A Measure of Line Height

USDS defines the “measure” token to standardize line heights:

  • 1 = 44ex
  • 2 = 60ex
  • 3 = 64ex
  • 4 = 68ex
  • 5 = 72ex
  • 6 = 88ex
  • ‘none’ = no max width

Resources

The Red Dot Design Award (at red-dot.org) is a German international design prize awarded by Red Dot GmbH & Co. It is one of the most prestigious design awards worldwide and honors innovation, concepts and visions.

  • Salesforce articles https://www.lightningdesignsystem.com/resources/articles/

More on front-end styling

This is one of several topics:

  1. Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML
  4. 508 Accessibility

  5. HTTP/2 Transition Project Plan

  6. Docusaurus static website generator
  7. Static websites
  8. JAM Stack Website Project Plan
  9. Jekyll Site Development
  10. Gatsby app generator

  11. Website styles
  12. Website Styling
  13. VueJs front-end framework

  14. Protractor to automate testing of Angular and other web pages

  15. Email from website
  16. Search within Hyde format Jekyll websites
  17. Windows Tile Pin Picture to Website Feed

  18. Data Visualization using Tableau