WordPress: Designing your first web page (part 1)

by | Mar 9, 2021 | Web Design, Web Development, WordPress

Designing your first web page with WordPress can feel a bit daunting. I know, I’ve been there.

Before you jump in and get into your first web page design, I’ll outline some key factors, including the most important, user experience (UX).

User Experience

User experience (how website users interact with your website) is one of the biggest factors impacting your website.  

If visitors experience poor UX when visiting your website, Google will penalise it heavily. It is the same for website responsiveness for tablets and mobiles.

User experience relates to any aspect of the website that encourages ease of use and good navigation.  

Websites with good user experience would cover the following:

  • Easy Navigation:
  • Information is useful
  • Create desire
  • Is mobile responsive
  • Accessible for all users (see below)

A great read for those who want more information on user experience is this book:

Don’t Make Me Think by Steve Krug

Fonts and Colours

Fonts and colours are closely linked to user experience, especially accessibility.  

Google will now penalise websites that aren’t accessible for all users. Fonts and colours contribute towards accessibility and therefore need careful consideration.

Fonts should be legible, and when using a font that is harder to read for some visitors, alternatives should be available. For example, many calligraphy fonts can be hard to read.

Colour, and especially color contrast, needs to be thought-out. Font and background colours that blend in can make it impossible for visitors to read the text. Colour blind visitors also need to be considered.

We use this useful tool to help with colour contrast when designing websites.

www.contrastchecker.com

This tool will offer feedback on the colour contrast and what the text will look like in greyscale (for colour blind users).

Web Flow

Web flow relates to how the web page is structured and, as the word suggests, the progression.

The content should be easy to read and have a natural flow to it. Think about a newspaper or magazine article.

A user having to move their eyes all over the web page will find it hard to read and likely to leave, informing Google that the page content or user experience is not that great, resulting in poor SERP (search engine results page) position.

Another element of web flow is the use of header tags (e.g., H1, H2, H3, etc.). These should be used correctly to help Google and accessibility. I’ve outlined below what each header tag should be used for:

H1 – The post or page title

H2 – This is a sub-header(s) that specifies the different paragraphs. Keywords should be used where possible within an H2 tag.

H3 – Can be used for further sub-headers if required.

Other header tags can be used for additional sections (e.g., bullet points).

WordPress Header Tags

Design for browsing

The design of your website should make it easier for users to navigate and browse. Website visitors shouldn’t have to search endlessly for information and will invariably leave the website if they do.

This image shows a website that has a poor design.

Example of poor web design

Check out this link (www.dallamano.co.uk) for an example of a website well designed for browsing.

Most website templates will provide the basis for good website design and layout that will enable users to design a website that is optimised for mobile and tablets and engages with visitors.

This blog follows on from recent series providing hints and tips on WordPress for beginners including:

WordPress: The Complete Beginners Guide

Proven WordPress Themes

Essential & optimal WordPress plugins

We also provide video tutorials on our YouTube channel.

Click here to visit our channel.

Designing your first web page for your website can be an exciting time. If you follow the advice given and use the resources I recommend then I’m sure your website will be successful.

Optimal and essential WordPress Plugins

Optimal and essential WordPress Plugins

WordPress plugins add functionality and additional features to your website. Continuing from our recent blog post "Proven WordPress Themes" we cover the essential WordPress plugins and those that help optimise your website. We will examine the essential WordPress...

read more
Proven WordPress Themes

Proven WordPress Themes

WordPress themes that we approve for your next website build. Following on from our previous blog on building a WordPress website, we look at the types of WordPress themes you can use. There are a variety of website themes that are great for different styles of...

read more
Website Case Study

Website Case Study

Website Case Study: The Chiropractor Having worked with charities and local businesses it's great to see a client's ideas, branding, and requirements come to fruition. The website case study highlights all this and more. In February 2020, I approached a local...

read more

Get our hints and tips on web design, SEO, and WordPress plus our exclusive offers straight to your mailbox every fortnight. Sign up for our newsletter today!

As a subscriber you’ll receive regular hints and tips, the opportunity to see our YouTube videos before public release, and any special prmotions and offers.

We promise our subscribers that your details will not be passed on to any third parties and you can unsubscribe anytime.

Elev8 Web Design Subscribe