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!
Erik Kennedy with a checklist of his most important UX tips for creating usable signup and login forms. He covers everything from field autofocus to letting people optionally see the password they’re typing. ✅
Utopia is an integrated design and development environment for React. It uses React code as the source of truth, and lets you make real time changes to components by editing it and using a suite of design tools. It’s early software, but you can try it today, look at an example project, or read about it on our blog!
If you updated your Firefox to version 89 and were not-so-pleasantly surprised by the brand new Proton interface, this Lepton project may be of interest to you. Lepton doesn’t throw Proton out with the bath water, but aims to improve some key aspects the author didn’t appreciate.
Stephen Lindberg takes cues from the level design in Super Mario 3D World and applies it to user experience design:
You may not know what a Conkdor is, but the design problem is universal: “how do we reduce cognitive load without sacrificing interest and fun?” To summarize the video, game designers would approach the problem like this:
- Introduce a new concept in a way that the player is not punished for failing.
- Build upon that concept in a way that challenges the player.
- Combine the concept with other familiar concepts to put a new twist on it.
- Give the player a reward!
This is a nice, long list of landing page templates you can use for your next website. Right now it’s just a list of links, though. What would really make it useful is screengrabs of each template embedded right there in the README so you don’t have to click each link to get an idea of what it looks like. PRs welcome? 😎
Lip Gloss takes an expressive, declarative approach to terminal rendering. Users familiar with CSS will feel at home with Lip Gloss.
I love how much love is going in to terminal UIs these days 👏
Non dependent on operating systems, Penpot is web based and works with open web standards (SVG). For all and empowered by the community.
Built with Clojure and has been in-development (in some form or another) since 2015.
Erik Kennedy’s Gradient Generator is full-featured and (of course) he teaches you how to design “beautiful, butter-smooth” gradients on the same page.
After posting about the OpenStep User Interface Guide, I started to wonder how many different human interface guides or software design guides that I could find from the past and present. It doesn’t seem like there’s a good collection of these anywhere on the internet, especially in regard to past software design guides. I think there’s a lot of value in these even outside of just being a historic reference.
An excellent starting place, whether you’re looking for help designing your UI or help designing your UI design guide.
(*at time of logging)
Iconduck is a project to make open source icons and illustrations more accessible. We’ve started doing this by collecting and tagging them, and making them searchable.
They even have duck icons, which is fitting. Plus: no email required. You just download the icon. 😎
Websites are like a canvas. You have complete freedom to design them the way you want. But unlike a painting, not all people will view your site the way you want. This article discusses how Responsive Web Design (RWD) evolved.
Suz, Amal, and Chris join Jerod to discuss what APIs are all about, share some APIs they admire, and lay out principles and practices we can all use in our APIs.
If you’ve upgraded to Big Sur and your desktop feels disjointed because all of Apple’s apps have the new icon style, but your 3rd party apps from Adobe, Omni, and others don’t… check out this repo of 1500+ replacement icons.
A deep-dive on the design decisions behind the new Raspberry Pi inside a keyboard. Have you been wondering why the mouse is on the left? Wonder no more…
A narrated redesign packed with typography, brand, and color advice
Darius Kazemi writing in Issue #14 of Increment magazine:
HTTP status codes are largely an accident of history. The people who came up with them didn’t plan on defining a numerical namespace that would last half a century or work its way into popular culture. You see this pattern over and over in the history of technology.
Because technology isn’t immune to historical contingency, it’s important for us as engineers to remember that long-lasting technical inflection points can occur at any time. Sometimes we know these decisions are important when we’re making them. Other times, they seem perfectly trivial.
Arwes is a web framework to build user interfaces for web applications based on science fiction and cyberpunk styles guidelines, animations and sounds effects. The idea is to provide an user experience as if you were using futuristic out of a movie interfaces for your project.
The sounds are perfect.
Carbon is an open source web app that helps you create and share beautiful images of your source code. Whether you’ve used Carbon personally or not, odds are you’ve seen its dent on the universe of social code sharing. Mike Fix has been maintaining Carbon for a few years and he’s embraced the project as an opportunity to experiment and practice working in public.
On this Maintainer Spotlight episode, we chat with Mike about building Carbon, growing its community, sustainability models, and why he loves the world of open source.
A 6-step guide to pairing fonts in all sorts of sites, covering brand, legibility, common mistakes, and more.
If you’re using and loving Zeno Rocha’s dark mode theme, you might be interested in pairing it with a dark mode wallpaper. These were created by Dracula user kajwski and collected by Zeno for easier sharing.
These iconic, low-resolution designs are the perfect tool to learn the basics of physical interface design. Armed with 52 different bricks, let’s see what they can teach us about the design, layout and organisation of complex interfaces.
SVG and designed on a 15x15 grid. Use ’em inline or as Sprites. Interactive preview here.