Hello Speculo - easy colour palette visualisation

Features

• Automatically updating preset layouts
• Click any layout to zoom in and focus on only that layout
• Colours can be selected via the colour picker, or you can simply enter a hex value
• Export your palette in a variety of mediums at any time, with one click

Thinking behind Speculo

I tend to lean more over to the developer end of the spectrum and attempt to do my own designs at any given opportunity (mostly on side projects). However, I feel like this leads me to feel more comfortable designing in the browser, as this gives me a sense of a more realistic environment (ie. it's going to be viewed in a browser, so lets design it in one).

However

CSS isn't the most visual tool, so I wanted to create something that would use real HTML and CSS, but would alleviate my responsibility to tediously write lines and lines of CSS to achieve relatively simple layouts, etc...

So I made Speculo.

I created, what I think (amongst others), are 6 of the more common website layouts I see whilst browsing around the web. Ranging from more popular layouts, to less so. I then wanted to be able to change colours in a preset palette and see the effect of those changes immediately in a layout that I would potentially use in my end designs.

No silver bullet

Having low confidence in my own design ability as it is, I'm also going right ahead and picking faults with Speculo as I'm launching it...

👍 Ben.

Speculo's drawbacks:#####

• The layouts don't feel very convincing. I am in true awe of designers that can create and present dummy content in sample layouts that feel convincing. My thinking behind the style and content of the layouts was for them to feel extremely low-level, very minimal, and not opionated at all. I would say that they have almost zero visual design, as I wanted to colour palette that you're creating to speak more than the visual aesthetic of the layout.

• Not a game-changer. I mean this in the sense that I don't expect this to replace anything in your current design workflow, but more serve as a disposable playground to experiment with different colours. I would imagine you would come to Speculo with a colour palette in mind, or at least a base colour, and just want something already set up to test your aesthetic thoughts. If you are a designer, I might imagine that you probably have something set up in Sketch/Photoshop that allows you to rapidly iterate on colour palettes, but, if you're like me, then this forethought does not exist. I'm hoping Speculo can fill a void for these people and provide a headstart without the "design boilerplate" that's required for this colour experimentation.

• Not small-screen-friendly. I just don't think this tool would work very well on certain form-factors, so I omitted the extra work needed to accommodate them from the final result.

Inspiration

I would say that Jon Gold's Rene was a big inspiration for creating this kind of design tool in the browser. His supports more of an immutable flow, whereas mine...does not. But his concept of seeing results immediately and in the browser and with very minimal layouts, was hugely conducive to pushing me towards what I wanted from Speculo.

The actual inspiration for Speculo was entirely selfish; I needed to create a colour palette for another side-project and I just didn't want to open up Sketch.

Make Speculo Great Again™

Speculo's source is fully open on GitHub so feel free to browse through. Contributing in any way, or suggesting ways to make Speculo better, would be greatly appreciated.

Best case, you open a Pull Request/Issue and we make Speculo better, or worst case, you learn something from the React/Redux structure.

Thanks for reading. Hit me up on Twitter with any comments, feedback, etc...