• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Start Here
  • Services
    • Website Design
    • Graphic Logo Design
  • Testimonials
  • Examples
  • Blog
  • Project Guide
  • About Darren
    • Why Work With Me?
    • About Ilkeston
  • Enquire Now

Ilkeston Web Design

Building Local Businesses, Pixel by Pixel

0115 714 3290
  • Email
  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Design

You are here: Home / New Website Project Guide / Design

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.

Watch video on YouTube

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.

Midland Damp Doctor Mobile website

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.

Shaun Knighton
June 21, 2017
    

"A good service with a knowledgeable company. Very heplful in decision making and with guidance, all at a good price. Thank you from Heanor Chiropractic Clinic."

Shaun Knighton
Heanor Chiropractic Clinic

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.

[printfriendly]

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.

contact form message

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.

Subscribe to my email list
Get free advice delivered to your inbox
Your email address will NOT be shared with anyone else.

 
 

 

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.

Website favicon

This will look slightly different depending on what browser and device you’re using.


New Website Guide

< Previous | Next >

Menu

  • Preparation
  • Quote Submission
  • Planning
  • Layout
  • Content Preparation
  • Content Integration
  • Design
  • Technical & Usability
  • Functionalities

Primary Sidebar

How the Site Is Built

This guide tells you how your website will be built. I'm as transparent as possible about the process if you want to know "how the sausage is made".

Building a new site includes information gathering and setting up new services. For the most part, I'll handle this.

These pages are here as a courtesy and aim to fill any knowledge gaps you might have.

Contact Darren

Web Design Laptop

Need Help? Get In Touch…

Footer

Navigation

Home
Services
– Web Design
– Graphic Logo Design
Testimonials
Blog
New Website Project Guide
Portfolio
About Darren
– About Ilkeston
– Why Work With Me?
Contact

Social

Twitter
Facebook
YouTube
LinkedIn

Contact

Office 897, 109 Vernon House
Friar Lane, Nottingham,
NG1 6DQ

Based in Ilkeston, Derbyshire

Office: 0115 714 3290
Mobile: 07519 897 243
Email: [email protected]

Copyright © 2022 Ilkeston Web Design · ICO number: ZA305900


Web Design in Nottingham · Web Design in Derby · Privacy Policy · Terms & Conditions