Avoid creative block when designing for the web

Written by Matt Keogh on 30th September 2014

(Last updated 9th February 2016)

No comments
Avoid creative block when designing for the web

Have you ever opened up Photoshop or a browser to start a new design only for inspiration to desert you? Often the problem is that you’ve moved onto this stage before laying the groundwork. Here are some useful tips that may help you avoid creative block when starting a fresh design:

Think content first

Before opening up a design application (e.g. Photoshop), write down what content the site needs and which content is the most important. Try roughly sketching this out first either with pen and paper or use a wire framing application such as Ominigraffle. Wireframing a website allows you to quickly try out different ideas without getting hung up on the look and feel or “atmosphere” of the website. By the time you open up Photoshop you should have actual content to play with.

Be a creative sponge

Every time you see something that inspires you, keep a record of it. This could take the form of a physical folder, or something online such as Evernote or Flickr. Obviously you don’t want to steal other people’s ideas but the very act of collecting helps to keep the creative part of the brain active and will influence your work subconsciously. Do this and hopefully you’ll avoid any creative block because you’ll be full of inspiration and ideas. There’s a great slide show here on becoming a creative sponge.

Forget about designing a “website”

Use mood boards and style tiles to get away from designing the “furniture” of the website (e.g. the header, footer, sidebar, layout etc). This is similar to how an interior designer would show paint chips and fabrics before designing a whole room.

Although style tiles and mood boards are similar, Mood boards are very loose collages of images, colours and fonts where as style tiles are less vague and often involve interface elements such as call to actions, headings and buttons.

Ideas breed so create different variations of these that polarise each other. For example, create one that is typographical and then re-imagine it using plenty of imagery. Be loose with these and don’t be afraid of making mistakes - have fun!

There are other techniques that may kickstart the design process too. One of which is to design a poster and use that to inform the website design. Another is to look at competitor websites and see if there is anything that they aren’t doing that you can.

Find more information on style tiles here and some great examples of mood boards here.

Leave the home page until later

Clients will often view the home page as the most important which can add pressure to design something that’s absolutely perfect. Instead of jumping straight into this, try designing an inner page first.

You could start with a simple paragraph of text, set the font, set a line height, add a header and then add a quote - this could be done either in Photoshop or directly in a browser. This allows you to get the core typography correct from the start without worrying about about the layout. It’s worth keeping in mind that when your design is eventually seen on a mobile you may not be able to rely on a website’s layout to make the design work anyway.

Set yourself an unrealistic deadline

There’s nothing like a deadline for motivation. If the actual deadline is some way off, pretend that you have a client who is desperate to see the design in two hours. You can always refine the design later. Again variation can be useful here as a way for ideas to feed off each other.

Change your mood

It’s easy to procrastinate when things aren’t going well but if you have the time, leave the design, do something totally unrelated or ideally leave it until the next day. If time is really short I often find that a quick walk, a strong coffee and a change of music can have a similar effect.

There’s plenty of ways to help beat that creative block - I’d love to hear yours in the comments below:

This article was posted in Design, SEO, Quick Tips by Matt Keogh

  • Matt Keogh

    Matt Keogh

    Matt is our Senior Designer who is perfect at pixel placement. At the weekend he likes to kick back, watch a film or two and spend time with his family (or so he tells us!). @matsaukeo


No comments have yet been posted, be the first to comment by using the form below:

Post a comment


Sign up to the Liquid Light newsletter

Subscribe to our Newsletter and stay up to date with all things web related. It's crammed full of useful articles, tips and knowledge, invaluable if you have a website or are starting a new web project.