What are Design Principles?
Design principles are set of guidelines the product team needs to follow throughout their design process in order to create more aligned experiences.
Why do we need Design Principles?
It is about the look, feel, tone of voice and how the brand behaves through the user interface. Good design principles can help the product team make better design decisions.
What are the elements of Design Systems?
Brand Guidelines: Non-aesthetic parts of a design. Includes principles, tone and voice,grammar, etc. This tells both the users and the company who you areand what your narrative is.
Style Guide: The documentation for the visuals. Includes all of the things that you think a designer would use: typography, icons, colour, illustrations, etc.
Visual Language: A guide to what the brand feels like (versus a style guide ishow to accomplish that).
CSS Framework: Front-end code that developers use to build a product. e.g. Bootstrap, Foundation
Component and Pattern Library: Includes forms, form elements, images,navigation, overlays, etc.
What are the differences between component and pattern libraries?
The difference between components and patterns is best explained using Brad Frost’s Atomic Design methodology:
Atoms: The foundational design elements that you cannot break down further. For example, buttons, icons, forms, etc.
Molecules: Created by combining atoms to create larger UI components or patterns, like pagination, breadcrumbs, etc.
Organisms: Complex UI patterns comprising of atoms and molecules. These patterns shape a user interface with cards, navigation bars, logos, search fields, etc.
Templates: Complete layouts and wireframes which include atoms, molecules, and organisms. A template starts to resemble parts of a webpage or mobile application.
Page: A page brings everything together on one screen.