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.

7 Tips to make your website look professional

7 Tips to make your website look professional

Whether it’s WordPress, Wix, GoDaddy or SquareSpace there are a variety of options on offer for charities and small businesses when building a website. With so many templates on offer from these platforms how do you make your website stand out and look professional?...

read more
Think of your website like a shopping store

Think of your website like a shopping store

Following on from last week’s blog, 7 Ways to Make your Website look professional this week’s blog focuses on what your website and, more importantly, your home page says about you and your business. I often like to refer to how a website's home page, how it looks and...

read more
Now’s the time to improve your website’s SEO

Now’s the time to improve your website’s SEO

SEO this year. With the COVID-19 outbreak, many small businesses and charities now have the opportunity to work ON the business rather than in it.   When the lockdown ceases, and business starts to get back to normal, will your customers be able to find you easily on...

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