Colour Picker Concept

October 30th, 2016

Challenged with creating a colour picker that doesn't allow for poor colour choices, and a weekend at home alone, I wire-framed and prototyped this concept based on "colour collections".

The Brief

  • Sketch and prototype a colour picker, use a prototyping service such as Marvel.
  • Ensure picking horrible colour combinations is as difficult as possible.
  • Allow colour palettes (or collections) that can be shared and uploaded.

First steps

I began by sketching with a pen and paper, adding notes and requirements for each stage and working out some user flows. I wanted to test these user flows and so I turned to Marvel. Once I had converted my sketches to artboards in Sketch, I was able to upload them to Marvel and get playing around with the interactions.

Marvel is a great service that allows Sketch files (or any other images really) to be made it to working protoypes, with buttons that move through the images. Its great to able to spend some time playing with the design and user flow before commiting to any code.

The demo here will highlight the actionable elements when it is clicked.

What happened next

Although I never had the chance to iterate on the prototype above, I did take the chance to play and build a HTML and Javascript prototype. It was a create chance to play around with json and the <canvas> element. What I built can be demo'd here and the source code found here.