close

Shelley Bassett

Menu

Close

The finished Coloretur website

Designing Coloretur – A Colour Palette Website


August 17, 2018

How Coloretur.com was designed and built, the full design process from inspiration to completion

One miserable Sunday afternoon, I had an idea to bring more colour to my day. And from a silly little conversation, Coloretur.com was born. The premise was simple, create a library of colour palettes that were beautiful and usable.

The defining feature of Coloretur versus other colour palette sites is that I’m including a download link for the swatches. I love swatches, they make managing the styles of many projects easy. And I find them especially valuable when I have several things on the go at once. Loading swatches into your favourite program is easy, so I want to make it easy for other designers to download and use my palettes.

Coloretur – Behind the Name

Honestly, the name Coloretur came about very simply. It’s the Latin word for colour. A quick Google for synonyms wasn’t leading me to inspiration, so I switched to looking at where the word stemmed from. Once I stumbled upon coloretur, another Google search suggested that the name had not yet been adopted as a domain… So $15 and a few DNS edits later, Coloretur.com is serving up from my hosting.

I love the name. As soon as I wrote it, my thoughts were of “Yes. This is the name”. That’s all. No doubts, only love. It’s simple, memorable, and accessible. What more could you want in a domain?

Style and Design

Recently, I’ve been looking for excuses to flex my design muscle. I’ve spoken before about the creativity that I miss from university web projects, and how I wanted to make things that were well designed, creative, and technically interesting. Coloretur gave me that freedom back, and I really let my design muscles flex.

Brutalism in Web Design

To begin with, I wasn’t sure where I was going to take the design of the site. But a throw away comment quickly brought the whole project together. Chatting with my boyfriend, I made the offhanded observation:

Is it rude to design this in black and white, and only have the palettes be in colour?

He didn’t think so, and with that I started looking at brutalist websites for inspiration. Brutalism is a style of architecture popular in the early 20th century. Recently, web design has borrowed from this trend, using bold slabs of colour, harsh lines and strong forms. There are many inspiration galleries that showcase websites designed in this fashion. With Coloretur, the contrast between the harsh lines and the varying shades within the colour swatches seemed a good fit for this style.

A collection of brutalist websites I used for inspiration

A collection of brutalist websites I used for inspiration

Iterations of Iterations

As Coloretur was designed and constructed, everything changed. This is common in design, there’s often no way to know what works until someone starts using it. The styling of my early design still stands, but the actions of many of the buttons and links have changed. I made sketch upon sketch, trying to figure out how things should link, only to have to redraw things the next day as I observed different interactions between elements.

This kind of process is incredibly important, and is what makes good, usable design. UI/UX have become buzzwords in the design community, but their actual implimentation is incredibly important. The brutalist flavour of the site meant that the UI (user interface) would be clean and simple, so the focus was solely on UX (user experience). Things needed to be appealing and intentional, so that user could navigate everything without thinking about it. Because of the range of actions available, this was very important to consider. The user had to find what they were looking for in the shortest amount of time.

Work in Progress

As with everything internet, Coloretur.com will forever be a work in progress. I have a long list of things I want to implement, and there will always be new colour palettes to add. But this is a good thing. It shows consideration for the site at each stage in its life, and the potential for growth and refinement. I often get stressed about things not being done, but in this case its reassuring to know that there isn’t one giant deadline, rather a series of soft launches. Each element can be “released” as I work on and finish it. No pressure from the users, no pressure from me.

Smashing the Build

After all the design and planning, I had hoped that building Coloretur would be a simple process. And for the most part it was. I think the biggest drawback was my rusty coding skills. I made a lot of silly mistakes, and spent ages Googling the answers to simple problems. It’s been nearly two years since I’ve written anything using Ajax requests, and sometimes I got some really wacky results. But that’s half the fun I guess!

Using WordPress

A quick browse around my website tells you that I love WordPress. I blog about different ways to use the popular CMS every week, and am very passionate about the flexibility that the platform can provide. Because I needed to build the site quickly, and wanted it have palettes that could be downloaded, saved and voted on, using a framework I was already familiar with was a no brainer. To me, Coloretur.com was about design and usability, not proving I could do something ridiculously technical.

WordPress isn’t the right choice for every website. And I could have easily done this with a much smaller and lighter database that I built from scratch. But sometimes it’s best to go with something familiar, and let our brains focus on other parts of the project.

Time vs Scope

Already I’ve spoken about my rusty coding and the numerous redesigns. There are so many things I would have loved to polish a little more before taking the fence off the site and telling you all that I’ve made a thing. But if I was to wait any longer, I’d be waiting forever. I specifically limited myself to a few key parameters to reduce the scope of the project into a time frame I could manage. All in all, I only spent 3 weeks building the site. And that was secondary to doing my day job. Good planning meant that I was able to make something relatively refined within a short period of time.

Introducing Coloretur

Here it is. Coloretur.com is now up and live. I don’t know exactly what I expect from this site, traffic wise. I’d love it to bring in enough money to cover its own costs, but I’m mostly just proud that I can share this with you. It’s not spectacular, but I think it’s kinda cool. And it gave me great joy to build.

If you’re interested in ongoing updates, you can subscribe to the mailing list or follow along on Facebook.

The finished Coloretur website

The finished Coloretur website

Leave a comment

Advertisement

Leave a Message | No comments yet

Leave a Reply

Your email address will not be published. Required fields are marked *