Web designer + front-end developer with experience in high-traffic ecommerce sites for some well known brands.

Colordinates Redesign

With Colordinates fifth birthday, I decided it was time to take another look at the app with fresh eyes and see how I would design and code it today.

Colordinates Redesign

New Hue

This time the whole app looks like a colour swatch. You press the button, it returns a colour! The original Colordinates design was a collection of elements in the centre of the screen. I have stripped all the elements away and let the colour swatch be the star.

I tried to keep the markup and styles close to the original but with the drastic redesign, this slipped. The app layout is structured with the DOM in a logical order, using CSS grid to position elements to the corners. I use the system font to give as close to a native app look as possible. App information is in a modal to keep the UI as minimal as possible.

I wanted to maintain Colordinates accessibility, which I detailed in a previous post. App controls and modal have appropriate ARIA properties, user feedback announces via a live region in the center of the screen as before. The swatch text output (lower right) is now a purely visual change with the colour output announced for screen readers via the live region.

Vue Hue

The app is effectively a button and an output, however, once you factor permissions, geolocation and feedback, there are several states to manage. This was a great excuse to use Vue JS. The result is a bolder, better structured app.

Launch Colordinates app on CodePen and see what hue are you?

Posted