Inspiration

Look at a range of sites that perform a similar role. What doesn’t work, is distracting or is frustrating? What content do you see first? How are menus and pages organised? How many clicks to find things? How far did you need to scroll? How much text? How many images?

Stages

  1. Lists and brief notes
  2. Site map (flowchart)
  3. Content planning and gathering (text and images)

Lists and brief notes

Your visitor’s experience depends on your site’s design anticipating their needs and then providing solutions as quickly as possible. To do this focus on information and structure so you can create a logical skeleton for the site. You will need to define your visitors, their goals, how your content can help and where they can find it.

Your visitors: Who are the site’s users? Try to identify a few groups.
Their goals: What are each group of users looking for? Define their primary goal or tasks.
Your content: Identify the most immediate, crucial information each group need for their goal. What terms can you expect them to recognise, how should you signpost things. Define the primary and secondary content.

Example user ‘Contactor’: Wants to contact the service. Looking for referral in a hurry, hasn’t decided how they will make contact yet.
Primary goal: Contact the service
Primary content: Service Address, phone, email
Secondary content: Open hours, Social Media.

Site map (flowchart)

Organise your primary and secondary content into groups and hierarchies. This is called Informational organisation or information architecture. This hierarchy can be sketched out in a flowchart and can define not only the order of content on a page but also the order and titles of pages across the site’s menu.

Example flowchart for site map planning

You can sketch out on scrap paper or use a diagramming app. The example above was made in Microsoft OneNote but you could also use any number of free online flowchart apps.

Common example pages:

Home | Policy |News | Philosophy | Programs | Enrol | Media | About | Staff | Contact | Gallery

Wireframe

The process of taking these lists and designing the layout and behaviour of the whole site is a deep design field in its own right. Button and menu locations and all the main areas or ‘containers’ on the screen are mapped out. Contents and links of sections like the footer, the header and side bars are defined. Even decisions about how the website adapts to small screens are decided. This process results in a blueprint of diagrams known as a Wireframe design document that developers and coders use to build the site.

WordPress separates this complex design step into a modular feature called ‘Themes’ that are predesigned by web developers. You can actually build your site’s structure and content to completion in WordPress without the wireframe step. You can then select or swap the theme from the WordPress theme store.

You can browse WordPress themes here: https://wordpress.org/themes/

Content planning and gathering (text and images)

Once you have the rough structure and hierarchy of your website you can start detailing it out with content. The content refers to the text copy, logos, images, PDFs and other files that you will be populating your site with. In the same way your site’s users have goals, you should identify the goal for each section of content. Write your content as if each page was the visitor’s first, don’t assume they have arrived via the front door.

WordPress can help you build the site organically with options to revise or adjust things easily but the more time you or your colleagues can devote to drafting up the contents of each page, sourcing and selecting images etc. the less time you will need to spend reediting.

Planning links to get you started

Web design guidance

 https://wet-boew.github.io/wet-boew-legacy/v3.1/demos/guide-design/format-en.html

https://xd.adobe.com/ideas/principles/web-design/web-page-design/

https://www.w3schools.com/html/html_formatting.asp

Understanding what the web is built of

https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards

Some browser-based flowchart apps

https://www.lucidchart.com

https://www.gliffy.com