Smashing Newsletter #181: Error-Messages, Eye Candy and Map of Typefaces

Constraints. We know the drill: great ideas usually come unexpectedly, and sometimes when you are almost forced into creating something within a limited amount of time under strict constraints, creativity is the only way to break out of the imposed boundaries. Issue #181 • Tuesday, May 9th 2017 • 229,440 readers • [View in the browser]( [Smashing Email Newsletter]( Dear Friends, 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](#a1) 2. [Enter The Next Level Of Front-End: SmashingConf Barcelona Is Coming!](#a2) 3. [An Interactive Map Of Typefaces](#a3) 4. [Designing With Real Content Made Easy](#a4) 5. [A Color Blindness Simulator For Sketch](#a5) 6. [Italian Graphic Design At Its Best](#a6) 7. [A Pure CSS Crossword](#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. 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. Unveil The Front-End Superhero Inside Of You: SmashingConf New York Is Coming! What could be better than learning from people who know their craft and, as a result, enhancing your superpowers? Well, [SmashingConf New York]( is soaring into New World Stages June 13th and 14th, playing host to hands-on, practical sessions by some of the most respected members of the community. Plus, on the second day, we have our Mystery Speaker — probably somebody you’ve heard of. ;-) [SmashingConf New York 2017]( The conference experience is all about learning, networking, and having a wonderful time. Now, to round out your journey in New York City, why not attend one of the [SmashingConf workshops]( the Monday before or the Thursday after the conference, too!? (aa) --------------------------------------------------------------- #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) --------------------------------------------------------------- Our sponsor: Explore And Test Complex And Innovative Data-Driven Apps Have a data-driven development project? [Qlik Playground]( is a free programming environment that lets you explore building data-driven apps faster. Test out straight-forward indexing and association of data, fast in-memory inference and a calculation engine that powers responsive visualizations. It’s all open source, too, so you can learn from fellow developers who are making data work for them. [Get started for free →]( [Qlik Playground]( --------------------------------------------------------------- #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) --------------------------------------------------------------- Our sponsor: Online Masters in Information Design and Strategy [Ad]( Learn to drive effective digital communication. --------------------------------------------------------------- #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 - [Atomic Design: Process & Patterns]( – Brad Frost - [Good Ideas Make Great Illustration]( – Yuko Shimizu - [Persuasive Design]( – Horace Dediu - [The Modern Front-End Workflow Bootcamp]( – Umar Hansa - [Smart UX Design Patterns]( – Vitaly Friedman Workshops at SmashingConf New York — June 15 - [An Introduction To Service Design]( – Eric Reiss - [How to Design With Science Without Losing The Magic]( – Joe Leech - [Mastering SVG]( – Sara Soueidan - [New Front-End Adventures in Responsive Design]( – Vitaly Friedman Workshops at SmashingConf Freiburg - [Smart UX Design Patterns]( – Vitaly Friedman (September 10) - [Modular Design]( – Alla Kholmatova (September 13) - [Modern Front-End Workflow Bootcamp]( – Umar Hansa (September 13) - [Advanced CSS Layouts With Flexbox and CSS Grids]( – Rachel Andrew (September 13) Public Smashing Workshops - Hamburg — Germany • [New Front-End Adventures in Responsive Design]( 25hours Hotel Hamburg HafenCity, July 3rd, 2017 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 - [Designing Voice Experiences]( - [Moving From Photoshop And Illustrator To Sketch: A Few Tips For UI Designers]( Coding Articles - [What You Need To Know About OAuth2 And Logging In With Facebook]( - [Let The Content Delivery Network Optimize Your Images]( - [Simplifying iOS Game Logic With Apple’s GameplayKit’s Rule Systems]( Inspiration, Freebies, Misc. - [Finding Inspiration In The Little Things Around Us]( - [From Small CSS Tricks To Great Design Mysteries: SmashingConf Barcelona 2017]( - [Upcoming Web Design Conferences (May–September 2017)]( - [All Things Seem Possible In May! Unique Wallpapers To Freshen Up Your Desktop]( - [Web Development Reading List #181: Mass Deployments, Prepack, And Accessible Smart Cities]( - [Web Development Reading List #180: DNS Over HTTPS, HAProxy Performance, And Decentralized AI]( --------------------------------------------------------------- Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. Email: newsletter@smashingmagazine.com [Follow us on Twitter]( • [Join us on Facebook]( [Smashing Freddie: Sent via Mailchimp.]( The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Markus Seyfferth (ms), Christiane Rosenberger (research), Elja Friedman (tools). [unsubscribe]( • [update preferences]( • [View in the browser](