Yes, I wrote a whole book about this so to condense it down to a blog post is going to be like condensing the Bible into the 140 characters required for a Tweet (Angel tells virgin she’s having baby Jesus, he turns out to be good at performing miracles. His mate grasses him up and gets crucified for it – 140 characters, but poor punctuation).
I reckon a blog listing is about 500 words, so let’s give it a go.
Start with a document in Photoshop that is set up to 1024 x 760 pixels and a resolution of 762 dpi. Use a 960 grid template, you can download them and they make developers and designers’ lives easier. Stick to the grid wherever possible. Be precise – pixel perfect.
Work out the site architecture, what pages will be there and their hierarchy. Lay this out on a page, putting the main section along the top (this will be the main navigation) and the pages that each section will link to (sub-nav). Don’t worry about all the connecting links, everybody knows you will always link to the home page from anywhere.
Will your buttons go horizontally across the page, or down the left hand side, or both? How will the sub-sections be accommodated? Dropdowns, mega menus? What if there are three levels of navigation?
Bring the brand elements onto the page, the logo usually goes at the top and serves as an additional home button. What other elements are there, photographs, illustrations, graphics?
Style these carefully, follow conventions, they are there for a good reason. Once you know the rules, you can break ‘em, but learn them first.
Get your typographic hierarchy set up. Best to stick to one or two typefaces and make sure they are ‘web-friendly’. As a general rule, these are what you will need:
- Body text
- Link within text
- Bulleted list
- Footer styles
Any text that will be a link will need a rollover (or mouse-over) state and a hit state (how it looks after you have visited that page, so the user knows they have been there before).
What functionality is there, sign up form, login, shopping cart? How will the functionality elements fit into the structure of a page? How will they look?
If you are using plugins, check how much you can customise these. For instance a Twitter feed only allows little customisation.
Consider what will happen when to your content when the site is viewed on a mobile device (i.e. responsive). The content will ‘stack’ on a phone. What is the most important? What order will that content be in as you scroll down on a phone?
It is not always necessary to provide visuals for every page and every device (tablets and phones). Talk to your developer early on, include them in the process and refer back to them through the process. You’d be amazed what can give them a headache.
Depending on the type of site (and increasingly so) it might be wise to design ‘mobile first’.
Don’t forget your footer, include the top-level navigation and T&Cs, sometimes, it’s nice to reproduce the logo again, nice and small.
Lastly review what you have done. View the visual in a browser. If it was your first time visiting your site, would you know what is a link? What is navigation? Would you be able to find the information you are looking for?
That’s 500 words, and how to design a website!