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.
Use it in your site by importing the CSS from unpkg and adding the
placeholdify class somewhere. Also comes as a Chrome extension.
We’re revisiting Shape Up and product development thoughts with Ryan Singer, Head of Product Strategy at Basecamp. Last August we talked with Ryan when he first launched his book Shape Up and now we’re back to see how Shape Up is shaping up — “How are teams using the wisdom in this book to actually ship work that matters? How does Shape Up work in new versus existing products?” We also talk about the concept of longitudinal thinking and the way it’s impacting Ryan’s designs, plus a grab bag of topics in the last segment.
In my own observations and conversations with developers and marketers, UX design is often conflated with visual design or user interface design, when in fact both of these are sub-disciplines within the field of UX design and are not representative of the totality of UX. I’ve been involved in conversations where talk of updating a “page’s UX” has meant adding visual design elements to a page. Anecdotally, I’ve seen calls for “UX designers” in open source when the need was for brand assets like a logo. (In this case, you would look for a visual designer.)
In this short post, I’ll cover some basics of UX design for developers who are interested in understanding what UX is and how it differs from other forms of design.
This provides responsive UI components from 15 different app categories (commerce, blog, pricing, etc) with dark/light modes and differing color variants.
It’ll mirror user interactions across 30+ devices and give you a single element inspector so you can make and inspect changes in one fell swoop. (Built with Electron.)
This list is deep and (of course) the UX is well-considered. The author provides definitions of the biases as well as real-world examples of them in action.
Every time users interact with your product, they:
🙈 Filter the information
🔮 Seek the meaning of it
⏰ Act within a given time
💾 Store bits of the interaction in their memories
So to improve your user experience, you need to understand the biases & heuristics affecting those four decision-cycle steps.
This week Feross and Emma chat with Segun Adebayo about Chakra UI, a modular React component library that’s changing the game for design systems and app development.
What’s old is new again! See it in use with React right here.
This seems like a great option to spice up your site’s backgrounds. Only 1KB when minified/gzipped.
This is a very cool idea and the use case is described perfectly by the authors:
Does your designer cry every time you load their beautifully designed screen, and it is full of empty boxes because all the images have not loaded yet? Does your database engineer cry when you want to solve this by trying to cram little thumbnail images into your data to show as placeholders?
You give BlurHash an image and it gives you back a short string (20-30 chars) that represents the placeholder image. Store the string and send it along with the other data for the object and your client can decode the string into a placeholder image while the real image is loading over the network.
A tribute to the late architect Michael Sorkin, who died of coronavirus recently. Some practical and poetic considerations of designing for humans.
A fun way to discover interesting color combos. Whatch out for that undiagnosed light indigo.
Export as a video or animated gif. Try it here.
After being involved with design and open source projects for many years, I’ve noticed a few common reasons why designing for open source projects can be very difficult. Open source projects (especially FOSS) face a lot of issues that more conventional projects don’t because they lack a clear business model, the structure, and the incentives that for-profit proprietary projects have.
This is a hard problem due to many of the factors outlined in the post, but one worth solving.
A complete iOS redesign of two pages in 10 minutes. Covers typography, iOS guidelines, “dark mode” theming, consistency, and more.
The cool thing about CSS icons like these is they’re easily customizable with… CSS! You can search, tweak, and download the icons right here.
Use it by inlining the SVG directly into your HTML
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg>
Comes in 24x24 outline and 20x20 solid styles.