Building Websites. Pre-Production: Sitemap & Content Architecture

Paweł Durczok on the

After we know what the client wants and needs thanks to the previous steps it’s, time to set up a road map of how the website will be structured. This is done by creating a sitemap and a content architecture plan.


Source: Unsplash, Author: Delfi De La Rua

A sitemap can take many forms – from a simple written list of links, to a complex diagram with content relations, link depth and content density. The type, size and form of a sitemap greatly depends on the size of the projects, with bigger websites needing more complex maps to properly plan their structure.
While sitemaps might seem inconsequential for smaller projects, it’s important to realize that the their structure will determine the types of templates that need to be designed and built.

Will the site use landing pages? How many variations of a content template will there be? Will user flows be simple or complex? Those and other questions will, for the most part, be answered by a sitemap. And that leads us to…


See the Pen Website scroll animation (SCSS + HTML only) by Paweł Durczok (@north-of-rapture) on CodePen.


Content architecture might be an unfamiliar term to many people, as it’s something that’s very often part of the UX design or even the graphic design. Now, regardless of when the phase takes place in the process, its basic function is to determine not only what the content will be and how is going to be presented on the front end, but also how the back-end will be structured for development and in turn for said content population and maintenance.
To put it in simple terms it’s the type and number of different page templates and their structure.

While many people only consider the front-end of a website, it’s crucial to think about the back-end of the CMS as well. A poorly structured back-end means inefficient content editing, problems with publishing and technical issues for the client and the support team. More on the subject will be included in the Content Modelling part of the production phase.

Now I imagine that some people on the production side of things might raise their eyebrows at this point, thinking why do it now and not leave if for the development phase and not waste time?

The answer to this is quite simple – synergy between the design, marketing and development teams, especially in an AGILE environment. By laying out the content architecture everyone is at the same page when moving forward.

With the sitemap and content architecture plan in place it’s the end of the pre-production phase and we’re moving into production.


Table of Contents:

  1. Introduction
  2. Pre-production:
    1. Brief and research
    2. Technical and functional specifications
    3. Sitemap and content architecture
  3. Production:
    1. UX Design and Wireframing
    2. Design Concept
    3. Design Proper
    4. Front End Development
    5. Back End Development and Content Modelling
    6. Optimisation and Testing
    7. Hosting and DNS Propagation
  4. Post-production:
    1. Launching the Website and Training
    2. Post-Launch Support


Did you like this post? If so, follow me on Twitter, Instagram and like my Facebook page for updates about my latest posts and projects.