November 29, 2022 Smashing Newsletter: Issue #381
This newsletter issue was sent out to 216,210 subscribers on Tuesday, November 29, 2022.
Editorial
What attributes make an interface design successful? Well, the interface doesn’t have to stand out; nor does it have to provoke, excite or amuse. A good interface is all about clarity; it’s about minimizing mistakes, avoiding confusion, reducing slowdowns and preventing rage clicks. That’s the true craft and superpower of good design.
In this newsletter, we look at some of the techniques and design patterns to get there. You’ll find many techniques and strategies in Smart Interface Design Patterns (our friendly 9h-video course, now at a special price until Dec 1st), and they are also collected in our Interface Design Checklists (Print + PDF), now shipping worldwide.
Of course, we also have plenty of them covered in our upcoming online workshops on design & UX (now with friendly bundles for teams), with masterclasses on Figma, product design, complex interfaces and even a complete live UX training! Plus, we have a Smashing Hour with Dan Mall where you can ask all your questions around design systems.
For now though, let’s dive in — and happy designing, everyone!
— Vitaly (@vitalyf)
1. Design Principles And Methods
Establishing a set of design principles for a project or brand can help teams create more consistent user experiences. They aid decision-making and make it easier to keep the product aligned. If you plan to establish a set of design principles for your product, we came across useful resources that will help you get started.
Ben Brignell curates an open-source collection of 195 design principles and methods. It features both heuristic design principles and design principles developed by companies specifically for their products. All of them are searchable and tagged, from hardware and infrastructure to language and organizations.
Another fantastic resource is Design Principles FTW, a collection of the world’s most successful design principles. You can use them immediately or let them inspire you to create your own principles. (cm)
2. Automating Variants In Figma
Let’s say your design calls for three types of buttons with four different states each, plus two icons on each button and maybe even a text label. That’s a lot of variants you need to produce. Whenever you want to generate several instances for a component, the Propstar Figma plugin does the heavy lifting for you.
Propstar generates all possible instances for your components in a tidy labeled table, including every combination of variants and component properties. To create a table, select one or multiple components or component sets and run Propstar. The table will be generated behind your component, displaying your main component alongside all possible instances. A handy little timesaver. (cm)
3. Dashboard Design Patterns
Dashboards present complex data sets at a glance. But what does effective dashboard design look like? How do you find the right balance between displaying everything that’s important and ensuring the dashboard is easy to use without overwhelming the user?
The interdisciplinary research lab VisHub at the University of Edinburgh published a set of dashboard design patterns to support the design and creative exploration of dashboard design. It dives deeper into every aspect of dashboards — from components and meta information to visual representation, interaction, and page layout. A cheatsheet summarizes all the patterns on one page. (cm)
4. Beautiful Shadows Made Easy
Creating lush, realistic CSS shadows can be quite challenging. Which values should you use for x/y offset, blur radius, spread, color, and opacity? Josh W. Comeau’s Shadow Palette Generator helps you figure it out — without worrying about the hard numbers.
The Shadow Palette Generator functions at a more abstract level than similar tools. So instead of fiddling with precise values, you can focus on the “feel” of the shadow instead. Do you want it to be deep and prominent or light and subtle? And should it be tight and crispy or soft and blurry? The sliders help you find the sweet spot.
If you’re looking for a Figma solution for creating beautiful shadows, Alex Widua’s Figma plugin has got you covered. It lets you create shadows by dragging a “light source,” which casts a shadow on selected elements. The plugin outputs valid box-shadow CSS styles. (cm)
5. Upcoming Design & UX Workshops
We run online workshops on design and UX, be it accessibility, product design, complex UIs or design patterns. There is also plenty more online workshops to come, now with friendly bundles for teams.
- Designing Better Products UX
with Stéphanie Walter. Nov 28 – Dec 12 - Building Modern HTML Emails Dev
with Rémi Parmentier. Nov 30 – Dec 8 - Advanced Next.js Masterclass Dev
with Átila Fassina. Nov 30 – Dec 15 - Successful Design Systems Workflow
with Brad Frost. Jan 10–24 - Designing For Complex UI Masterclass UX
with Vitaly Friedman. Jan 19 – Feb 2 - New Front-End Adventures, 2023 Edition DEV
with Vitaly Friedman. Feb 8–22 - Smart Interface Design Patterns UX
9h-video + UX training on interface design with Vitaly Friedman - Jump to all workshops →
6. Easing Gradients
Gradients under text or UI elements are a great way to increase contrast. However, when transitioning between colors, the gradient’s start and/or end is often visible as a sharp edge. If you want to make the transition smoother, easing functions are here to help. They are still a CSSWG proposal, but Andreas Larsen came up with a workaround that makes it possible to get almost the same effect already today.
Andreas built an editor that lets you create and preview your own easing gradients in CSS. It does so by adding intermediate color stops to create a low-poly version of the easing function. There’s also a PostCSS plugin and a Sketch plugin to supercharge your gradients. And if you’re looking for a Figma alternative to smoothen gradient fills, Alex Widua’s Easing Gradients plugin is for you. (cm)
7. Behavioral Science Resources
Behavioral science helps us better understand human behavior and, ultimately, the design problems we try to solve. After all, everything we design, whether it’s interfaces, interactions, or experiences, is designed for human behavior. Elina Halonen started an open-source repository of case studies and learning resources that gets us familiar with behavioral science and the opportunities it offers for organizations.
The repository features examples of how behavioral science can be applied in different domains, ideas for demonstrating the value of behavioral science to stakeholders and clients, and ideas for career options and what skills might be useful. The repository lives on a Miro board. If you are unsure of how to use it, Elina wrote a blog post with everything you need to know. (cm)
8. Font Type Pairings
Which fonts go well with Montserrat? And which ones are the best match for Lato? If you want to combine two fonts in a project, Figma offers free type pairing palettes for Google Fonts.
There are ten type pairing palettes available, with four to five pairings for each font. You can select any text element in the file to choose a new font, use advanced type features, and create reusable text styles.
For even more variety, also be sure to check out the Google Font pairings that Wakamatsu Momoko created for Figma. If you keep reverting to the same font combinations, these two resources are bound to cater for some fresh ideas. (cm)
9. Game UI Design
Do you have a sweet spot for video games? Well, then we’re quite sure you’ll love Interface In Game. And even if you’re not a gamer, the site will be a treasure chest full of inspiration for your next interface design.
Interface In Game collects video game interfaces, screenshots, and clips. You can filter the collection by genre, theme, or platform and explore all the fine little details of a game — menu, settings, overlay, progress, tutorial, stats, and much more. 337 game interfaces are currently featured on the site, from cartoon to fantasy, horror, and pixel art. You’ll also find articles on game design and interviews with game designers.
Looking for more? The Game UI Database has a similar approach, with screenshots from more than 1,000 games, sortable by materials, patterns, and screen types. Enjoy! (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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.