The functionality of your business website should never be compromised for the sake of its visual appeal. Contrarily, the aesthetics of your site should never be sacrificed for the sake information and functionality. Very often, we see a scenario where Design and Functionality are pitted against one another. Designer, author, and podcaster, Jeffrey Zeldman, has been quoted as saying, “Content precedes design. Design in the absence of content is not design, it’s decoration,” and he isn’t wrong. The entire purpose of visual design (web, graphic, UI/UX) is to take provided information or/and content and display it in the most attractive way possible.

What’s the Difference?

It is fair to say, that if a website is visually stunning, inventive, and ground-breaking but has no clear form of navigation or one cannot fully understand what the point of the site is, then the mark has been missed. It stands to reason that if a website is overflowing with content and is page after page of walls of text that many users may ultimately resign themselves to say, “Too long; not going to read,” and move on to something more visually striking. As we grow to understand the web as a medium more and more, we see the necessity of Design and Function working together to draw in an audience and tell a story visually.

How Do We Bring the Two Together?

Perhaps the biggest challenge of any project—whether it is a website, a logo, an infographic, or a restaurant menu — is figuring out where to start.

In some cases, you may have all of your content and copy ready to go, and you know exactly what you want to showcase, but you have no idea how to accomplish it. In this particular case, one would rely on his or her designer to create around the content and use imagery, design, and layouts that reflect the content and tell the story to the best effect. Although this method is easier said than done, it is still the most straightforward.

What do you do if you do not have the content? Where you may not have true “content”—words, images, etc.—it is probably fair to say that one would have a firm understanding of his or her business and the type of audience he or she is looking to reach. If not, that’s what creative design briefs are for and can truly help to make those things more tangible. In cases like this, it can help to create a design concept first, finding an overall layout and utilizing filler copy like Lorem Ipsum to visually show exactly how much copy needs to be provided and where imagery will be placed. This also gives a designer a bit more control over the design space, rather than attempting to fit potentially “square” copy into “round” design.

Testing, Testing, 123

So, how do you even know if the overall creativity of your site is overpowering your users’ ability to find the necessary information they need to access?

A really simple, effective way to do this is to show the website to someone who has been completely unfamiliar with the process up until this point — or at least will look at it as if they are completely unfamiliar with it. Somebody looking at it for the first time will have to have all his or her questions answered right away:

  • “What am I looking at?” – Is it a website, a digital ad, etc? (sometimes these things masquerade as something else)
  • “Am I drawn in at first glance?” – Is the first impression [powerful copy, imagery, animation, interaction] enough to make me navigate further down the site?
  • “What is the message/product/point?” – Why am I here?
  • “How do I navigate the site?” – Where’s the menu? Is it easy to get from page to page or different sections?
  • “Is the story compelling?” – Whether it is through visual or content, do I want to keep going?
  • “Is there a clear Call to Action?” – What do I do next?
  • “Do I care about this?” – Would I share with someone else just because I like the content/design?

If any of these questions cannot be answered effectively, then there is definitely something missing. There are some that would argue that the lack of function can be made up with the overall creativity of the design, where others would argue the opposite. Ultimately, the final test is the most important:

“Does this site do exactly what I need it to do?”

When All Is Said and Done

It is important to realize that the final question does not use the word “want,” it uses the word “need.” What you want is a website that shares particular information in an effort to grow your business. What you need is to share information in the most attractive way possible in an effort to grow your business in the most efficient way possible.

That is the true marriage of design and function.

By: Jen G Anders, Lead Designer, Cosmital Designs