How to Design a Web Page Properly

Designing a web page seems simple enough. You just throw a few words on a page and hit publish. Presto, instantly your content is published. Everyone is happy, right? Hmm, that depends on who you ask.

We can often get stuck in this trap of instant publishing and forget to put time and thought into designing a web page that is actually useful to the user and business.

So, how do you design a web page properly that meets user needs as well as balances business goals? I will show you.

Cardinal rule, determine the overall goals of the page. 

Answer 3 simple questions

Ok, the last question is a double header so technically it starts with 4 questions.

  1. What’s the purpose of the page?
  2. What are you trying to achieve? 
  3. Who is the audience and what are their needs? 

If you struggle to answer these questions, don’t be afraid to ask for guidance from your client or subject matter expert (SME). Often the SME can help you uncover the intent of the product you may be designing a web page for and the messages about its value proposition.

If you’re really savvy, you can ask your SME more questions to help you with context and content development. Leverage their knowledge by asking things like, what worked in the past and is there any feedback from user testing?

Once you’ve got a clear idea of the page goals you can get on with the fun stuff. Designing!

If your website has a design system in place, bonus, half the work has already been done for you. You can lean on the design system to add visual support to your content. 

What’s next

1. Draft your copy

Open a word doc and begin writing the narrative of the page. Think about those questions: what is the purpose of the page, what does it need to achieve and what are the user’s needs? Order the content by logical sequence and use the correct heading structure.

Take a look at the Australian Government’s Style Manual for more insights on headings.

2. Begin wireframing 

Grab a pen and paper and sketch out the structure of your page. Doing this part of the process manually can often help the creativity flow more naturally. Refer to the design system to get an idea of page components, layout patterns and general styling ideas. 

You need to marry your copy with visual aids to help tell the narrative and guide your user to where you want them to go.

Once you’re happy with your sketches use tools like Miro to draft lofi wireframes. This is when your design really starts to come to life. At this point you can also do peer reviews to get a sense of whether your designs works, and which one might be the winner.

3. Build the page

Create a new page on your website and ensure it’s in draft while you’re working on it. Pop it in an intuitive place in the information architecture for your user. If you’ve got images on your new page be mindful of selecting supportive imagery that assists the copy, and doesn’t distract. 

Once you’re happy with it, tested the page and links, you’re ready to have it approved and published.

Designing a web page properly and relatively quickly does take practice. It might be a good idea to ask how much time you have before you begin the job so you can plan yourself accordingly.

Ready to optimise your content? Take a read of SEO explained in 5 steps to optimised your new page discoverability.