URLs; Avatars; Grids

It’s been a minute since we’ve talked about “design”, so let’s take the opportunity to so in today’s Drop, but from a different angle.

Rather than focus on some heady theory, let’s dig into some resources to help us design and ponder a design space that we might not usually give too much thought to.

TL;DR

(This is an AI-generated summary of today’s Drop.)

(I guess I get to spend part of the weekend revamping the prompt.)

• URLs: The blog post discusses the importance of thoughtful URL design, highlighting Jim Nielsen’s article on creative URL examples and Jakob Nielsen’s principles for making URLs user-friendly. It also references a post on REST API URL design from Swagger.
• Avatars: The author explores avatar creation for a non-FOSS side project, mentioning resources like Open Peeps, Notion Avatar Maker, and Multiavatar for designing avatars that could be used in various projects.
• Grids: Bento Grids is introduced as a resource for overcoming creative blocks in UX layout design, offering numerous layout styles and source code to help structure the design process.

---

URLs

In Examples of Great URL Design, Jim Nielsen lays out several creative examples of great URL design that balance computer and human needs, tell a story, and map to the site/product’s domain semantics.

I truly appreciate some of the cool features of Mastodon URLs.

• https://mastodon.social/@hrbrmstr gets you to the user
• https://mastodon.social/@hrbrmstr.rss gets you the RSS feed of the user’s posts
• https://mastodon.social/@hrbrmstr.json gets you the JSON for the user’s account

Even Bluesky has adopted something similar (it used to require awkward did identifiers):

• https://bsky.app/profile/hrbrmstr.dev to see someone’s profile
• https://bsky.app/profile/hrbrmstr.dev/rss to get the RSS feed of posts

When URL sematics become either predictable, or faciliate exploration, it can lead to a delightful experience.

Jim links to some great examples, so I won’t steal the thunder from that post (check it out!).

From a much older post (I am shocked this bookmark worked) Jakob Nielsen discusses the “URL as UI” digging into a few concepts that make a site “usable”, such as:

• a domain name that is easy to remember and easy to spell
• short URLs
• easy-to-type URLs
• URLs that visualize the site structure
• URLs that are “hackable” to allow users to move to higher levels of the – information architecture by hacking off the end of the URL
• persistent URLs that don’t change

And, this circa 2020 post from Swagger folks talks about how to bake good URL design into your REST APIs (because friends do not let friends use GraphQL).

As you build a new site/brand/API, or revamp an old one, take some time to think about the design of the URL structure as you’re also thinking about other designe elements.

Avatars

I have a non-FOSS side project that’s going to involve human-centric data stories, and some of the sections lend themselves to something similar as to what the New York Times did in “An Incalcuable Loss“.

This project is not even remotely as dire, so ghostly silhouettes are right out.

After poking around in my Raindrop archive (where all the goodies in these Drops come from), I was reminded that Notion avatars were all the rage back in ~2021.

I’m likely going to go with that, and these three resources are some pretty fun ones to just use outright, though they may be useful in your own designs/creations:

• Open Peeps (app)
• Notion Avatar maker (GH)
• Multiavatar (GH) (API)

You can mix-n-match what you need, or just have some fun making a new avatar for yourself.

Grids

If you give me a blank piece of paper and tell me to write 10,000 words on some tipic, I’ll zoom through it (provided said paper is a text exitor). Do the same thing, but make the challenge be “layout a decent UX for a site/app” and I’ll likely freeze up. As I’ve noted before, I can implement pretty well, but just can’t conjure up the outer structure without some help.

Bento Grids comes to the rescue with a bonkers number of layout and styles to help you get past any similar block. You can page through the clips, dig into each one, and even get some source code for many of them as a starter.

Just having the structural outline is (most of the time) enough to get me past the terrifying blank slate, and this may help others who have that same limitation.

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️