As a designer I often find myself browsing inspirations sites in order to get “inspired” before I start into a project, just fire up siteinspire, hpptster or webcreme and cmd+tab+click all those delicious thumbnails until your browsers bursting with tabs, barely big enough to house the favIcon.

I’ll go through each one, ignoring content and screenshotting areas that “wow” me. I’m all set, my resources folder is packed full of slick looking snippets of websites, I can draw from this well of “inspiration” any time I feel like
– surely this project will be a breeze and be my best work yet.

Sounds harmless right – even essential? But, is this the right approach to beginning a project, and can it actually be detrimental to the end result and your work as a designer? When does inspiration get in the road of what’s actually required?

Many moons ago, when I was just beginning my career as a web designer this was the way I kicked off most of my projects. More often than not the projects I worked on had strict time constraints, anemic project briefs and a complete lack of content. A huge emphasis was put on creating static full-colour visuals that would “impress” the client.

When this is the reality of what a designer is faced with it’s easy to see how going straight to the inspiration sites can seem like a good place to start.

The Scenario – You clock a pretty swanky part of a website and decide you want to recreate that in your project. It looks good here, so it’ll look good in my project, right? Wrong. What you’ve probably missed out on are the subtle details that make the original section look so good. Things like;

• Brand specific photography: Bespoke photographs taken by a professional that knows what they’re at, nicely shot reflecting the tone of the brand.
• Type: Selected and paired fonts, that once again reflect the tone of the brand and which have been set to be both pleasing to look at and easy to read.
• Content: Short, specific and to the point content that has probably been created by a dedicated copywriter who specialises in writing copy for the web.
• Animation: Custom animations that once again, reflect the tone of the brand and that add to the overall user experience, rather than distract and/or annoy the user.

If you start with none of the above then what you’ll end up creating is something that’s a) not original – you hack! b) something that feels like a dodgy knock-off iPhone, sure the elements are there but it’s lacking that refinement that makes it work on the original website (and 4g).

So where to begin? Well, first I like to gather all the necessary assets. Logos, imagery brand guidelines etc.

Next, have a chat about content, copy and the purpose of the website with whoever else is involved in the project (project managers, the client and maybe a developer).

From here create a sitemap and sketch out wireframes. When doing this think about where the suggested content may appear and the purpose of the page – are you trying to sell to the user? Inform them? Encourage them to sign up to a service or mailing list?

Next, take the wireframes and start designing out some of the elements of the page/app. Don’t get too hung up on the aesthetics at this stage, just make sure everything makes sense. Do some areas have more importance than others? Are these the areas that you want to carry weight?

From here, if everything is shaping up nicely I like to go back over everything and tighten up the design. Create some rules for yourself and apply them to the elements you’ve designed. Experiment with font size and line height then apply it across all paragraph elements, play with different style buttons, the spacing of elements, colour contrast etc and what you’ll end up with is a design library custom and bespoke to the brand.

Sketch App is great for organising styles and colours – This is my application of choice for design work. In the same boat? Check out my previous post on Quick tips for App design in Sketch

Now, if you need to create a new section the guesswork is removed because you already know how much padding an element will have, what colour the background is going to be and what size of type to use, because you’ve already established the design library and to do anything else would a) take more time and b) break consistency.

So, to recap;

• Start with what you know, gather the assets, these are the constants that every other step will have to fit around, to some extent.
• Next, collaborate with the client to generate content, organise it and create a sitemap to follow.
• Use wireframes to quickly prototype pages and sections, then turn them into higher fidelity mockups
• Finally, refine those mockups. Set yourself some design rules to follow in terms of font sizes and colours etc. Build your design library up and make sure it’s spotless and robust.
• Now you should have designs that are totally custom the client, serve an intended purpose and fit perfectly with the brand. And not a single inspiration site was opened in the process.