Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #185

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 Guide1 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 alone2? 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 Guide3

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 ways4. 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 guide5, for example, contains a set of examples for each component in use. AirBnB’s air/shots6 is a powerful search engine for design flows and components: You can choose components, languages and the preview format and size.

Design Systems book7

To find a strategy for keeping a design system maintainable on the long term, we’ve teamed up with Alla Kholmatova8, previously a lead designer at FutureLearn, to work on the upcoming Design Systems9 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.10 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?11
  2. Spectral: A Free Google Font For Distraction-Free Reading12
  3. Automated Browser Testing As Easy As It Can Get13
  4. How To Build Better Sliders14
  5. Which UX Tool Suits Your Needs?15
  6. Proofreading Marks For Designers16
  7. Who’s Chirping?17
  8. Upcoming Smashing Workshops18
  9. New On Smashing Job Board19
  10. Smashing Highlights (From Our Archives)20
  11. Recent Articles On Smashing Magazine21

221. 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 tips23 as well as a guiding thread to base your voice design process on.

24

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)

252. Spectral: A Free Google Font For Distraction-Free Reading

Have you already seen the newest addition to Google’s font library? It’s called Spectral26 and was commissioned by Google as a font that works especially well for long, distraction-free reads on screen.

Spectral27

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 free28 from Google’s font repository. (cm)


293. Automated Browser Testing As Easy As It Can Get

Starting and running a functional web test with just one command line? Well, TestCafe30 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.

TestCafe31

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)

324. 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 wrong33.

Implementing a slider well34

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)

355. 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 designers36 — from Adobe’s suite to Sketch, UXPin, Figma, Affinity Designer, Axure, Atomic.io, and many more.

UX Tools37

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)

386. 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 Marks39

To have the essentials always at your fingertips (just in case, you know), Graham Smith shows us some proofreading marks40 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)

417. 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 experiment42 now attempts to visualize these differences by using machine learning to organize thousands of bird sounds.

Bird Sounds43

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 GitHub44. (cm)

458. 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, Germany46 (Sep 11–12) and SmashingConf Barcelona, Spain47 (Oct 17–18). That — and we love cats, too.

SmashingConf Freiburg 201748

SmashingConf Freiburg, Germany (Sep 11–12)

SmashingConf Barcelona 201754

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.com64 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!

659. New On Smashing Job Board

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

  • Senior Front-End Developer in Amsterdam67 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).”
  • Designer68 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 Designer69 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.”

7010. Smashing Highlights (From Our Archives)

  • How To Deliver Exceptional Client Service71
    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 Browser72
    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?73
    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.

7411. Recent Articles On Smashing Magazine

Design Articles

Inspiration, Freebies, Misc.

Footnotes

  1. 1 https://walmartlabs.github.io/web-style-guide/
  2. 2 https://www.smashingmagazine.com/taking-pattern-libraries-next-level/
  3. 3 http://www.audi.com/ci/en/renewed-brand.html
  4. 4 http://airbnb.design/building-a-visual-language/

  5. 5 http://www.audi.com/ci/en/renewed-brand.html
  6. 6 https://airbnb.design/building-a-visual-language/
  7. 7 https://www.smashingmagazine.com/design-systems-book/
  8. 8 https://www.twitter.com/craftui
  9. 9 https://www.smashingmagazine.com/design-systems-book/
  10. 10 https://www.smashingmagazine.com/design-systems-book/#toc
  11. 11 #a1
  12. 12 #a2
  13. 13 #a3
  14. 14 #a4
  15. 15 #a5
  16. 16 #a6
  17. 17 #a7
  18. 18 #a8
  19. 19 #a9
  20. 20 #a10
  21. 21 #a11
  22. 22 #
  23. 23 https://developer.amazon.com/designing-for-voice/
  24. 24 https://developer.amazon.com/designing-for-voice/
  25. 25 #
  26. 26 https://designmodo.com/spectral-web-font/
  27. 27 https://designmodo.com/spectral-web-font/
  28. 28 https://fonts.google.com/specimen/Spectral
  29. 29 #
  30. 30 https://devexpress.github.io/testcafe/
  31. 31 https://devexpress.github.io/testcafe/
  32. 32 #
  33. 33 http://ilyabirman.net/meanwhile/all/slider/
  34. 34 http://ilyabirman.net/meanwhile/all/slider/
  35. 35 #
  36. 36 https://uxtools.co/tools/design
  37. 37 https://uxtools.co/tools/design
  38. 38 #
  39. 39 http://imjustcreative.com/proofreading-marks/2017/06/20
  40. 40 http://imjustcreative.com/proofreading-marks/2017/06/20
  41. 41 #
  42. 42 https://aiexperiments.withgoogle.com/bird-sounds/view/
  43. 43 https://aiexperiments.withgoogle.com/bird-sounds/view/
  44. 44 https://github.com/googlecreativelab/aiexperiments-bird-sounds
  45. 45 #
  46. 46 https://www.smashingconf.com
  47. 47 https://smashingconf.com/barcelona-2017/
  48. 48 https://smashingconf.com
  49. 49 https://www.smashingconf.com
  50. 50 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-freiburg-2017
  51. 51 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-freiburg-2017
  52. 52 https://shop.smashingmagazine.com/products/workshop-umar-hansa-freiburg-2017
  53. 53 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-freiburg-2017
  54. 54 https://smashingconf.com/barcelona-2017/
  55. 55 https://smashingconf.com/barcelona-2017/
  56. 56 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-barcelona-2017
  57. 57 https://shop.smashingmagazine.com/products/workshop-gemma-obrien-barcelona-2017
  58. 58 https://shop.smashingmagazine.com/products/workshop-horace-dediu-barcelona-2017
  59. 59 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-barcelona-2017
  60. 60 https://shop.smashingmagazine.com/products/workshop-anton-irene-barcelona-2017
  61. 61 https://shop.smashingmagazine.com/products/workshop-brad-frost-barcelona-2017
  62. 62 https://shop.smashingmagazine.com/products/workshop-paul-boag-barcelona-2017
  63. 63 https://shop.smashingmagazine.com/products/workshop-sarah-drasner-barcelona-2017
  64. 64 mailto:vitaly@smashingconf.com
  65. 65 #
  66. 66 http://jobs.smashingmagazine.com/
  67. 67 http://jobs.smashingmagazine.com/j/Senior-Front-end-Developer-in-Amsterdam/2500230
  68. 68 http://jobs.smashingmagazine.com/j/Designer/2499981
  69. 69 http://jobs.smashingmagazine.com/j/Senior-Designer/2499652
  70. 70 #
  71. 71 https://www.smashingmagazine.com/2012/01/how-to-deliver-exceptional-client-service/
  72. 72 https://www.smashingmagazine.com/2016/12/the-not-so-secret-powers-of-the-mobile-browser/
  73. 73 https://www.smashingmagazine.com/2016/11/worlds-best-open-device-labs/
  74. 74 #
  75. 75 https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/
  76. 76 https://www.smashingmagazine.com/2017/06/connecting-users-humor-web-design/
  77. 77 https://www.smashingmagazine.com/2017/06/weekly-design-meetings/
  78. 78 https://www.smashingmagazine.com/2017/06/left-handed-brush-lettering/
  79. 79 https://www.smashingmagazine.com/2017/06/desktop-wallpaper-calendars-july-2017/
  80. 80 https://www.smashingmagazine.com/2017/06/4th-of-july-free-icons/
  81. 81 https://www.smashingmagazine.com/2017/06/web-development-reading-list-187/
  82. 82 https://www.smashingmagazine.com/design-systems-book/

↑ Back to top Tweet itShare on Facebook

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 designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

Comments are closed.

↑ Back to top