Dear Friends,
So how do you sell a design system to the client? How do you establish a shared commitment within the company to put a pattern library on the roadmap? As designers, we all know and see the benefits of an overarching system that radiates consistency throughout the different experiences of a company.
In his article on Selling Design Systems, Dan Mall suggests to illustrate how fractured an organization is by printing out its different presences online and putting them on a large board as an example of all the wasted money and effort that goes into making sites from scratch, one-by-one, needlessly reinventing the wheel every time.
You can illustrate how fractured an organization is by printing out its different presences online and putting them on a large board. (Image credit)
What I learned from my experience is that trying to focus on the workflow or the process is never as helpful as focusing on tangible benefits that the client will get as a result. Clients usually don't want to hear about atomic design and modular design and standalone patterns, but they love seeing the output, be it working prototypes or a page with all components on them.
One way to display the output better is by using a project hub — one central place with all the important assets all collected in one place, sorted chronologically, and always up to date. As a result, the client can come to the site at any time and see the progress right away.
Whenever we work with companies, we never try to sell atomic design, and we rarely sell design systems. Instead, we're selling the ability to quickly see output with a new approach that — accidentally (or not) — includes modular design methodology. I'm "selling" project hubs and quick turnarounds, and often establishing a design system is a major part of the conversation with designers and front-end developers, but not what drives the conversation forward with clients.
Next time you encounter a client not seeing the benefits of a modular approach, try to convince them of the tangible benefits and the output, not the workflow you're using. You're much more likely to succeed this way.
SmashingConf NYC 2016 is coming in June this year. Grab your ticket — only a few seats are left!
Ah, right, that's also one of the topics we'll be exploring at the upcoming Smashing Conferences this year. SmashingConf Freiburg 2016 is almost sold out, but we do have a few tickets for SmashingConf NYC 2016 coming up in June 14-15th next month. So grab yours today, and hopefully see you there — there's no doubt that you'll leave with a toolbox of skills and little tips and hints just like this one.
Happy designing!
— Vitaly (@smashingmag)
Table of Contents
1. Sketch Runner: An Alfred For Sketch
When working with Sketch, it often takes quite a lot of clicks to perform simple tasks like navigating artboards, positioning layers and applying styles. Wouldn't it be great to have a little butler built into Sketch, something like Alfred, to simplify things? At the beginning of April, a team of six designers and developers got together at a hackathon to built just that — in an unbelievable 30 hours: a command runner for Sketch. It's name: Sketch Runner.
Sketch Runner is still in Beta, but it's already powerful enough to speed up your workflow significantly. You won't have to search your way through the menu anymore, and you don't have to remember keyboard shortcuts either. Instead, the plugin lets you type commands to perform tasks. You can search through all available menu commands and plugins, jump anywhere, apply styles and insert symbols right from your new command center. Could it get any more convenient? (cm)
2. Faking Element Queries With iframify
Working with living style guides can be tricky at times and if you do so you've probably experienced components breaking visually. Usually, this happens because the context the component is displayed in the style guide (i.e. media query) is different from the context you actually want to use it in. Element queries would provide a solution, but since they do not exist natively, we have to find another way to deal with the issue.
A fix comes from Hugo Giraudel. He suggests rendering the element in an iframe so that media queries fire based on the width of the iframe instead of on the actual screen size. To spare you the tedious work of creating a separate page for each component, his iframify script automates the process by replacing a node with an iframe version of itself and importing all its necessary styles to perform correctly. Now that's clever! (cm)
Advertisement
3. Doctor Kopioff And The Elevator Rule: A Peek Behind iA
Every team has its unique way of communicating, working and thinking, and most of this usually stays behind closed office doors. The Zurich-based team behind iA wants to change that. To offer an insight into their mindset they chose a quite unusual but very entertaining way: a design business dictionary that explains playfully how they see things — from "Achtung, Idee!" (German for "Caution, idea!") to ZUI (zoomable user interface).
Besides lingo and slang and how they use it internally, the compendium also reveals their view on certain aspects of design. It will evolve and grow over time, but always with the key rule in mind to limit each entry to one paragraph. Now to reveal the mystery of what Doctor Kopioff and the elevator rule are all about — well, it's best you find out yourself. (cm)
4. Free eBook: "A Pocket Guide To Combining Typefaces"
After Five Simple Steps closed their doors last month, Tim Brown decided to let his successful "Pocket Guide To Combining Typefaces" (originally published in 2013), live on by offering it for free download. The 63-pages-strong booklet sold thousands of copies, has been used in college curricula and cited in conference talks by leading designers.
Starting off with some background information on type and typography, Tim's guide provides you with strategies for selecting typefaces so you can make better choices and truly understand why a combination works or doesn't work. A great read to strengthen your typographic expertise. (cm)
5. Color And Buttons In Design Systems: How To Get Them Right
Setting up a design system that endures, is accessible and bulletproof can be a challenge. Nathan Curtis, founder of UX firm EightShapes, knows the pitfalls that come with it from his own experience, and, to help you avoid them, he now shares his tips and lessons learned from setting up two of the key components that belong in every design systems: color and buttons.
To help you get things right when it comes to color and produce engaging and harmonious palettes, Nathan wrote up 16 practical takeaways. They range from defining primary and secondary palettes to dealing with tints and shades and integrating accessibility considerations into the design process early on. Analogous to that, he also presents his tips on creating a system of buttons — with their ability to bring interaction to life the most important component in a design system, as he argues. A welcome reminder that it's the small details that make a great and user-friendly design. (cm)
Advertisement
6. Freebie: Responsive Office Icons
Codrops and Icons8 teamed up to release a handy freebie recently: responsive office icons. The set includes 150 icons in four size variations with different levels of detail (so 600 icons in total). Perfect for responsive projects.
Motives include everything from office equipment to technical things such as a Wifi sign, magnifiers and cropping tool, social media buttons, people, and, well, even cake. The icons are held in soft colors and come with delicate 1px borders which give them a friendly, unobtrusive look. EPS, PDF, SVG and optimized PNG formats are available. You may use the icons freely but please don't republish or redistribute them. (cm)
7. Design Facts That You Didn't Know About
Humankind has always created, however, the design craft as we know and practice it today is a rather young discipline. But that doesn't mean it doesn't have a lot of stories to tell. The project Design Facts by writer and art-director Shane Bzok reveals them by serving bite-sized pieces of design history that you probably didn't know about.
Did you know, for example, that the logo for the Spanish lollipop company Chupa Chups was designed by Salvador Dali in 1969? That the Adobe founders named their company after a creek that ran behind the house of one of the founders? Or that the logo of the Chanel brand with its interlocking C's originally adorned the building of a French vineyard and that Coco Chanel was granted permission by the vineyard owner to use it for her brand in the early 20's? These are only three of the more than 130 surprising and informative design facts that Shane Bzok has collected. Perfect to squeeze into a short coffee break. (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.
Workshops at SmashingConf New York
Workshops at SmashingConf Freiburg
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! (vf)
New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
- UX/UI Designer at Psychic Bunny (Los Angeles, CA)
"Psychic Bunny is seeking a freelance UX/UI Designer for a web and mobile game being released in conjunction with a network television show. The ideal candidate should have an eye for clean, straightforward design and be able to design meaningful interactions based on an existing style guide. It is a contract position starting immediately." - Product Designer at STAT (Boston, MA)
"STAT is a new national publication focused on finding and telling compelling stories about health, medicine, and scientific discovery. We produce daily news, investigative articles, and narrative projects in addition to multimedia features. We tell our stories from the places that matter to our readers – research labs, hospitals, executive suites, and political campaigns." - Software Engineer, Frontend at Zalando SE (Berlin, Helsinki, Dortmund, Hamburg)
"Zalando is transforming from Europe's leading e-commerce company into a multi-service platform for fashion. From logistics, to big brands, to manufactures – we're building the platform that connects all people and parts of the fashion ecosystem. We live Radical Agility. With the set of principles that we give to you and your team – Autonomy, Mastery, Purpose – we entrust you to shape the future of Zalando. You will be the one changing the world's opinion of tech and fashion in Europe."
Smashing Highlights (From Our Archives)
- How To Become A UX Leader
Let's say you run a UX team. Better yet, let's say you don't. Let's say you just want to do great work. You're a consultant. You're a newbie. You're an intern. Your position is irrelevant. So is your title. What's important here is that you want great UX to happen. You want it consistently. You want it now. You want it all the time. - Rethinking Mobile Tutorials: Which Patterns Really Work?
Pattern libraries are a great source of inspiration and education for designers. But common practice doesn't always equal best practice. In this post, we'll look at why many common tutorial patterns are ineffective and how you can leverage game design principles to increase user engagement. - How I Work: IDEO's Duane Bray On Creating Great Digital Experiences
Welcome to another interview in the series called "How I Work." These interviews revolve around how leading thinkers and creators in the Web world design, code and create. The goal is not to get into the specific nuances of their craft (as that information already exists online), but rather step back and learn a bit about their habits, philosophies and workflow for producing great work.
Recent Articles On Smashing Magazine
Coding Articles
Design Articles
Freebies, Inspiration, Misc.
