How is content defined? How does content affect the design of a website? If you’ve ever been involved in a website design project, you’ve probably asked these questions. Industry best practice recommends having content prior to completing the design and development stages of a website. To better understand why this is so important, it’s worth examining how to define content.
What is Content?
So what exactly is content? This might seem like a simple answer, but content is all encompassing. Content comprises nearly everything on a website. Some common examples of content are: text, images, videos, error messages, menu items, calls to action, and form elements. In some cases, it might be easier to summarize what is not considered content on a site. 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 constructing the final product. With that in mind, it makes sense to start with the most essential pieces at the core of the project and work our way out from there.
Content, the Building Material; Wireframes, the Blueprint
Another way to think of content is that it forms the building material for much of the site. Content shapes the building blocks 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. To dive a little bit deeper, it will be helpful to review part of our design process. Before we begin any design or development on a project, we will complete the discovery and definition stages. On a high level, discovery focuses on understanding our client’s business, their users, and the problems that the website needs to solve. Once we have a clear picture of what we are setting out to accomplish, we begin to further define what we will build. Content is a pivotal element throughout the definition stage.
In definition, we begin to create the foundation for the website. Some of the crucial structural items that result from the definition stage are the sitemap and wireframes. These deliverables are largely supported by content and are core pieces of the project’s foundation. The sitemap is a listing of every page on the site. Rather than detailing the site’s navigation structure, 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 house. This where we outline the different page layouts, overall content hierarchy, and general wayfinding within pages and across the site. These blueprints are toneless to highlight how content is displayed within a page. Establishing and refining these wayfinding patterns guarantees that the users are able to navigate through the site and find what they are seeking. Content is a key component that supports wayfinding. It is also vital in establishing 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.
Measure Twice, Cut Once
It is clear how content can change layout and organization. Additionally, content can also affect the structure that will be built to support page layout and functionality. Wireframes serve a dual purpose, they are also the blueprints that developers will use to scope and construct the initial scaffolding of a site. One way to summarize the importance of content and wireframes is that combined, they can serve as an excellent example of “measure twice and cut once”. Having content ready before the design stage means that we have reviewed and accounted for all content on the site. This also means that we are able to craft the ideal solution for content display and organization. We are able to design the ideal user experience 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. From here we can clearly establish the site vision and create a guide for how to execute that vision in the final form of the completed website.
