Content First Web Design
Perhaps the most underestimated component of a website is its content.
Like print, radio, and television before it, the internet is a unique information-sharing technology with its own advantages and challenges.
Yet many web studios inadvertently teach their clients that the presentation matters a lot, and what is being presented matters far less.
I believe a content first web design methodology is more effective than a container first design methodology.
Matching the type, format, voice, and tone of content to the design structure supporting it is what takes a website from merely functional to exceptional.
While many clients (and even many designers) speak as though a web designer’s job is to design the container, our job is actually to design the content.
Going back to our list of broadcasting technologies, simply imagine the following people making these statements.
- Book Publisher: “Just go ahead and design the book cover, we’ll worry about what goes inside later.”
- Radio Producer: “Go ahead and set up the bumper music and sound effects, we’ll worry about the voice-over script later.”
- TV Producer: “Just go ahead and build the set for the show. We’ll worry about what the program is about and who’s in the cast later.”
I hope you see where I’m going with this.
What Is This Content You Speak Of?
Content on the web can mean a whole range of things. Common forms of content are articles or text, images, video, audio, PDFs and other documents, or anything other form of media that can be shared or accessed on the web.
p>There are three major ingredients in an effective website: visual layout, web development, and content management. While most clients and agencies focus the bulk of their attention on design and code, the most important element, the content, is often an afterthought. This practice needs to end.
Visual imagery and modern design styles can be very pleasing, but without a focused message, they are sound and fury signifying nothing.
If visual design is the sizzle, content is the steak. Content driven web design will always outperform visual driven design. Users come to a site for information or content, not just the presentation.
How Content Is Overlooked
Web design is often seen as a process of beautification. Designers themselves often reinforce this idea. Aesthetics are part of design, but the imagery on a website must persuade users to take particular actions. Design must have defined goals.
In a typical design process, the client and design team start by focusing on the container, and then try to figure out what content they are going to fit into it. Unfortunately, planning the goals that users are intended to take gets postponed until the tail end of the process.
My design process starts with establishing the goals of the website. Why does the site exist? What is the goal for the site? What actions are users intended to take when they come to the site?
The content needs to support the goals of the site. Each image and sentence should be in place to lead users to completing those goals. Having content for the site at the beginning of the project ensures that effective design can occur.
Why Content Is More Important Than Ever
The rise of mobile is another reason that content driven web design must take place. Mobile-friendly design forces the designer to decide what elements are the most important. Screen space on mobile devices is limited. Taking inventory of and prioritizing the site content has to take place at the beginning of the design process, not at the end, so these decisions can be made right away.
Where Visual First Design Fails
Seeing what content is going to be used on a site, and how clients are going to use it on a daily basis is also important. Crafting visual design before having real content in place can lead to unnecessary troubleshooting later.
Example #1. Seeing the real content will often lead to design decisions that would not be made otherwise. Keeping a uniform tone and voice throughout the site requires real content for effective design. If visual design is made before the content is supplied, the wrong decisions for the project can be made. The designer’s craft is leading users through the content, not the container.
Example #2. Many times, visual design in Photoshop uses placeholder content with optimized text and photos. In a Photoshop mockup, nothing is too big or too small—it is all just right.
However, clients will not always create content in ways that you anticipate. Layouts can break when page titles are extremely long — or photos are too small or large. Working with real content is essential for creating bulletproof design.
A More Focused Design Process
Content is the main attraction of your website. Optimal design considers the message, the tone, and voice and builds a structure around that. Everything from the choice of fonts, the imagery, color scheme, and page layout is chosen because they best support that central content and those brand messages.
A solid first step in the web design process is to have some of the content ready to go. Before worrying about the packaging, instead start by focusing on what you are trying to say, and who you are trying to say it to. What do you believe in, what do you do? Why does your company exist?
If you have already constructed viable pieces of information that help answer these questions, it provides a much clearer idea of what the website should look and feel like. You can have a target audience in mind, but they won’t know about you at first. How do you reach them? Your audience comes from the content you create, not the other way around. Content might be the most neglected piece of many websites, but the only part that people are showing up for.
Sites like Craigslist and Reddit are not the prettiest, but are still two of the biggest sites in the world because the content inside is valuable to other people. All social networks are built on sharing content, but take different design approaches depending on the type of content they feature. (Compare Pinterest, Instagram, Twitter, Facebook, and YouTube). Article sites like Huffington Post, Medium, Yahoo, and Bleacher Report draw millions of views daily because they focus on content first. Knowing what type of content is going to be featured, and knowing what to expect from future content enables the most appropriate design plan to emerge.
Troubleshooting Content First Design
It is nearly impossible to get an idea of design constraints and presentation style without having real content. Proposed layouts can be rendered useless if we discover our visual ideas don’t match the way the content will be created and used
.
A good designer gathers clues about design direction from the style of the content.
I observe what the real content looks like and try to find answers to questions. Is future content going to be mostly written, photographic, video, audio, images, or a combination of the above?
Is there going to be enough content to build what we need? Is there so much content that we split the pages up? How can we improve the storytelling on each page?
Designing without content or just lorem ipsum placeholder text is tough and oftentimes mismatched. Designing for edge cases is often necessary. What if the titles are twenty words long? What if the blog posts are one sentence long? What is the optimal size for photos in a slider? What happens if clients cut and paste different formats from Microsoft Word and hit Publish?
These are real situations that require early troubleshooting. Knowing everything possible about how my clients will create content helps me design for their needs.
The Client’s Role in Content Creation
I like clients who have already prepared some content before they contact me. It shows me they are fully invested in designing a great website, and it isn’t just an afterthought. It shows me that they have thought long and hard about their brand and what they want to say. It tells me their business is so important to them that they spend time writing down their thoughts and insights about it. If a client can use their content to reach and teach me, I know they’ll be highly successful reaching their customers with that content as well.
Humans are built to love stories. Web content is just storytelling for the modern era. The best content can inspire, educate, motivate, and enlighten people. Great web design seeks to frame that content in the right manner, pushing those stories to the forefront of consciousness, and becoming part of the overall experience.
Conclusion
Although many designers create generic containers for content, very few build from the content out. The designer must effectively lead users to the desired goals, and show users what they want them to see. Knowing what content is going into the site allows the designer to organize site architecture, page hierarchy, navigation, and page information. The designer’s job is to lead users to take action, and give them a specific impression about the company or brand when they visit the website.
