Smashing Newsletter: Issue #372

Editorial

Every now and again, you might end up in a situation where you need to deliver results quickly. You might be working on a quick prototype just to explore ideas, or you need to finish a presentation in time. In such cases, having a few ready-to-use resources in your toolbox can be quite helpful.

In this newsletter issue, we explore some of the free toolkits, Figma kits, illustrations, generators, and fonts to help you with just that.

In Smashing News, we are getting ready for SmashingConf NYC, taking place on October 10–13, with sessions on design systems, accessibility, SVG, performance, design patterns, Figma, and Web3. We’d love to see you there — get your ticket!

SmashingConf NYC 2022 — Our speakers are not just knowledgeable and amongst the best in their fields. They are also excellent speakers and teachers, smart and kind friends, and wonderfully nice and approachable.

If you can’t travel to New York, we’ve got your backs! We’ll be running a SmashingConf Live Stream Online for the main stage talks. Plus, you get some behind-the-scenes footage and backstage interviews with speakers, organizers, and friends.

Pssssst. Looking for video footage from SmashingConf San Francisco? Well, you can now watch all talks here.

We also have a new free workshop on Accessibility in Design & Development coming up next week (Oct. 3–4), kindly powered by our dear friends at Deque, who take accessibility seriously and help folks build and maintain accessible websites and mobile apps on their own.

Workshop: Accessibility in Design & Development — Testing for accessibility doesn’t have to be overwhelming. Register here.

We have lots of exciting news coming your way very soon — this time around all printed things! In the meantime, stay tuned, and take good care of yourself and of your loved ones.

— Vitaly (@vitalyf)

1. Design Systems Figma Kits

If you are building a design system for a complex product, it’s easy to overlook a few important components or states that you are likely to need in your project. Design Systems for Figma keeps you on track, with a growing repository of Figma kits of design systems — grouped, organized and searchable.

You’ll find plenty of Figma kits, from Atlassian and Airtable to Shopify and Slack. Additionally, you can take a look at Gov.uk design system, focused specifically on complex user journeys and web forms. A goldmine worth bookmarking! (vf)

2. Versatile Fonts

Who doesn’t have a sweet spot for well-crafted typefaces? We came across some free typefaces that were not only created with great attention to detail but are super versatile, too.

The open-source typeface family Inter was designed particularly for computer screens and shines with a tall x-height to aid in readability of mixed-case and lower-case text. OpenType features like contextual alternates for punctuation, slashed zeros, tabular numbers, and more are bound to make typography lovers happy.

Another typeface that was designed to improve readability is the Atkinson Hyperlegible Font. Its focus on letterform distinction enables low-vision users to easily recognize and differentiate commonly misinterpreted letters and numbers.

The multi-script typeface Anek tells a very special story. It covers nine Indian languages plus Latin and was created through a collaboration of twelve type designers working across eight cities in India. The design of each script is deeply rooted in its typographic culture, while the different scripts live together in visual harmony.

The type families Yrsa and Rasa build upon existing typefaces and span different writing systems. Both are intended for continuous reading on the web, while Yrsa has a special focus on Central and East European languages, and Rasa supports a wide array of basic and compound syllables used in Gujarati.

How about some color fonts for a change? Two weeks ago, the first batch of color fonts arrived on Google Fonts. The new COLRv1 font format supports gradients, multiple color palette options, color palette customization, and OpenType variations. Exciting times ahead! (cm)

3. Delightful Loaders And Spinners

Who said all loaders need to look the same? Griffin Johnston rethought the good old loading indicator and came up with a collection of loaders and spinners that are unique yet simple enough for real-world projects.

The collection includes 24 types of lightweight loading animations built with HTML, modern CSS, and a bit of SVG. Fully customizable, you can adjust their color, speed, and line weight to match your project’s needs. The loading indicators get by without any dependencies and are available as a tiny tree-shakeable component library for React or ready to be copied and pasted with just a click. A delightful little UI detail to shorten any wait. (cm)

4. Mix-And-Match Illustrations

You’d love to include an illustration in your design, but you don’t have the skills to design one yourself, and hiring an illustrator isn’t an option either? Luckily, some great illustration libraries out there help you mix and match your own illustrations from scratch or customize illustration presets until they match your project’s needs. No design skills required.

One of these libraries is Sublus. Sublus provides a set of characters you can customize to create different scenes — whether it’s a forest or desert scene or a gym, lab, or office scene.

Open Peeps works similarly. The site lets you mix and match hand-drawn illustrations of people of the world to create avatars, busts, and sitting or standing scenes. Extraordinary accessories like a superhero mask or one-eyed Cyclops characters are perfect if you want to add a surprising twist to the design.

Storyset provides a huge variety of different scenes to customize — from business and commerce to nature scenes. Particularly the option to use a custom color palette will come in handy if you want the illustrations to match your brand.

Last but not least, there’s Designstripe, a growing library of creative, colorful illustrations of people in action. Just adjust the level of detail, the look and feel, and the color palette to make the illustration yours. Happy tinkering! (cm)

5. Upcoming Online Workshops

That’s right! We run online workshops on frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events — With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s an overview of our upcoming workshops:

Smart Interface Design Patterns UX
7h-video course on interface design with Vitaly Friedman
Architecting Design Systems Workflow
with Nathan Curtis. Oct 6–14
Optimistic UI Masterclass Dev
with Zell Liew. Oct 6–14
Designing for Emotion Masterclass UX
with Aarron Walter. Oct 17–18
Designing The Perfect Web Forms UX
with Vitaly Friedman. Nov 17–18

6. Illustrations For More Diversity

People of color are often underrepresented in illustrations. To bring more diversity to online content, John D. Saunders created Black Illustrations, a free resource of beautiful, custom illustrations featuring Black people and people of color doing extraordinary things. Whether it’s business or digital marketing, city life, seasonal activities, performing arts, or mental health, the collection is bound to have the perfect illustration for every occasion.

If you like to get creative yourself, the mix-and-match Amigos Illustrations pack is for you. Just like playing with building blocks, you can combine vector heads, arms, legs, and expressions to create different characters and scenes. The illustrations were created by Gustavo Pedrosa and shine with vibrant pigments, organic textures, and flowy lines. Two fantastic resources to breathe fresh life into any design. (cm)

7. 3D On The Web

Have you ever played with the idea of including a 3D photogrammetry model on your site? If so, the guide to 3D that The New York Times published is for you. To help you choose the best technique for your project, it dives deep into different options of publishing 3D models on the web, with demos that take us through New York City’s neighborhoods.

Not all 3D models need to be as complex as the street scenes in the New York Times article, though. A great example of how just a sprinkle of 3D can take a reading experience to an entirely different level is Bartosz Ciechanowski’s blog post about GPS. He uses small, interactive 3D models to illustrate how satellites help a GPS receiver determine its position. An inspiring and eye-opening look into how much ingenuity is hidden behind the simple act of seeing one’s live location on a map. (cm)

8. Elements And Sketch Annotations

Perhaps you already have some favorite icons in your digital toolkit that you love to use. But how about some rather abstract elements? They come in handy if you want to grab people’s attention and make your message more compelling. Streamline offers 34 free sets with elements that add a spark of surprise and fun to your projects.

From abstract elements and sketch annotations to arrows, speech bubbles, ribbons, banners, sticky notes, patterns, and schematic shapes, each of the more than 3,000 elements is bound to give your design a handcrafted, modern look. The elements are free to download in PNG, SVG, JSX, and PDF formats. (cm)

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

September 27, 2022 Smashing Newsletter: Issue #372

Previous Issues