Here’s an example of some icons that transitioned well in the Big Sur-ification of macOS icons:

And just for good measure, here’s a few more — I love this stuff.

While some apps made this transition fun (and further infused their brand with character), others did not. They did the bare minimum and moved on.

A few years ago I tweeted about this “bare minimum” phenomenon where app makers updated their icon for macOS Big Sur by taking their previous icon/logo, putting it on a white squircle, and calling it a day.

That always felt like a bit of a shame when compared to the alternative: take an opportunity to imagine a new expression of your brand/logo/icon in the context and constraints of macOS Big Sur’s new icon template (i.e. the squircle).

For example, here’s a re-imagining of the Outlook icon (done by, as far as I can tell, agraaaaao).

It’s fun to see how folks take advantage of “the ever-so-subtle yet unique-to-macOS opportunity” to break outside of the outer edges of the squircle and provide some dimensionality to their icons.

As a self-professed icon-noisseur, I love browsing through app icons that people have re-imagined for their desktops — wresting control of the visual appearance of the app icon from its maker and appropriating it to themselves.

For example, as I browsed the wonderful macosicons.com gallery, I came across these alternatives for Chrome (the original from Google is on the far left, outlined in yellow):

I love seeing the character of Chrome bleed to the edges and fit the visual language of its environment (macOS). More visually interesting than merely dropping the Chrome circle on a white background.

In a similar vein, here’s Slack:

Again, more interesting to see some character infused into the icon (as opposed to just dropping it on a white background).

Where things get really interesting is when people explore breaking out of the squircle (which you can do on macOS) to provide some dimension to their icon. For example, here’s Firefox:

And there are some VSCode alternatives that explore both 1) going beyond a logo on a white background, and 2) providing dimension while borrowing from the visual language for Apple’s native development tool (Xcode).

Microsoft is perhaps the biggest culprit of “drop it on a white background” as their suite of office tools do precisely that — which makes it a fertile ground for folks re-imagining what the family of office icons could be.

For example here’s Outlook:

And here’s Excel:

Word:

And Powerpoint:

Just a little visual fun/exploration for your day. Adios!

---

Reply

• Email
• Mastodon
• Twitter

Tags

• #iconGalleries

Paul Ford has a great article at Wired about his own experience as an English major working in tech. While I myself am not an English major (more on that below) his desire to be interdisciplinary parallels my own.

I began to realize I was that most horrifying of things: interdisciplinary...the idea that an English major should learn to code was seen as wasteful, bordering on abusive—like teaching a monkey to smoke.

When I’ve interviewed and expressed my desire to work doing design and code, some folks look at me strange and stammer. “Hm...well, maybe we have a place for that…I’ll have to get back to you.” To some, the idea that a designer would write code or that an engineer would move pixels seems strange — like “teaching a monkey to smoke”.

The sentiment I often perceive is: “Why would we need a designer that codes? We have designers. We have coders. Why would we need someone who can do both?”^[1]

In the early days of making websites, “a designer who codes” didn’t seem like a big deal. After all, the only place to procure people who made websites was Craigslist. It was such a new idea that “a designer who codes” seemed like the least odd thing. The strangest concoction of disciplines existed in the early era of making websites: an English major who leads product, an actor who writes API code, or a poet who moves pixels around.

But now-a-days, any cross-disciplinary interest is easily interpreted as a lack of specialization and dedication to craft. If you’re doing design and code, how can you be really great at either? You’re not maximizing.

There’s another angle to it though, which Paul discusses in his article when he says, “humans are primates and disciplines are our territories”.

this same battle of the disciplines, everlasting, ongoing, eternal, and exhausting, defines the internet. Is blogging journalism? Is fan fiction “real” writing? Can video games be art? (The answer is always: Of course, but not always. No one cares for that answer.)

The analogy of disciplines as borders is intriguing. In disciplines, when things get complicated we don’t open borders but instead create new ones.

Existing disciplines don’t say, “Sure, c’mon over here. If you don’t fit, we’ll find room for you.” And new disciplines don’t say, “Let’s fold ourselves under the old umbrella of discipline X.” Both parties prefer new lines be drawn. New borders. And so new disciplines arise like Computer Science. And new titles appear, like AI Engineer. In this world of borders and disciplinary citizenship, what do you do with the unpatriotic interdiciplinarian? Paul:

The interdisciplinarian is essentially an exile. Someone who respects no borders enjoys no citizenship.

The irony here is that no discipline works without the others. Paul pointed this out in a separate article when he said:

The most brutal fact of life is that the discipline you love and care for is utterly irrelevant without the other disciplines that you tend to despise.

He illustrates this perfectly at the end of his Wired article using trees:

All you have to do is look at a tree—any tree will do—to see how badly our disciplines serve us. Evolutionary theory, botany, geography, physics, hydrology, countless poems, paintings, essays, and stories—all trying to make sense of the tree. We need them all, the whole fragile, interdependent ecosystem. No one has got it right yet.

Websites are like trees. You need understanding from all the disciplines — engineering, design, psychology, writing, etc. — to make sense of how to best grow them.

Interdisciplinary Studies

My official four-year degree is: Bachelor of Science in Interdisciplinary Studies with an emphasis in Visual Technologies and Spanish.

I rarely tell anyone that because, well frankly it’s a mouthful. Most conversations about higher education happen in the context of a career story, so to move the spotlight off me I’ll say “Yeah, I got a degree in computers.” That sounds like I majored in Computer Science but really it was more Graphic Design than anything programming-related.

But I don’t feel like a great Graphic Designer. Nor a great Computer Scientist. Somewhere along the way I ended up making websites. A strange hybrid of computer science and graphic design — and a million other things.

To be honest, I chose a degree in Interdisciplinary Studies because it was the fastest way for me to graduate. I knew Spanish, so I could take a test that gave me almost a year’s worth of credits. A four-year degree in three? Yes, please.

But in hindsight, maybe there was more in my decision than just a faster route to the finish line. Perhaps there was more “Hey, don’t put me in a box” inside of me than I realized at the time.

Because now in a world of Designer and Product Designer and UI Designer and UX Designer and Interaction Designer and Front-End Engineer and Full Stack Engineer and Software Engineer and et al., I still don’t want a label.

Lately, “Design Engineer” has felt more and more like a good fit for me. Perhaps because it is deliberately cross-discipline. It satisfies my deep-seated feeling of “don’t put me in a box” while also satisfying my belief that one narrow discipline can’t produce everything necessary to create a great experience on the web.

It reminds me of Maggie’s decisions to just call herself “website maker” because none of the disciplines alone are enough to make sense of how to build websites.

I feel that. Even “Design Engineer” doesn’t feel adequate. It deliberately mixes two disciplines, which is great, but also leaves out all the others.

To Paul’s point, I find myself wanting to draw new borders. “The Web” as its own discipline (I guess that’s the primate in me, oo oo ah ah).

Or maybe “Interdisciplinary Website Maker” is the right title.

Rolls right off the tongue, doesn’t it?

---

Footnotes

1. In an attempt to answer that question, I started my series of posts “The Case for Design Engineers” ⏎

Reply

• Email
• Mastodon
• Twitter

Tags

• #designEngineer

Anything I ship to my personal domain jim-nielsen.com is made using IDD: impulse driven development.

I can convince myself that just about anything is a good idea at the time. But in retrospect my rationales are quite often specious.

At one point in the past, I decided that I wanted to have my personal homepage and my blog be different “websites”. By that I mean: rather than have one site that has unified navigation and a coherent experience across all content, I wanted to have independent sites that evolve and progress at their own pace.

For example, if I decided I wanted to redesign my homepage (which acts as a sort of resume), I wouldn’t have to think about the typography of my blog posts. I could go super whacky in one direction, if I wanted, without having to think about how it affects the whole.

That’s how I’ve ended up with the different sites I have today, like my homepage jim-nielsen.com, my blog blog.jim-nielsen.com, and my notes notes.jim-nielsen.com. Each has their own unique design and codebase that can be modified and changed without regard for the others.

That’s nice for me, but one of the drawbacks has been that it’s not immediately apparent to people who visit those sites that all three exist. There’s no top-level navigation across all three sites with links to “Home”, “Blog”, and “Notes”.

I sort of always knew this and thought “Well that’s intentional, they’re three different sites after all!” But the trouble it actually presents people was brought to my attention by Chris Coyier when I was on the ShopTalkShow (he called it an “intervention”):

Jim, I gotta tell ya, intervention here, you don’t make it easy. You go to jim-nielsen.com, there’s no link to the blog, you gotta just “know” it’s a subdomain. And then, Jim has this incredible blog, cause he has the “think blog” and then he has this “what I’m reading” with thoughts [and they’re] equally great blogs (you should subscribe I’m not blowing smoke) but you just can’t find [them]. Like you have to go to the “About” page to find the reading blog. You gotta just smash them together [Jim]. I mean, you do you, but they’re just too hard to find.

I’m nothing if not a very poor marketer for myself and the things I do.

This was a Good Idea from Chris.

Honestly, I have lots of ideas on how to remedy this. But in the spirit of avoiding curiously exploring all the possibilities and then shipping nothing, I decided to just start with something small as a stop-gap.

My thought was: what kind of widget can I build that represents a coherent interaction across an otherwise incoherent set of web properties?

My solution? A floating head. Of myself. Fixed on every page.

At least you’ll know who the site belongs to, right?

So that’s what I built. It’s a JavaScript web component. Basically I stick this markup on every page across all my domains:

<jim-navbar></jim-navbar>
<script
  type="module"
  src="https://www.jim-nielsen.com/jim-navbar.js">
</script>

And, for browsers that support it, you get a floating head of me that works as a navigational widget across my home page, blog, and notes. When you click it, you get a popup that lets you easily navigate between the three disparate sites.

I’m Rusty on Animations, But They’re Fun

For my first implementation of the widget, I wanted to try and make a little animated menu. I settled on the idea of my head and, when clicked, it spins around and reveals a menu.

For the v1 iteration, I used CSS transform to scale and rotate the different elements.

It was pretty decent. I liked it, but I wanted to try doing something more sophisticated — something like what iOS does with the dynamic island.

To do this, I would need to make it look like the round avatar of my head was transforming its shape into the popup menu. In v1, the popup menu was just scaling down to zero and was distinct and separate from the shape of the avatar. So I tried doing this in v2.

The difference here is subtle. You almost have to slow down the animation to notice it: the popup transforms itself into the circle shape of the avatar.

In slow motion you’ll notice there are some other parts of this animation that aren’t quite right (like the timing of the opacity on the profile photo).

Feeling like I could do better, I tried a third iteration. This is the one that’s on the site today. It’s still not as refined as the dynamic island, but hey, baby steps.

Honestly, even v3 is still not very great. But I’m improving on it, including responding to bugs on social media (in that case, I was excited about shipping nested CSS without compilation, but maybe the world isn’t quite ready for that yet).

I’ve got even better ideas for this in the future, but who knows if I’ll ever get to them. This works for now.

Anyhow, that’s a very long way of saying: intervention succeeded.

---

Reply

• Email
• Mastodon
• Twitter

Tags

• #myBlog