Skip to main content

Content, the bricks and mortar; Wireframes, the Blueprints

Listen to this Design Journal entry:

Why has content to be defined first? How does content affect the design of a website design for example? If anyone has ever been involved in a website design or re-design project, one has probably asked these questions. The Industry best-practice recommends having all content prior to completing the design & development stages of a website. To better understand why this is of utter importance, it’s worth examining how to define content.

The meaning of Content

So what exactly IS content? This might seem like an easy answer, but content is all but encompassing. Content comprises nearly everything on a website. Examples of content are: text, images, videos, menu items, calls to action, and forms etc. Actually, it might be easier, in some cases, to explain what is not considered content on a website. It may seem overwhelming to consider so many pieces of content on a website design project. However, it is important to remember that these are all necessary elements for making the final product. With those things in consideration, it makes sense to start with the most essential pieces and work our way out from there.

Content, the bricks and mortar; Wireframes, the Blueprints

As an exemplified case would be as if an editorial designer starts laying out a book before the book’s gets written. Or if an architect asks to build a building before giving the blueprints to the builders. For both of these professions, form has to follow function, and for most websites, function is achieved via content first.

Another way to think of content is that it forms the brick and mortar for much of the site. Content shapes and modifies the building blocks – image and structure – that will join together to create the final structure. Content is also the focal point of most sections on a website. In fact, it is often the main reason why users visit a website. Before we begin any design or development on a project, we normally have to complete the discovery and definition stages. On a higher level, the discovery focuses on an understanding of the users, & the problems that the website has to solve. Once one has a clear picture of what is setting out to accomplish, it’s imperative to begin to further define what it’s going to be built.


Content is a pivotal element all the way through the definition stage.

In definition, we begin to create the foundations for a website. Some of the crucial structural items that result from the definition stage are the sitemap and wireframes. These are largely supported by content and are core pieces – Like the beams in a building – of a project’s foundation. A sitemap is a listing of every page on the site. It serves as more of an inventory and a site-wide organization structure. Next, the wireframes continue to build from the underlying structure in the sitemap. Wireframes can be compared to blueprints for a building or a house. This it’s where we have to outline the different page layouts, overall content hierarchy, and general flow within pages and across the site. These blueprints are tone-less to highlight how content is displayed within a page. Establishing and refining these patterns guarantees that the users are able to navigate through the site and find what they are looking for easily. Content is a key component that supports way-finding. It is also vital in establishing the hierarchy within a page. Hierarchy helps to balance the page and guide the user through the page content, ultimately guiding them towards accomplishing their goals. The difference between one sentence of text and five paragraphs of text can drastically alter how a page layout will look. This will also impact hierarchy and organization on a page. Noting this impact, it is also important to understand that this can apply to all types of content, not just text.


An ounce of prevention is worth a pound of cure

It is clear how content can change layout, design and organization of a site. Moreover, content can also affect the structure that will be built to support page layout and functionality. Wireframes also serve a dual purpose, they are also the blueprints that designers or developers will have to use to scope and construct the initial scaffolding of a site. Having content ready before the design stage means that it has been reviewed and accounted for all content of a site. This also means that it is possible to craft the ideal solution for content display and organization. Enabling to design the ideal UX for interacting with content throughout the site.

It is much easier to review, interpret, and understand the design intent with final content in a prototype than without it.

Let me help you create

a metamorphic identity for your brand.