Looming Deadlines – Devlog 003

Color scheme, animated gradients, customization, and picking a direction.

It has been about 10 days since my last update and a lot has changed. When I started out, I had some ideas for the customization options that I wanted to support. Then I started to (mentally) over-engineer things into a complex system of themes and layouts. What I came up with would be awesome, but I won’t be able to finish it anytime soon. It is the kind of thing that would take months or years to get right. I’m not willing to wait that long, so I had to scale things back.

I started by simplifying the background. I created a single red and black mesh gradient, then learned how to animate it. I’m going to use this red and back combination for the branding and the app icon.

I showed this to a friend and he suggested that I keep this approach, but add a few color options. Rather than using a SwiftUI color picker, I found a small list of colors that work well together. mycolor.space is a great resource for times like this. I started with #6B012C and let it find some other colors. The gradient is the combination of a tint color and a mix color. The mix color is used in the gradient, but never by itself. It is always mixed slightly with the tint color to get a more subtle effect.

// These are the colors I used in the mesh gradient. Only 4 of these will move with the animation
            colors: [
                colorTint,
                colorMix.mix(with: colorTint, by: 0.25),
                colorTint,
                colorMix.mix(with: colorTint, by: -0.25),
                colorTint,
                colorMix.mix(with: colorTint, by: 0.6),
                colorTint,
                colorMix.mix(with: colorTint, by: 0.3),
                colorTint,
            ]

From there it was time to start adding some controls to edit things. I started with a basic inline color picker. I may have to rethink this on the Mac as it doesn’t work well unless the user has a trackpad.

I created similar sections to let users customize the countdown text and the title. I think I really like the defaults I selected. The red and black gradient with white text looks really good. Even with the small number of colors I’ve provided, we can end with a lot of options. For example, this low-key red version looks really cool.

Something else that adds a ton to this is content transition. Kudos to Gregory for suggesting this.

.contentTransition(.numericText(countsDown: true))

I’m pretty happy with the state of things so far. I love the colors and the “looming” gradient system. I’m not going to spend much time of the design of the iOS and macOS apps just yet. With rumors of big changes coming at WWDC, I think I’ll wait. For now, I’m going to use a stock SwiftUI appearance. I’ll let the content of the deadlines do the heavy lifting.

What’s next?

• CloudKit syncing issues
• A few more options to customize the deadlines
• Platform-specific features
  • visionOS – windowing and presentation
  • macOS – menu bar widget?
  • iOS – live activities? widgets?

Let me know what you think of this project so far! Do you want to join a TestFlight if I decide to do one?