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