Build your website like a book: structure, data and usefulness

When I look at a website design, I often think about a book. A good book has a title that tells you what it is about, a structure you can follow and ways to find a particular piece of information. The presentation helps you read it. It does not have to compete with the subject on every page.

That is a useful starting point in my work as a senior designer and web developer at a digital marketing agency. Whether I’m working in WordPress or on a Magento shop, I want to understand the information before getting too far into the layout. The website should make that information useful.

Start with what belongs in the book

A website brief often begins with a list of pages: Home, About, Services and Contact. That is a reasonable outline, but it says very little about what someone needs to learn or do. I want to identify the actual subjects, the questions people bring and the evidence that helps them make a decision.

For a service business, that could include who the service is for, how it works, what is involved and how to begin. For a shop, it includes the details someone needs to choose the right product. The page list should come from those needs, rather than every subject being squeezed into an arrangement chosen before we examined the content.

I like to lay out the main topics and group them before making the navigation. Post-it notes are still useful here. It is much easier to move a topic into a better place than to persuade everyone to change a set of polished pages later.

Give every section a clear job

The contents page of a book gives you an overview without including every sentence. Website navigation can do the same. It should offer understandable routes into the subject, with more detailed links where they are useful. A huge menu is not automatically a clear one.

Within a page, headings divide the information into sections someone can scan and revisit. I want each heading to say something useful about the content underneath it. A clever label that makes sense to the business can still be unhelpful to someone meeting it for the first time.

Internal links work like references between chapters. A case study can lead to the relevant service, and a service can point to an example of it in use. The connection should help someone understand the subject or take the next step. It should not feel like a link added simply because another page exists.

Treat repeated information as data

Some content needs a narrative. Some needs a consistent structure. A case study might have a client sector, a service, a date and a result alongside its story. If those details live only in a paragraph, it becomes harder to compare or filter the work, and easier to describe the same thing differently on several pages.

In WordPress, content types, categories and fields can give repeated information a dependable shape. The editor should know what each field means and where its value will appear. A clear content model can support both a useful listing and an individual page without asking someone to maintain duplicate versions.

Magento makes the value of that structure obvious. Product attributes are useful when customers need to compare size, material or another meaningful feature. The same attribute needs the same meaning across the catalogue. A filter cannot help much if the data behind it is inconsistent or the labels do not match the customer’s vocabulary.

Keep the editing experience understandable

A website keeps changing after it leaves the agency. Someone adds a service, updates a product or replaces an old example. I want the structure to make those changes easier, with clear places for the information and a predictable result on the page.

WordPress’s new block editor, introduced at the end of last year, gives editors more flexibility in arranging content. That is interesting, but flexibility still needs a clear structure. Blocks can help someone tell a story; consistent fields and categories still have a job where the same data is used across several views.

I would rather give an editor a small set of useful choices than a page that can be arranged in any possible way. The design needs enough freedom for real content and enough consistency that the next update does not become a redesign.

Make the information do something useful

A book lets you look something up. A website can also let you apply it. Structured information can support comparisons, filters and a useful search, or help someone identify the service that fits their situation. These features depend on the content being organised well underneath.

I think that is an important direction for the web. Businesses have plenty of information, but a visitor benefits when it becomes easier to use. Adding another large photograph or animated section will not fix a catalogue that is difficult to search or a service page that leaves the basic questions unanswered.

It also helps the business maintain a clearer picture of what it publishes. One well-defined piece of information can appear where it is needed. Updating a product detail should not mean hunting through several manually written summaries that may contradict each other.

Designing around the reading and the task

I still care about the visual design. Type, spacing and hierarchy help someone read, compare and decide. The book analogy is a reminder to give those choices a purpose. A quieter page can make the important detail easier to see, and a dense table can be useful when comparison is the task.

Before calling a website finished, I try to follow it as someone unfamiliar with the business. Can I find the right section? Do I understand the terms? Is the information complete enough to make a decision? Can I return to something I read earlier?

For me, the future of a useful website is closely tied to its data and structure. A good-looking cover can bring someone in, but the chapters, references and information are what make the visit worthwhile. I want to design and build both with the same care.

More about me