An Introduction to Design Systems

Namnso Ukpanah, Lead Designer at Hotels.ng talks about design systems and why and how to use them.

Transcript

1. An introduction To Design Systems Namnso Ukpanah
2. Hi, This is Me My name is Namnso Ukpanah, I’m the Lead UX/UI Designer at hotels.ng. I create experiences and try to simplify complicated interfaces. Honestly hoping to help build the Nigerian Design Community so we can be recognized as problem solvers. @namnsoukpanah
3. A design system is a library composed of visual styles, components and principles processed as reusable code and tools for both Developers and Designers.
4. Systems design is the process of defining the architecture, modules, interfaces, and data for a system to satisfy specified requirements.
5. SO IMAGINE DESIGN SYSTEMS AS A LANGUAGE 1. MORPHEMES - meaningful smallest unit of a language. 2. SYNTAX - composed of morphemes arranged into meaningful structures 3. SEMANTICS - the meaning of a word, phrase or text. 4. PRAGMANTICS - social use of a language (context of use). 5. DISCOURSE - connected series of conversation. LANGUAGE STRUCTURE
8. COMMON EXAMPLES OF DESIGN SYSTEMS 1. Material Design - Google 2. Human Interface Design - iOS 3. Photon Design System - Firefox 4. Service Manual - gov.uk 5. Nachos - Trello
9. Why Design Systems?
10. “The thought designers put into designing their design systems goes a long way into not letting their users think as hard as they did.
11. “A design system sets the baseline for consistency which helps a product achieve effective scalability.
12. “It’s expensive redesigning a product that wasn’t planned with flexibility because sudden changes to the interface can frighten users.
13. “A Design System speeds up the design process and bridges the gap between designers, developers and UX writers.
14. “Styles come and go. Good design is a language, not a style.” –Massimo Vignelli