When a client purchases a website design the conception is that they’re simply paying for the visual appeal of the final online site, but in reality what they’re really buying is a calculated blend of strategy, psychology, mathematics, interactivity and art.
The key to creating an effective website design starts with an appropriate and logical planning process to ensure that everything necessary for success is considered. So, let’s define an effective website design process.
The purpose of the initial client meeting is to establish “needs”, and the most important preparation you can make is to create a helpful checklist of required information. Left up to the client the goals would simply be defined as “need a better looking website that sells more products and ranks number one in Google”. Having a checklist will help engage the client in purposeful conversation, it will provide vital insights into what is required and considered appealing, and it will establish your professionalism.
New launches are rare these days, so bear in mind that your new client is likely to have selected you due to performance issues with their existing website or design studio. Go through the website with them and identify where they believe it underperforms, find out what features they like and listen to which ones their clients utilise.
The full contents of a requirements checklist are far too numerous for this article (I’ll write a separate tutorial for you on that subject) but the main things you MUST discover from the initial meeting are…
Come away from the meeting with an agreed time to meet again for you to present your proposal, a list of website styles they like (even if they are from a differing industry), and try to either gain access to their last three months of Google Analytics statistics or have them agree to let you add the necessary code – this will prove vital in determining your navigation structure and help identify where the current website is failing.
Now that we have some vital information from our potential client we can begin to research its validity. The client has a better understanding of their industry than we could ever hope to attain, BUT may need our experience of online customer behaviour to truely reveal the reasoning for current online disappointment.
Carry out a full assessment of their website taking note of potential barriers – code age/bloat, server setup, age of the content, navigation labels, logic flow, use of content structure, and the value/depth of the content. Research identified local competitors and worldwide leader offerings – this will help you gain a feel for the visual style/colouring customers expect and highlight the types of interactive features needed.
Analyse the current website’s keyword statistics and use this information to generate a content strategy – a list of pages the website MUST have to satisfy search queries and how that information should be subdivided. Use this list as a basis for designing the new navigation – not the existing structure. Clients will often define their navigation labels based on terms they use for internal communication and not the actual words customers use to search for the same thing.
Based on the client’s proposed involvement level define a suitable technical platform in which the website will be built that can deliver the website to the greatest market share, and create a proposed site flow diagram which takes into account pitfalls revealed by the analytics and your new navigation. Examine this flow and imagine yourself arriving on an internal page as the result of search and see if you can get to other important pages logically from there. If a customer is likely to have a pressing question at this stage of their journey, make sure there is enough space for a link through to the answer.
Build wireframes for the primary pages that include timely space for the features and calls-to-actions needed to drive traffic logically between pages. Use your demographic knowledge of the customers and competitor offerings to determine the right mix of internal advertising, functionality, and assistance. Essentially you’re just laying out blocks of required content types and scaling them to match their percentage of importance, within a skeleton of the proposed design layout.
Now you’re ready for your second meeting and this time you’ll be able to inspire them with…
Make sure that the quotation includes an affirmation of the defined goals – to prove that you were listening – and links to externally hosted legal terms and conditions (don’t overinflate your quotes with legal negatives they can’t understand). The quotation will introduce yourself and define the goals you are being contracted to resolve, outline the proposed methods to achieve those goals, and the timeframes and pricing required. If an interactive feature is needed, like an image gallery, be specific as to how that interaction will work. Where possible, try to avoid industry terminology and mention the desired result of a feature or action.
The quotation should include not only your deliverables, but also theirs. If you require content of a certain standard/amount to move between development phases, then let them know when you need it by and that further progress must cease until you get it. There is NO POINT whatsoever in building an amazing website with only one paragraph of text per page – Google won’t even index it.
If a task has the potential for scope-creep (taking infinitely longer than expected) than quote it as a time based charge instead of an actual amount e.g. content fill @ $X per page. In your terms and conditions (linked to on your website) make specific mention of browsers that will be supported and your ownership of the code until final payment is received. Include a “project management” or “research” fee to cover the time spent preparing the proposal. Provide paper versions for each of the client’s attending the meeting and make the last page signable and faxable. It is not a legal document unless you receive a signed copy.
Your potential client may be seeking submissions from several sources so it is VITAL that yours speaks of your thoroughness, the depth of your project vision, and explains the benefits of your choices. Some proposals will include a visual giving them an immediate advantage over yours – as the client can see the final product without paying for it yet.
If the client requests that you provide a visual to compete, then consider the following – A visual without an accompanying in-depth proposal is actually not that attractive and leaves the client with the impression that little or no thought was given to their objectives – or else they wouldn’t still be talking to you. If you oblige their request then you undermine the value of the time you’ve already invested and force yourself to compete visually with a design that was made purely to impress. It’s up to you, but please make a calculated decision as it may end up costing you a lot of time and money to be eventually rejected.
Assuming all went well – now it’s time for the fun, creative part – using Photoshop create layered concepts of a home, internal, product list, and product view page. Use the wireframes you already created for layout, the branding for colouring, and emotive imagery that compliments a page’s purpose. Restrict your designs to 980 pixels in width but use a left and right gutter of up to 100 pixels each to draw the eye in (and reveal any background textures). The style of your design should match the competitor offerings themes you notice earlier.
The wireframes tell you what needs to be on the page, the branding and subject matter tell you what colours and imagery you can use, and the theme defines the type of layout – the rest is just creating repeatable elements so the site pages have consistency. Allow at least 8 hours to perfect a professional series of concepts.
A background of colour-theory is assumed as well as layout mechanics. Colour and image choices are used to “lead” viewers through content in the order in which you want them to receive information visually (if you are not sure what this means then please read my article on ecommerce design).
The final web design stage, before moving on to development, is to present the designs to your client for approval and feedback. Much like the quotation, this is best done in paper format (A3) and accompanied by an overlay of the reasoning for specific design choices. Avoid sending screenshots of the design to a client as they may view it on a minimalized laptop screen with a mail sidebar enforcing scrollbars in both directions. No amount of explaining that the majority of their customers will see it differently can take away from the fact that this is how they are viewing it.
XHTML code the designs (and any feedback) while waiting for content. Once the required content is received you can then proceed to integrate your code into the CMS or static page layouts.
Professional website design is a skill; effective website design is a process. Marry the two of them together and you have a winning combination to achieve any client’s online goals and a roadmap to help you both get there. Prove to your potential clients that you understand their request and the means of achieving it by documenting for them clearly the steps involved and the requirements necessary from both of you.
