Smashing Magazine - #381: Interface Design

Dashboard design patterns, behavioral science, design principles, Figma plugins and easing gradients. Issue #381 November 22, 2022 View in the browser 💨

Smashing Newsletter

Tere Smashing Friends,

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 8h-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.

Smashing Hour with Dan Mall

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.

Design Principles

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

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?

Dashboard Design Patterns

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)


From our sponsor

Digital Impact Is Made By People, People Like You!

Digital Impact Is Made By People, People Like You!
Help Alasco to digitalize one of the world’s most valuable industries: Real Estate. Take the next step in your career and join an ambitious team in the heart of Munich! Don’t worry about relocation or visa — we will make it covered. Join Alasco today.


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.

Shadow Palette Generator

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.

Smashing Online Events


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.

https://larsenwork.com/easing-gradients/

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)


From our sponsor

Enrich Your Professional Toolkit With Setapp

Enrich Your Professional Toolkit With Setapp
Excelling at your job takes zeal, hard work, and Setapp. Try the ultimate app subscription for macOS and iOS, with professionally curated software for designers and developers. Use the promo code smashing until 31.12 to get an extended 30-day free trial.


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.

Behavioral Science

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.

Google Font Pairings

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

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)


10. New On Smashing Job Board


11. Recent Smashing Articles


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

unsubscribe update preferences view in your browser

Older messages

All Good Things JavaScript

Tuesday, November 22, 2022

Finding memory leaks with JavaScript, Internationalization API, security issues and understanding useMemo.Issue #380 • November 22, 2022 • View in the browser 💨 Smashing Newsletter Sveiki Smashing

#379: Web Accessibility

Tuesday, November 15, 2022

With focus styles, WCAG 2.2, accessible PDFs, accessible color palettes and how to document and test accessibility. Issue #379 • November 15, 2022 • View in the browser 💨 Smashing Newsletter Hello

#378: Interface Design

Tuesday, November 8, 2022

With drag'n'drop UX, blend modes, design principles, forced colors and useful Figma plugins. Issue #378• November 8, 2022 • View in the browser 💨 Smashing Newsletter Hyvää päivää Smashing

#377: UX Writing

Tuesday, November 1, 2022

With UX writing guidelines, tools, library, inspiration and better error messages. Issue #377• November 1, 2022 • View in the browser 💨 Smashing Newsletter Howdy Smashing Friends, Words matter. They

#376: Design Systems

Tuesday, October 25, 2022

With accessible design systems, Figma kits and real-life examples. Issue #376 • October 25, 2022 • View in the browser 💨 Smashing Newsletter Dobryi vechir Smashing Friends, There is a moment in time

17 Interior Design Schools Worth Applying To

Friday, January 27, 2023

Plus, if you loved "The White Lotus" palazzo, you'll want to bookmark this Jacques Garcia sale View in your browser | Update your preferences Architectural Digest AD PRO Logo grand

Looking back at Balsamiq’s 2022

Friday, January 27, 2023

Like many of you, we spent the past few weeks reflecting, planning, and starting new projects. The latest news from Balsamiq: Reflections on 2022 and a look ahead at this year. Trouble viewing? View it

From Giancarlo Valle, Young Huh, and More: 8 Design Collabs We’re Loving Right Now

Friday, January 27, 2023

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image A look at the latest collection drops in furniture, rugs, and more. Big Buds Rug

Latest stories

Friday, January 27, 2023

Submit Story Learn how to speak a new language like a local with BabbelSPONSORED Babbel is the top language-learning app that helps users start speaking a new tongue in just three weeks. That's

Neurodiversity Design, Type Trends, Astro 2.0, Linear Design, Prompt-Driven Design

Friday, January 27, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar January 27 2023 Neurodiversity Design System neurodiversity.

Lagoons, Luxury Bunkers, and More Real Estate Trends for 2023

Thursday, January 26, 2023

Plus, 9 pink paint shades designers can't live without View in your browser | Update your preferences Architectural Digest AD PRO Logo a sunroom with a pink sofa and a floor painted pink and white

Latest stories

Thursday, January 26, 2023

Submit Story Join Noom, the psychology-based program for lasting healthy outcomesSPONSORED Getting healthier means changing your lifestyle. Noom Weight helps users lose weight in a sustainable way

CSS Wishlist, Reviews And Ratings, Vasa Disaster, Product Design, UX Death

Thursday, January 26, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar January 26 2023 CSS Wishlist 2023 daverupert.com Here's my

An Iconic Frank Lloyd Wright Desk Enters Its WFH Era

Wednesday, January 25, 2023

Plus, 14 gardens every design lover must see in person View in your browser | Update your preferences Architectural Digest AD PRO Logo AN ICONIC FRANK LLOYD WRIGHT DESK DESIGN ENTERS ITS WFH ERA With

Latest stories

Wednesday, January 25, 2023

Submit Story Join Noom, the psychology-based program for lasting healthy outcomesSPONSORED Getting healthier means changing your lifestyle. Noom Weight helps users lose weight in a sustainable way