#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 Workshops]( - [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 8h-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. [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 - [Frontend Engineer]( at Alasco GmbH (Munich, Germany) - [Senior Designer]( at DUMBO (Cologne, Germany) - [Web Developer m*w*d]( at 4wd media GmbH & Co. KG (Darmstadt, Germany) --------------------------------------------------------------- 11. Recent Smashing Articles - [Document Object Model (DOM) Geometry: A Beginner’s Introduction And Guide]( - [Optimizing A Vue App]( - [A Guide To Keyboard Accessibility: JavaScript (Part 2)]( - [Smashing Podcast Episode 54 With Stéphanie Walter: What Is User Journey Mapping?]( - [Read more 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](