Understanding and planning out your websites structure can be done in a document that shows how the content is going to be organized and broken down into segments or categories that will help your sites visitor get a clearer understanding of your websites navigation and the way content will be organized.
During the project-analysis stage is where you’ll get a clearer idea of goals, who your target audience will be, site requirements and specific requests. The next step to focus on is the site structure. The document generated could be a complex set of diagrams that show the relationship between these segments or just a basic bulleted list of hierarchical items with main elements and their respective sub elements, in case they’re necessary.
The complexity of this document could be based both on the magnitude of your site’s content and the budget (and/or time) available for this stage. Of course, the more detailed the better, though a simple document could be enough for a small project. A simple organization of elements within bullet points will help you visualize the flow of content and categories.
Clear Navigation for a Better Flow
The beginning of this process usually involves a brief one time sit down (or a couple more) with whomever is in charge of the content development. They could either be: the CEO of the company for which you’re designing the website, a set of editors, copywriters and project managers, or just you, if it’s a personal project.
You should also take into account the documentation generated on the previous stage.
A good reference or starting point is to take a look at similar (or “competitors”) websites. These can provide you with a lot of insight into what the general rule should be according to your specific business or target audience. While you do not need to adhere to what everyone else is doing on their site you can definitely understand and identify options to include on your own website.
Valuable Tools and Resources
You can now start sketching out your structure. As stated before, it doesn’t need to be too fancy to achieve its purpose: serve as a guide for the project’s content. You can use a plain text editor (like notepad) if you want.
For the very beginning, you could even start with pencil and paper. This would be the first draft of a more detailed document. As the structure document is being developed, it is almost certain that more people may need to access it and act as collaborators; so to this document should evolve to meet those needs.
On the other hand, you can also use an app specifically designed to take care of this, or do so at some point after the first drafts. These can help you with real time online collaboration, review proposed changes, make notes and add in other vital elements in order to define a proper navigation structure.
One example of these apps is:
Jump Chart allows you to create your structure, add content, and generate a sitemap, export HTML, and more. The limited free version is for one project only. Limitations include; no more than 2 collaborators and a total of 10 web pages (including sub-categories) this is perfect for small websites that will only have content for core pages like About, Services, Contact, etc.
Then you can proceed to build your diagrams. For this purpose you can use tools like;
With Creatly you can instantly create content flow diagrams that are easily presented over email and in a real time on line collaboration environment. With it’s easy to understand drag and drop feature you can seamlessly maneuver items on your workspace. In the free version you can have 1 user and up to 5 diagrams.
While more advanced and only offering a downloadable version, Cmap Tools is for the more advance user when it comes to organizational structuring. Offering a complete menu for relational charts, concept maps and other types of diagrams Cmap tools works in a very intuitive way; all you have to do is double click on the screen to create a new element. You can also easily export to PDF XML and HTML.
Diagrams show how the content is linked to other sections, and the hierarchy or dependency of pages, child pages, sections and subsections.
Organizing the Flow
The most important thing to take into account when building your structure is the logical organization of your content.
Similar subjects should be grouped together. General topics that enclose other sub topics should be listed with its respective hierarchy. The more general topics will become the top-level pages. Those can contain links to child pages.
Child pages, depending on the extension of content and sections, can have their own children pages, creating a complex structure. At some point, instead of child pages, you can start using sections on the same page, if there isn’t too much content. The names of these sections will become headings (titles) of that page.
The structure of the site doesn’t need to go as far as having the whole content on this document, the outline of pages and sections should be enough. The content, if it doesn’t exist already, should be generated based on this structure.
One of the most useful and directly related sub-products of this stage is the sitemap.
Your site structure is basically your sitemap. Although the structure document may involve a flowchart, diagrams of relationships and other details, while the sitemap will be a clear summary of the hierarchy of pages of your site.
It may also be supported by a diagram, but it can be more easily presented as a list of hierarchical items.
For example, the sitemap of a small design firm could look like the following:
- Logo Design
- Print Services
- Web Development
A navigation menu is a set of elements that will guide your visitor through your site.
The main navigation for a site can and usually is based completely on the site map, but not always. You can leave deeply nested pages out of it. Or pages that are not as relevant as the main theme, even when these are at the same level of hierarchy.
This decision is based on several things, the design, what you want to highlight the most, and common sense. If your site has a lot of pages of content, too many to fit in one navigation menu, then they should be left out.
The Next Steps
Once you’ve sorted out your structure, you could get into sketching and design. And when you’re ready to create your site, you can choose from several options. Wire frames and mockups should be the next step, after you have sorted out the structure. Moving forward you can use tools such a website builder or program a website with HTML with software like Dreamweaver or Notpad++ so that you can bring your structured and wireframe project to life.
Lozbo is a technology enthusiast with front end web design/development experience and is currently writing tech articles for Breezi, a website builder that enables designers to create beautiful sites.