This is a release candidate of the next SmashingMag. Report a bug on GitHub or via email. Beware of cats.
This newsletter issue was sent out to 227,600 recipients newsletter subscribers on Tuesday, July 4th 2017.
When we think about style guides, we usually think about front-end style guides. Sidebar on the left, with all the patterns grouped and categorized, and components on the right, grouped into families, named and thoroughly documented. In fact, Walmart Style Guide is just one of the examples of how to get it right. We can only imagine how much time and hard work went into crafting it.
But what if we think beyond front-end components alone? There must be a good reason for everybody — literally everybody — in the team to use the web style guide. For example, if designers don’t see how the style guide is relevant for their work (after all, they have their own Sketch master files!), it will only remain relevant to a very limited scope of the team — mainly front-end developers.
For designers, seeing isolated front-end components is useful as a reference, but you can't start designing without knowing the context of how exactly a given component is used across the range of product's interfaces. As a result, major design decisions would be made outside of the style guide. Why? "Reusable components can be used in many different but similar ways. Seeing the component a lot leaves room for interpretation. This opens up the door for all kinds of disjointed experiences and makes the system harder to maintain." That's why **connecting the components** by tagging them and providing actual interface examples can be useful. [Audi's new style guide](http://www.audi.com/ci/en/renewed-brand.html), for example, contains a set of examples for each component in use. AirBnB's [air/shots](https://airbnb.design/building-a-visual-language/) is a powerful search engine for design flows and components: You can choose components, languages and the preview format and size. To find a strategy for keeping a design system maintainable on the long term, we've teamed up with [Alla Kholmatova](https://www.twitter.com/craftui), previously a lead designer at FutureLearn, to work on the upcoming [Design Systems](https://www.smashingmagazine.com/design-systems-book/) book. In the book, Alla provides a **practical guide for effective design systems** that empower teams to create great digital products. The book isn't ready just yet, but you can pre-order and start reading it already. [Jump to table of contents.](https://www.smashingmagazine.com/design-systems-book/#toc) We hope you'll find it as useful as much as we do. _Happy reading!_ _Vitaly (@smashingmag)_ #### Table of Contents 1. [How Would You Design For... Voice?](#a1) 2. [Spectral: A Free Google Font For Distraction-Free Reading](#a2) 3. [Automated Browser Testing As Easy As It Can Get](#a3) 4. [How To Build Better Sliders](#a4) 5. [Which UX Tool Suits Your Needs?](#a5) 6. [Proofreading Marks For Designers](#a6) 7. [Who's Chirping?](#a7) 8. [Upcoming Smashing Workshops](#a8) 9. [New On Smashing Job Board](#a9) 10. [Smashing Highlights (From Our Archives)](#a10) 11. [Recent Articles On Smashing Magazine](#a11) ### (#)1\. How Would You Design For... Voice? With Amazon's Alexa, Google Home and Microsoft's Invoke, the virtual assistant has become reality. But what does designing for voice really mean for designers? What challenges does it all bring along? And how can we tackle them? [Amazon provides some valuable tips](https://developer.amazon.com/designing-for-voice/) as well as a guiding thread to base your voice design process on. The process that Amazon suggests can be divided into four steps: First, determine what people want to accomplish. Then write scripts to show the conversation between the user and the AI and expand it to prepare for things you weren't expecting — users may say too little, or too much, for example. Finally, once you have your script and flow in place, it's time to create the structure of what your voice experience should be able to do and what users will say to engage with it. Valuable insights into a new domain. _(cm)_ ### (#)2\. Spectral: A Free Google Font For Distraction-Free Reading Have you already seen the newest addition to Google's font library? It's called [Spectral](https://designmodo.com/spectral-web-font/) and was commissioned by Google as a font that works especially well for long, distraction-free reads on screen. Designed by Parisian-based digital type design agency _Production Type_, the serif typeface fellow shines with its simplicity. Its functional yet elegant look makes it a perfect fit if you want to add some personality to your documents without going too far. Spectral comes in seven weights of roman and italic and supports more than 120 languages. You can [download it for free](https://fonts.google.com/specimen/Spectral) from Google's font repository. _(cm)_
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.
Imagine you wrote a beautifully crafted newsletter and nobody read it. That would make any cat sad. Don't let that happen!