Hot Best Seller

Design Systems (Smashing eBooks)

Availability: Ready to download

As the web continues to become more complex, designing static pages has become untenable, so that many of us have started to approach design in a more systematic way. In this book, Alla Kholmatova sets out to identify what makes an effective design system that can empower teams to create great digital products. Not all design systems are equally effective. Some can genera As the web continues to become more complex, designing static pages has become untenable, so that many of us have started to approach design in a more systematic way. In this book, Alla Kholmatova sets out to identify what makes an effective design system that can empower teams to create great digital products. Not all design systems are equally effective. Some can generate coherent user experiences, others produce confusing patchwork designs. Some inspire teams to contribute to them, others are neglected. Some get better with time, more cohesive and better functioning; others get worse, becoming bloated and cumbersome. What are the key qualities of a well-functioning, enduring design system? Throughout the book, Alla will share an approach that will help you every day with your work. PART 1: FOUNDATIONS In the first part we’ll talk about the foundations of a design system – patterns and practices. Design patterns are repeatable, reusable parts of the interface, from the concrete and functional (like buttons and text fields) to the more descriptive (like iconography styles, colors, and typography). Patterns interconnect, and together they form the language of your product’s interface. Shared practices are how we choose to create, capture, share and use those patterns by following a set of principles, or by keeping a pattern library. Chapter 1: Design Systems Chapter 2: Design Principles Chapter 3: Functional Patterns Chapter 4: Perceptual Patterns Chapter 5: Shared Language PART 2: PROCESS A design system cannot be built overnight – it evolves gradually with your product. But there are certain principles and practices that we can follow to make sure the system develops in the right direction and provide us some degree of control over it. The second part of the book focuses on practical steps and techniques to establish and maintain a design system, including planning the work; conducting an interface inventory; setting up a pattern library; creating, documenting, evolving and maintaining design patterns. Chapter 6: Parameters Of Your System Chapter 7: Planning And Practicalities Chapter 8: Systemizing Functional Patterns Chapter 9: Systemizing Perceptual Patterns Chapter 10: Pattern Libraries


Compare

As the web continues to become more complex, designing static pages has become untenable, so that many of us have started to approach design in a more systematic way. In this book, Alla Kholmatova sets out to identify what makes an effective design system that can empower teams to create great digital products. Not all design systems are equally effective. Some can genera As the web continues to become more complex, designing static pages has become untenable, so that many of us have started to approach design in a more systematic way. In this book, Alla Kholmatova sets out to identify what makes an effective design system that can empower teams to create great digital products. Not all design systems are equally effective. Some can generate coherent user experiences, others produce confusing patchwork designs. Some inspire teams to contribute to them, others are neglected. Some get better with time, more cohesive and better functioning; others get worse, becoming bloated and cumbersome. What are the key qualities of a well-functioning, enduring design system? Throughout the book, Alla will share an approach that will help you every day with your work. PART 1: FOUNDATIONS In the first part we’ll talk about the foundations of a design system – patterns and practices. Design patterns are repeatable, reusable parts of the interface, from the concrete and functional (like buttons and text fields) to the more descriptive (like iconography styles, colors, and typography). Patterns interconnect, and together they form the language of your product’s interface. Shared practices are how we choose to create, capture, share and use those patterns by following a set of principles, or by keeping a pattern library. Chapter 1: Design Systems Chapter 2: Design Principles Chapter 3: Functional Patterns Chapter 4: Perceptual Patterns Chapter 5: Shared Language PART 2: PROCESS A design system cannot be built overnight – it evolves gradually with your product. But there are certain principles and practices that we can follow to make sure the system develops in the right direction and provide us some degree of control over it. The second part of the book focuses on practical steps and techniques to establish and maintain a design system, including planning the work; conducting an interface inventory; setting up a pattern library; creating, documenting, evolving and maintaining design patterns. Chapter 6: Parameters Of Your System Chapter 7: Planning And Practicalities Chapter 8: Systemizing Functional Patterns Chapter 9: Systemizing Perceptual Patterns Chapter 10: Pattern Libraries

30 review for Design Systems (Smashing eBooks)

  1. 5 out of 5

    Cat

    Instead of thinking in terms of static pages, teams are starting to approach design in a more systematic way.  This book talks about how to make an effective design system that helps generate coherent user experiences, inspires teams to contribute to them, and get better with time. Here are my notes: Design patterns are any repeating, reusable part of the interface (eg button, typography).  A design system is a set of connected patterns and shared practices for a digital product. The domain influe Instead of thinking in terms of static pages, teams are starting to approach design in a more systematic way.  This book talks about how to make an effective design system that helps generate coherent user experiences, inspires teams to contribute to them, and get better with time. Here are my notes: Design patterns are any repeating, reusable part of the interface (eg button, typography).  A design system is a set of connected patterns and shared practices for a digital product. The domain influences functional patterns, such as data fields and charts vs videos and discussion threads. Product brand influences perceptual patterns, like tone of voice and typography (differentiate products within the same space). Platform conventions also shape patterns (eg iOS vs Android). Most design patterns are established and familiar since new patterns require users to learn and adopt them first. Products are distinct because of the way patterns are applied, not because the patterns themselves are new. One of the main goals of design systems is to get a group of people to follow a creative direction consistently. When you are approaching design with a system in mind, you can affect the design in more profound ways (changing across the entire system instead of one place at a time). A pattern library is a tool to collect and share design patterns and principles for how to use them. Often these live in a document or wiki, but a better practice is to have a living library that contains the patterns as well as live code used to build them. Be aware that just having this living library won't guarantee that people use the components properly. Communication around the interpretation is key. Rigidity is a function of the design system behind it, not the library itself. Effective design principles are: - Authentic and genuine (eg think of "timeless, not cutting edge" compared to "simple, useful, enjoyable") - Practical and actionable (eg "only one number 1 priority" vs "make it simple") - pair with an example of a specific part of your interface - Have a point of view (help designers work out priority and balance when there are conflicting factors to consider - eg "direction over choice") - Relatable and memorable (optimal number is between 3-5 for memory) When defining design principles, start with the larger purpose of the product, look for shared themes among team members, focus on the right audience (the people directly involved with creating the product), test and evolve your princples (eg as part of design critiques). Functional patterns enable certain user behaviours. Articulating the purpose of patterns early can help prevent duplication as the product grows. Techniques for defining functional patterns: - Create a pattern map by mapping core modules to sections of a user journey - Conduct an interface inventory by grouping components in categories (eg navigation, buttons, lists, etc) - View patterns as actions (eg "promote a course" vs "course banner") - Sketch a pattern's content structure - Place similar patterns on a scale (eg visual loudness) - Treat content as a hypothesis Understand how patterns link to the behaviours they were designed for (their purpose) since this will determine structure, content, and presentation. Perceptual patterns are the aesthetic properties, like tone of voice, typography, colour palette, iconography, etc that help express brand image and differentiate products within the same domain. Perceptual patterns create visual coherence and connect parts across a system. Explore perceptual patterns using mood boards, style tiles, and element collages (each method distinguished by their relative fidelity). Expect to iterate and evolve styles as they're integrated into the product. If a design only prioritizes perfect consistency, it can become rigid and generic. Leverage "signature moments" to add depth and meaning to an experience. Try small-scale experiments to see if elements work well before integrating changes into other areas of the interface. Be conscious of new requirements that demand custom patterns and one-off tweaks since they can dilute the brand. Creating cohesive design systems requires a shared language and a shared approach to naming patterns. Names should be focused, memorable, and embody the purpose of the modules they represent. Instead of focusing on presentational attributes (eg circle with a dot), look for metaphors from other industries like architecture or publishing. Good names communicate purpose - if you're struggling to come up with a name, maybe the purpose isn't clear. Get a diversity of perspectives when naming patterns (eg content, development, design, research). Make design patterns visible (eg putting up posters on a wall) and refer to objects by their names. Take new employees through the story of how the guidelines were created so they can understand how decisions have been made. Have regular design system catch-ups to keep everyone on the same page as the system evolves. Keep a glossary of the terms you use (this can be an easily accessible pattern library). Design systems can be characterized along three attributes: rules (strict/loose), parts (modular/integrated), and organization (centralized/distributed). - Stricter systems provide precise and predictable outcomes, but sometimes result in making UX compromises for the sake of consistency. Allow for opportunities outside the systems such as creative experiments and side projects to understand and challenge the rules. To have a looser system, the team needs to be aligned on a product's purpose and the design approach. - In modular systems the parts are interchangeable and can be assembled in various ways to meet user goals. A modular approach is agile because multiple teams can design and build in parallel, is cost effective because modules are reused, and is easy to maintain. On the other hand, integrated designs can be more specific to particular content, context, or art direction and are actually quicker to build as one-offs because you don't have to spend time making them reusable. The degree of modularization can change over time. - Rules and patterns can be managed primarily by one group of people, which helps with ownership and focus, but sometimes results in a bottleneck. Alternatively, in a distributed model, everyone who uses the system is also responsible for maintaining and evolving it. A distributed model is more agile and resilient, but work can sometimes slow down without someone in charge. Get support for a design system from senior management by demonstrating the time saved on designing and building modules, time saved on making site-wide changes, faster product launch, and brand/visual consistency. Start by agreeing on goals and objectives, make progress transparent (eg blog posts), and plan tasks with the most benefit upfront (eg quickly document patterns through screenshots and go back to add the living code after). Systemize functional patterns by starting with a purpose-directed inventory. The goal is to define the most essential design patterns, not account for all visual inconsistencies. This process should happen after the foundational UX work is complete (research, content strategy, information architecture, and design direction). Identify key behaviours, group existing elements by purpose (at the same level of granularity), and define patterns (when to merge and when to keep separate - look at content structure). Systemize perceptual patterns by looking beyond style properties (like colour values and text sizes), and focus on having a consistent meaning throughout the interface. Identify signature patterns by having team members write down the most memorable elements that make your product feel a certain way. Itemize styles, such as colour, interactive states, animations, typography, etc. For each style, start with the purpose, collect and group existing elements, define patterns and building blocks, and agree on the guiding principles. Document examples using screenshots to show how the style is used. Be aware of how decisions in favour of consistency can alter the overall aesthetic of the site and go back to signature patterns to help find the right balance. Test colour contrast for accessibility. Consider using a base value and providing several incremental steps - for colour or animations (eg how fast something animates). When building a pattern library, focus on the content rather than which tool you use to document it. Think about the structure in terms of components and styles (functional and perceptual patterns). Document functional patterns with name, purpose (be concise), example (visual and code), and variants (show how they differ). Consider documenting related patterns to show alternatives for when the pattern is not quite what someone is looking for. When documenting perceptual patterns, show how the properties are used and how they work together. Agree on how new patterns will be added to the system. A template for pattern submissions can be useful if contributions come from all over the organization. Agree on the role of the design systems team (curator vs producer) and ensure the systems team are seen as partners rather than police. Design systems free our time and energy to solve bigger and more meaningful problems.

  2. 5 out of 5

    Amir Tavakoli

    If you work in a development team and your team is developing a new digital product you can create your own design system. The main goal of a design system is to systemize design processes. It helps u to create and archive your own patterns and signatures, and even helps you to produce and curate your own design language. In this book, Alla Kholmatova sets out to identify what makes an effective design system that can empower teams to create great digital products. I highly recommend designers an If you work in a development team and your team is developing a new digital product you can create your own design system. The main goal of a design system is to systemize design processes. It helps u to create and archive your own patterns and signatures, and even helps you to produce and curate your own design language. In this book, Alla Kholmatova sets out to identify what makes an effective design system that can empower teams to create great digital products. I highly recommend designers and developers to read it.

  3. 5 out of 5

    Jean-Francois Potvin

    Learned a lot on pattern librairies and design systems. Interestingly enough, our team is starting to build the equivalent for our digital products. Will definitely continue to read on that subject and try to put in practice some of the advices provided in the book. Next up : Inclusive Design Patterns.

  4. 4 out of 5

    Wilson Jimenez

    Review Good insight on an interesting topic, a bit redundant but still good content. If you've some experience in the industry, some concepts will be somewhat clear by now like the importance of getting buy-in or the intricacies of coordinating work and communication between product teams within a company. There are many references to great articles through out the book that I'd like to read next, would've liked to have them as an aggregated list at the end like a bibliography. Notes Design Review Good insight on an interesting topic, a bit redundant but still good content. If you've some experience in the industry, some concepts will be somewhat clear by now like the importance of getting buy-in or the intricacies of coordinating work and communication between product teams within a company. There are many references to great articles through out the book that I'd like to read next, would've liked to have them as an aggregated list at the end like a bibliography. Notes Design Systems - Functional patterns generally have an HTML basis while perceptual ones a CSS basis. - An effective design language bridges the gap between the system image and the assumed user model. - Design systems are a combination of patterns and practices. Design Principles - Vague: "make it clear" * Practical: only one number one priority, what do you want your users to do first? - Vague: "make it simple" * Practical: make it unbreakable, make sure it's designed for exploration and impossible to mis-tap. - Vague: "make it useful" * Practical: start with the needs, do research, analyse data, don't make assumptions. Functional Patterns - Can be seen as the nouns and verbs of a sentence. - When creating a component, each part has to have a purpose, i.e.: in a card component, we may want the title to tell what the card is about, the image to have a quick preview and draw attention, the description to allow easy card scanning. - Patterns change/evolve, behaviours stay. - Don't try to design the most impressive header forgetting what the header component is for and how it affects the user journey. * Don't loose the connection between user behaviours and the patterns to encourage those. - UI Inventory by Brad Frost: great way to modularise interfaces, you end you with a collection of parts grouped in categories. * Run inventory every few months. - When defining a pattern, start with it's purpose, not what it is. * To broaden potential its use cases, try calling it with a verb, not a noun. * If you have a promotional module, if you call it Image Header or Course Promoter, you may be restricting its use to a particular context. ^ Better to name it after an action (behaviour) like Promote/Discover a Course, Encourage people to join, etc. - Tweaking a module (like reducing font size) to allow a use case where we want the content to be smaller or not push another element out of view, might be the wrong call. * Maybe we're using the wrong patterns which aren't robust enough for the content behaviours. Perceptual Patterns - Use personas to come up with a list of them. * You can use ambience if personas are hard to come up with, i.e., what ambience suits you branding traits more? - Come up with a 5-7 list of branding traits. * Like fun but not childish, informal but not sloppy, powerful but simple, etc. * These traits are brought to life in the UI through tone of voice, visuals, interactions, sounds. - Techniques to assess patterns. * Mood boards: loose way of grouping related style elements together like on Pinterest. * Style tiles and element collage are more high fidelity options. * Don't force consistency every time, it can lead to a generic and rigid branding, there's a difference between consistency and uniformity. - If you introduce a new element or pattern in one place, it may not feel as part of the brand or disconnected until you add it to other parts of the site. - Some patterns should be used sparingly in order to keep the brand focus. * Like using too much of a colour or a triangle shapes when the brand uses squares. Shared Language - Patterns should connect through a shared language. - Name things based on purpose not based on what they look. * Or how users call them, which forces engineers to get a user perspective. - Try keeping a glossary as well. Parameters of your System - Strict <-> Loose - Modular <-> Integrated - Centralised <-> Distributed - Strict pattern libraries may benefit bigger teams or companies that would like to provide precise, predictable and consistent outputs. * Loose libraries are more flexible by encouraging more exploration, design acumen and sensitivity to context; and may not have the need to thoroughly document every pattern. ^ Even though, clear, comprehensive and compelling documentation is fundamental for this type of systems in order to keep a solid foundation. - Pattern library sketches and naming convention should always be in sync with its code counterpart. - Modular systems can create more overhead while making parts reusable; are suited for designs that need to scale and evolve, repeated elements, teams working concurrently. - Integrated systems are suited for one-offs like ad campaigns and fewer repeating parts. - Don't sacrifice UX or potential impact for the sake of reusability. - Design system organisation can be centralised (owned by a team) or distributed. Planning and Practicalities - Time and money is saved on reusing, you're not rebuilding the same button component every time. - Easier site wide changes. - Faster product launch: prototyping a new page out of a pattern library is usually a matter of days, a new design can take weeks. - Brand unity at scale: you don't end up with different parts of the site not looking like part of the brand. Systemising Functional Patterns - Look at the main screens of the site, try to break them down into behaviours, group elements by purpose, draw patterns. - Put stuff on a specificity scale, the more specific the less reusable it can be. - Think about potential changes, if I change module A, do I want the change in other places? * Some modules might look similar but we may decide to treat them differently. Systemising Perceptual Patterns - Voice and tone. * Direct, positive, encouraging. * Friendly but reserved; "well done!", rather than "wohoo, you're a superstar!" * Elements of humour; "we're hatching something new" - Colour. * Primarily white colour palette with pink accents. * Pink to blue gradient (celebration). - Shapes. * Mostly square and occasionally circular. * 1 px border, square icons. - Typography. * Mostly large type face with focus on readability. * High contrast, large headings in relation to body. - Animations * Small to no movement. * Pink to blue subtly hover, opacity, gradual colour change.

  5. 4 out of 5

    Felipe Gonçalves Marques

    This is a great book to understand the fundamentals of a design system and the techniques to produce and manage one. It explains several concepts with real examples and it doesn't impose a strong opinion on how to build it. It tries to show the different facets a design system may have. Personally, two concepts draw my attention: - The definition of a functional pattern based on purpose, and not only its main functionality. Grouping a series of patterns (Hero, Banner, Related content) under the "p This is a great book to understand the fundamentals of a design system and the techniques to produce and manage one. It explains several concepts with real examples and it doesn't impose a strong opinion on how to build it. It tries to show the different facets a design system may have. Personally, two concepts draw my attention: - The definition of a functional pattern based on purpose, and not only its main functionality. Grouping a series of patterns (Hero, Banner, Related content) under the "promotional" umbrella creates a really powerful language for design and re-use. - The idea of perceptual patterns. This really strikes me, due to most of the pattern libraries I worked with were a bunch of components. But clearly defining the purpose, principles, tone, and voice of the system allows for an even more consistent system/platform. This book accomplishes the hard challenge of being theoretical but giving real actionable and practical advice. Definitely a read to anyone working with front-end and design systems.

  6. 5 out of 5

    Nadya Tsech

    I would recommend this book to designers who haven't started to build their own library or just at the beginning. It has a lot of useful theory and some practical tips on building the library and less on maintaining and improving.

  7. 4 out of 5

    Stacy Holmstedt

    Extremely resource-rich guide that helped get us started with figuring out our design system.

  8. 5 out of 5

    Christoph

    I'm very deep in this topic already, but Design Systems from Alla Kholmatova was a very interesting read. I especially liked the focus on the intention of patterns and what design means. A lot of blog articles on the topic of design systems focus on technical and practical aspects of these systems or are too general. So this book adds a good approach on why and how to create design systems and teams around it. The things I'm missing a little bit are deeper insights and an analytical view on shown I'm very deep in this topic already, but Design Systems from Alla Kholmatova was a very interesting read. I especially liked the focus on the intention of patterns and what design means. A lot of blog articles on the topic of design systems focus on technical and practical aspects of these systems or are too general. So this book adds a good approach on why and how to create design systems and teams around it. The things I'm missing a little bit are deeper insights and an analytical view on shown examples and anecdotes. Especially around the topic of team building, methods, and tools, which are briefly touched the last view pages, I wished for more insight. But for everybody working with design systems, or planning to, this book should be read!

  9. 5 out of 5

    Milana Stanic

    This should be considered a handbook, not just a book, you can go through it and something will stick BUT ultimately you will have to make a specific case for your specific needs and this book as Santa's little helper will do it. It has completely changed my mind on some things and opened my eyes for others, I am amazed. So, why 4 then? The structure is weird for me, I am not sure how to explain it apart form, it is not chronologically set and that confuses me. All the operations I need to do I This should be considered a handbook, not just a book, you can go through it and something will stick BUT ultimately you will have to make a specific case for your specific needs and this book as Santa's little helper will do it. It has completely changed my mind on some things and opened my eyes for others, I am amazed. So, why 4 then? The structure is weird for me, I am not sure how to explain it apart form, it is not chronologically set and that confuses me. All the operations I need to do I have to plan out by chasing bits and pieces, sure would help if I made notes XD Awesome book overall, would recommend :)

  10. 5 out of 5

    Ardavan Mir

    I rated 5 because this book served the purpose it promised to me. It exceeded my expectation. Alla creates a simple and comprehensive categorization for design patterns which she explores each one more in details throughout the book. The book is full of different examples of processes and practices of different teams. I also appreciate the way Alla avoids complication of an issue that could easily get overcomplicated.

  11. 5 out of 5

    Nick

    Alla writes a handsome book here, catering to the needs of visual and UX designers seeking a systematic and modular approach to their work. There’s much redundancy on basic design concepts, though: identifying principles, building consensus, clarifying functions, the difficulty of naming. And there are only passing references to front end implementation strategies, which has my interest. Recommended, for visual designers, but not developers per se.

  12. 4 out of 5

    Michael Szeto

    Great book to read to learn more about design systems. Found some of the thinking and examples really great to those who are new to the subject and need to consider how to organise the content and information you might have on a design system better. Something that the book doesn’t do as well is discuss how to apply it across the wider company with enough detail and ideas on how to sell it. As a base though it is super useful, helpful and genuinely a book id always recommend :)

  13. 5 out of 5

    Mark DeHate

    As someone who's starting the process of creating a design system, this book has been very timely. It's packed with clear and straightforward examples from a wide variety of existing systems. It's full of real-world and concrete advice, as well as stories of design systems that could have gone better. Highly recommended for anybody that's thinking about implementing a design system.

  14. 4 out of 5

    Mariana García

    Practical and full of examples, shows how a system can be built from very strict to very flexible, encourages the reader to understand the building blocks of their system and translate them into reusable components and moreover, talks about the adoption of this system by non design departments and later maintainance. Very complete and one of my reference books so far.

  15. 4 out of 5

    Nicholas De Lucena

    A very straightforward and practical guide to the subject. For those with a design or programming background, the book feels a little bit obvious at certain parts but overall it is a very useful guide on the subject.

  16. 5 out of 5

    John C

    Alla provides great insights and perspectives, not only for the design of interfaces themselves, but also what's necessary at a people level in order to have a strong philosophical foundation for tackling big projects and involve stakeholders across design, development, marketing, and more.

  17. 4 out of 5

    Matej Latin

    A few golden nuggets here and there but a lot of repetition. I feel it could be shorter and more focused. I loved the part of systemizing the functional and perceptual patterns, that was the best bit!

  18. 4 out of 5

    Tomáš Buman

    Good for beginners, but... very confusing. I read almost a half and still did not understand why I sould continue in reading. Still looking forward something interesting and it did not happen. Stopped at page +-100.

  19. 5 out of 5

    Almad

    Finished only two thirds because this was borrowed and I had time constraints. Useful overview, but not with many deep insights. Good for complete non-designers like me, but if you have any experience, I have doubt you'll get many new things from this.

  20. 4 out of 5

    Deane Barker

    A good look at how to componentize a design. Lots of emphasis on people and process. I would have liked some code-level analysis, like how you actually manage the markup for flexibility and consistency.

  21. 4 out of 5

    Bram

    I think it’s a great introduction to Design Systems. For me it lacked a bit of depth. But still, every product owner, designer and developer should read it..

  22. 4 out of 5

    Anton Roolaart

    Great reading with practical, easy to understand examples As a UX Designer, I enjoyed this book very much. The author explains the concepts in an easy to understand approach.

  23. 4 out of 5

    Emilie

    Some redundancy, but all in all a nice round up of a very interesting subject, with a some good ideas along the way.

  24. 4 out of 5

    Jeff

    Concise and pragmatic book on the “how” of building design systems. Tons of real examples are used to show every part of the process. Highly recommended.

  25. 5 out of 5

    Stephanie Tanata

    Great book about general knowledge of design system and how to create one by examples from great design library in AirBnB, Attlassian and TED

  26. 5 out of 5

    Luis Argumedo

    Great explanation with good examples and extra resources. It helped me get direction on how/where to start with a Design System.

  27. 5 out of 5

    Ian

    Worthwhile if working on the implementation of a design system. Decent examples, although a bit too focused on FutureLearn. But, honestly, reading this felt like a chore.

  28. 5 out of 5

    Gary Crossey

    Good overview. Could have included some handles on examples.

  29. 5 out of 5

    Pan Pan

    A comprehensive structured book leads you to know about the Design System. It was the first book I read tells about the Design System, I learned a lot from it. Thank you, Alla!

  30. 4 out of 5

    Jake

    3.5/5 Lots of good information on the basics of design systems. I am learning so I found much of the discussion useful. The second half is a mix of how to analyze your current design system and improve or create one.

Add a review

Your email address will not be published. Required fields are marked *

Loading...
We use cookies to give you the best online experience. By using our website you agree to our use of cookies in accordance with our cookie policy.