Back to top

Design Thoughts

    I Tried to Design an Icon for Zen – My Favourite Browser

    I’m one of those who really likes the Arc browser. But at the same time, I’m quite worried about Google’s web hegemony (and the general trajectory of The Browser Company) – so I want to use and like Firefox/a Gecko browser. Sadly, I just don’t think Firefox is very good…

    I get that Mozilla has a lot of things going on, and that creating a browser engine is a lot of work. But I really wish they prioritised having a focused team that's allowed to just working on making Firefox nice.

    However, I’ve used Zen as my main browser for the last six months – and I’m pleased with it! (By the way, click here, to go straight to the new icons.)

    In short, it’s a Firefox fork, that has copied a lot of the things I like about Arc – like vertical tabs, split-views, workspaces, and nice padding 🤤. It also has some original ideas – and my favourite one takes advantage of the great customisability offered in Firefox:

    Zen Mods

    You can easily install, and adjust the settings of, community created mods. These are mostly little tweaks, like themes, having the close button on the left side (and hidden without hover), cleaner extension menu/right-click menu/navigation bar, etc.

    I really like that the browser is enjoyable out-of-the-box, but that I can still customise a lot to my liking.

    But be aware: It is alpha software.

    This means that not everything is polished, and that things change quite frequently. But, as mentioned, I’ve used it as my primary browser for six months, and I’ve still liked it more than most browsers.

    One of the things that has just changed is the graphical profile, logo, and icon.

    Read More

    My Biggest Small Gripe With Apple Notes

    And (Obviously) Objectively Correct Principles for Paragraph Spacing

    I think Apple Notes might be one of the best pieces of software Apple ships. They’ve nailed creating a simple app, with great ease-of-use, that still has more powerful features hidden, for those who want it. There are a couple of reasons why I don’t use it much, though:

    • In general, I like to rely on third-party services.
    • I also like the portability of Markdown, and being able to use several apps on the same files.
    • I like that, in NotePlan, I can use the same app for notes and tasks.

    However, Notes has numerous nice features, like:

    • Good apps on both Mac, iPad and iPhone, while also being accessible on the web
    • Pretty good collaboration features, with shared notes and folders
    • More than enough options for formatting
    In addition to these, you have to-dos (that can sort) and tables.
    • Collapsible headings
    • Embedding of files, photos, and illustrations (especially good with PDFs)
    • Audio recordings
    • Links between notes (no backlinks, though)
    • Tagging and smart folders
    • Quick notes (which Apple, selfishly, reserves for itself)
    • Math notes.

    So I’ll gladly recommend it to most people!


    However, as most Apple software, Notes is pretty inflexible. If you don’t like their choices, you’re out of luck. And I really don’t like their choices when it comes to paragraph spacing.

    My paragraph spacing commandments

    Read More

    The Everyday Watch

    Writing about watches, yesterday, made me think of a type of watch I just can’t seem to find: The watch equivalent of the classic white T-shirt. I also recently read about an interesting pair of typefaces – and put together I got the inspiration to try my best at designing the watch I just can’t seem to find.

    Untitled Sans/Serif

    These typefaces are made with the expressed goal of not getting recognised or noticed. The creator, Kris Sowersby, quotes from the book Super Normal, by Jasper Morrison and Naoto Fukasawa:

    There are better ways to design than putting a lot of effort into making something look special. Special is generally less useful than normal, and less rewarding in the long term. Special things demand attention for the wrong reasons, interrupting potentially good atmosphere with their awkward presence. — Morrison

    Designers generally do not think to design the “ordinary”. If anything, they live in fear of people saying their designs are “nothing special.” Of course, undeniably, people do have an unconscious everyday sense of “normal,” but rather than try to blend in, the tendency for designers is to try to create “statement” or “stimulation.” So “Normal” has come to mean “unstimulating” or “boring” design. — Fukasawa

    Some quotes from Sowersby himself:

    Most new typefaces are imbued with layers of history, aesthetic associations and cultural signifiers. (…) To lend a new typeface prestige, these blurbs reveal the old specimens that influenced it, and name-drop typographers and foundries long dead. They detail the “engineering challenges” the typeface has heroically overcome — usually small printing sizes, low pixel resolution or limited horizontal/vertical space. Contemporary typefaces are touted as the complete aesthetic and technical package.

    But what if you don’t have any special technical requirements, or you want to avoid specific historical connotations? What if you just need to set text with something… utterly normal?

    I wanted the details to be exactly normal, without exaggeration. I made a typeface that a designer can use without worrying whether the French Renaissance is an appropriate cultural reference, or if it’s OK to use Bodoni for text. I made all Untitled Serif design decisions while reading. After each round of changes, I embedded the updated fonts into an ePub of Orwell’s 1984 and read several chapters. If a detail stood out, I removed it in the next round of changes. I kept doing this until it was totally comfortable to read.

    In general, I absolutely prefer opinionated design – but I do find this approach refreshing. And it fits well with my recent search for a really nice white T-shirt. (I ended up buying this, from Warehouse.)

    The missing watch

    Most watches fall under some more or less strict categories – like dive, tool, field, dress, or sports watch. And I love, and own, a couple from these categories! But what I feel is missing, both from my collection and the watch world, is a mechanical casual watch. A neutral watch that would fit perfectly with a white T-shirt and a pair of jeans.

    Some contenders

    Read More

    Lovely Attention to Detail

    I love unnecessary details. I know that, for many people, this has about zero value. But even if it doesn’t serve a function (and there is an argument for the example in the video below having a function), small things like this simply brings joy. For instance, my mom’s car is nicer than mine - and one of the small things, is that the thump you get when you close the door, is so much nicer! And software can give this feeling as well.

    Video from Quinn Nelson's (Snazzy Labs) Threads account.

    Two quick tips for apps (that I’ll write more about later) that has excellent feel: Bike and Paper

    I mean, just look at the way the text moves in Bike! 😍

    A Simple Embroidery Design

    There’s a first time for everything

    Lenke til norsk versjon

    My wife has received an embroidery book from her grandma, and wanted to give a little gift to her from it. She liked this heart in it - but wanted to make it large enough to be able to write “Mormor” inside of it. 1

    She has a lot on her plate, so I wanted to help. So here’s my scaled up adaptation.

    I'm working on adding lazy loading to the images on this site - so I thought a little thing like this would be a nice way to test it. Please let me know if you find some image bugs!

    The app and process

    Read More

    Game Changing CSS Trick (for Noobs Like Me)

    OK, I just learned a brilliant CSS technique I wish I knew about much sooner! This is probably old news for most of you wizards out there - but maybe this little post can be useful for some fellow newbies?

    This is one of my "Noob teaching noobs" posts. Some experts are excellent teachers - but not all. Hopefully, these posts can be helpful due to their layman nature, but please contact me if I'm misinforming!


    Here are some examples of selectors I could see myself using:

    h1 {} -> Styling Header 1 (h1) elements.

    h1:hover {} -> Style when hovering h1.

    h1::after {} -> A pseudo-element (like a line) related to h1.

    h1:hover::after {} -> The pseudo-element when I hover over h1.

    h1 a {} -> A link (a) within an h1 element.

    h1 a:hover {} -> When I hover over one of those links.

    .page-content h1:hover {} -> When I hover an h1 that’s within .page-content.

    Put into context, I could do:

    Read More

    Make a Click Wheel Mode for the Apple TV Already!

    In this week’s episode of the excellent Hemispheric Views podcast, the hosts discussed features they’d (more or less seriously) like to see make a return in their technology. One of the picks was the Click Wheel, which Apple, in the infamous Apple Watch reveal, mentioned in the same sentence as other great input methods, such as the mouse, multitouch screens and the 💫Digital Crown™️💫.

    Still, it’s mostly forgotten since then — but actually almost got some love when they updated the Apple TV remote.

    The previous Apple TV remote next to the new one, on a nice wooden table.

    Image by The Verge.

    Now, I’m actually one of the dozen of people who didn’t mind the previous Apple TV remote (the one on the left in the image above). Still, I agree that the new one is an improvement. But what’s really bothering me about the new one, is that they’re so close to making it great.

    Read More

    What if the Floorp Icon Actually Looked Like Piano Keys?

    Floorp is an interesting Firefox fork, with a questionable name and logo.

    Yesterday, someone on Reddit, posted “Floorp’s logo looks like piano keys”. And here’s the thing: I’ve been thinking the same, but at the same time there was something wrong. I’m not a pianist, but I’ve played with them enough to notice the problem. Let’s rotate the Mac icon, and compare with an actual piano:

    An overview of a piano.

    Image from takelessons.com.

    The “double-sized” black key to the right was the culprit! 1 However, notice that there sometimes is two white keys next to each other. (This will be important later.)

    But this made me think: What if the logo looked like a piano?

    Read More

    Anyone Else Feel Like They Should Use Firefox

    … but Still Struggle With It?

    This post was originally (and still is) a forum post on the MPU forums. I have two concrete question blocks I’d love feedback on, which I will present during the post. I would love to hear from you, either over at MPU, as a comment to this post on Micro.blog, via Mastodon, or email. 🙂


    I’d like to talk about browsers! And people are of course welcome to comment whatever they want — but some notes on what my intentions for this discussion are:

    1. For reasons, I’ll touch on later, this is mostly about desktop browsers.
    2. In terms of privacy and security, I’m approaching this from a reality where 65% of people use Chrome. So in this context, vastly improving the privacy from that, is more interesting than saying someone is a gullible idiot if they don’t use a Tor browser. 😛 So while I’m not saying those things shouldn’t be part of the discussion at all, I’d like to talk more about user experience and features than hardening if you catch my drift. 1

    OK, let’s go!

    Ethics are always difficult to discuss. Because while I think everyone should be mindful of the small things we should do to improve things, people have different priorities and possibilities. And where should we draw the line while consumers in a problematic system? Like, I should probably use a Fairphone over an iPhone even though it’s worse, right? How much worse should I accept? How hard should I pull away from things like Facebook or X?

    Screenshot from the Fairphone website: “Your phone can do better: We make fair(er) phones - To change the industry from the inside. One step at a time, all over the world. Together with our community, we’re changing the way products are made. Here’s how we’re disrupting the tech space. About us button. What it means to be fair:"

    Still, I’m at least trying to try — and as the browser is perhaps the most used app, the choice of it is among the things I’m thinking about.

    And here’s why I feel like I should use Firefox:

    Read More

    Input wanted!

    In principle, I think I should use Firefox… So I’m digging deep to see if I can make it not-bad! 🙊

    So, my question to those of you who use a (desktop) browser:

    • Why do you use the one you use now?
    • What are your favourite (large or small) features? Please be very specific!

    A red panda, also known as a firefox.

    A Way To Get a Fancy Link Hover Effect

    Jarrod, of (the great blog) HeyDingus.net, wanted to do something about the way his links appear on his website. He asked:

    Since the first design of my site, I’ve stuck with blue text for my hyperlinks because that always seemed canonical with the web. Links = blue text, blue underline. But I’ve grown less certain with its readability with all that blue text interspersed. I’m considering a change. What do y’all think?

    Two screenshots he added, that shows links with either blue text and underline, or just blue underline.

    One thing he didn’t mention there, is that he also has a nice hover effect, that changes the underline to a gradient (that matches his logo and more) on hover.

    A GIF of the aforementioned hover effect.

    My first idea for how to solve it sacrificed the gradient — but that just wouldn’t do. But I think I found a pretty good solution in the end!

    The solution and how to implement it

    The text is white and underline blue before hover. When I hover, the underline fades away, and the text fades to having the gradient on itself.

    Read More

    I Just Want a Nice Browser!

    Two sad browser stories

    I’ve followed the Spicy Takes™️ surrounding the Arc Browser recently, that started in the Ruminate podcast and went on to the MacStories Weekly Issue 408.

    And I agree with most of what John Voorhees is saying, and also Matt Birchler, who said: «The Browser Company feels gross to me right now».

    Much of it is about ethics and AI. In general I agree with them, but this subject won’t be the focus of this post. (I’ve written more about AI here and here.)

    Instead I’ll tell my browser story, and explain why both Arc and Firefox makes me sad.

    Read More

    🌱 Why do so many apps have weird margins?

    Lenke til norsk versjon

    There are tons of services, apps and clients for text based social media. But why are almost all of them wrong about timeline margins?

    Out of touch Skinner-meme, with the text: «Am I wrong about timeline margins?» «No, it’s most apps who are wrong!»

    To show what I’m talking about, here’s Threads as an example:

    Screenshot of Threads. Point explained below.

    I get that you want to start the text quite close to the username, and that avatars are taller than usernames on some services. But I still think that left-margin is a sin! It wastes space, and makes the entire screen lopsided.

    I went through many apps checking - and many of the apps are good and well-designed in general! Many of them are Mastodon clients, because that service has a fantastic 3rd party ecosystem. Also, they’re all iOS apps, because that’s what I have. Would be interested to hear about the situation on Android!

    OK, here are some more offenders:

    Read More

    Ooh, that’s a neat little animation in an unexpected place: the Aliexpress app.

    Pedal tuners and product design

    Firstly, sorry about caring a bit too much about guitar tuners. You see, as a side gig, I help people with their pedalboards (especially people using multiple guitars on stage), and I often recommend that they get a new tuner. But no tuners are exactly like I want!

    While this post is mostly hard core nerd out on pedal tuners, there are also some comments on product design in general. Let’s go!

    A new product series gives (false) hope

    I prefer always-on tuners that you mute elsewhere (volume pedal or otherwise), and this makes foot-switches redundant. That’s why I like the idea behind Boss TU3-S.

    Boss TU-3S. It looks like a regular Boss tuner, but with the stomp part chopped off.

    The only pedaltuner that can't be muted or turned off?

    The four tuners in the series. A large rack mounted one and three different pedal variants.

    Shiny!

    So, when I saw the new(ish) Korg X tuners, I was stoked – especially for the XS. The pedal to display size ratio is great, the switch design is cool, and I like that it’s more squared off than your typical mini pedal. This allows it to fit into odd slots on pedalboards.

    The XS tuner, which is a nice looking black (almost) square.

    Read More

    What makes a good cuff?

    Ok, so this is by far the most niche thing I’ve ever written. But after getting a great jacket (that I’ll write about some other time!) that only had one problem, I wanted to gather my thoughts on this tiny subject. The “problem” was: It doesn’t cuff perfectly.

    What’s the deal with cuffing anyway??

    Cuffing is when you fold the sleeves of a shirt, jacket, sweater etc. It’s also commonly used when you do the same to leg opening of pants or shorts. And I’m an avid cuffer! The three reasons are:

    1. I’m 1.75 m tall, and my legs and arms aren’t especially long - so clothes are usually too long.
    2. Related, I like watches, bracelets, shoes and socks - and cuffing shows them off.
    3. I often think it makes the clothes themselves look better.

    Here’s some examples of what I mean by nr. 2 and 3:

    Read More