We love useful stuff, and we love quality writing, that’s why we send out an editorial email newsletter twice a month with useful tips, tricks and resources for designers and developers — thoroughly collected, written and edited by us exclusively for our readers. Once subscribed, you’ll receive a small token of appreciation — a free eBook just for you.
Of course, you can cancel your subscription at any time (just check the “unsubscribe” link in the footer of the last newsletter issue). The Smashing Newsletter will always be free of charge. We respect your privacy; we will never give your data to third parties, nor would we ever spam you. You have our word!
Please keep in mind that we keep the number of ads per issue to a minimum; and to help us cover our costs, we send out at most one monthly special issue which is dedicated to Smashing projects and products. We appreciate your support, and we’ll make sure to keep your subscription worthwhile.
- Issue #192 is scheduled for Tuesday, October 17th 2017
- See below for Issue # 1911 published on Tuesday, October 3rd
- Issue #190 | Tuesday, September 19th 20172 – Readers: 226,812
- Issue #189 | Tuesday, August 29th 20173 – Readers: 226,933
- Issue #188 | Tuesday, August 15th 20174 – Readers: 227,450
- Issue #187 | Tuesday, August 1st 20175 – Readers: 227,579
- Issue #186 | Tuesday, July 18th 20176 – Readers: 227,520
- Issue #185 | Tuesday, July 4th 20177 – Readers: 227,600
- Issue #184 | Tuesday, June 20th 20178 – Readers: 228,599
- Issue #183 | Tuesday, June 6th 20179 – Readers: 228,882
- Issue #182 | Tuesday, May 23th 201710 – Readers: 229,438
Last Newsletter Issue #191
This newsletter issue was sent out to 226,457 recipients newsletter subscribers on Tuesday, October 3rd 2017.
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 Systems13 — 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 sample14 is available as well).
We’ve already received a few testimonials15 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.16Hopefully the book will help you get on the right path to tame that sneaky pattern library of yours! You can get the hardcover + eBook17 or eBook18 right away.
Table of Contents
- Visualize Changes On Live Websites19
- Freebies: Polygonal Animal Illustrations And Textured Patterns20
- Drag & Drop Tricks To Grab On To21
- Diving Into CSS Grid Concepts22
- Insights Into Font Purchasing Habits23
- Iconic Brands, Fuzzy Memories24
- Marvin Visions: The New Edition Of A Classic Sci-Fi Typeface25
- An Illustration Tribute To Famous Guitars26
- Upcoming Smashing Conferences27
- New On Smashing Job Board28
- Popular Articles On Smashing29
- Most Recent Articles On Smashing30
311. 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 Inspector32.
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)
342. 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 Animals35 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 Patterns37 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)
383. 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. draggable39 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 welcome41 anytime. (il)
424. 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 tutorial44 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 gotchas45 that folks have stumbled upon. Mind a game? CSS Grid Garden46 takes you through 28 levels of Grid challenges. So, what’re you waiting for? No more excuses! (il)
475. 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 habits48 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.