Design and Content Marketing

Content is King and Design is Queen: Planning the Perfect Wedding

When it comes to web development, content planning is an integral aspect of the process, but it’s unfortunately pushed aside like something unimportant, almost as if it were the proverbial red-headed stepchild of the entire process. Far too many web designers think that the design takes precedence over everything else, and that’s a huge mistake. Huge!

Content planning—sometimes also referred to as information architecture—is the hierarchy and organization of the structure, layout and navigation of a website. It involves relevant context and the user experience—which is why it’s far too vital to be left as a mere afterthought.

Any successful website will always be a seamless merger of content and design. Yes, the website should look nice…but it also has to be laid out in a way that pleases the user flow. Now, we show you how to plan the ideal wedding between content and design, so that your website not only looks great, but also has all the relevant information structured in a logical way to make it super-easy for your site visitors.

Card Sorting

Card sorting is a technique to help you organize your content, in a visual and palpable way, based on hierarchy. You’ll need a bunch of index cards (multi-colored ones help a lot, just so you can tell them apart immediately); on these, you’ll write the various pages of your website. This valuable practice ensures two things:

  1. The content of the website is organized where it can be found
  2.  Said content is both grouped and named appropriately

This brainstorming process is one of the very first steps in content planning that should be highly encouraged by everyone involved in a web-development project. It starts the ball rolling on where you, your team and your client believes the different pages on the website should go. Of course, since content planning is a completely fluid and dynamic process, you shouldn’t get attached to your card sorting results right away.

Content Inventories

Content inventories are ideal at maximizing efficiency in the web-development process because they allow you to summarize every page on the website succinctly, thereby letting you skip over unnecessary pages. This process lets you understand both the breadth and the purpose of the site and pages, respectively.

You can create a content inventory quite efficiently by simply doing up a spreadsheet of all the different site pages and their matching URLs. To make the summaries meaningful, make sure that you add pithy sentences that can be grasped immediately. To add even greater meaning, you can include page notes for any additional information. Content inventories are excellent at helping you determine what goes where. As a result, it’ll be easy to determine which pages (if any) are totally unnecessary and should be eliminated from the content plan.

Interestingly, the real benefit of a content inventory is more suited to a site redesign as opposed to building a whole new website from scratch.


Sometimes, nothing quite comes close to an old-school approach to doing things, and using paper or sketchboards really illustrates this to a tee. The ultimate in free-form, paper or sketchboards lets you jot down ideas instantly, and you can be as creative as you wish.

At the same time, there are immediate disadvantages to using paper, too. For one, paper isn’t really helpful past the really early stages of your web-development project since everything tends to move to the digital realm pretty quickly. In addition, paper is easy to lose, and sketchboards aren’t really portable (not in an easy way)!

That’s why it’s best to reserve your paper or sketchboards for the very beginning of a project, such as when you’re in a brainstorming meeting and need to capture your ideas immediately and explore them further. Beyond that, paper or sketchboards isn’t really useful, so don’t get too attached to it during the process.

Diagrams of Sitemaps

The old sitemap is still an incredibly helpful and useful part of information architecture—even though it’s really underappreciated these days. The good thing about sitemaps is that they offer a visual explanation while being very easy to update and change as the need arises.

There are various approaches to visually demonstrating a sitemap, but I recommend the diagram since a diagram is an efficient and clear-cut way to show hierarchy on a website. Not only does the sitemap display the relationships between pages, but it also offers a perspective on whether the website is much too shallow or deep.

It may be tempting to do more with your sitemap, but that’s where you have to exercise caution. A sitemap’s really only meant to display information about hierarchy and site navigation, so remember to keep your sitemap limited to those two things. If you don’t, then your sitemap will be ineffective because it’ll be overwhelming.

Website Wireframes

Website wireframes are not understood by too many people, even some web designers. Some believe that they’re mainly for putting down visual blocks on a paper, but without any context. In reality, wireframes are the living and breathing schematic that shows the layout of the information on your site, which must be guided by the messaging of each page.

If you’re working as part of a team, then nothing beats wireframes in terms of showing your collaborators what your plans are and how you’re going to proceed. They’re ideal right after using paper or sketchboards, but should be limited to the early stage of the development process.

Know that wireframes shouldn’t be beautiful or attractive: They’re simply a rough, work-in-progress outline of your site plans. As such, there should also be a natural transition from your wireframes to actual website development.


Arguably the most important aspect of content planning and web development—since 95% of web design is typography—well-written and informative text can make your website. That helps to explain why the majority of copywriters reach for the old, reliable mainstays like Microsoft Word or Apple’s Pages. Both word processors empower writers to draft copy in a secure location that makes editing quick and easy.

Of course, when you’re working in a word processor, you won’t be able to seamlessly translate the linear nature of text into how things will actually look on a finished website. Still, because word processors are so useful, it’s advisable that any copywriters on a development project use them. After they’re done writing the site copy, the text should clearly be migrated to a format that’s more workable for laying down the final information architecture on the website.

It may be helpful while still inside the word processor, to use a numbering system to match up the pages in a document with the visual site architecture.


You’d be surprised at how ubiquitous slideshows are. It seems that everyone’s using them at work on a web-development project. Slideshows are the starting point for many professionals when there’s a website project to get done. We can see why: The ease of use along with accessibility makes them suitable for workflows, but only to a very elementary degree.

Sure, you’re able to simply and directly sketch out the structure of your site, as well as link to your pages. However, slideshows are really mainly about capturing the information for your rudimentary site layout—though it may be somewhat challenging to extract this information again and move it to a more workable format that’s friendlier to web development.

Unfortunately, many slideshows’ graphic-creation features may tie you down instead of helping you plan your content. Above all, when using a slideshow for content planning, you should aim to keep it as simple as possible since it’s just a stand-in for a wireframe.

Only Now Should You Deal With Design

Okay, so you’ve used paper to capture your thoughts in a brainstorming meeting; used card sorting to begin to organize the different pages of your new website; relied on content inventories to summarize the purpose of each page; and planned out wireframes to help you coordinate the user flows of your site visitors. Maybe…maybe you even briefly flirted with using a slideshow.

Alright, now—and only now—you’re finally ready for the design portion of web development! This is where you can think about and plan your graphical layout, the design interfaces and what trendy, new design philosophy to incorporate into your new site’s appearance.

It’s because, with content planning out of the way, your site now has a sound and fundamental structure on which to build up the design. In other words, you’re at the stage in the development process where you can now marry the content with the design to create something highly usable.

Content and Design: Both Equally Important

As you can see, content and design must work together to create a successful website that pleases users, captures more leads, drives up conversions and is just all-around awesome. Too many designers make the mistake of underestimating the importance of content, which causes it to be relegated to almost an afterthought. Doing that is surely a recipe for web-development disaster.

As I’ve explained, content comes before design…because it has to, so you can construct a site that makes it super-easy for your buyers and visitors to find what they want. Site design without content planning leads to a potentially attractive site…that’s, however, crippled by a horrible flow of information, a bad user experience and, ultimately, drives away buyers and visitors.

So always remember to plan out the content of your site before you get to the design stage. Your results will be much better, and your clients a lot happier.

If you enjoyed this article, don’t forget to subscribe to our blog for weekly updates!