Week 8
Abstract Our learning objectives for the week are:
Explain how visual design impacts the user experience.
Apply the basic tenets of visual design to fuel a better user experience.
Differentiate between good and bad visual design choices.
Design intuitive interactions using colour decisions.
Identify well-made typefaces and apply best practices for arranging and setting type.
I have created several design systems over the years using various programmes like InDesign, FreeHand and Fireworks. I can tell you from experience that it was horrendous. Maintaining them was near impossible as you had to print them out, and one person in the studio had to become the brand guardian who maintained it. Which, in turn, meant if that person was sick, left the company or lost momentum, the whole design system instantly became out of date.
Designers for years have been calling out for the digitisation of design systems, as have brands, who have seen positive customer sentiment for exposing their rationale and principles that surround the brands.
https://brand.uber.com/
https://creative.starbucks.com/
https://design.studio/work/airbnb
But what is a design system? A design system is a collection of reusable components that can be assembled to build products. Over the past ten years and since the standardisation of responsive design, designers such as Brad Frost have sought to bring order and hierarchy to the interface design process.
In 2013, Brad Frost coined the name for a block-based system: Atomic Design. Atomic design encourages breaking product design into smaller components rather than looking at each element as a unique design entity. When Frost formalised the atomic design methodology, his goal was to develop an approach that would make the design more modular.
He noticed that clients and colleagues referred to designs at a page level and rarely discussed the individual elements which combine to create those larger layouts and realised that we lacked a framework and terminology to bring the conversation down to an elementary level.
After researching how other fields framed the concept of modularity, Frost came across similarities in the study of matter composition and Chemistry.
In Chemistry, atomic elements have fixed properties that define them. For example, Oxygen and Hydrogen on their own are atoms with independent properties. However, when these elements are combined, they create molecules, which take on unique characteristics, made up of the atoms they contain.
Many companies have adopted Frost's approach, and several have published their design systems publicly. Google, for example, refers to their set of "atoms", "molecules", and "organisms" as the Material Design system. Salesforce's Lightning Design System and Apple's Human Interface Guidelines are other good examples.
But in a nutshell, Frost's Atomic Design methodology has five distinct stages, with the first three modelled after their equivalents in the Chemistry world. Each stage building on the previous and aggregates to create Templates and Pages.
Elements - A substance made of one type only
Colour
Grid
Typography
Spacing
Rules/lines/strokes
Elevation and Shadows
Image sizing
Iconography
Buttons
Inputs and Form elements
Components - A substance formed by a union of elements
Avatars
Button Groups
Calendars
Banners
Cards
Charts
Comments
Maps
Media players (Video & Audio)
Modals
Notifications
Pagination
Placeholders
Tables
Tooltips
Text-groups
Organism - A substance formed by a union of components
Header
Footer
Chatbots
50:50
25:75
Templates - 'Pages' formed by a union of Organisms
Home page
Index page
Section Page
Article page
Form page
Pages - Templates formed by variation of templates Pages have with real copy and data ready for UX testing and development handover
This list is not exhaustive. The reality is that teams will call organisms different things, but the underlining elements and components will be consistent as they follow development and coding practices.
Why do I need a design system? Design systems are great for cross-functional workflow, but only once the master core file with all the elements and components is set up. When this is done, numerous projects can be kicked off, ensuring consistency across the entire brand.
Here is an example of a file and design system I created for Mercedes-Benz.
As you can see from this workflow diagram, teams can retain autonomy while retaining consistency on a brand level.
Consistency is one of the core principles of proper design and user experience. A consistent design is intuitive, predictable and easy to understand. There are different forms of consistency to be found when building a design system.
Visual Consistency: Elements and components that look like they are made from the same mould and have high similarities in their visual properties. This relates to the sizing, colour, font, and anything that a user can see. Increasing the ability to learn how a product works.
Functional consistency: ensures the user is getting the outcome they would expect when using the application. It helps make the user feel safe and familiar with the product by increasing predictability.
Internal Consistency: Allows users to focus more on their actions and tasks across an application instead of taking the time and effort to learn the user interface and how the action should be carried out.
External Consistency: External consistency comes into play when the same user interface principles are be reused across different platforms.
If a user has to learn how to navigate and interact with your website, they would appreciate it if the mobile application functioned the same way. So external consistency can be achieved by keeping things familiar across different platforms, systems or products.
In conclusion With a growing design process and having different teams joining the production pipeline, it's necessary to make sure that everyone understands what they're working on and the resources they have at hand.
Instead of having individuals from the different teams roam different folders and files to seek the knowledge they need, a design system provides everyone with all the documentation they need to get familiar with the project. Fostering collaboration across the project spectrum. Helping developers, designers, UX engineers, and clients share a single shared source of truth. In conjunction with providing consistent experiences for users.
References
Frost, B. (2013). Atomic Design. [online] Brad Frost. Available at: https://bradfrost.com/blog/post/atomic-web-design/.
Using components created in my design system I started to create high fidelity screens for my app.
