Web themes (also called front-end component libraries or front-end design systems) help efficient design and testing, and enforce UI consistency. They are especially important in Agile environments, where enabling more efficient design workflows is critical to keeping the fast pace of development.
When developed rigorously, web themes promote consistent design practices and enforce developer adherence to specifications.
Common problems with design
50 shades of grey
UI and UX inconsistencies across the app.
When answering even simple questions like “Which component should I use?” becomes very time-consuming.
Poor delivery quality
The UX/UI inconsistencies make users confused and frustrated when they could not get their expected feedback.
Inconsistent code library
Sometimes the front-end guys come up with new components with a different look & feel instead of reuse the existing ones.
Top Level Goals
Getting rid of a messy codebase and over customized UI components. Making sure we have a well thought-out structure and approach.
Over time, there are going to be new developers jumping in to fix bugs and add features. We needed to have proper guidelines and conventions to make it easy for people to do things correctly.
The app will grow in the future. Adding new product features should no longer be an unpleasant (and near impossible) task.
from earlier today…
A Pattern Library is the what, a Styleguide is the how and a Design Language is the why
— Stuart Robson (@StuRobson) June 23, 2015
Real Life Examples
- Atlassian UI
- Salesforce Lightning Design System
- Mozilla Sandstone
- Lonely Planet Rizzo
- Financial Times Origami
- Buzzfeed Solid
- Fontshop Styleguide
- Draft U.S. Web Design Standards
- Starbucks Style Guide
- Walmart Web Style Guide
- Dropbox Scooter
- MailChimp UX Patterns
- IBM Design Language (restricted)
Creation Tools Examples
Web Theme Requirements Checklist
Bekitzur experts adhere the following requirements for the component libraries:
- Table of contents that splits components into easily-findable categories;
- Responsive layout or grid systems used to place common UI elements;
- Color palette of the product (HEX or HSL);
- Typeface styles which should include typeface name and foundry, sizes, weights, leading/line height, tracking/kerning, and the appropriate contexts of use for that text style.
For each of the specific UI elements:
- Description of the appropriate context of use:
When does it make sense to use one particular component vs. a similar one?
- Code snippets;
- Specs for implementation, including positioning and spacing information;
- Dos and don’ts for that element.