In this post we will look at how to make sense of the chaos. In other words, how to organise the content of our website. We will use techniques to organise information in a logical way.
¿What makes a website structure good? Do you know how to create a user-friendly design for your visitors?
We will answer these questions with examples and useful methods available to everyone.
0. Content and structure.
Do we know what our users are looking for? Answering this question, we’ll organize the content. We have to put ourselves in their shoes, imagine what we would look for if we were the user and we were in their situation.
Start by making.. a diagram
Before you start writing, think of the content as blocks of content. This way, you will have a global vision of what you want to achieve.
Don’t start writing without rhyme or reason. Keep in mind that people don’t read a website, people scan the content. It doesn’t help to fill the space with words that will only add visual noise.
To start you need to be clear about what you want your website and what function it will have within your business strategy.
”Users want to achieve their goal with as little effort as possible.<br>What we see when we look at a web page depends on what we have in our minds, even if it is only a fraction of what is on the page. We see what we want to see.
Steve Krug.No me hagas pensar.Ed. Anaya Multimedia 2014
”We are taught to solve problems by following standard procedures. This is not valid for a constantly changing digital and creative world. We need out of the box tools that help us to think and enhance creativity.
Cris Busquets.Diseño desde Marte. Manual de diseño de producto digital.Ed. Jardin de monos.
Organize your steps
1. What is a user looking for when visiting a site like yours? Do your research to design an effective solution.
2. Design a skeleton with important information. Design is solving problems in a certain way.
3. Aesthetics come later. Before you think about fonts and colors, you have to have the content well structured. If the skeleton is not well formed, when we try to browsing the web, the user will not find the way easily and will be frustrated leaving the web.
”If I had an hour to solve a problem, I would spend fifty minutes thinking about the problem and five minutes thinking about solutions.
Albert Einstein.
Information architecture.
The art of organizing complex information as clearly and logically as possible.
Through careful planning of the structure, content and navigation of the web, the user experience (UX) is improved, which means that its usability is facilitated and SEO is improved.
A website needs to organise its content based on a flexible structure that takes into account the growth and evolution of the site. To do this, information needs to be classified, using categories for broader topics and tags for more specific content.
For example, as categories on a website that publishes media reviews, we could have: Books, Cinema, Series…
As tags, however, we would have more specific terms, for example: Essay, Poetry, Science fiction, Zombies…
It’s like to take stock of the fundamental content blocks on the web. It is important to group as many categories as possible, it is not convenient to have too many. This classification of content into categories and tags will allow you to find keywords and organize information.
You can start by creating a mind map with your initial ideas on how you’d like to organize your web content.
If you need to present this diagram at a meeting, a quick and simple online tool is Miro.
Information architecture.
Case studies
Essential points to structure information.
-
Identify the needs of users.
-
Establish a hierarchy of contents by levels and group them into categories with logic.
-
Create a navigation structure that facilitates content localization and understanding.
1. The user’s needs.
-
Identify the needs of users.
1. Case study:
Renewal of the El Gandulillo website, a rural accommodation.
The main problem with the previous website was the lack of relevant content for the user, such as a tariff page.
On the other hand, the target client of El Gandulillo, a traditional rural house, responded to an active tourist profile, a lover of nature and outdoor activities.
The important information for the user, needed a section on the natural environment of the cottage. We also created links to this content, with various natural routes. Even with Wikiloc, a website specialising in routes and trails.
Outline of contents - Level 1 - Flowchart.
We use the term “mobile first” to mean that we first design and organise the placement of content blocks as they would appear on mobile devices. The design for other devices is then developed.
In the tree diagram below, the 1st level of content, with the most important information, is represented.
- “Casa rural en Castril”,contains the keywords chosen for the SEO of this page.
Interactive statements are accessible from the home page, with click-through to relevant content.
2. Information categories.
-
Establish a hierarchy of contents by levels and group them into categories with logic.
2. Case study:
Web created for the School of Arts and Letters of Altea.
Outline of contents - Level 1 - Wireframes.
After identifying the users’ needs and outlining the content, we proceed to prototyping. This involves visually organizing the content in a schematic way using wireframes.
My favourite tool to make them is still the whiteboard, because it allows me to observe all the content from a distance and it is very easy to modify. In this case, to organise the content, it is very useful because it allows me to think about the object or tool to be used when creating the web design.
The School of Arts and Letters website’s homepage divides the screen into four coloured buttons, each corresponding to a category of the website. Clicking on a button redirects the user to another page. This design ensures easy navigation and clear identification of each page.
- The School.
- Visual arts workshop, finally named Drawing and Painting.
- Written arts workshop, renamed Writing.
- Publishing services.
Although ideas about the layout and design of the page can already be sketched out, wireframes essentially allow us to explore options for arranging the content visually and what options we can develop for each block.
Outline of contents - Level 1 - Wireframes.
Otra herramienta (en este caso digital) que se usa en el desarrollo de Wireframes es Figma, Lunacy o Sketch. Estos programas de prototipado los he utilizado cuando estoy trabajando en equipo con un programador y necesitamos trabajar en el mismo prototipo.
Los wireframes ponen el foco en las soluciones que se pueden proponer para organizar la información y en la forma en la que podemos presentarla.
En este ejemplo, para la web de Prodinámica podología, teníamos la limitación de la estructura web. Esta consta solo de una única página, lo que se conoce como One Page.
Una estructura de estas características dirige al usuario a las secciones de la página inicial, desde los botones del menú principal:
- Prodinámica
- Servicios
- Blog
- Contacto
Sin embargo, para organizar el contenido, se pensó en crear índices de anclaje para la sección Servicios y el Blog.
En la imagen a continuación podemos ver los siguientes elementos interactivos:
- NAVEGACIÓN PRINCIPAL
- ÍNDICE DE SERVICIOS
- BOTONES DE POSTS RELACIONADOS

En este ejemplo, se establece una navegación en tres niveles:
- Menú superior con la navegación principal
- Índice de los servicios, que invitan al usuario a desplazarse al servicio clínico para el que necesita información.
- Al final de cada servicio, se añade un botón hacia un articulo del Blog, relacionado con el servicio médico.
Conclusión:
Una página web es un producto digital interactivo y como tal hay que pensar primero en el usuario para crear una estructura idónea para su uso. Una vez creado este esqueleto, podremos darle un aspecto a la web, con las paletas cromáticas y la tipografía apropiada, pero eso será el contenido de nuestro siguiente post: Diseñar una página web con WordPress.
- No me hagas pensar. Steve Krug. Ed. Anaya multimedia.
- Diseño desde Marte. Manual de diseño de producto digital. Cris Busquets. Ed. Jardín de monos.