Menu Search
Jump to the content X X

Meet “Design Systems”, A New Smashing Book (Pre-Release)

As the web continuously becomes more complex, designing static pages has become untenable, so that many of us have started to approach design in a modular way. In this book, Alla Kholmatova will identify what makes an effective design system that empowers teams to create great digital products. The book isn’t ready just yet, but you can start reading it already. Pre-order the book now →1

Pre-order the book and download the Part 1 of the eBook immediately122

$22.90 $29

Pre-order the book3

Start reading the book now. Hardcover + eBook.
280 pages. Free worldwide shipping. September 2017.

About The Book

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, while others are neglected. Some get better with time, more cohesive and better functioning; others get worse, becoming bloated and cumbersome.

Throughout this book, Alla Kholmatova, previously a lead designer at FutureLearn, will share an approach and the key qualities of effective, enduring design systems. It’s based on Alla’s experiences, case-studies from AirBnB, Atlassian, Eurostar, TED, and Sipgate, plus 18 months of research and interviews — all attempting to figure out what works and what doesn’t work in real-life products. It may not answer every question, but it will help you figure out just the right strategy for establishing and evolving a design system in your organization.

Who The Book Is For

The book is aimed mainly at small and medium-sized product teams trying to integrate modular thinking into their organization’s culture. Everyone in the product team could benefit from reading this book, but particularly visual and interaction designers, UX practitioners, and front-end developers.

The result is now for you to judge. We’re privileged to be releasing the first half of the book as pre-release. The second half will be released in late September 2017. Printed hardcover, 280 pages. Reviewed by Karen McGrane and Jeremy Keith. Cover design by Espen Brunborg. Pre-order the book now.4

What’s In The Book

The book explores design systems from the perspective of an interaction and visual designer. You won’t find any code samples or in-depth analysis of development tools. The book looks both into the main building blocks of a system and the workflow that would support the integrity of the system — all applied to designing and building websites or products today.

“Design Systems” is about how to approach your design process more systematically, and ensure your design system helps to achieve the purpose of your product and fits with the culture of your team.

A sneak preview inside of the book.5
A sneak preview of what the book looks like from the inside. Large view.6

The book consists of two parts:

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
  • Summary

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 provides 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 An Interface: Functional Patterns
  • Chapter 9: Systemizing An Interface: Perceptual Patterns
  • Chapter 10: Pattern Libraries: What, Why And How
  • Conclusion

About The Author

Alla Kholmatova is a UX and interaction designer with a nine-year experience of working on the web, for a range of products and companies. Most recently she was a senior product designer at an open education platform, FutureLearn.

She’s particularly interested in design systems, language, and collaborative ways of working. In the last two years, she has been spending a huge amount of time working on and researching the subject. She’s been sharing her insights with people through articles, workshops, and projects. Alla contributes to design publications, such as A List Apart, and speaks at conferences around the world.

Sneak Preview (Free PDF Sample)

To give you a more detailed idea of what the book is like, feel free to download a free sample of the book — a chapter on solid principles which are the foundation for any well-functioning system. In this chapter, we’ll discuss the qualities of effective design principles
and look at some of the ways of defining them.

Pre-order the book and download the Part 1 of the eBook immediately8

$9.90 $14.90

Pre-order the eBook9

Start reading the book now. PDF, ePub, Kindle.
280 pages. Final release: September 2017.

Quick Summary

What You’ll Learn In This Book:

  1. How to get support for a design system in your organization,
  2. How to conduct a purpose directed interface audit,
  3. How to establish and evolve a shared design language within your team,
  4. How to think in patterns without losing sight of the whole,
  5. How to shift your team’s design process from thinking in pages to connected systems,
  6. How to define effective design principles,
  7. How to identify patterns early in the design process,
  8. How to strike a balance between reusability, consistency, and creative expression of the brand,
  9. How to eliminate duplicates and inconsistencies,
  10. How to establish foundations for a pattern library,
  11. How to define patterns and integrate them into the system,
  12. How to document and evolve design patterns.

The printed book is planned to be released late September, but we kindly invite you to start reading the first chapters in the eBook right away. Dive into the foundations of a design system – design patterns and principles. Pre-order your book now.1411

Pre-order the book and download the Part 1 of the eBook immediately122

$22.90 $29

Pre-order the book13

Start reading the book now. Hardcover + eBook.
280 pages. Free worldwide shipping. September 2017.

The printed book is scheduled for release at the end of September. However, we invite you to download the first part of the eBook immediately. Pre-order your book now.1411

You might not be an interface designer or a visual designer, but you probably know somebody who might use the book. What about offering the book as a little gift or a little token of appreciation, or just send a link to them? ;-) We’re looking forward to your feedback!

(ak vf il ms)

Footnotes

  1. 1 https://smashing-magazine.myshopify.com/cart/41903490956:1
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2017/06/design-systems-book-large.jpg
  3. 3 https://smashing-magazine.myshopify.com/cart/41903490956:1
  4. 4 https://smashing-magazine.myshopify.com/cart/41903490956:1
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/06/design-systems-page-72-73-large.png
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/06/design-systems-page-72-73-large.png
  7. 7 http://provide.smashingmagazine.com/design-systems-chapter-2.pdf
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/06/eBook-design-systems-ipad-v3-opt.png
  9. 9 https://smashing-magazine.myshopify.com/cart/41904205964:1
  10. 10 https://smashing-magazine.myshopify.com/cart/41903490956:1
  11. 11 https://smashing-magazine.myshopify.com/cart/41903490956:1
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/06/design-systems-book-large.jpg
  13. 13 https://smashing-magazine.myshopify.com/cart/41903490956:1
  14. 14 https://smashing-magazine.myshopify.com/cart/41903490956:1

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs front-end/UX workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Ivan Saveliev

    June 27, 2017 2:56 pm

    Instant pre-order (wow, that’s escalated too quickly!!), now have to find enough patience for waiting this sweet new title to join my SM library <3

    SM, as always, – you are the best.

    7
  2. 2

    Looking at the table of contents and the PDF sample, this books looks like it’s intended for beginner and medium audiences.
    I’d like to buy it for a few juniors in my team, am I interpreting it wrong?

    -1
    • 3

      Hi Adrian,

      Thanks for your question. Yes, the book should provide the foundations to approaching design with a system in mind. I tried to write it in a way that will be understood by beginners but advanced designers and developers should be able to benefit from it as well, especially if they want to dive into systematic design thinking.

      4
  3. 4

    Seems like it is mostly to do with web. Where is that native mobile love?

    1
    • 5

      Thanks for your question Dafuq. Even though it’s not talking about native specifically, I believe the concepts and foundations can apply to any platform.

      2
  4. 6

    Am I right that the e-book contains only the first part? At least that is what I have got after pre-ordering it. And the whole point in looking into it was to see how others do what I also do and that is in the second part.

    1
    • 7

      Markus Seyfferth

      June 28, 2017 12:18 pm

      Indeed, the book still is in pre-release mode (that’s why the price is discounted) and we’ll roll out the second part of the book in the next few weeks.

      We’ll let everyone know as soon as the whole eBook is available.

      4
  5. 8

    I’m not sure I understand the pre-ordering of the ebook. I gather the first half is available right away. Are you sent the second half once it’s ready or you pay an additional $10 for access to that?

    0
    • 9

      Markus Seyfferth

      June 28, 2017 3:09 pm

      We’ll send out the full eBook once is ready. No hidden fees / additional costs involved.

      4
  6. 10

    James hunter

    June 30, 2017 2:40 pm

    Well, I would say it’s really great book for UI/UX Designers either they are beginners or experienced. I never find the book like this but it has full detail and covering both levels. Thanks Alla you did a great job. Bundle of thanks.

    2
  7. 11

    When you zoom in on images of the Kindle version, they stay rather small (and are not readable). Would be better if images would flip 90 degrees so they use the Kindle’s full screen. Is that something you could do?

    1
    • 12

      Markus Seyfferth

      July 4, 2017 1:17 pm

      Hi Stef, our eBook editor Cosima will look into this. Many thanks for your suggestion!

      0
  8. 13

    The first half has been a good read but left me in anticipation for the second. Is there an estimated release date for the second half?

    0
    • 14

      Markus Seyfferth

      July 5, 2017 2:06 pm

      Early to mid-August is a fairly realistic release date for the full eBook (price will go up from that point).

      1
  9. 15

    Big Bad Robert

    July 21, 2017 9:19 am

    Does/Will this (also) cover Brad Frost’s Atomic Design ?
    If not, will this be beneficial when implementing Atomic Design ?

    0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top