You can see the subtle half pixel in the spacing below. I adjusted to a whole pixel for 1x screens, and exported my half pixel version at 3x. I designed the small squares on the right to start on a half Y pixel so the spacing would be more vertically even on retina screens. I always find it easier to design for what you're designing on so I designed for 2x first, just at a 1x scale. Menu bar apps need 1x, 2x, and 3x menu bar icons. After a few minutes I came up with another concept (below). More concepts, especially at an early stage are never a bad idea. Sam suggested trying a contrast-type icon like you would see when editing photos. I redrew the primitive shapes for the tiny As and had it looking pretty decent. Typography by it's nature is typically designed anywhere from 1200pt to 2400pt, so it's not going to be pixel perfect when scaled down to a tiny size, which doesn't work well for a tiny icon.
My original concept was an AA icon to represent the color contrast score. Here is the original design of the first icon. The little 16px tall icon that you click on to show the app. I like to design interfaces based on moments in time-like the first time it's used versus how it will function with repeated use.īecause of this I started with the menu bar icon. I don't have a screenshot of that, but it was basically the AA rating on the left with two default mac color pickers on the right. We went back to the studio and within literally 15 minutes or so, he had the WCAG luminance equations and native color pickers working in a rough prototype app. It's also basically the same thing I tweeted to Brent Jackson over a year ago when I asked if he'd considered making a menu bar app out of his Colorable demo.Īfter discussing with Sam, he felt confident he could get a rough prototype running pretty quickly. This is the one and only drawing I did of the concept. "Ok, here's what I'm thinking." I told Sam as I put pen to paper. We were at Ted's Most Best, a place in Athens you should totally go to if you're ever in town. I brought my trusty pocket-sized Field Notes journal and pen. We grabbed dinner the first night he was in town and brainstormed some ideas.
We kind of just agreed to build after like 1 minute of talking about it. It was rather serendipitous how we decided to make this app. Sam was at working from my studio for a few days during a motorcycle trip of his across the Southeast. If you haven't seen it yet, definitely check out the site or the app before reading this post, otherwise it won't make much sense. Contrast is a menu bar app that Sam Soffes and I launched.