"Good Design has gotta have Good Bones."

It’s All About a Strong Foundation

To me, being a UX designer is like being a drummer: you focus on rhythm (keeping or breaking it) and provide a structural foundation for the other elements to exist on top of.

I wanted to make this portfolio an exercise in focusing on that rhythm, making it as minimalist as I could. Something that used the fewest elements needed to still maintain that hierarchy and information architecture.

But that proved to be a little boring for most visitors, so I built this button:

Click the “change color” button* at anytime to generate a new color pallet for the site and see how my design holds up.
* Want to learn more about how this works? I wrote a little micro-case study below, keep reading.
change colors

Show > Tell

If the visuals are the tip of the iceberg, I’m interested in the part that’s floating under the water. Things like the information architecture, the mechanics and logic of a complicated filter interface, or making sure that your various UI elements scale and behave properly at any screen size and across devices are the parts of a project that I get the most excited. This duotone route let me really focus on that.

What Next?

If you are a fan of long-winded web copy, you can read more about my philosophy and approach (along with some other fun facts) on the About page.
But if you’d rather just get down to brass tacks and see some examples of what I’m responsible for, may I direct you to the Work page.
(The aforementioned)

Color Change UI

Micro-Case Study

Initial Inspiration

It started at the intersection of two websites I was obsessed with:
A streamlined website seemed like the perfect vehicle to test drive that color change feature in context. The idea sort of died with my total lack of javascript know-how.

Proof of Concept

I used Chat GPT to make up for my “javascript gap,” and got to a working proof-of-concept relatively quickly.
I opted for SVG icons (shoutout to Phospher Icons) to populate the site since their color could be manipulated via the button.
change colors
Confused about the icon here? It’s a color swatch book, ask your designer friends.

What's Actually Happening

The code itself is running through a few steps:
  • Generate a color for the page background
  • Generate a color for the on-page elements
  • Check that the contrast between these colors is at least 7:1 (AAA)*
  • If not, generate a new on-page element color until it is
*At first I was using AA (4:1) but that lead to some seriously rough color combos. AAA contrast tended to yield more visually appealing pairs more often than not.

Scaling the Idea

Once I got a single page rigged up (including SVGs, animations, and real copy). I set up a pretty lean design system in Figma and mocked up all the pages I’d need.
I experimented with adding a function to change the font too, but just relying on system fonts yielded some pretty terrible results. Much like with the colors only using AAA compatible combinations, more guardrails are needed to make a font randomizer component worth it.
Full disclosure: growing up, I was never allowed to get the “big” box of crayons, you know the one, it had that little sharpener in the back. There’s a real chance that my whole professional philosophy is just some sort of reaction to that unprocessed crayon-induced trauma. Oh well.

Wanna Read More?

Why not go read another case study?