Links
https://designerup.co/blog/10-best-design-systems-and-how-to-learn-and-steal-from-them/
https://www.figma.com/@atlassian
https://developer.apple.com/design/resources/
DESIGN SYSTEM
Definition: A design system is a complete set of standards intended to manage design at
scale using reusable components and patterns.
MATERIAL UI TAILWIND
https://m3.material.io/ https://tailwindcss.com/
● Currently only use for mobile ● for website
app ● offers more customization
● less customization options options
● Requires more CSS ● Lightweight and fast-
loading(( reduce size of css file )
Here are the top companies that are known to be using these DS
● Google ● Loom
● Walmart ● Shopify
● NASA ● Turbo
● GitHub
● Amazon
https://tailwindcss.com/showcase
1. POLARIS (Shopify) 2. FLUENT 2 ( Microsoft’s
https://polaris.shopify.com design system)
https://fluent2.microsoft.design/
3. BASE DESIGN SYSTEM 4. Apple
(Uber) https://developer.apple.com/design/r
https://base.uber.com/ esources/
(They have mentioned alternative
names to each component )
5. Chakra
https://chakra-ui.com/getting-started
ELEMENTS AND COMPONENTS
https://uizard.io/blog/what-are-ui-elements-ui-design-elements-explained/#what-are-ui-design-elements
Elements Components
● UI elements are the smaller ● composed of multiple
visual building blocks elements working together
● UI design elements can be ● reusable entities
used to guide user interactions, ● fit into one of three
present information, or enhance the categories (namely informational,
visual appeal of the user interface. navigational, and input controls)
types of UI elements types of COMPONENTS
https://www.usability.gov/how-to-and-
tools/methods/user-interface-elements.html
VISUAL DESIGN ELEMENTS
Are the building blocks of visual design( improve a design’s/product’s aesthetic appeal and
usability with suitable images, typography, space, layout and colour.
Visual design is about more than aesthetics)
Common elements include
● line
● shape
● colour
● texture
● space
● form
● typography
TYPOGRAPHY
SERIF AND SANS SERIF
https://fabrikbrands.com/difference-between-serif-and-sans-serif/
SERIF SANS SERIF
● a little foot or ● word sans simply mean
embellishment that appears on “without”.
the edges of words. ● that drops these marks
● common in newspapers, entirely
magazines, and even in books. ● Simple and clean, with
● easy to read crisp lines and soft curves
● TIMES NEW ROMAN ● MANROPe
● GEORGIA ● Google
● Rolex ● Arial
● Roboto
TYPOGRAPHY hierarchy
https://www.turing.com/kb/typographic-hierarchy#what-is-typography?
● to make the text more readable
● arrange text to highlight the importance of information
● creates the contrast between elements.
Levels of Typography Hierarchy
1. The heading
visually stimulating, with large bold fonts and (usually) bold typefaces.
2. The Subheading
● divides the design into sections
● should not be as prominent as the heading, it should be clearer than the text
body.
3. The Body
● most used and smallest type in a design.
Elements of Typography Hierarchy
1. Typeface
2. Case
3. Weight
4. Alignment
5. Color
6. Position
7. Spacing
8. Contrast
Text Properties
1. Click the icon to view, create, and apply text styles
2. Click the font name to browse a list of web, local, and shared fonts to find a
typeface or font family
3. Use the arrow to select a font weight or style.
4. Use the arrow to adjust the size of your text
5. Adjust the vertical distance between lines of text using the line height field.
6. Adjust the horizontal distance between letters with letter spacing
7. Adjust the vertical distance between paragraphs with paragraph spacing.
8. Select how text overflows or wraps with resizing behavior.
9. Adjust the horizontal alignment of text within the text box.
10. Adjust the vertical alignment of text within the text box.
11. Click to open the type settings panel and explore more text properties.
● 150% line height (Leading) for body text (https://uxplanet.org/16-ui-design-
tips-ba2e7524d203#844b)
COLOR
60-30-10 Rule
https://www.freecodecamp.org/news/the-60-30-10-rule-in-design/
● 60% dominant/primary colour
● 30% secondary colour
● 10% accent color/ supplementary colors
Importance
● Emphasizing Key Elements
● Visual Balance
● Simplicity and Consistency
ICONS
https://www.flaticon.com/
https://remixicon.com/
https://fontawesome.com/
https://www.svgrepo.com/
https://iconmonstr.com/
https://primer.style/foundations/icons
https://feathericons.com/
https://pictogrammers.com/library/mdi/
COLOURS TO USE INSTEAD OF PURE WHITE
IN THE BACKGROUND
● Bone white #F9F6EE
● Ivory #FFFFF0
● Parchment #FCF5E5
● Pearl #E2DFD2
● Seashell #FFF5EE
● Mint cream #F5FFFA
Design Systems:
A collection of reusable components with clearly designed standards for use; such as
colors, fonts, typography, styles, and other UI components.
Design systems help to achieve consistent design.
Examples:
1. Material Design: (By Google)
Contains Grid-based layouts, responsive animations, depth effects, transitions, and
padding.
The latest version is Material 3
2. Carbon Design System: (By IBM)
Based on IBM Design Language
Contains design tools, resources
The latest version is V11, Containing Light-dark modes, Design Kits for Figma, and
sketch
3. Polaris: (By Shopify)
Contains components to build apps in Shopify
The latest version is 12
4. Fluent UI Design System: (By Microsoft)
Contains react components to build apps on Windows, ios, android, macOS and web
The latest version is Fluent 2
5. Human interface guidelines:
Contains guidelines and documents for designing any Apple platform.
Text Styling:
A collection of named attributes, fonts, size, color, line spacing etc
1. Choose the proper typeface and fonts
2. Understand tracking (letters spacing), kerning (space between characters)
3. Maintain consistency
4. Maintain hierarchy
5. Good Alignment between text and graphics
6. Color
7. Maintain good white space
