Design on Ivan: Thinking

Seafoam Green

Tue, 07 Apr 2026 15:27:13 -0700

From Why So Many Control Rooms Were Seafoam Green:

With the increase in wartime production in the US during WWII, Birren and DuPont created a master color safety code for the industrial plant industry, with the aim of reducing accidents and increasing efficiency within plants. These color codes were approved by the National Safety Council in 1944 and are now internationally recognized, having been mandatory practice since 1948. The color coding went as such:

Design in Mega Man X

Sun, 05 Apr 2026 23:12:30 -0700

This analysis of Mega Man X by Sequelitis has stuck in my mind since I first saw it. I often come back to it to remind myself about designing great experiences and products.

Uncomfortable Design

Sat, 21 Mar 2026 03:31:43 +0000

The Uncomfortable is like the opposite of The Design of Everyday things.

Coding's the Easy Part

Thu, 19 Mar 2026 05:49:58 +0000

Computer programming is really about communication: communicating with the machine, yes, of course — but if you’re not just coding but making an app, as I am, it’s mostly about designing the app so that it communicates with the user. So that it’s easy to understand and fun to use.

Coding’s the easy part — making a useful app that people like is the challenge and is such a reward when it works. Like any other popular art form, it’s about connecting with humans.

Anduril 1: UI Diagram/Flowchart

Tue, 18 May 2021 22:35:18 -0700

Anduril UI, developed by ToyKeeper, has an impressive set of features. To be able to access all these features, you’ll need to familiarize yourself with the UI.

Table of Contents

Standard Anduril 1 Diagram

The standard Anduril UI diagram/flowchart

If this seems daunting to you, you may want to check out the Anduril 1 UI manual which should better explain to you how to read this diagram.

Don't be a liar

Sun, 08 Nov 2020 14:48:01 -0700

There are few hard rules I apply to software development. But this I can stand behind: Don’t be a liar.

There is never a good reason.

If your code is lying to me, I don’t know what else in your code I can trust. As trust in a project’s code slowly degrades, so does developer effectiveness and happiness. You really have no reason to lie with your code. And each lie builds on the next to create a seriously big pile of poo.

Adding an Instructional Overlay for first time users to your app in iOS

Sat, 16 May 2020 13:04:01 -0700

Sometimes called Coachmarks, a Wizard, or an Onboarding Flow, this common UX pattern is used to guide first time users to an app on its features in your UI.

Here’s a quick and simple way to implement this pattern:

private func buildButton(with title: String) -> UIButton {
    let button = UIButton(type: .system)
    button.backgroundColor = .systemOrange
    button.setTitle(title, for: .normal)
    return button
}

override func viewDidLoad() {
    super.viewDidLoad()
    
    let buttonText = "Put me in coach!"
    
    let button = buildButton(with: buttonText)
    button.translatesAutoresizingMaskIntoConstraints = false
    
    let overlay = UIView(frame: .zero)
    overlay.translatesAutoresizingMaskIntoConstraints = false
    overlay.backgroundColor = UIColor.black.withAlphaComponent(0.5)
    
    let coachButton = buildButton(with: buttonText)
    coachButton.translatesAutoresizingMaskIntoConstraints = false
    coachButton.isUserInteractionEnabled = false
    
    let coachLabel = UILabel(frame: .zero)
    coachLabel.translatesAutoresizingMaskIntoConstraints = false
    coachLabel.textColor = .white
    coachLabel.text = "Get player in the game"

    view.addSubview(button)
    view.addSubview(overlay)
    view.addSubview(coachButton)
    view.addSubview(coachLabel)
    
    NSLayoutConstraint.activate([
        button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
        button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
        
        coachButton.centerXAnchor.constraint(equalTo: button.centerXAnchor),
        coachButton.centerYAnchor.constraint(equalTo: button.centerYAnchor),
        
        coachLabel.centerXAnchor.constraint(equalTo: coachButton.centerXAnchor),
        coachLabel.centerYAnchor.constraint(equalTo: coachButton.bottomAnchor, constant: 20),

        overlay.topAnchor.constraint(equalTo: self.view.topAnchor),
        overlay.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
        overlay.leftAnchor.constraint(equalTo: self.view.leftAnchor),
        overlay.rightAnchor.constraint(equalTo: self.view.rightAnchor),
    ])
}

The idea here is that you have a duplicate button on top of a semi-transparent overlay. We use Auto Layout to constrain coachButton to the real button, and we also disable isUserInteractionEnabled since we don’t actually want the user to be able to select it in this flow.