Mortgage Brain - Design Systems

Design Systems Lendex and beyond

Index Page 3 Design System Introduction Pages 4-5 Atomic Design - Methodology Pages 6-7 Atomic Design - Components Page 8 Design System - What & Why? Pages 9-11 Design System - Examples 2

Design Systems In short, a design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Design systems are a method to translate a consistent experience and visual language across a product when working on different touch-points. Think of your assets as a box of lego, not only are the pieces readily available but there are infinite possibilities in how to assemble them. Let’s be clear that design systems are no style guide though, it’s essential to not only understand the pieces of your design system but the context of their use and the ‘why’ behind them… 3

Atomic Design Methodology Just like you can think of a design 5. Pages system as a set of Lego as your assets 4. Templates you can equally consider your design 3. Organisms system as Atomic. 2. Molecules ...considers all the details 1. Atoms that go into creating and maintaining robust design systems... The Atomic Design Systems methodology considers all the details that go into creating and maintaining robust design systems whilst providing a pretty coherent way of explaining itself using chemistry. 4

Atomic Design Methodology Atoms Molecules Organisms Templates Pages 1 2 3 4 5 5

Atomic Design - Components 1. Atoms: In chemistry atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning. When we relate this to our design systems the atoms are very much the basic assets of our product. They are the foundational building blocks that comprise all our user interfaces such as type, labels, colours and spacing. 2. Molecules: Molecules are a group of atoms pieced together to take on new properties or to complete a function. In design systems, we can think of our molecules as our building blocks or ‘atoms’ that we are piecing together to form a functional element. Perhaps we are putting together an image header with a title label for a profile molecule or doing something more complex such as constructing a checkout function using atoms to form the molecule. 3. Organisms: Organisms are slightly more complex and form bigger chunks of the product. We can think of these organisms in our design systems as groups of molecules. Where atoms make up a molecule to form a search feature it can be combined with another molecule that forms the page navigation to make an organism — a complete page navigation with a search feature. 6

Atomic Design - Components 4. Templates: Now we have covered the basic structure of a design system through atoms, molecules and organisms it’s time to see how we can use them to create a consistent product. Organisms can be used to make up different templates of larger layouts which can contain multiple features. 5. Pages: These templates are then used to make up the majority of a products pages. 7

Design System - What & Why? What is a UI Design system? A UI design system is a set of standards for design and code along with components that unify both these practices helping them complement one another and producing the exact result which is conceptualised. Think of it as an Instruction manual. It’s also like an inventory which can be used to pick up resources and use them in your design. Why do we need a UI System? To design consistent UI across every part of your design can be daunting. A UI system helps your users navigate intuitively and makes it uniform across your product, making them familiar with your design language. They help teams by giving them a more structured and guided way to build UI for their products. 8

Design System - Examples 9

Design System - Examples 10

Design System - Examples 11

Fin