About The Author

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol’ web with the latest tips and tricks for … More about The Smashing…

Smashing Newsletter: Issue #185

Quick Summary

Table of Contents

This newsletter issue was sent out to 227,600 recipients newsletter subscribers on Tuesday, July 4th 2017.

Editorial

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.

Audi Style Guide

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.

Design Systems book
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.
Spectral
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)_
### [](#)3\. Automated Browser Testing As Easy As It Can Get Starting and running a functional web test with just one command line? Well, [TestCafe](https://devexpress.github.io/testcafe/) makes it possible. The tool uses Node.js to provide an end-to-end solution for testing web apps. And the best: It takes care of all stages — from starting browsers to running tests, gathering test results, and generating reports. No browser plugins are needed, the goodness works in all popular modern browsers right out of the box.
TestCafe
Once the test is done, TestCafe collects the test results from different browsers in one comprehensive report for you. You can use TestCafe with tests written both in JavaScript (latest features such as `async`/`await` are supported) as well as TypeScript. Promising! _(cm)_ ### [](#)4\. How To Build Better Sliders A slider seems like a simple thing to build, but as Ilya Birman claims, for many web developers it's very difficult to get it right. Why? Well, you need to carefully consider Fitt's Law to provide decent, continuous feedback. To improve the slider experience, Ilya provides a comprehensive example, [in which he shows step by step how to fix the things that usually go wrong](http://ilyabirman.net/meanwhile/all/slider/).
Implementing a slider well
Now what does it look like, a well-built slider? Well, it lets users grab the handle from any point in the slider, without any tedious fiddling around. Also important: The slider should move continuously as you move the mouse, and everything should stay in sync — hover effects, the cursor shape, actual active areas, reaction to click and drag, feedback inside and outside the slider. If you follow this advice, you'll end up with a shiny, snappy UI control. _(cm)_ ### [](#)5\. Which UX Tool Suits Your Needs? The number of tools available for designing UX is huge, and even if you have your favorites already, it can't hurt to compare. Uxtools.co provides a useful [overview of tools for UX designers](https://uxtools.co/tools/design) — from Adobe's suite to Sketch, UXPin, Figma, Affinity Designer, Axure, Atomic.io, and many more.
UX Tools
The comparison differentiates between design, prototyping, handoff, and monitoring tools, and compares their pricing, whether they work offline, collaboration and sharing options and other characteristics, so you can quickly assess which tool fits your needs best. Handy! _(cm)_ ### [](#)6\. Proofreading Marks For Designers "Proofreading marks" might not sound like the most thrilling topic to wrap your head around, but knowing at least the basics of them can never hurt. Who knows, maybe someday you might get a text back from a client, supplied with those weird marks, swirls and abbrevations that most of us don't have a clue what they mean?
Proofreading Marks
To have the essentials always at your fingertips (just in case, you know), Graham Smith [shows us some proofreading marks](http://imjustcreative.com/proofreading-marks/2017/06/20) that could come in handy for designers — think marks to highlight issues with position, margin, alignment, or indention, for example. A throw-back in time, but also a great reminder that a shared set of tools can prevent misunderstandings and make communication a lot more efficient. _(cm)_ ### [](#)7\. Who's Chirping? Do you live in the city surrounded by constant noise or do the sounds of nature get through to you? The chirping of the birds in the morning? Their songs at dusk? A blackbird maybe, a titmouse or a little sparrow? Bird sounds vary a lot — some flying fellows produce complex melodies while others chirp their way around. A [fascinating AI experiment](https://aiexperiments.withgoogle.com/bird-sounds/view/) now attempts to visualize these differences by using machine learning to organize thousands of bird sounds.
Bird Sounds
What makes the project so interesting (apart from the fact that it is simply lovely) is that the computer wasn't given any tags or the bird's name to handle the task, only the audio. Based on that, it created the map, placing similar sounds closer together. If you want to learn more about the technique behind the experiment, be sure to also check out the accompanying [repository on GitHub](https://github.com/googlecreativelab/aiexperiments-bird-sounds). _(cm)_ #### [](#)8\. Upcoming Smashing Conferences We create practical, hands-on conferences highlighting techniques, strategies and design patterns used in real-life products by experienced designers and developers. No fluff, no theory: just **2 days packed with practical front-end and UX techniques**. Coming up: [SmashingConf Freiburg, Germany](https://www.smashingconf.com) (Sep 11–12) and [SmashingConf Barcelona, Spain](https://smashingconf.com/barcelona-2017/ "SmashingConf Barcelona 2017") (Oct 17–18). That — and we love cats, too.
SmashingConf Freiburg 2017

SmashingConf Freiburg, Germany (Sep 11–12)

SmashingConf Barcelona 2017

SmashingConf Barcelona, Spain (Oct 17–18)

Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy!

[](#)9. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:

  • Senior Front-End Developer in Amsterdam at Bolden (Amsterdam)
    “We’re looking for a front-end developer who wants to make a big impact with his or her experience, collaborate with other talented colleagues and work on awesome projects (without working overtime).”
  • Designer at Landor (Cincinnati, Ohio)
    “Landor is seeking a designer to explore and conceptualize design options and solutions that maintain Landor’s vision and creative beliefs – ‘great ideas expertly and beautifully crafted and delivered with rigor and flair.’ The designer will work in conjunction with creative directors, design directors or senior designers, with opportunity to participate in all phases of design, the design process, and push to find ‘big ideas’ for all projects.”
  • Senior Designer at Grow (Norfolk, VA)
    “The senior designer plays a key role on our creative team by contributing to world-class digital experiences across web, mobile, and supporting integrated media. The successful candidate for this job will be skilled in turning high-level, conceptual feedback into polished designs, with meticulous attention to detail and an unbending desire for perfection.”

[](#)10. Smashing Highlights (From Our Archives)

  • How To Deliver Exceptional Client Service
    We often hear companies, including Web agencies, boast about how they provide exceptional client service. But how do they define exceptional?
  • The (Not So) Secret Powers Of The Mobile Browser
    Apple taught us, “There’s an app for that.” And we believed it. Why wouldn’t we? But time has passed since 2009. Our mobile users have gotten more mature and are starting to weigh having space for new photos against installing your big fat e-commerce app. Meanwhile, mobile browsers have also improved. New APIs are being supported, and they will bring native app-like functionality to the mobile browser.
  • Where Are The World’s Best Open Device Labs?
    Every developer knows that just because a website looks like and does what it’s meant to on the latest iPhone, doesn’t mean it will work across every mobile device. In this article, we’ll highlight some of the many open device labs out there — fantastic and helpful initiatives by the community that deserve support and attention.

[](#)11. Recent Articles On Smashing Magazine

Design Articles

Inspiration, Freebies, Misc.