#331: Goodies and Trends 2022

With trends in 2022, open source mobile wireframing kit, tools and resources for web fonts and a bunch of lovely Christmas goodies. Issue #331 • December 14, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Smashing Friends, 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. [Smashing Hour with Henri Helvetica]( 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. [Open-Source Mobile Wireframe Kit]( 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. [Trends in 2022]( 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) --------------------------------------------------------------- From our sponsor [Cloudflare Has Everything You Need To Build, Secure And Speed Up Your Website]( [Cloudflare Has Everything You Need To Build, Secure And Speed Up Your Website]( [Sign up]( for free here! --------------------------------------------------------------- 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. [Getting Web Fonts Right]( [Getting Web Fonts Right]( 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 Workshops]( 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. [Free Christmas Goodies]( 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. [New From The Smashing Kitchen: “Smart Interface Design Patterns”]( 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) --------------------------------------------------------------- From our sponsor Who Is Into AR/VR? New Survey For AR/VR Creators And Designers Is Live [Who Is Into AR/VR? New Survey For AR/VR Creators And Designers Is Live]( AR/VR creators, this survey is for you. Which tools and platforms are you using to build mind-bending creations? [Take the survey]( tell us about your favourite tools and platforms and win many prizes! --------------------------------------------------------------- 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 Little Helpers]( [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) --------------------------------------------------------------- 8. New On Smashing Job Board - [UUI/UX Developer]( at IMS, Inc. (Beltsville, MD) - [(Senior) Software-Developer Frontend / Design]( at green|connector (Remote, Germany) - [Digital Designer]( at All Campus (Chicago, IL) --------------------------------------------------------------- 9. Recent Smashing Articles - [Modifying Headers In HTTP(s) Requests In UI Automation Testing]( - [Free Christmas Icon Sets And Vector Elements]( - [Designing Better Links For Websites And Emails]( - [Advent Calendars For Web Designers And Developers]( - [How To Protect Your API Key In Production With Next.js API Route]( - Read more of the [latest articles on Smashing Magazine →]( --------------------------------------------------------------- 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). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](