Smashing Newsletter: Issue #191

Editorial

Chances are high that you've already experimented with a pattern library or a design system, and chances are perhaps even higher that your thoroughly crafted design language is already outdated. It's not due to the lack of focus or design skill that it happens; more often it's the lack of established process and tooling that makes it infinitely more complicated and time-consuming to maintain a design language. We're all trying to figure things out, and while we often fail, we sometimes succeed, too. So what can we learn from those failures and success stories to avoid mistakes down the line?

After one and a half years of research and writing, we are honored to now finally release Alla Kholmatova's book on Design Systems — a book on what makes an effective design system that can empower teams to create great digital products. The hardcover is now shipping worldwide, and the full eBook version is already available in PDF, ePUB and Amazon Kindle (a free PDF sample is available as well).

We've already received a few testimonials from well-respected members of the industry, and we're very proud to finally release that fully fledged guide on everything you need to know about design systems today to create better design systems tomorrow. Check the table of contents. Hopefully the book will help you get on the right path to tame that sneaky pattern library of yours! You can get the hardcover + eBook or eBook right away.

Happy reading!
Vitaly (@smashingmag)

Visualize Changes On Live Websites
Freebies: Polygonal Animal Illustrations And Textured Patterns
Drag & Drop Tricks To Grab On To
Diving Into CSS Grid Concepts
Insights Into Font Purchasing Habits
Iconic Brands, Fuzzy Memories
Marvin Visions: The New Edition Of A Classic Sci-Fi Typeface
An Illustration Tribute To Famous Guitars

1. Visualize Changes On Live Websites

Developers have DevTools if they want to tinker with live pages and visualize changes. But what about designers who aren’t that skilled with code? What if they want to see what a different typeface, different color combination or maybe a different kind of button would look like on an existing page? Well, good news, a free Chrome extension now lets you visualize changes like these, without touching any code: Visual Inspector.

Visual Inspector shines with a row of nifty features. It lets you inspect design properties from positioning to styling, for example, measure the distance between elements on the page, make design and text changes, adjust typography or try new color combinations — all without losing the comfort of a familiar design tool interface. And if you like the adjustments you made, you can export the page as PNG and share it with stakeholders. Nifty! (cm)

2. Freebies: Polygonal Animal Illustrations And Textured Patterns

A Tyrannosaurus Rex, a dragonfly, and a deer don’t really have much in common at first sight, do they? Or perhaps they do? Well, these particular ones are entirely made up of polygons, with subtle color gradiations giving them a magical 3D effect. Made by the folks at Blauananas, Polygonal Animals is a set of 20 fully editable animal illustrations depicting everything from delicate insects to mighty predators.

Minimalistic yet full of life, that’s probably how to best describe these little works of art. You can download the illustrations for free in EPS and high-resolution JPG formats. Now you only need a project that could use a bit of roaring — or some howling, maybe?

Another beautiful freebie comes from Simphiwe Mangole. His Awesome Patterns are a set of ten textured, geometrical patterns that look great on anything from illustrations and iconography to backgrounds and even printed goods. The vector patterns are available as ready to use swatches and are completely scalable, customizable and seamless. Enjoy! (cm)

3. Drag & Drop Tricks To Grab On To

There are some scenarios when good ol’ drag-and-drop is helpful — moving tasks around in a to-do app is just an example. However, you don’t have to build it from scratch — and building an accessible drag’n’drop is always a challenge. draggable has a large list of examples that can help you take complete control over the drag and drop behaviour.

The code base is new, and built specifically for fast DOM reordering, accessible markup and a bundle of events to grab on to. Released under the MIT license, you’re free to use the code from the library for both personal and commercial use. In case you find any issues worth sharing, contributions are welcome anytime. (il)

4. Diving Into CSS Grid Concepts

Nowadays, most folks who’re just starting out in the web industry may quickly feel overwhelmed when learning how to code. Especially when it comes to the CSS Grid specification which was shipped into production in March this year; developers have been busy experimenting and building with CSS Grid Layout even more ever since.

For those who’re having a bit of a hard time getting their head around CSS Grid, the developers at Mozilla created a CSS Grid tutorial that explains all the basic terminology you need to know, how to create your first grid with CSS Grid Layout, and provides examples of everything that’s possible with only a few lines of code. Rachel Andrew also answers the most common questions and sheds lights onto CSS Grid gotchas that folks have stumbled upon. Mind a game? CSS Grid Garden takes you through 28 levels of Grid challenges. So, what’re you waiting for? No more excuses! (il)

5. Insights Into Font Purchasing Habits

The number of typefaces available out there is constantly growing. But what do designers and developers who use fonts really care about? To find out, Mary Catherine Pflug from Monotype conducted a survey that looks at font purchasing habits from various perspectives. The goal: To gain new insights into how aspects like discounting, pricing, marketing and foundry loyalty, among other things, influence buying behavior.

2,600 people took the survey in May and June this year, 67% of them usually purchasing fonts for professional use. One of the main takeaways from the survey: When it comes to typeface features that buyers care about, the number of styles is at the top of the list with 85%, followed by kerning, alternates, ligatures, spacing and the number of glyphs. So if you’re designing fonts, be sure to advertise characteristics like these.

When it comes to evaluating a font to decide if it’s worth buying, almost all respondents want to see the entire character set. Typing out words and phrases in the font and seeing the ligatures and alternates are also aspects that can influence the buying decision positively. More than half of the respondents also appreciate a bit of inspiration when making their buying decisions — through images, for example. If you’re up for more valuable insights like these, be sure to take a look at the complete survey results. (cm)

6. Iconic Brands, Fuzzy Memories

Sherlock Holmes said, we “see, but do not observe”. Now what about you? Could you draw the Burger King logo from memory, for example? Or Apple’s maybe? A recent study called “Branded In Memory” shows that the logos we are confronted with on a regular basis are far from being stamped perfectly in our memory. Instead they largely exist as fuzzy visions in our mind’s eye.

To find out how accurately we can remember the features and colors of famous icons, the study asked 150 Americans to draw ten famous logos from memory as accurately as they could: Adidas, Apple, Walmart, IKEA, Foot Locker, Target, Domino’s, Seven Eleven, Starbucks and Burger King. 22% of the participants drew the Apple bite on the wrong side, while 16% forgot it completely. Or take Starbucks: 55% drew the mermaid but forgot her crown. 14% even associated wrong brand colors with the iconic blue and yellow IKEA logo. By the way, the level of brand engagement made no difference to the participants’ ability to accurately recall logos. Instead, it seems that the logos of giant corporations are so widespread that we don’t feel the need to have a photographic memory of them to recognize and engange with these brands. Seems like Sherlock was right. (cm)

7. Marvin Visions: The New Edition Of A Classic Sci-Fi Typeface

What comes to your mind when you hear the term “science fiction”? Time machines, parallel universes, extraterrestrial life? Certainly! But what about typography? Some typefaces just scream “sci-fi”, right? Just think of vintage sci-fi book covers or movie posters. A new interpretation of a real sci-fi typography classic now comes from Mathieu Triay: He gave the 1969 typeface Marvin a makeover that treads the line between a modern look and a retro feel. Say hello to Marvin Visions.

Marvin Visions is a real workhorse, a typeface with character that is made to stand out. A geometrically perfect construction and the tight, not-touching default spacing are characteristic for it. Just like the original, Marvin Visions is uppercase only and, thus, best suited for display use. It supports most European languages, and to make it even more versatile, it also comes with Cyrillic glyphs. You can downlad Marvin Visions for free for personal use, professional licenses start at £10. And if you want to learn more about the design process, Mathieu also gives some interesting insights into how the typeface came to be. (cm)

8. An Illustration Tribute To Famous Guitars

Gibson Flying V. Jackson PC1 Phil Collen. Dean Michael Batio Rocket. If you've got a sweet spot for music, you might know that these are the tools of the trade that helped Jimi Hendrix and fellow guitarists make music history. But more than that. These three renowned guitar models also are only a small fraction of the 69 guitars that designer David Navarro dreams of having in his collection. A very ambitious dream, and that's why David decided to collect them at least digitally, in an ongoing illustration project dedicated to his passion: FlatGuitars.

For FlatGuitars, David illustrates one of his favorite guitars each week. High-performance music instruments, some of them gentle beauties with maple necks and rosewood fingerboards, others eccentric rockstars, colorful and edgy. A beautful piece of eye candy, not only for guitar lovers — and along the way, you’ll also learn something about the guitar heros who made the artefacts so famous. (cm)

October 3, 2017 Smashing Newsletter: Issue #191

Previous Issues