There is a little corner of the internet dedicated to showcasing outstanding Pinterest fails, usually food related.
These are the kind of terrible outcomes that aren’t making it onto anyone’s perfect Instagram feed.
Luckily, perfect strangers are happy to publicly humiliate themselves by sharing their #NailedIt disasters, for our personal amusement.
I love a Pinterest fail as much as the next person, but not when it comes to websites.Â
I’m asking this in the nicest possible way, but is there any chance YOUR website is having a bit of a ‘Nailed It’ moment?
It’s a common story. You’ve agonized over which theme or template to buy and you’ve finally found THE ONE….the template that’s going to elevate your brand and your business. It’s perfect. You just know it.Â
You start designing. You add your own images, your colours, your fonts.
It’s looking good. Maybe not perfect, but good enough. You carry on.
You start to add your copy but it doesn’t quite fit.
Hell! You’ve got twice the amount of copy as the template does and someone once told you that you need at least 600 works on your home page, so you’ve practically written an essay.
You cram all that copy in anyway, creating a randomly large column of dense text so now the spacing looks off, so you tweak that.
It’s not really working but you persevere and by the time you’ve worked your way through all of the BORING inner pages, you’ve lost the will to live. You get lazy, throw your content in any old how, stop paying attention to the small details and call it a day.
Congratulations. You now have a website that you’re willing to tolerate.
You swear you’ll never build your own website again.
.
.
.
It doesn’t have to be this way.
In this blog post, I’m going to share the pro design tips and tricks to help you avoid Pinterest fail website hell.
Evaluating Your Chosen Theme
So you’ve fallen in love with a theme or template. Cool. Before you even think about installing it, you need to take a good hard look at the theme demo and work out what drew you to it in the first place. You’ll need to make a list of key features so that you can make sure that you preserve them at all costs.
We’re going to be systematic about it and check the following:
- Design features / elements
- Typography
- Colours
- Spacing
- Use of images
DESIGN FEATURES
Start by examining the general layout of your theme. You’re looking for stand out features that make the design unique or would be particularly suited to your content.
Look at this screenshot below from our theme, Stella, for example. This part of the layout works structurally for several reasons. The rotating circular text, overlaid over the image draws the eye down. And the image overlaps the next section, creating a pleasing transition between the two sections.
To preserve that effect, we now know that we need to choose a portrait orientated image and limit the length the text on the left to retain the same aspect ratio.
TYPOGRAPHY
When you buy a template, it’s tempting to swap in your usual brand fonts without really stopping to think about whether they are going to work with your chosen template.
The designer behind your template has usually chosen the demo fonts for a very good reason, and each of them has a role to play.
Let’s have a look at another example from the same template, Stella.
There are just two fonts used throughout this website – Lato and Prata (both free Google Fonts).
They work together because they contrast beautifully with each other.
Prata is a modern serif that brings elegance and luxury to the headings.
Lata is a classic sans serif that works in a range of situations, including the menu, subheadings, buttons and body copy.
Would I add another font into this mix? Absolutely not. It just doesn’t need it.
So before you go changing the demo fonts (and you should definitely do that to create cohesion across all of your marketing platforms), make sure you understand what role each font is playing and whether there’s actually a case for using ALL of your brand fonts.
COLOURS
Let’s talk colours. Unless you REALLY know what you’re doing, ideally, you’d use no more than 3 colours and each of them has a role to play.
- Your signature brand colour, which is often used in your logo.
- A subtle background colour, which can be used to cover large areas.
- A highlight colour used sparingly for buttons and calls to action.
If you look at the colour combination below, you can see that the main brand colour, blue, is being used for borders and a background colour in limited quantities. What makes it work in this case, is the fact that it’s a versatile mid-tone, meaning that it can do several jobs at once.
The beige background colour is subtle enough to cover large areas and still contract nicely with the text. Its role is to create breaks in the page so that the copy is broken down into easy-to-consume sections.
Finally, the bold orange/red colour is used sparingly for buttons and icons. It draws the eye to call-to-action and links.
SPACING
I could honestly write a whole blog post in praise of white or negative space. It creates a feeling of luxury and gives your website visitor time to process the information on the page.
And yet I often see our website templates with the original spacing removed, giving the copy and the images a cramped feel.
When you’re not used to working with negative space, it can be tempting to reduce the padding or margin but be strong and resist!
It’s a bit like when a recipe tells you to use only a clove or two of garlic, but you use a whole bulb. And you never regret using too much garlic, right?
This blog section simply wouldn’t look as elegant without the generous negative space used to frame it.Â
USE OF IMAGES
Finally, let’s talk about images and how they are used. When I work with a web design client, I only ever use a handful of images to design the site. Then, before launch, I do a walkthrough with the client, explaining why I’ve chosen those specific images, so that they can make good choices when adding their own images.
Look at this example. This image works for the following reasons.
Tone: it’s darker than the background which makes it pop. A lighter image here would get lost.
Aspect ratio: it’s vertical, which allows it to overlap the background and create a pleasing asymmetrical layout
Colour: the dark red tones of the dress and the beige of the hat echo the brand colours, giving a unified feel.
Let’s look at one more example. The shadow background image works because it’s light enough for the overlaid text to be easily readable.
And the coffee cup image works because it’s been cropped to match the length of the content on the left.
So before you dive into swapping in your own images, check the tone, aspect ratio and colours of the images used in your template first, so that you can shop your own portfolio effectively or source new images that will play the same role.
Design is learned, not innate
I hope this post reassures and inspires you. These simple rules are designed to help you evaluate what drew you to your chosen theme and help you understand what you need to preserve and what you can safely re-design to create an original feel. I hope I’ve give you the confidence to adapt your own template without getting into Pinterest Fail territory. And if you do have any questions about this blog post, or you are working on your own template adaptation, then don’t forget to join my free Facebook group. It’s the perfect place to ask design-related questions.
If you’ve enjoyed looking at why our gorgeous Stella template works so well, you can check it out here.
Remember to sign up below to our mailing list below to get 20% off your first order.
lol Melissa I felt like this was written to me. I had a new site where I was excited to share a new piece of content. Shared it and the only feedback was like “wtf did you do with the fonts?” NAILED IT.
But I guess sometimes we have to try new things that we like and see how people will respond. Seems like the name of the game with design.
I appreciated that last point as well, and I really want to dig into more of your resources so that I can hone my design skills.