Article
The Content Brick Method: A quicker, easier way of creating a website structure
There are a number tried and true methods for creating a website structure. One would be to draw up a diagram using MindMap; starting out with tracing user flow is another proven approach. And yet, mind mapping is not the best tool when designing complex pages: one page may contain several information blocks, and it’s useful to have all them before your eyes 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.
“It’s not enough to create a good site map without detailed content blocks for each of the pages”.
Karl Plaude, author of the Content Brick method
The Content Brick Method
After 18 years in web development, we have managed to come up with a new, simpler way of creating a website structure. It is also engaging and fun, and accessible even for newbies. During just one year, the number of users of this method has tripled.
Traffic growth comparison chart
If that’s not enough to convince you, you can always ask Google, where we’re currently in the top 3 queries based on relevant key-words. You’re also welcome to read the hundreds of reviews on Twitter.
Organic traffic chart for six months
How did we manage that?
We came up with the Content Brick method in 2016. 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.
So, why don’t we start at the beginning, and go over everything in detail.
The story behind Content Brick
Even before Octopus, we knew from years of developing websites that the best way to prototype a website structure is using stickers or some other kind of paper stickers.
It may sound funny, but that’s how we went about prototyping until 2019, before we developed Octopus. Here’s why paper stickers remained our best friend for so long.
So, you start out with a pack of stickers, a marker, and a table top on which to lay out the stickers. One sticker equals one page. It’s worth noting that websites and post-its share one key common feature: the rectangular shape.
Octopus page
A page can never be empty (even though blank pages do exist): there’s always going to be content on it, be it a text block, image, article introduction, list of services, feedback form, etc. Even the modest ‘error 404’ message is content.
That’s why to visualize each individual page, on each post-it we would write up bulleted lists of content blocks. We would call these content bullets ‘bricks’, perhaps because we were building a website. Soon, we were calling them ‘content blocks’ and ‘content bricks’, and the latter stuck.
Content Brick: a logical unit of content on a page
After a few hours’ work, the table would be covered with stickers—the future pages of the website—laid out hierarchically, each sticker containing its page’s list of Content Bricks.
You can say this is visualization taken to the extreme: having all of the Content Bricks right before our eyes allowed us to account for each future page and the links between the pages.
Each sticker represents a page of a website or app; lists are made up of Content Bricks, allowing to account for each future page and the links between the pages
Feel free to stick to stickers and markers if you like, or you can also use Octopus!
‘Content Brick’ offers several simple steps for you to follow when making up a structure for your website or mobile app.
Step 1.
Mainpage 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
- About
- Introduction
- News
- List of products
- Footer
Octopus Page + Content Bricks
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:
"Structure First" sitemap example
Now, having a ready-made structure, we can move on to map out content for each individual page, of course using ‘Content Brick’.
Lifehack
If you don’t want to create a structure from scratch, be it because of time constraints or just laziness, our visual sitemap generator can help! Or you can make use of our site map 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):
Octopus Wireframes
Lifehack
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 (just 21), 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 & Estimate 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 webmastering 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!