Smashing Newsletter: Issue #331

Editorial

As the year is slowly nearing its end, it’s a wonderful time to pause and look back. Think about all the wonderful conversations you had this year, all the new things you’ve learned, things you’ve experimented with, and the things that challenged your perspective on the status quo. These are the things that help us grow and evolve and get better, yet too often they are left behind in the hectic of daily routine and ongoing work.

So perhaps take a bit of time to be still and mindful, and tap yourself on the shoulder for the incredible things you’ve taken time and courage to explore. And while on it, perhaps just drop a quick email of gratitude to wonderful people you connected with this year, and share a few things you admire about them, and what you’ve learned from them. Just a bit of good energy can go a long way.

That’s also what we’ll try to convey in our informal, friendly Smashing Hour (free registration!) with Henri Helvetica, on everything from web performance to pizza and jogging. If you have a moment, join us this Wednesday, Dec. 15 at 9:00AM PT (check your timezone). We’re looking forward to seeing you!

Ah, and what’s the newsletter about? Just like in the good ol’ days, it’s a couple of helpful freebies and goodies that you may like to apply to your work and avoid repetitive work. We hope you’ll find them useful!

Happy calm days, everyone!
— Vitaly (@smashingmag)

1. Open-Source Mobile Wireframe Kit

Starting off the blank screen is usually quite difficult. That’s why we often use wireframe kits to bring the initial idea to life, and then refine and adjust them, and take the idea to the next level. If you are looking for a comprehensive set of components to get started, Contra Wireframe Kit might be just it.

Designed by Vijay Verma, the kit includes over 150 components and 50 ready-to-use mobile screens for a wide range of topics, from onboarding and forms to chat screens, menus and settings, profiles, shopping, filters, payment, data and maps. Available for free commercial and personal use under a Creative Commons license, for Figma, Sketch, Adobe XD and Invision Studio. And if you need a few other options, Lapa provides a few good wireframing goodies, too! (vf)

2. Trends In 2022

The end of every year is a wonderful opportunity to slow down and revisit where we currently stand, and where we’d love to be a year from now. That’s a wonderful time when plenty of advent calendars appear, and also plenty of articles exploring trends for the upcoming year.

So what is expecting us in 2022? There are plenty of thoughts on everything from visual design and design tools to the ways we work, album colors, book covers, colors and photography. However, if you are looking for a larger overview of 2022 trend reports across all kinds of industries, you can find some useful nuggets in the Accenture Retail Report, Deloitte Global Marketing Trends as well as in the Garden 2022 Trends Report. (vf)

3. Getting Web Fonts Right

How do we choose a perfect pairing for typefaces? Usually, we explore and try to select dozens of candidates, trying to find a high enough contrast between the body copy and headings. Plus, the fonts have to flow together beautifully and complement each other, while conveying the personality of your site or application. If you need a bit of assistance with just that, Fontjoy might be of service — a machine learning-powered engine that tries to detect and suggest the best type pairings, and allows you to adjust them on the fly.

However, if you’d like to get a more profound understanding of typography, Fonts Knowledge is a goldmine. The resource features articles on typographic classifications, punctuation, choosing type, using type, glossary, OpenType, Web Fonts and pretty much everything type. Need to dive deeper? After all the years, I Love Typography is still a fantastic resource for finding free fonts as well as others from indie foundries. It also features an advanced font search with filters by contrast, rhythm, structure, energy and fine typographic details. (vf)

4. Upcoming Front-End & UX Workshops

You might have heard it: we run online workshops around front-end 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 — Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

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

Accessible Front-End Patterns Masterclass Dev
with Carie Fisher. Jan 20 – Feb 3
New Adventures In Front-End, 2022 Edition Dev
with Vitaly Friedman. Feb 3–17
Front-End Testing Masterclass Dev
with Gleb Bahmutov. Feb 8–16
Jump to all online workshops →

5. Free Christmas Goodies

Christmas mail, a decorated house, a red-nosed reindeer, toys — the folks at Iconfinder released a lovely little icon set with 12 detailed 3D icons that shine in a beautiful color palette. The icons are available as transparent PNGs in 10 different sizes (from 13×13px to 1024×1024px). Released under a Creative Commons Attribution 3.0 Unported (CC BY 3.0) license, you can use and adapt them as you please, but please remember to give attribution.

If you want to sprinkle some animation magic into your website, app, or presentation, Iconfinder has got you covered. Created with love by Iconfinder’s partners and partnering animators, there are currently five animated Christmas- and winter-themed icon sets available for free download. All of them come in GIF, MP4, and JSON (for Lottie) formats, as well as static PNG and SVG. You can use them in personal and commercial projects.

And if you still need a bit more, we’ve prepared a full pack of free Christmas goodies in our recent article on SmashingMag. Dig in, and hopefully you’ll find exactly what you need there! (vf)

6. New From The Smashing Kitchen: “Smart Interface Design Patterns”

Sometimes you start working on something, but instead of weeks it takes months, and sometimes even a year! So over the last year we’ve been working on something, and now it’s almost ready. Meet Smart Interface Design Patterns, our shiny new video course + live UX training.

That’s a whopping 6h-long video course with 25 video lessons packed with valuable techniques, guidelines and best practices for common components in modern interfaces — all curated by yours truly over the last 10 years. Watch an intro + free lesson (20 mins).

Most videos are all ready to go, and we are working on a few new additions and fine details just before the launch in early January 2022. You can get notified when it’s ready, and get a special smashing friends’n’family discount, of course. We’d love to see you there! (vf)

7. Tiny Little Helpers

Sometimes we need to find just a perfect drop-shadow, or just the right combination of attributes for form inputs, or a perfect set of fluid gradients. In all these cases, tiny little helpers can be more than just that: they can save hours of work time needed to find the right tool for the right kind of task at hand. Luckily, there is no shortage of resources that allow us to find them easily.

Tiny Helpers is a growing collection of free single-purpose online tools for designers and web developers. Carefully organized and tagged by Stefan Judis and hundreds of incredible contributors, this resource is almost like a holiday box, with tools for SVG, JavaScript, CSS, data transformation and command line. Ffffuel, SVG generators and CSS generators are other collections of helpful tools. (vf)

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).

December 7, 2021 Smashing Newsletter: Issue #331

Previous Issues