Wilson Mar bio photo

Wilson Mar

Hello!

Calendar YouTube Github

LinkedIn

Specs, libraries, code examples for UX look and feel by Shopify and other big tech companies

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

Overview

Major organizations creating websites create a “Design System” publication which specifies the UX (User Experience) and provides tools for website designers to achieve a common UI (User Interface).

NOTE: Content here are my personal opinions, and not intended to represent any employer (past or present). “PROTIP:” here highlight information I haven’t seen elsewhere on the internet because it is hard-won, little-know but significant facts based on my personal research and experience.

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 (dark & light) theme file
  • React component library (JavaScript)

  • Custom font files

  • Sketch core library specifying fonts
  • Sketch icon library
  • Sketch Grid library
  • Sketch illustration library

  • Sample code to use the Design System components to build a website

Common use of a UI coding (JavaScript, etc.) library makes scanning for security vulnerabilities (such as OWASP) more efficient, so the security of each app’s code is “built in” via the libraries used rather than individually tested out of custom code.

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.

Lists

https://github.com/alexpate/awesome-design-systems - a curated list of design systems, highlighting those with components, voice & tone, designers kit.

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

Design Systems

Shopify.com, the global eCommerce platform, offers their Polaris Design System (at https://polaris.shopify.com/getting-started) for Shopify admins to create NodeJs apps for merchants using their unique Shopify CLI. https://www.shopify.com/learn

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

AWS products and services uses cloudscape.design since 2016 (so it’s mature). It’s open-sourced at github.com/cloudscape-design. It’s used in this solution. Gethin Webster coded a demo app with React JSX which has a lot of features on many pages. https://www.w3schools.com/react/react_jsx.asp The app also has internationalization!

Derek Bingham is its Developer Advocate.

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

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’s Material Design (at https://m2.material.io/design/introduction) “help teams build high-quality digital experiences for Android, iOS, Flutter, and the web.”

IBM’s Carbon Design System (at https://carbondesignsystem.com/) is open-sourced with the IBM Design Language.

Airbnb (https://airbnb.design/)

Atlassian (https://atlassian.design/) of Jira, Confluence.

Buzzfeed.com CSS style guide (at https://solid.buzzfeed.com/)

Facebook

Audi.com (the car company’s website) has a slick european design, created using https://www.audi.com/ci/en/guides/user-interface/introduction.html

https://helios.hashicorp.design is the Design System for constructing HashiCorp.com.

“Creative Tim” created the Argon Design System with over 100 components for free & 200 licensed ($349 lifetime). Choose and combine them using his low-code website builder. All components can take variations in color, optimized for mobile and Retina Ready.

Four Example Pages:

  • Landing Page
  • Profile Page
  • Login Page
  • Register Page

For web:

  • Bootstrap 4
  • Angular
  • React Bootstrap & Material
  • Vuejs Bootstrap & Material
  • Angular
  • Laravel
  • (not Svelte)

For mobile:

  • Material React Native & Flutter
  • Argon React Native & Flutter
  • Now UI React Native & Flutter
  • Soft UI React Native & Flutter

For backends:

  • Laravel
  • Python: Django
  • Python: Flask
  • Next
  • Nodejs
  • Aspnet

Tools

Many provide a “Design Kit” for their Design System as a plugin for graphic program on macOS:

  • Sketch
  • Figma
  • Adobe XD

PegasusDesignSystem.com “crafted for scale in Figma”.

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. * Salesforce articles https://www.lightningdesignsystem.com/resources/articles/

https://sparkbox.com/foundry/design_system_maturity_model

Design tokens

“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.

More on front-end styling

This is one of several topics:

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

  5. gRPC (g___ Remote Procedure Call)
  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development
  12. Gatsby app generator

  13. Website styles
  14. Website Styling
  15. VueJs front-end framework

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

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

  20. Data Visualization using Tableau