The Fundamentals of a Basic Web Page Design

plans

The fundamentals of basic web page design covers the very basics of what is needed in order to have a well designed that functions as intended.

To make this super clear we will format the blog post into a neat list.

Each item in the list should be followed in order.

That’s enough introductory text, so let’s get right to it!

person standing on arrow

Purpose

First things first, the purpose of the website must be well defined. If not the overall direction and design of your website can be confusing and the purpose can actually lose focus.

To make this easy ask yourself this question. Do I need to sell or not sell? Here are possible answers:

Brochure websites

Brochure websites work to show your customers exactly what your business is about. Brochure websites are a simple website solution that pushes your business online, without any added complication.

Ecommerce websites

Ecommerce websites allow your customers to buy from your business whenever it’s convenient. It’s important that your ecommerce website sells, without creating friction or complications for your visitors.

Landing page websites

The purpose of a landing page websites is to advertise an upcoming product or service. It’s designed to entice your potential customers to use your product or service. Landing page websites need to be visually pleasing and allows your potential customers to get to the point with relative ease. Take a look at My Orchard – this is a recent start-up (at the time of writing this post) and we built a landing page for them as well as a full website upon launch of their new product.

Sign up websites

Sign up websites are designed to get your users to sign up to something. This type of website could be a fitness website where you can sign up to fitness plans. Take a look Happy Balanced Life’s website for a good example. We actually designed and developed this site, so don’t miss this opportunity to see what we can do.

Resource websites

Resource websites are designed to present information to users, they aren’t designed to “sell” like the previous websites we’ve mentioned. Examples of resource website can be news websites or road safety websites (where you go to find important information, but not necessarily purchase something).

Contact websites

Contact Websites allow your customers to get in touch with you, whether it be direct by phone, email, contact form or instant messaging service – they need to be fast and efficient in allowing customers to get in touch. These are great if your primary service is providing support (could be IT Support) where you want to be able to solve people’s problems as fast and efficiently as possible.

Upon defining the purpose, this will mould the following step. If you do not identify and define the purpose, the direction of your whole project can get confusing and the project will reflect this.

goal

The goal

Now we know the purpose of the website, the next step is to define the end goal of your website
What customers are supposed to do – without a goal, how are you going to incorporate this into your website design? Different types of websites that have different goals are totally different from one another, here is some extra information regarding this issue.

If you have already defined the purpose of your website, this step will be super easy. For example, let’s say you need an ecommerce site because you need to sell something. The goal will be you want your customer to buy something off your online store (ecommerce site).

This may seem very obvious, but it’s the obvious things that can get looked past – like when you are looking for something on your shelf and can’t see it until you release it’s right in front of you.

To find a goal, simply ask yourself: what do you want your users to do?

  • Do you want them to use a service you are providing? (brochure)
  • Do you want them to buy something? (ecommerce)
  • Do you want them to get excited about a new product you are launching? (landing page)
  • Do you want them to sign up to a special newsletter (sign up)
  • Do you want them to read some information? (resource)
  • Do you want them to get in touch with you? (contact)

As you can see the purpose and goal fall inline with each other. This clearly defines the purpose and goal which will influence the direction of your website going forward.

buggy

Call to actions (once you know the goal)

You know the purpose and goal of your website. The next step is how you are going to get the users to carry out the goal.

You do this by defining call to actions (CTAs). Before we get started on CTAs, it’s worth mentioning that there are two types of CTAs. Direct and Transitional.

Direct CTAs do what it says on the tin, they let your customers get in contact with you straight away. A direct CTA could be a let’s “start your project” button that will lead the customer to a contact form.

Transitional CTAs provide the user with more information in order for them to return to you for a product or service. For example, if you have a web design business and want users to use your service over the pesky competition you can provide an ebook that provides useful information about websites.

This could be a complete website checklist

You need to make sure you have good content for the transitional call to actions. If you need or are struggling with content, check out our content services

As you should know by now, CTAs will lead to conversions

If you follow all of the steps in this blog post, your website will convert.

Call to actions need to be well defined, they need to be obvious.

How do you know what CTAs should do and where they will take the user? Well, let’s take a look at an example.

Take an ecommerce site, you want your customers to buy something from you.

Let’s look at the home page on an ecommerce site – you will probably have a featured product section on the homepage, you should provide the option to “buy now” or “read more” so the customer can either add the product to their cart straight away or find out more about the product.

There are many examples, so this will vary from project to project, but if you have the purpose and goal defined, it should be fairly clear as to what call to actions you need.

stones

Visual hierarchy (visual hierarchy based on the goal and CTA)

The visual hierarchy includes the site map and either of the two website patterns (Z pattern or F pattern).

You currently know what type of website you need, what the goal of the website is and what call to actions you need. The site map will be a tree-like structure and should flow kind of like a flow chart.

The homepage will always be at the top. Let’s look at an example to make this clear.

  • Homepage
  • Category page
    • Single product page
  • Product page
    • Single product page
  • Sale page
    • Single product page
  • About page
  • Contact us page
  • Legal page
  • FAQs page

As you can see this maps out where pages can take the user – the product page take the user to a single page (if they click on a product on the product page).

This will, of course, be different for each project, but the same principle applies – what pages are needed and where do they take the user.

The next step after defining the hierarchy of your website you need to define the flow of information.

There are two patterns that you can follow – only one of the two should be used.

The first is the Z pattern. The Z pattern follows the principle that people read a webpage from the top left to the top right, then down and to the left side, then to the right from the left forming a Z.

The second is the F pattern. The F pattern follows the principle that people read in a horizontal movement from left to right, moving down a little and reading left to right again – repeating this pattern forming the F shape. (just like how you are reading this blog post now).

Z patterns will generally have centred text (in the middle of the page) and F patterns will not.

You will determine what pattern you use based on how content-heavy your website is and will generally be determined by your designer so you shouldn’t have to worry about this.

It’s worth mentioning so you know about it.

The next step is to plan and lay down what pages you need and where they take the user.

sign post with number two

Phase two elements

Websites are designed to scale as your business grows. You may need features added to your website in the future that you do not currently need.

Take testimonials as an example.

If you are a new startup, you are not going to have any testimonials or quotes from your customers as you will not have had any yet.

But if you have catered for future testimonials from customers, the testimonial section can be pre-planned out.

Another example could be an ecommerce site – you may just have a few products to sell at the time of launch and won’t need an extensive category sidebar on your shop page – you could have the current product categories listed in the top bar.

These could be weddings, gifts, hangers, special events and all products.

As your business grows you will be able to incorporate the sidebar onto the shop listing page that lists out all the different categories you have – this simply would not fit in the top bar of your site.

If you have thought this through, this sidebar can be pre-planned out (just like in the testimonial example).

This will save hassle later on because if elements like this aren’t thought of now, the design of your website will not be catered for these extra features.

There won’t be any room for an extensive sidebar or a testimonial section.

The reason it’s called phase two is down to the fact that these are features that are added at a later date – when you begin to scale and grow.

And as you scale and grow these phase two elements can easily be dropped in with ease as the website design will cater for these extra features.

content-creation

Content creation plan

It’s all well and good having a website, but you need content to go in it. It needs to be well thought out and meaningful to your customers.

Your website’s content will also continuously update.

This means you need to plan out the content of your website for now and the future. You can do this by creating a content creation plan.

As you are probably aware there’s a term that always floating about “content is king”. This is quite true and you need to have quality meaningful content.

Adding content for the sake of it will simply not work. It will decrease conversions and have an adverse effect on organic SEO, the SEO you want to strive for.

When creating a content creation plan you need to keep the purpose of your website and the goals of your website in mind.

This is because you need to have the majority of content focused around the purpose and goals.

Again, ask yourself “what do you want your users to do?” go to the previous bullet list to see the answers.

Let’s take the answer “Do you want them to use a service you are providing?” as an example.

If you are providing a service (could be a web design service), you could have a blog that focuses on web, branding and content (all the good stuff that makes up a web project).

So the web, branding and content would be the categories you’d split the content up into.

Also, the purpose and goal of your website will influence the type of content you have. Content ranges from text, images, graphics, illustrations, video (podcasts, tutorials etc.).

You’d have tutorials if you are running a business that offers software (as you can see from this example the purpose and goal will influence the type of content you need).

If you have a content plan in place you can easily list out all the posts you could have for each of these categories. So, when it comes to actually writing a new blog post you can easily check out the content plan instead of wasting time thinking about what to write.

It isn’t just about coming up with a plan of content though, you need to find out the keywords that you want to rank for.

The topic content creation plan can’t be covered briefly as there is so much to it if you want to find out more information about having a content creation plan check out this post

In short, having content will allow you to digital market and put your website to work.

Your content will be shared and discovered all over the internet from your website to social media channels. Your content will bring people in from different sources and in turn increase traffic.

Once you’ve got the traffic your website will turn this traffic into conversions.

Content Focused

If you have thought about the content of your website and have a content plan in place, you can focus on the design of your website around this content.

There’s a common issue where content simply doesn’t fit in the design of the website or it simply makes the website look rubbish.

This happens if the design of the website is made just using filler content, let’s say the hero section has been designed using filler content.

The hero section could be relatively short in height with centred text and a call to action. This leaves a lot of space on either side of the text.

Now, say the website has been developed and content has finally been put together, there could be another paragraph of text and an image that’s not suitable to be used as a background image. This could be an image of your product.

Because the text is centred there is nowhere for the image to sit alongside the text. The suitable layout would be to have left-aligned text in one column and the image to the right in the next column.

Simply put, not putting any thought into content can have serious effects down the line.

A top tip, if you have no content look at any previous content your business has developed. If you are a new business you should consider having using content services.

Working with a professional agency to have your website and content developed will mean your website and content will work in harmony.

hot-air-balloon

User experience

User experience is how the user interacts with your website.
Some of the elements that contribute towards the user experience include:

  • Valuable
    • Content must have value and this comes down to how useful the content is to the user
  • Usable
    • The website must be easy to use
  • Desirable
    • All website elements must be appreciated and provoke emotion
  • Findable
    • The website should be easy to navigate and content easily found
  • Accessible
    • The whole website needs to be accessible
  • Credible
    • The content needs to be trusted

If you have defined the purpose, the goal of your website, defined call to actions and have a content creation plan in place the above should come quite naturally.

The content will be useful, be trusted, have value and be easily found.

Things like: trusted and value will come over time as more and more people use your website they will begin to recognise that the content you output is of a good standard.
The usability, desirability and accessibility will come down to how well your website is designed.

The design-related stuff includes the other elements that make up the user experience. This stuff is how elements look and function, this can be things like how the page loads (how fast it loads) and how the navigation is laid out (location of the call to actions, the location of the top bar).

If you meet the above criteria your users will be provided with a natural pleasant experience.

The elements to look at first include useful, value and credible (all aspects of content). The other elements usable, findable, desirable and accessible will come down to the design and development aspects of your website.

wireframe

Wireframe

The next step to test how the purpose, goal, call to actions, content and user experience will fall in place on your website is to develop a wireframe.

Wireframes include a very basic visual representation of all the elements on your website.

Regarding the content. The images and text will be visualised as boxes and lines, but if you have a really good idea of the type of content you need the designer will know how to visualise this on the wireframe.

From the wireframe, you can easily identify any flaws within the design.

The wireframe will allow you to see the hierarchy (the site map) in a more visual way. This would include (from the site map example from before):

  • Homepage
  • Category page
    • Single product page
  • Product page
    • Single product page
  • Sale page
    • Single product page
  • About page
  • Contact us page
  • Legal page
  • FAQs page

These pages would be included in the wireframing. Each page would then have the navigation, call to actions, different sections of the website laid out.

Think of wireframe as kind of like a blueprint for a building. You can see the inner structure of the building before the outer layer (how it looks to you).

The wireframe is the “inner structure”. In short, it displays the site’s architecture visually, clarifies any features, makes sure each webpage is usable and identifies any updateable areas.

For more information on this see our blog post on how to get your website structure just right.

Coloured Pencils Crowdsourcing

Colours

The next step after completing your website wireframes is to define a colour palette if you do not already have one (you could be a start-up) or if you are having a rebrand. If you have a business already and are happy with the brand colours then use them.

If you are in the process of defining a colour palette you need to make sure the colours you pick are complementary colours, convey the correct meaning and are suitable for your target market (demographics).

Just like fonts (which we will get to next), colours affect how people see your business (at first glance) and how they feel.

Here are some basic examples of how some colours affect how people feel.

  • Red – passion, excitement, anger
  • Orange – playful, standout
  • Yellow – friendly, playful, energetic
  • Green – versatility, naturalism
  • Blue – professionalism, authenticity, trust
  • Purple – luxury, opulence

So it’s important not just any colour is chosen or chosen just because you like the colour.

Your colour palette must provide your target audience with the same feelings as your typeface. For example, if you have a playful font, then you could have yellow in your colour palette (this is a playful colour).

Your website design must compliment your colour palette. For example, call to actions must stand out from other elements. If you have a colour palette where certain colours do not stand out from one another, then you may need to add extra colours to the palette for your website.

This can be as simple as decreasing the opacity or applying light or dark functions to the colours to change the shade/tone.

More often than not you will more than likely need more colours for your website.

If you are struggling with defining a colour palette, then you could look into complementary colours. Here you want to pick a primary colour for your business/brand and search for complementary colours for your primary colour.

you also want to consider your overall demographic, think about how they think and feel, what motivates them to make a purchase.

If you would like more tips on how to better understand your target market, check out this post on how to get your website structure just right

typeface

Typefaces

Once the wireframe is complete the next step is to identify the typeface(s) for your brand (this includes the website).

It’s important to find a typeface that is suitable for your business before creating the mockup so the design can be catered around the typeface.

The typeface you choose gives value to the text on your website. It helps get the correct message across.

If you have the design of your website made before choosing a font, the font you choose may not fit in with the design.

Typefaces help get the correct message across because they evoke different feelings for people (unconsciously). Typefaces simply tell you a lot about a business at first glance and as you learn about the business more in-depth.

A good analogy would be to compare this to the first impressions of meeting a person.

Their clothes give off an image and you instantly formulate this image in your mind. Are they serious? Playful? Quirky? Laidback? Intimidating? Friendly? The list could go on and on.

Also, you may think someone is intimidating, but as you get to know them, they are the most friendly people ever.

The same goes for typefaces, they can be serious, playful, quirky, make your business look laid back, make your business look intimidating or seem friendly.

Top tips in choosing typefaces:

  • Font combinations
  • Research into what fonts work with other fonts
  • Always look to use more than one (headers and body)
  • You don’t want to use the same font all over your website
  • You want to have a good balance between headings and body (main bulk of text) fonts
  • Matching the style of typefaces to the style of your business
  • Your business has an image, choose typefaces that compliment your business image

pen-paper

Mockup

Now for the exciting part, the mockup. Here this is where all the previous research comes together. To make sure we are still on the same page, this includes the website purpose, goal, call to actions, visual hierarchy, any phase two elements (on a different artboard), any content from your content (that derives from your content creation plan), visual representation of the user experience, wireframe, colours and typeface.

You will also see how the design works around your content.

Here you will get to see how your final website will look like.

Once the mockup is complete, you will be able to see how well the structure (from the hierarchy and wireframe) works with the styling (colours, fonts, media style).

It will also become apparent if anything does not work, just like in the wireframing process. Here you can see how the call to actions sit on your website and whether or not they stand out or not.

The wireframe and mockup is a very important step and should never be missed out. This is because if something does not work it can easily be reworked without having to fiddle on with code.

This would happen if the website was coded out in order to see what the final website will look like, some web designers code out their websites using simple HTML and CSS (not adding the content management system).

Not adding the CMS makes this process quicker, but it’s not as efficient as creating mockups.

mobile-code

Responsive

You probably say this to yourself quite often, “this website looks rubbish”. It still surprises us today when we see websites that are not optimised for all devices (all screen sizes).

It is simply expected, no half measures.

For your website to work and look good on all screen sizes, it’s recommended to have your website developed for mobile-first then desktop.

This makes sure every element of your website sits and functions properly on a small screen. From here the layout can adapt for larger screens.

To help you understand the importance of mobile-first design let’s look at two quick statements.

  • Content that fits on a small screen and easily and efficiently flows into a large screen
  • Content that fits on a large screen is hard to squash down onto a small screen

What’s easier? Pulling your sleeping bag out of its bag and into the open (larger space) or cramming it back into its bag?

If your website is responsive, every element of your website will be accessible and functional on all screen sizes. The top elements include:

  • Navigation
  • Call to actions
  • Readability of elements (text and media)

For an example of how properly optimising your site for all screen sizes is extremely important, take a look at Centre Stage’s website, a photographer’s website we designed and developed.

Pay attention to the hero section on the homepage (the images at the top of the webpage).

This has a four-column layout on desktop that expands on hover. Imagine this on mobile, the images would be very tall and narrow.

For this hero section to work on mobile, the layout goes down into a single column and placed on a slider.

coffee-diary

Conclusion (The Fundamentals of a Basic Web Page Design)

There may be some very obvious facts in this blog, but it is the obvious things that are often missed out or overlooked.

And remember, this is the fundamentals of basic web design. It is these basic fundamentals that lead to a website that works.

Here’s a consolidated overview of the points covered:

  • Purpose
  • Goal
  • Call to actions
  • Visual hierarchy
  • Phase two elements
  • Content creation plan
  • Content-focused
  • User experience
  • Wireframe
  • Colours
  • Typefaces
  • Mockup
  • Responsive

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *