Creating a website design concept in 5 steps
Sometimes it’s easy to jump into a new piece of work without stopping to think. Budgets, scheduling and resources may be such that your initial response is to simply work - fast!
However taking some time to think and create a strategy for your approach can only help, as it gives you confidence that what you are doing is considered and appropriate. Following the 5 steps shown below (or most of them!) will help you.
1. Understand the brand and gather your assets
Get your hands on all you can. Hopefully a brand will have a set of guidelines and at the very least brand colours, fonts and a logo. But there may also be other marketing materials which have been produced that can guide your interpretation of the brief.
Try to find answers to questions such as how the organisation views what has been done in the past, whether there is any design direction they went down previously that they’d rather not emulate, if there are any examples of previous communications that were felt to have nailed the right tone of voice (visually or otherwise) and ask yourself what you think worked best.
Preferably meet with the person who is going to review your designs and essentially interview them. Ask them their opinions on competitor websites or other sites which could be valuable as sources of inspiration.
2. Research the market and find out who is at the top of the game
Look at the websites of direct competitors and similar brands or businesses all over the world. It’s easy to forget about what’s happening in other countries when search engines tend to return results from your own locality.
If this part of the process gives you nothing specific to apply to your new project it will certainly reignite your passion and creative ambition and get you excited about setting off on a new design adventure. Document, sketch and screenshot. Put together mood boards and collect visual references you can look back on. They will help you in moments of doubt when you feel like you’ve lost your way a bit.
3. Collaborate and get some heads together
Depending on the size and the nature of the project it may be that your chums in UX have been planning and putting together a strategy for a while but before things go any further make sure you catch up with them and review what is in the pipeline. You may have ideas that will need to be fed into them at this stage or there may be user insight they have acquired that you need to be familiar with before you start to work on the front end design.
Whatever their level of input or the stage of the project design and UX should influence and inform each other - so stick your beak in now! You may be working with signed off wireframes but they are not design blueprints.
4. Think grids, layout and structure
Before getting into the detail, think about what basic structure and navigational presentation will suit your project. A series of questions like this should run through your mind:
What is the nature of the content?
Will there be reams of text that needs to be easily read?
How experiential should it be in approach? Should it be ‘conventional’ in tone or push boundaries?
Should the grid used be fully fluid?
How important are big images?
Once you have thought about issues like these, you will probably have a better idea of how you are going to deliver the initial concepts.
It will also become clearer if there is a case for putting two or more approaches in front of the stakeholders. This will show them they have options and make them feel they can be actively involved in the creative process by choosing between them. But be careful, sometimes this can create confusion as elements of both designs might be equally appealing, resulting in a muddled combination of concepts.
Finally, think what pages and breakpoints you need to visualise in order to get your concepts across. Don’t forget mobile - or even better start with mobile.
5. Move forward and keep the end goal in mind but don't forget to look!
You may well have a favourite idea or be keen on what the project should entail and ultimately look like but keeping an open mind and constantly thinking of what the alternative could be can help. Refine, question and develop. You’ll think you’ve cracked it. The next morning you’ll open the file again and notice something that can be improved.
Don’t get distracted and confused by changing things all the time but try to assess your work as objectively as possible and be honest with yourself when you know it’s not quite right. If you’re feeling brave, ask the next person that walks past what they think. With any luck they’ll love it and then you can move on!
Of course, the next step is receiving and responding to feedback but hopefully, if your concepts were well thought through, sign-off is just a short step away.