This essential guide is designed to be useful for pretty much any team member: find out why your project would benefit from a shared set of practices and patterns between designers and frontend engineers.
🤩 All new look! 260 icons redrawn from scratch
🤏 Thinner 1.5px stoke
✨ New 24px solid set
Available as first-party React and Vue libraries and official Figma components.
The React and Vue libraries are cool, but the coolest part about SVG-based icons is how you can simply copy/paste the HTML directly into your code.
The screens in modern cars keep getting bigger. Design teams at most car manufacturers love to ditch physical buttons and switches, although they are far superior safety-wise.
That is the conclusion when Swedish car magazine Vi Bilägare performed a thorough test of the HMI system (Human-Machine Interface) in a total of twelve cars this summer.
Hopefully studies like this will convince car makers to install both a big, sexy touchscreen display and physical buttons for key functions that need to be performed quickly and often. Unfortunately, right now it seems most manufacturers are following Tesla’s lead to a buttonless future. And they pair that move with worse software, too. I’m looking at you, Ford. 👀
System.css is a CSS library for building interfaces that resemble Apple’s System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.
Ever been working on a design that feels too plain? Let’s look at a few dozen simple ways to spice things up. Get ready to bookmark this page, because you’ll want to reference this list in the future. It’s unbelievable how many incredible pro-level designs feature solid foundations plus a few techniques listed below.
Why let JS have all the fun? With
mix-blend-modefinally gaining wide browser-support, we now have access to many of most common shading techniques in CSS. With some choice images and a bit of careful layering it’s possible to build some surprisingly high-quality effects without the need for introducing any JS dependencies.
If you’ve ever used Photoshop’s Blend Modes… you can basically do that in CSS now. So cool! Check out Robb’s entire article. He includes a lot of great examples.
When you’re building a habit tracker app, you better have a good checkbox. The team at (Not Boring) set out to build such an app:
In trying to get a particularly tricky habit to stick, I tried dozens of apps and nothing worked for me. Recording an action felt like yet another chore. None could approach the most basic satisfaction of simply crossing out an item on a list.
Could you design a simple action that felt as satisfying and infuse it with as much symbolism? Were we about to redesign the checkbox?
I think you know where this is headed.
The end result is quite satisfying, but the journey through their design process is just 🤌
Just copy/paste these SVGs into your HTML and you’re good to go!
Pretty much any developer or engineer uses professional tools at work: code editors, graphic designers, word processors, and so on. But designing UIs for these kinds of tools is quite a different beast from the UI design involved with software and applications intended for “everyday” audiences.
In this article, we undertake a high-level analysis on some of those differences, and examine some do’s and don’t’s for designing developer tool interfaces.
Josh Comeau writing for Smashing Mag:
Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. Let’s talk about it.
Stick around for the rebuttals section, too.
Ever wanted to identify what font was being used o a website, PDF, mobile app, or image file? Here’s the resource you need to get you there in as few steps as possible.
Here’s one of the 15 language-agnostic, actionable tips on REST API design:
Use conventional HTTP status codes to indicate the success or failure of a request. Don’t use too many, and use the same status codes for the same outcomes across the API.
Smile Egbai had a solid rant about this on Go Time recently.
Almond.CSS helps in two ways: it normalizes the CSS styles to provide similar experience cross-browser, and it spices things a little by adding custom styles (that can be personalized!)
Demo here. Looks like a great starter for simple side projects and the like.
Adrien Griveau makes the case for settings as a feature, not a design bug. He build the argument from a simple (and perhaps controversial) point: “users love settings”
There certainly are moments where I find myself on the settings page of a product because it failed to deliver the experience I really wanted. But not all settings are created equal.
There’s a difference between product settings that a product needs to get right by default and preferences that designers deliberately shouldn’t have a strong opinion on.
An interesting exploration of Tesla’s recent update to their in-car control screen that resulted from the author not being able to find the defogger control. Here’s an example of the kind of analysis he provides:
Edward Tufte has this visual rule that 1+1=3. With a single line on the screen, you have just that single object, but adding a second line does something interesting, it adds a third ‘object’ on the screen, the negative space between the two. All good visual designers deeply understand this effect.
In UX design we have a cognitive equivalent. If you have two buttons, there is a third ‘object’ created, the decision a user must make on which button to tap. This cognitive load is invisible and rarely discussed but it can be a real source of confusion.
Smashing Mag always delivers on these epic reference-style posts packed with knowledge:
Writing CSS has probably never been more fun and exciting than it is today. In this post we’ll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS.
In gaming, MOBA (multiplayer online battle arena) players have a mental framework for describing just what kind of player is empowered by different characters. This framework describes all characters in terms of two statistics: their skill floor and their skill ceiling.
That is why we have developed OpenMoji as the first open source and independent emoji system to date. When designing the OpenMoji system, we have developed visual guidelines that are not linked to a specific branding. In addition, our goal was to design emojis that integrate well in combination with text.
A collaboration of 60+ students and 3 professors from HfG Schwäbisch Gmünd.
Straight outta Nightly — DiceBear gives you access to several avatar libraries via a free HTTP-API.
This is quite a resource coming from a team whose API has always impressed me.
If APIs are designed well, developers will love them, and can become the most creative innovators using your APIs. They will invest heavily, and sometimes even become evangelists for your APIs. We also value a developer’s time and the resource they risk by building on our platform. Bad API design leads to a bare minimum adoption, and even frustration. Bad APIs become a liability for a company.
They share their six design principles as well as the process they follow through to implementation. A must-read for anyone who designs and builds APIs for fun and profit.
Thanks to Lars-Erik Roald for submitting this. Here’s Lars:
It is the most comprehensive suite I have ever seen. Especially the datatable component is really impressive. Personally, I have absolutely no relations with Primetek. I just think it is a pity that PrimeVue goes off the radar.
He also provided this getting started video for you to check out.
Accessibility when designing for a screen is not an exception to the Pareto principle. We believe that just about 20% of designer effort can solve up to 80% of accessibility challenges for digital interfaces. Read on for an extensive collection of practical tips that can help you build a great foundation for a11y—right at the mockup stage.
Austin Gil explains some of the benefits of using SVG for your site’s favicon:
- Crisp image quality with a single file
- Support for emojis
- Inline icon (no need for a linked resource)
- Dark mode detection (sweet!)
Disclaimer: browser support is not amazing.
Responsive design is evolving. Una Kravets:
Today, when using the term: “responsive design”, you are most likely thinking about using media queries to change layout when resizing a design from mobile size, to tablet size, through to desktop size.
But soon, this perception of responsive design may be considered as outdated as using tables for page layout.
“Responsive” used to mean a web design would respond based on the size of the device accessing it. In the not-so-distant future, it will mean a web design responds to the preferences of the person, the container its placed in, and to the many form factors (including folding screens) it encounters. Exciting times!