Cassette Nest Icon

New “Card” Styles, Project Updates

A lot of the interface elements in Cassette Nest are grouped into the category of what I call a “card” in the code. That includes things like cameras on the homepage, lists of projects, rolls of film on the inventory page, and other things. You can read more about the code behind them if you’re so inclined.

When I went to make some screenshots for the marketing site the other day, I noticed that some of the little “reminder tabs” on the homepage looked odd.

B&W ISO 80 reminder tab before
ISO 80 reminder tab before—notice the 8 getting clipped on the left and both digits clipped on the top. This is apparently some quirk in this font at this particular size and weight.

I ended up revamping the whole system, both CSS and HTML. The offending bit of interface now looks like this.

B&W ISO 80 reminder tab after
More subtle and (hopefully) easier to read. Notice that we’re not just relying on the background color to indicate film type (B&W, C41, E6) now.

Here’s an example of all the available types before:

An example of the old style reminder cards in every available type (BW, C41, E6).
All the reminder tab types before.

Here’s an example of all the available types now:

An example of the new style reminder cards in every available type (BW, C41, E6).
All the reminder tab types now.

These new colo(u)rs were borrowed from the GOV.UK Design System, specifically from their tag component. This is yet another way Adam Silver has inspired how I build the interface for Cassette Nest. Pretty much all my form elements are based on the No Style Design System.

Here’s how film cards used to look.

Film card styles before the latest change. The colors are obnoxiously saturated and there’s a “Web 2.0” gradient on them.
Film cards have their type color over the entire card. So saturated!

Here’s how they look now.

Film inventory cards colored with their respective type colors.
Much more subtle and hopefully easier to read.

Here’s an example of hover styles for these new colors.

Film inventory cards invert foreground and background colors on hover.
Inverting foreground and background colors on hover.

I hope folks like the new styles better than the old ones!


Project Detail Page Style Updates, Adding the Ability to Use Multiple Camera Backs in a Project

Based on some of the style updates previously mentioned, the project detail page has gotten some much-needed attention. And you can now work with cameras that have multiple backs in the context of a project. I’m surprised nobody ran into trouble with that before! 😅

Before:

The project page being a mess of white space and no organization.
Even with the new “card” styles, this is still a mess.

After:

The updated project page is tighter and has nice dividing headers.
Better, right? Not perfect, but a lot easier to visually parse.