Dear Friend,
As designers and developers, we have certain opinions about certain things. Those opinions can be quite strong actually, whether they're about best practices, tooling, technologies, methodologies or anything in between. Not a single day passes by without debates on perfect technical solutions, most performant toolchains, and most scalable technological stacks. These are all important conversations to have, yet in the myriad of opinions about tooling, it's rarely that we debate about people, and how our technical decisions affect communication, alignment, and governance.
Last week, I attended Front Conference Zurich, a wonderful community-driven conference dedicated to all things frontend. So many insightful sessions took place (the videos are already released for free), but there was one in particular that really struck home with me. It was Mark Boulton's session about "The Ugly Truth About Design Systems".
Mark Boulton speaking about the ugly truth of design systems. Watch the video.
In his talk, Mark argued that successful design systems encompass much more than just scalable, efficient, modularized and standardized components. The really difficult part is much less predictable: people.
Otl Aicher, a German designer who created a design system for the Summer Olympics that took place in Munich back in 1972, once said that a successful design system is "a strictly designed grammar allowing for free, playful expression". When creating design systems today, we often excel at the first part (i.e. creating an excellent factory-alike tooling with our components), yet we rarely consider what impact a design system has on people, processes, stakeholders, operations, and governance. And more specifically, how people could flawlessly work together by freely exploring and playfully expressing the grammar created for them.
What if we apply design thinking to our colleagues and managers, and perhaps even stakeholders? How would we design a workflow for them to understand the value of a design system in order to use it frequently? What if you set up a brainstorming session or a workshop to study where the bottlenecks in communication lie? Or why a design system isn't used? Or why design guidelines aren't followed?
Admittedly, these aren't necessarily the most exciting topics, but the roots to many problems in organizations are hidden right there — under the pile of technical debt and organizational bottlenecks. People are difficult and chaotic, and they deserve at least as much attention as our wonderful tools do.
— Vitaly (@smashingmag)
Table of Contents
1. There Is No 'One Perfect Layout'
"We're doing it wrong," argues Jason Pamental. What he means is the way we tackle layouts and our belief that we need to come up with a "perfect layout" — one that works with every piece of content. The results of these efforts are designs that lack variety; even though we have the technology to create more vibrant designs right at our fingertips, we only need to rethink what makes good design on the web (as Jason points out in his thought-provoking article). An inspiring piece about thinking out of the box and embracing modern techniques. (cm)
2. Type Terms Explained
Aperture, counter, bowl, tittle: do you know what these typographic terms mean? If you feel your memory needs a little refresher or if you're just starting out with typography, then Type Terms is just for you. This animated cheatsheet teaches you the 20 most important typographic terms so that you have the vocabulary you need to discuss typography without struggling for words. (cm)
From our sponsor
Get Your Free .design Domain Name
Thinking of building your portfolio? .design is like .com and .net, but it's more relevant to what you do as a designer. A .design domain name lets potential clients and employers know what you do before they arrive to your website. Your .design name is free for 1 year and comes with free WHOIS Privacy & a Site Builder trial. Claim your .design domain name before it's gone!
3. A Performant Unused-CSS Linter
When Leon Sorokin looked for an unused-CSS linter that also removes attribute selectors, he decided to put one together himself. The result is DropCSS. This nifty tool takes your HTML and CSS as input and returns only the used CSS as output — and that exceptionally quickly and thoroughly, while weighing in with only 10KB. Since the custom parsers are highly optimized and can't handle malformed markup or stylesheets, make sure that your input is well-formed before using the linter. (cm)
4. Accessible Components
You're looking for an accessible switch toggle or a disclosure widget? Well, Scott O'Hara has got you covered. Scott enjoys building accessible components and has built quite a lot of markup patterns and widgets at this point. To keep track of them and make them available to the community, he started the Accessible Components repository. In it, you'll find Vanilla solutions for accordions, toggles, widgets, tooltips, buttons, and more, as well as markup components for navigation, landmarks, and forms. Each of the components is based on testing with users and from following W3C specifications and notes. New ones are added regularly. (cm)
5. Learn And Test Regular Expressions
If you want to learn regular expressions or are looking for a place to test them, RegExr is for you. The online tool updates in realtime as you type and supports PCRE and JavaScript flavors of RegEx. You can roll over a match or expression for details and save and share favorites. A cheatsheet and full reference guide are also included. Another one for the bookmarks! (cm)
From our sponsor
Draft, Design And Develop Your Project All in One Place
Making beautiful and distinct layouts has become a breeze thanks to tools like Site Designer 4. It comes with a CSS Grid Editor, CSS Filters & Blend Modes, subtle animation patterns and transitions, and puts out semantic and clean code straight to Codepen if you want. Check out their free themes and try Site Designer now — it's free.
6. Field Performance Plugin For Lighthouse
Lighthouse audits are an easy way to see what works well on your site and where you still have some polishing to do. A little plugin now is committed to enhancing your Lighthouse reports: the Field Performance plugin. It displays the "field" performance of a page for real-world Chrome users over the last 30 days. The data is collected anonymously in the "field" and provided by the Chrome UX Report. If you want to see what a Lighthouse report looks like with the plugin, be sure to check out the live example. (cm)
7. Easy-To-Use CSS Gradients
Creating a CSS gradient from scratch can be intimidating. But, luckily, there's a little helper out there that takes away the trouble and makes using gradients a simple act of copying and pasting. Say hello to Gradient Magic, a gallery of unique CSS gradients with everything ranging from standard gradients to angular, striped, checkered, and burst gradients. To find your favorite, you can browse the gallery by style and color. A great addition to any toolkit! (cm)
8. The Writing Systems Of The World
Do you have a sweet spot for typography? Well, then The World's Writing Systems is for you. The site takes you on a journey through time and the history of writing systems — from the Egyptian hieroglyphs to writing systems that have developed in the last few years, such as Luo in Africa or Badaga in South Asia. The site presents one glyph for each of the writing systems along with details whether the system is already encoded in Unicode. Last but not least, you'll find further reading resources in case you want to dive in deeper. Fascinating! (cm)
From our sponsor
Online Masters in Information Design and Strategy
Earn your master's degree online.
9. Upcoming In Smashing Membership
Thank you for being smashing! A few weeks ago, we released the brand-new Smashing Magazine Print, with practical and thought-provoking articles on ethics and privacy to make us all think. Members ($5 plan) receive the digital version for free, Smashers ($9 plan) get the printed issue shipped directly to their doorsteps. And we have new webinars coming up as well:
- Smashing TV on Sept 3 at 16:00 GMT
"WebAssembly: How And Why" with Milica Mihajlija - Smashing TV on Sept 17 at 16:00 GMT
"Image Optimization" with Colin Bendell
Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. (Ah, you could become a Smashing Member, too! Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉)
10. New On Smashing Job Board
- Full Stack Developer at Consors Finanz BNP Paribas S.A. Niederlassung Deutschland (Munich)
"The develop leader of the digital factory is in charge of defining and maintaining the coherence of the developments of its digital factory, both on the choice of technologies in connection with the community of the digital factory and on the quality of the developments produced by the Teams." - (Senior) Full-Stack Developer (m/f/d) at Cluno GmbH (Munich)
"As part of our rapidly growing agile development team, you will work closely with your colleagues to fulfill our mission: to develop a microservice architecture that offers our customers innovative and platform-independent products." - Head Of Web Development at Queen Mary University of London (Mile End London)
"We are recruiting to the role of Head of Web Development, which is responsible for the strategic leadership of the technical development and maintenance of Queen Mary's website and related web presence, ensuring that the University's web presence is informed by user need and supports the objectives of the University."
11. Our Next Smashing Workshops
In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems. Coming up next:
Or, if you'd like to run an in-house workshop at your office, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Get in touch — it's that easy! (vf)
12. Our Most Popular Articles
This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Vitaly Friedman and Christiane Rosenberger.
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
0 коммент.: