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 #181

Quick Summary

Table of Contents

This newsletter issue was sent out to 229,582 newsletter subscribers on Tuesday, May 9th 2017.

Editorial

Constraints. Great ideas usually come unexpectedly, and sometimes when you are forced into creating something within a limited amount of time, creativity is the only way to break out of the imposed boundaries. In design, we tend to use “mobile first” to bring a sharp focus to our design and radiate our experience from the core messages we want to communicate. We might be looking into mobile, small, portrait, slow, interlace, monochrome, coarse, non-hover first, which is a good starting point for any bulletproof and resilient experience.

However, we need to know what exactly we are building first. One of the very first things we do when starting a new project is to explore the specifics of the content as well as the content types that we are supposed to deliver. Every interface can be broken down into content modules, responsively re-arranged, and scaled up and down according to the designer’s intent. So, why don’t we design something as seemingly obvious and trivial as error messages first? In many ways, these open the door to an understanding and purpose of what we are designing for while showing the way we frame and shape the visual language to communicate that exact purpose.

Error Messages on the new SmashingMag
Error messages on the new Smashing Magazine (currently in beta), define the personality of the brand and its new site.

“Designing” the interface in a text editor forces you to fully comprehend what you are about to design, and helps formulate goals and the language of a project respectively. That’s why some companies hire professional stand-up comedians to write the first draft of copy so to communicate a message in a clever and memorable way. Once you have the tone and voice settled, you can translate it into an appropriate visual form regarding type, color, and iconography — be it mobile, desktop or both — and proceed to technicalities afterward.

It’s all about gathering precisely the right understanding of what is in front of you and finding just the right angle to address your client’s current problems. Once you have achieved this, you have a guiding rule to constrain your design and technical decisions, and that can be very beneficial to any process.

Embrace boundaries just to break out of them.
Cheers from Melbourne,
Vitaly (@smashingmag)

Table of Contents

  1. Office Design By An Office Hater
  2. Enter The Next Level Of Front-End: SmashingConf Barcelona Is Coming!
  3. An Interactive Map Of Typefaces
  4. Designing With Real Content Made Easy
  5. A Color Blindness Simulator For Sketch
  6. Italian Graphic Design At Its Best
  7. A Pure CSS Crossword
  8. Upcoming Smashing Workshops
  9. New On Smashing Job Board
  10. Smashing Highlights (From Our Archives)
  11. Recent Articles On Smashing Magazine

[](#)1. Office Design By An Office Hater

Do you feel comfortable in the office you work in? Or do you feel it’s too loud, too crammed, too hot or maybe too cold? Well, you’re not alone. Office spaces are often created with representative reasons in mind, the people who work there have to adapt. But let’s be honest, open floor plans, randomly distributed work stations and meeting spots sprinkled within aren’t fostering an atmosphere in which knowledge workers can undisturbedly do what they are supposed to do: think.

Office Design By An Office Hater

Markus Tacker, software developer, hates offices for exactly these reasons. But instead of complaining, he set out to do better and created a 3D model of his ideal office. The key idea behind his design: To create dedicated spaces for different purposes that don’t interfere with each other and, thus, keep distraction to a minimum. The offices are designed for three people (or six if team size requires it), for example, with walls shielding the tables from the entrance to reduce visual noise. You’ll also find dedicated places for one-on-one meetings just like a social space which brings everyone together during lunch time or for a quick standup, of course. Warm colors, natural materials and plants also help cater for an inspiring atmosphere. Now who wouldn’t love to work there? (cm)

[](#)2. Enter The Next Level Of Front-End: SmashingConf Barcelona Is Coming!

The web is constantly changing. So, what could be better than learning first-hand from people who know their craft? Well, SmashingConf Barcelona is returning to the magical Palau de la Música Catalana once again this fall (October 17th and 18th) to boost your front-end game. Two packed days of hands-on, practical sessions by some of the most respected members of the community.

SmashingConf Barcelona

Join us on our journey to the sunny Mediterranean seaside where we’ll explore new front-end challenges, UX strategies, and design patterns that can immediately be applied to your work. No fluff or theory, just things that have worked in real-life projects — with enough time for networking, of course. Tickets are now on sale. See you there? (cm)

[](#)3. An Interactive Map Of Typefaces

The potential of machine learning is huge. But what can be done with it already today? The team at IDEO wanted to find out how they could use maching learning to address one of the most common challenges that designers usually face: choosing a font. And, well, their experiment was successful indeed.

Font Map

Font Map, as the endeavour is called, is an interactive map of more than 750 fonts that are organzied by a machine learning algorithm based on their visual characteristics. As designers usually tend to fall back on fonts they used before or start their search within categories, Font Map provides an opportunity to think outside the box and explore fonts in an entirely new, unbiased way. And in case you’ve already got a font on your mind that could make a good fit for your project, you can also use the tool to search for it and find similar alternatives. Clever! (cm)

[](#)4. Designing With Real Content Made Easy

Nothing beats designing with actual data. It caters for real-life conditions and helps you detect weak spots in your design already in the mockup phase. And thanks to Julien Perriere, doing so now became just as painfree as using the good ol’ lorem ipsum.

Lists

How? Well, Julien bundled real content conveniently together into lists. Lists with names, lists with prices, lists of countries, addresses, credit card numbers, email subjects, and much more. In fact, whatever else you can think of, there’s probably a list for that. He describes the collection as “an App Store for fake content”, advocating that inserting the content into your mockup shouldn’t take up more time as designing it. True. One for the bookmarks. Ah, you could also use Content Generator Sketch plugin and Craft for InVision. (cm)

[](#)5. A Color Blindness Simulator For Sketch

Accessibility matters and should be treated with the same attention and care as every other aspect in the design process — to make sure that everyone can get access to the same information without any hassle. The Sketch tool Stark now makes it easy to check for an accessibility hurdle that we oversee so easily but which affects more people as you would have thought: color blindness.

Stark

One in twelve men and one in 200 women are color blind. Our color choices, however, often aren’t made with them in mind. Contrasts are too low and content becomes hard or impossible to read. Stark simulates what your design looks like seen through the eyes of a color-blind person (eight color profiles are available to match different varieties of color blindedness) and the integrated color checker ensures that your colors, visuals and typography work hand in hand to offer a great reading experience — for everyone. Stark can be downloaded for free. (cm)

[](#)6. Italian Graphic Design At Its Best

What comes to your mind when you think of Italy? Pasta? Espresso? La dolce vita? Well, actually, Italy is the home of some real graphic design classics, household names like Massimo Vignelli, Giovanni Pintori, or Lora Lamm. The Archivio Grafica Italiana is dedicated to these gems and the stories behind them.

Archivio Grafico Italiana

Scrolling through the archive feels like taking a trip back to the golden days of graphic design, when styles were simple yet the overall look bold and striking. The featured works — advertisements, posters, typefaces, logo and packaging design — date back mostly to the period between the 40s to the 70s, but you’ll also find some contemporary pieces in the collection. A great reminder that it doesn’t take sophisticated tools to create something memorable. (cm)

[](#)7. A Pure CSS Crossword

Last but not least, a nice little experiment to puzzle over. Literally. Adrian Roworth built a working crossword puzzle only with HTML and CSS. The accompanying Codepen lets you dive right into the code.

Pure CSS Crossword

A cool feature: The crossword checks for valid squares in real-time as you type in your answer and even highlights the clues that refer to the field that is active at that point of time. Impressive! (cm)

[](#)8. Upcoming Smashing Workshops

With so many techniques, tools, style guides, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.

Smashing Public Workshops

Workshops at SmashingConf New York — June 12

Workshops at SmashingConf New York — June 15

Workshops at SmashingConf Freiburg

Public Smashing Workshops

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:

  • Greenhouse Studios Design Technologist at UConn Library (Storrs, CT)
    “The UConn Library is expanding its commitment to scholarly communications and is seeking to fill the new role of Greenhouse Studios Design Technologist with a flexible, collaborative, self-directive, and innovative individual. This is a two year, grant funded position and the successful candidate will serve as a foundational member of a team of researchers taking on a major Mellon-funded initiative to redefine scholarly communication in the digital age.”
  • Web Content Manager at CTA (Wageningen, Netherlands)
    “CTA seeks to recruit a highly motivated and results-oriented individual as Web Content Manager to oversee the development and publishing of well-targeted content for its corporate and programmatic web sites. The overall purpose of the post is to manage timely and quality delivery of content via CTA’s online corporate and thematic web sites and social media accounts to reach its target audiences around the world.”
  • WordPress Developer at Cornershop Creative (Virtual, US Only)
    “The core responsibility for this position will be building and styling WordPress-based websites and applications for our non-profit and small business clients. This position will be responsible for things like setting up WordPress custom post types, fields and taxonomies; coding HTML, CSS (SASS), and JS for custom themes; and styling & configuring pre-built WordPress themes for our clients. Additionally, this position may be responsible for developing and maintaining custom plugins.”

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

  • Best Practices Of Combining Typefaces
    Creating great typeface combinations is an art, not a science. Indeed, the beauty of typography has no borders. While there are no absolute rules to follow, it is crucial that you understand and apply some best practices when combining fonts in a design. When used with diligence and attention, these principles will always yield suitable results.
  • Stop Designing Pages And Start Designing Flows
    For designers, it’s easy to jump right into the design phase of a website before giving the user experience the consideration it deserves. Too often, we prematurely turn our focus to page design and information architecture, when we should focus on the user flows that need to be supported by our designs. It’s time to make the user flows a bigger priority in our design process.
  • When 24/7/365 Fails: Turning Off Work On Weekends
    The web has continued evolving since its inception, as have those who have devoted their professional lives to working in and around this massive communication tool. We have had to roll with the changes, and like with any major environmental shifts, we have had to adapt.

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

Design Articles

Coding Articles

Inspiration, Freebies, Misc.