How to develop and organize the structure of a website?
In the previous article we left off at a very good point. The client has accepted our offer -inclusive of our estimate for the project -signed the contract and given us the green light to start working on the project.
The next step is a delicate one, that is fundamental for the project. We have to create a concept and develop the structure of the website.
The Web Concept Designer is responsible for managing this aspect, and -as we saw in a previous article – he or she is responsible for creating a structured body to the final project, beginning with the initial idea, the strategies of communication and the business objectives. By coordinating the project using syntax and semantics used on the Internet, the Web Concept Designer is in charge of defining the guidelines for the architecture of the information present in the website and he or she is also responsible for the graphic and strategic settings of the contents.
Defining the initial Concept
This process will be present throughout the entire project: from the time when the navigation tree is designed to the productive and updating phase, thus guaranteeing coherency in the overall message we want to communicate.
After having looked at the contents of the Brief we created during our preliminary meetings with the client, it will be necessary to conceptualize the business objectives of the project and to define the communications strategy that we will employ to reach such objectives.
Let’s continue by looking at a practical example: your client is the director of a nursery who would like to have his school represented through a website.
Looking at the brief is helpful: the main objective of your client is to be found easily by potential new parents and to provide updates to the parents of enrolled children on the various programs (school activities, cafeteria, etc..) The target audience is obviously families in this case.
Furthermore, now that you know what the specific needs of your client and target audience are, you can focus on the graphic and conceptual elements which will then be worked on by a graphic designer. Inoltre, ora che conosci le esigenze del tuo cliente e il suo target, puoi concentrarti sugli elementi grafici e concettuali su cui, in un secondo tempo, dovrà lavorare il grafico.
Choose the base colors that will be used in the project. In this case, it will be best to select a range of colors that are both vivid and fit for depicting a child’s own world. The logo of the nursery is colored in red, so you could go with red or use orange or yellow.
The images chosen will have to evoke a mood of playfulness and joy. We will have to select images that are appropriate for this purpose: children playing and laughing, which convey a sense of peace and security.
We will have to convey to others a sense of trust in our website, a sense of trust that is both serious and reliable while being at the same time both joyful and lively -essential characteristics of a place that is connected to young children.
Finally, an analysis of the biggest competitors and their respective websites can be a useful practice to learn about their communication strategies, possibly picking up a thing or two that can we can use in our project.
Afterwards, we will delineate the structure of a website and the architecture of the information that will be included.
What is the structure of a website?
The structure of a website refers to the hierarchy that defines the various hyperlinks in the various pages, starting from the main page.
The contents are structured on several navigation levels and the overall structure can be of varying dimensions.
What is the architecture of information?
The architecture of information plays a fundamental role in every web application: it allows to organize logically and semantically data and other contents that are to be used. It also makes the digital system easily accessible and usable by all final users.
If you want to go into more detail on the subject of the architecture of information, you should read the excellent guide created by Emanuela Gugnelli for html.it.
What is the difference between structure and architecture of information?
The structure of a website refers to the tree-like hierarchy made up of many hyperlinks that are present and start from the main page. The architecture of information allows instead to form connections between two or more pieces of information that are found on different branches on the hierarchy tree so that their relative distances are shortened.
Returning to our practical example
The web concept designer needs to be familiar with all the browsing standards, in order to make a website that is as user-friendly and as accessible as it can be to any visitor.
Basically, the purpose of browsing is:
- so that users can easily find the contents they are looking for.
- to allow users movement from one page to another in a way that is fast and logical.
- to let users know which section of the site they are currently in.
In our current project, based on the contents that will be added to the site, the resulting wireframe will look like this:
From the main page (home), users will be able to access directly the three basic sections of the site: pages “nursery”, “activities”, and “contacts”.
As you can see, the “nursery” page includes within itself two further pages: “structure” and “the staff”. Similarly, the “activities” page includes three other pages, which are “didactic activities”, “cafeteria”, and “entertainment”. This subdivision allows users to easily find what they are looking for.
It’s time to create the wireframe
Once the structure of the website and the architecture of information have been defined, we can move onto creating a Wireframe for a client which graphically defines the structure of a website.
It is easy to delineate the structure of a website if it will be used as a ‘display’ website that has only about 4/5 pages. However, as more and more pages and content are added, this part of the project acquires more and more importance.
With this article we conclude the “theoretical” part of our project. Over the years, I’ve come to realize that this aspect of site building goes largely unnoticed by beginners, so I hope these four lessons will be able to convey its fundamental importance.
As you can see in the image below, as the client has approved the wireframe, we have completed 23% of our project.
At this point we can continue by looking at the next two steps: the first is about how to develop the content -something which this guide will not cover at the moment. The second is designing a graphic draft, which we will cover in the next article.
The other articles in this guide:
- How to understand the client’s needs on the first encounter?
- How to calculate costs and delivery time of a web project?
- How to develop and organize the structure of a website?
- How to find inspiration and design the layout of a website?
- How to present the graphic draft to the client?
- How to make the internal pages after the draft’s approval?
- How to export a psd into xhtml and css without losing your soul? (part1) (part 2)
- How to index a website without being SEO experts? (part 1) (part 2)
- How to make sure of not having committed errors before launching the website online?
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »