The Importance of Content Preceding Design

[vc_row][vc_column][mk_fancy_title tag_name=”h3″ size=”32″ margin_bottom=”0″ font_family=”none”]What Good Design Can’t Do[/mk_fancy_title][vc_column_text margin_bottom=”60″]Good design is not Superman. While it can please the eye, heighten functionality and ease site use, it cannot rescue your users from other page elements that might bring their experience down.

When was the last time you decided to go to a website solely because it had good design? Probably never. You likely visit websites because of a specific service or good content. The most beautiful typography, color and meticulously-planned user experience cannot help bad content, it can only encourage a user to stick around if the content is engaging and worth reading.[/vc_column_text][mk_fancy_title tag_name=”h3″ size=”32″ margin_bottom=”0″ font_family=”none”]The Cliche is True[/mk_fancy_title][vc_column_text margin_bottom=”30″]Content is king. If you’ve read anything about marketing on the web you’ve probably come across this saying. That means it’s absolutely no secret. Your competitors know this, and it’s becoming a rarity to find a competent business not putting thought behind their messaging, especially on the web. Design is a tool to prop up your good content in a sea of everyone else’s good content.

Sure, there’s a lot of bad content on the web. But we’re not worried about the bad content. It’s the millions of pages of well-written, helpful, search-optimized, easily-digestible content that you need to compete with. Good content presented on the web (or anywhere) with good design is going to win the attention game against good content presented with little to no design thought. Every time.[/vc_column_text][mk_image src=”https://webfor.com/wp-content/uploads/2016/04/content-before-design.jpg” image_size=”full” margin_bottom=”60″][mk_fancy_title tag_name=”h3″ size=”32″ margin_bottom=”0″ font_family=”none”]Practically Speaking[/mk_fancy_title][mk_blockquote font_family=”none”]Design in the absence of content is not design, it’s decoration.[/mk_blockquote][vc_column_text margin_bottom=”20″]

-Jeffrey Zeldman

[/vc_column_text][vc_column_text margin_bottom=”60″]We’ve covered why content should precede design from a strategy standpoint but what about from a practical standpoint?

One of the biggest mistakes made in web projects today is starting a design process before content is finalized.

Imagine you are remodeling a kitchen. You start picking out colors for cabinets, countertop materials, paint, tile, etc. You tear out your old kitchen and just leave a general space for the refrigerator, oven, sink, and dishwasher. After getting everything done, you then find the perfect appliances for your new kitchen, only to discover that the oven is too wide for the space you’ve left, the refrigerator leaves a two-and-a-half-inch gap between it and the counter, and the sink doesn’t even match the style of the rest of the kitchen.

The same thing happens when you design without content. Some of the most important decisions weren’t finalized when you started to build out the kitchen. The web content equivalent would be, say, if your designer produced a concept based on placeholder content that included a header that had a one-line introduction and a small, 200 character introduction sentence. The design looks fantastic. However, the content writer has decided that the product, service, or business offering being communicated requires more of an introduction and produces content that is twice as long. Additionally, all the perfect one-line headers are longer and now flow to two lines.

From here, all paths forward are bad. You can edit the content to fit the design to make it look good, but that may very well be at the expense of content, which we all know is king! The designer can rework the design to accommodate the new content, at the expense of more project hours (and dollars). However, like the content, if the core of the design was built around a specific content length, reworking the design is another compromise which will often produce a design that is less attractive and functional than promised.[/vc_column_text][mk_fancy_title tag_name=”h3″ size=”32″ margin_bottom=”0″ font_family=”none”]Good Content Inspires Good Design[/mk_fancy_title][vc_column_text margin_bottom=”60″]In order to build the website you know you and your clients deserve, you’ll need to partner with both a good designer and a good content writer. These two form the backbone of a credible design process, one you, your team, and your clients can be proud of. Hopefully you now know that one is useless without the other.

A good content writer will have the fundamentals of design in mind when writing and use it to create clear, concise, and fluff-free content that is easily digestible.

A good designer will have the fundamentals of content writing in the back of his or her mind and use that knowledge to prop up the finished content and make it even clearer, easier to digest, and more enjoyable to interact with.

So before you start thinking about the look and feel of a new site, think about the substance of the website — because that’s absolutely what content is.[/vc_column_text][/vc_column][/vc_row][vc_row animation=”bottom-to-top” css=”.vc_custom_1460410735928{margin-bottom: 60px !important;border-bottom-width: 0px !important;padding-top: 40px !important;padding-right: 40px !important;padding-bottom: 40px !important;padding-left: 40px !important;background: #ff8c00 url(https://webfor.com/wp-content/uploads/2016/04/cta-bg.jpg?id=6477) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][mk_fancy_title strip_tags=”true” tag_name=”h3″ color=”#ffffff” size=”26″ font_weight=”bold” txt_transform=”uppercase” font_family=”none” align=”center” animation=”bottom-to-top”]Check out our case studies for examples of engaging content + fantastic design[/mk_fancy_title][mk_button dimension=”savvy” corner_style=”rounded” size=”large” url=”https://webfor.com/case-studies/” align=”center” margin_right=”0″ animation=”bottom-to-top” outline_skin=”light”]CASE STUDIES[/mk_button][/vc_column][/vc_row]