Back to jotter

Pink Palm Trees and Clever Copy from Statamic

20th December 2018

It’s a site that’d sound awful on paper to a lot of designers. “I want palm trees with a bright pink overlay and at least four different fonts on the homepage alone.”

To me and many others, that sounds fucking epic...and it is. This is Statamic, the best WordPress rival out there (and they make sure you know it). And no, I’m not here to review it or tell you to buy it (sadly, it's out of my price range for now). I’m more into the pink palm trees.

Try Statamic

But first, let’s talk about that WordPress slander

Because I am here for it.

At first, it’s subtle. WordPress isn’t even mentioned on the homepage (apart from in a testimonial). They mention plugins, control panels, and databases...key frustrations that those in the know would recognise as being synonymous with WP.

But theeeeeennn they go all out on their ‘Why Statamic?’ page.

Statamic WordPress Slander Example

They know who’ll be interested in their product. They know who the big player in the game is, they recognise the flaws with it, and they’re very clear about why their CMS is the better option.

And there’s the key to great website copy. Clarity. Being clever and subtle but also not being subtle in the slightest. It’s not easy (that’s why copywriters exist).

A side note on Statamic’s target audience: I love how they’ve marketed their product to their audience. They’ve acknowledged that developers and WordPress users will be who they’re mainly talking to here. But, they’ve also used clear language that allows others to be part of their audience too: they’ve made no more assumptions about who will buy their product than necessary.

Text highlights

I’ve seen text highlighting on a couple of websites now and have really liked it. I considered it for my own blog but found it a bit too distracting when reading.

Statamic’s site has a neat solution for that very problem with their semi-transparent highlight effect. It focuses your attention on certain points without sacrificing all of the text around it.

Statamic Highlight Effect

One problem: the site was almost certainly designed on a MacBook (or some other laptop with a high-resolution screen). I can barely see it on my £300 HP.

Different screen resolutions need to be taken into account when designing a site: it’s just silly how different a colour looks on my screen compared to my developer’s fancier screen.

Side note: while we’re on the topic, if bloggers could consider not using a very light grey for their body text, that would be fab!

Having a creative website doesn’t have to mean having a creative layout

At recent events and on social media, I’ve heard a fair few people complaining about the lack of creativity in web design. I remember one speaker at the Bath Digital Festival saying that all websites had the same layout and it was getting boring.

While I agree we could be thinking more about what works for our own businesses rather than following the crowd, I don’t think this has to mean messing up a layout that...well, that works. If a menu bar at the top works best for navigation (as it usually does), then using that layout makes the most sense.

Statamic Menu

What Statamic’s website shows is how you can design a creative website that stands out without having to change the way people use it. Finding your way around is still very easy, but you’re not going to forget the site thanks to its brave use of fonts, colours, etc. Talking of which…

The colours.

They haven’t done the usual ‘pick one hex code and use it for everything’. Honestly, I think they’ve done whatever the fuck they fancied for a lot of it (I’m so on board).

Statamic Branding
Statamic Branding

Yes, there’s a branding page with the main colours...but, these aren’t the only colours they use. It doesn’t seem that mindblowing but often companies do just have one or two accent colours and don’t stray from them in the slightest. Then you’ve got Statamic…

Statamic Random Red Button

I can’t find any other red on the site apart from as part of a gradient. On some pages, this button turns red when you hover over it...on others, it turns blue. Then you've got this blue on the homepage:

Statamic in Action

I won't say it's 'random' because it all works together. It's not following the common design rule of avoiding using more than two colours but the designer (Jack McDade) clearly knows what he's doing and it all works. 

Statamic- Explore Marketplace
Statamic- Forums

A final thought

I guess it would just be nice if businesses made more design decisions based on what they fancy doing rather than on what they think they should be doing. If more businesses chucked some palm trees on their homepage, not because it has anything to do with the brand, but because it looks cool.

If you enjoyed reading that, these other posts might interest you.