• 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

Layout

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

As soon as a visitor arrives on your website, they need to quickly “get” what you’re about. This is something you and I will discuss, possibly looking at other examples of similar websites.

Don’t be too in love with your own ideas though. You’re meant to serve the target market, not your own tastes. 

The ideal customer needs to find this website both appealing and easy to use. 

The site needs to load reasonably quickly. Think about people using a mobile phone on bad wi-fi.

1. Overall look and feel & flat design

Visual communication is just as important as written communication, and that’s why brevity is important.

That means we should not overload the site with fancy bits, pieces, gadgets, distractions etc.

  • It’s all going to need to work well on mobile too.

Heard of “flat” design?

It’s something of a web design renaissance that has come about in the last few years, possibly in response to the internet getting louder, noisier and crowded.

Watch video on YouTube

2. Choose fonts

Two fonts maximum. Any more than that and it starts to look messy.

  • Ideally, one font will be serif (the curly decorations, like these).
  • The other font would be sans-serif (no decorations).

Titles and headings will be used by one font, and the body text will be used by the other. Simple.

3. Colour scheme research

The colour palette you choose affects communication, user experience and purchase decisions so it’s important to spend some time thinking about it.

Red means “stop” and green means “go.” Traffic lights send this universal message. Likewise, the colours used for a product, on a website, business card, or logo cause powerful reactions.

Here’s an overview of the connotations of colour:

RED

Positive: Warmth, love, boldness, excitement, speed, strength, energy, determination, desire, passion, courage, socialism

Negative: Anger, danger, restriction

PINK

Positive: Feminine, love, caring, nurture, friendship

Negative: Immaturity

ORANGE

Positive: Cheerfulness, affordability, enthusiasm, stimulation, creativity, food, liberal

Negative: Warning, facetious, unintelligent

YELLOW

Positive: Attention-grabbing, comfort, liveliness, optimism, overwhelm, summer, comfort, liveliness, intellect, happiness, energy

Negative: Cowardice, hunger, conflict

GREEN

Positive: Durability, reliability, environmental, luxurious, optimism, well-being, nature, calm, relaxation, Spring, safety, honesty, optimism, harmony, freshness

Negative: Envy, illness

BLUE

Positive: Peace, professionalism, loyalty, reliability, honor, trust, coldness, depth, stability, professionalism

Negative: Melancholy, boredom

PURPLE

Positive: Power, royalty, nobility, elegance, sophistication, luxury, mystery, royalty, elegance, magic

Negative: Artificial, pompous, conceit, mourning

GRAY

Positive: Conservatism, traditionalism, intelligence, serious

Negative: Dull, uninteresting

BROWN

Positive: Relaxing, confident, casual, reassuring, nature, earthy, solid, reliable, genuine, endurance

Negative: Dirty, dull, humourless

BLACK

Positive: Elegance, sophistication, formality, power, strength

Negative: Illegality, death, depression, morbidity, night

WHITE

Positive: Cleanliness, purity, newness, virginity, peace, innocence, simplicity

Negative: Sterility, cold, isolating, boring

We might look at a colour wheel, which shows opposites on the spectrum.

Colour spectrum

For example, black and white are opposites, create boldness and work well together.

You and I might also visit an online colour scheme generator like Coolors.co.

Colour schemes in websites follow some simple rules:

  1. Don’t use light colours on light backgrounds.
  2. Avoid using colours that are close together on the colour spectrum (with exceptions).
  3. Use colours that are already in your existing marketing materials.
  4. Use one strong, specific colour for anything that is supposed to be clicked.

That last point – about the action colours – is demonstrated in the video below.

You’d be surprised how often this simple principle is ignored. Take a look:

Watch video on YouTube

4. Standards and templates (usability, accessibility, etc.)

If we use WordPress, it will use a template design that is programmed/coded by me.

This is called a theme and can be changed to another theme if needed.

The advantage to using a theme is that you only have to add a new page or post, insert the content and click publish.

Consistency is key:

  • The pages and posts will all have the same look and feel.
  • The website will be uniform in appearance at all times.
  • Naming conventions will be established

Usability

A person of average technical ability must be able to navigate your website easily which means eliminating question marks in the minds of the users.

Here’s a good definition of usability:

A person of average (or even below average) ability and experience needs to be able to figure out how to use a thing to accomplish something without it being more trouble than it’s worth.

Accessibility

Users with disabilities are supposed to be able to access and use your website without problems, just as wheelchair ramps and lifts are supposed to be installed in public spaces, amenities, buildings etc.

Accessibility for websites involves, among other things, making sure blind or partially-sighted users can operate the site. These people tend to use screen readers, which is a piece of software that reads text aloud.

Images must be labelled in such a way that screen-readers can say, for example, “Picture of cat crouching in the grass.”

5. Basic layout creation

I’ll create a basic website layout using the criteria discussed and agreed. This will be done in HTML, PHP, CSS and Javascript.

You’ll be presented with one or two pages in the form of a 2-3 minute private YouTube video.

If you’re curious to know about website programming languages:

  • HTML is about the structure
  • PHP is for sending data
  • CSS is about the colours
  • Javascript is for interactions, animations and moving parts

6. Validate Mockup

With further discussion, addition, subtraction, trial and error we’ll tweak and revise the layout.

A private YouTube demo video will be emailed to you. A private version of the site will be uploaded for you to look at too.

We’ll settle on a version of the layout that will be suitable for your website visitors although some of this is likely to evolve throughout the rest of the project, which is normal.


New Website Guide

< Planning | Content Preparation >

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 © 2023 Ilkeston Web Design · ICO number: ZA305900


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