The Content Brick Method.

There are a number tried and true methods for creating a website structure. One approach is to draw a diagram using a mind map; another effective strategy is to start by tracing the user flow. However, mind mapping may not be the ideal tool for designing complex pages: a single page can contain multiple information blocks, and it’s helpful to have all of them visible when developing a project.

A bit of research and statistics

A brief analysis of the market shows that around 80% of users utilize mind mapping for creating website structure. This method allows to quickly set up a structure, link internal pages with one another, and even color code blocks and sections.

This leaves a significant portion of users who turn to the alternative method—specialized products created for site prototyping and focusing on visualizing site maps.
‍
These tools usually do not allow to display content blocks within pages. The best they can offer is icons that can be used to organize content, but cannot provide a sufficient level of detail in order to create a visually accessible, informative site map.

The Content Brick Method

After over two decades in web development, we have managed to come up with a simpler way of creating a website structure. It has helped us make the process of prototyping website structures much quicker and simpler thanks to its ability to create and organize blocks of content for each individual page and later combine them within the final structural framework.

The story behind Content Brick

Even before Octopus, from over two decades of website development, we’ve learned that the best way to prototype a website structure is by using stickers or other types of paper labels.
‍
It may sound funny, but that’s how we approached prototyping until 2019, before we developed Octopus. Here’s why paper stickers remained our go-to tool for so long.

To start, you take a pack of stickers, a marker, and a tabletop to lay out the stickers. Each sticker represents one page. Notably, websites and Post-it notes share a key common feature: their rectangular shape.

A page is never truly empty (even if blank pages technically exist); there will always be some form of content on it—whether it’s a text block, an image, an article introduction, a list of services, a feedback form, or even a simple ‘error 404’ message. All of it counts as content.

To visualize each individual page, we’d write bulleted lists of content blocks on each Post-it. We started calling these content bullets ‘bricks’—perhaps because we were building a website. Soon, the term evolved into ‘content blocks’ and ‘content bricks,’ with the latter name sticking.

‍

After a few hours of work, the table would be covered with stickers—the future pages of the website—arranged hierarchically, each sticker listing its page’s Content Bricks.

Each sticker represents a page of the website or app, with lists of Content Bricks that allow us to account for every future page and the links between them.

This was visualization taken to the extreme: having all the Content Bricks laid out before our eyes allowed us to account for each future page and the connections between them.

‘Content Brick’ offers several simple steps for you to follow when making up a structure for your website or mobile app.

Step1 //
Main page First vs Structure First

The first thing that you need to get out of the way is decide which approach to structure will work best for you: Mainpage First or Structure First.

Mainpage First

Just as the name suggests, this approach implies using the main page as the starting point for your structure. First of all, create your main page and use Content Brick to map out future content of the website. Here’s an example of what may be on the main page:

• Header
• Our story
• Meet the team
• How we work
• Footer

Now you have a great starting point to decide what the next pages should be about. All that’s left is to describe them using the same method and decide on the hierarchy of the pages.

Structure First

This is the approach that we use most of the time. It starts with coming up with all of the key pages at once and then concentrating on each one individually. Say we need to create a corporate website. After a quick research of relevant websites you can decide on a structure that looks suitable:

Now, having a ready-made structure, we can move on to map out content for each individual page, of course using ‘Content Brick’.

P.S. If you don’t want to create a structure from scratch,  because of time constraints, our visual sitemap generator can help! Or you can make use of our sitemap examples for a ready-made solution.

Step 2 //
Visualize content blocks

As we have established, each page in a website is made up of blocks of content. But what is the best way to visualize the future layout of the pages and break each of them down into graphical blocks? Here’s a quick example.
‍
Imagine a title page that’s made of the following Content Bricks:

• Header
• Sign Up
• About
• Introduction
• Features
• Video
• Images
• Footer

Looks clear enough, but even a rudimentary graphic representation will immediately make the image in your mind so much more vivid. This can help everyone involved in the development visualize the content blocks for each page of the website.
‍
Here’s what happens if we add a bit of graphics (wireframes):

You don’t need to spend too much time thinking which wireframe goes to which content block, we’ve taken care of that for you. There aren’t too many, but they’re the most widely used. All you need to do is pick the right one for you.

What is a low fidelity wireframe?

A low fidelity wireframe is the simplest and fastest visual representation of a future web page or interface. It remotely represents how and what information will be displayed on the screen. It’s similar to a paper sketch.

Step 3 //
Bird’s Eye View of your web project

We’ve talked about how you can use the ‘Content Brick’ method to create your websites. But it has another useful advantage: Bird’s eye view.

When you have the entire website structure laid out in front of you, along with detailed description of each page’s content blocks, you can literally see the entire website and appreciate it’s scope.
‍
No mind mapping tool will offer this advantage. Bird’s eye view can be helpful when determining the number of work hours needed to develop the project, and you can quickly make separate estimates for each stage (design, frontend, development, testing, etc). Or you can use it to brief your copywriter, who can then start working on the text content, since they would already have all the information they need.

‍

Conclusion

‘Content Brick’ is a simple but effective way of creating a website structure and mapping out content. It’s main advantage is that you no longer need to be a webmaster guru to create a functional, working website.
‍
Don’t think however that it eliminates all of your work! The structure will not build itself. Maybe someday, but not quite yet!