1. Artworks reception/update/creation (photos, illustrations, etc)
Photos and illustrations from the client should have been received at this stage.
These can be cropped and sized as required, using variations for thumbnails or full width for sliders.
2. Logo creation (if requested)
If a new logo is required, the client would be asked to view the following video as an introduction to how to come up with a logo.
By this time, most of the website written content would be complete or nearly complete, meaning there would be plenty of information to use as a logo design brief.
The video may be 40 minutes but it’s not boring and actually humorous in places.
There are certain mistakes you don’t want to make and these are mentioned in the video discussion between me (Darren) and Lee, a local graphic designer.
3. Design header with clear statement of the site purpose & prominently placed logo
The logo and website description normally go in the top left.
What is especially important is that you provide a simple, clear description of what the site is about or who it is for.
It’s fine to use a mission statement or statement of intent, but don’t use jokes, puns or clever wordplay.
A few words about your primary services or operating area will do…
4. Add visible phone number to the header or to the top of right column
Ideally, your primary phone number wants to be in a visible location at the top of every page, with a call to action if possible.
5. Design clear navigation (if in JavaScript/Flash, provide a text-based alternative)
The best navigation consists of two rows of links or buttons running horizontally across the top of the site.
A rollover/colour change effect is desirable and images/icons can be placed next to each link/button. This could tie in with the logo.
In some cases, a drop-down menu can be added.
Of course, any type of website navigation needs to translate well to mobile, which means users will be tapping links/buttons with their index finger instead of operating a mouse.
Adequate spacing around each link/button should be included to prevent a user tapping the wrong thing.
6. Design main section (columns and sidebars) and footer now or later
The content areas, sidebars and footers must be consistent. Any borders, drop shadows, spacing or other design embellishments can be added to tie in with the logo.
7. Make sure that important content is above the fold at least for home-page
Are you familiar with the phrase “above the fold?” It actually comes from the print publishing world and refers to the way newspapers are folded horizontally.
As you can imagine, that top 50% of the front page of the newspaper is the part that gets seen most.
Similarly, websites load at the top, and show – figuratively speaking – the tip of the iceberg.
That is where the most important words, image, video etc belong.
8. Balance illustrations/photo and text importance according to the site purpose
There’s nothing worse than a wall of text. Images help break up the monotony of text and help communicate the message.
Beware though: Too many images slow down the loading speed of a site, which is not good for mobile users with a low battery and bad wi-fi.
9. Design visible testimonials, reviews and awards
If you’ve received some especially good reviews, or if you’ve won some meaningful awards, these could be displayed prominently on the website.
Google reviews, for example, can be redesigned for your site and can be displayed on sidebars, on a dedicated page or within the content.
10. Make sure content and/or design elements encourage reading, future visitation or viral sharing
It’s possible to add social media buttons for sharing, or subscribing.
These are normally added to the top or bottom of the page, or as a floating sidebar. They can even be added in a specific part the content, as below.
Go on, hover your mouse over the buttons below:
If a WordPress plugin has been used to display the buttons, I can customise the buttons within the plugin settings.
You might also consider adding a “Print this page” button if you’ve published the type of content that might benefit from later offline review.
The button below is a working example. Try it out.
11. Embed Google map
Ideally, we want to get your business listed on Google maps, and then embed a map with the red marker identifying your business into the website.
Clicking the red marker highlights any Google reviews you may have.
12. Make sure company information and contact (email or form) are easily accessible
It’s a good idea to have the address details on every page of the site, usually somewhere in the footer.
Obviously, your site should have a dedicated contact page where everything a potential customer needs to get in touch is available.
Click the image below for a larger view of an example contact page (opens in new tab)
13. Style contact form reporting (error, validation, etc)
Another thing to mention is the email contact form. When someone submits a message they need to be told if the message was sent or not.
Red, yellow and green can be used to emphasise what has happened.
14. Style lists
It’s possible to use bulleted or numbered lists, like these:
- Bullet
- Bullet
It’s also possible to change those bullets from circles to squares…
- Bullet
- Bullet
…or use images instead…
- Bullet
- Bullet
15. Style search forms
And another thing: Search forms on your site can be customised with whatever text you want.
16. Style newsletter (site functionality & email format)
The email optin form can be styled at this point. It will match the colours, layout and design of the rest of the site.
Also important is the configuration of the newsletter emails themselves.
17. Design buttons, sprites, etc. Make sure they change on hover if they are clickable.
It’s helpful if links and buttons change their colour when a user hovers the mouse cursor over them.
It’s also helpful if links that have already been visited display a different colour to those that have yet to be clicked.
18. Design Favicon
The favicon is a tiny image that can be made to display on a browser tab. The favicon will be created once the rest of the site has been designed.
In the example below, the favicon is a miniature version of the website logo.
This will look slightly different depending on what browser and device you’re using.