How Can You Blend Design and Copy to Create an Engaging Web Page?

How do copy and design work together achieving optimum results?

Both of these are necessary to produce effective campaigns. And both needs to be done properly to accrue commendable outcome. Great copy with a terrible design will lead to a bad campaign. And the same goes true for an amazing design presenting a low-quality copy. To achieve the results, both need to function properly.

And there are some easy strategies to make this happen.

The Right Design Sets the Stage

Well thought out and creative designs help to set the stage. The goal here is to set the mood for the copy and get it read. As Joseph Sugarman points out, “All the elements in an advertisement are primarily designed to do one thing and one thing only: get you to read the first sentence of your copy.” The functions of the design lie in getting the copy read and create the right ‘buying environment’ for the offer.

Perfect Communion between Copy and Design is Necessary

All the elements in a project need to work together. It is important to blend both copy and design to give it a unified shape. And once the design is complete, you should not be able to figure out something separately as copy or design. Instead, it will be the whole webpage, with the copy and design together, that should stand out.

Readability Matters

The chief point of writing the copy is to get it read. You are not writing simply to fill up the white space. It needs to get read since the copy ultimately sells your product or service. The headlines, subheads, and the captions explain what is being conveyed through the design. The designs cannot work alone. It needs a great copy to get the message across.

Use High Contrast

To achieve the readability of the text, you might need to tweak the design to some extent. Ensure high contrast between the fonts and the background. This is dictated by common sense, but there are many people who forget this significant point.

Ensure that the Font does not blend into the Background Image

Are you planning to use an image as a background of your webpage? This is in-trend these days. And is surely a great decision. But here also you will need to ensure that there’s a contrast between the color of the image and the fonts that you are using.

You can avoid placing text on images to bring down the probability of blending in. Just imagine your design as a magazine cover. They excellently place the headlines over a background image, keeping the text easily readable. Web designs need to ensure the same level of readability. Flickr did an excellent job of designing the homepage where it maintains a high contrast between image background and the fonts.

Avoid Reverse Type

Reverse type is often used by the graphic designers to improve page design. The question here is on the impact it casts on reader comprehension. It is pointless to design attractive looking pages that are hard to go through.  Colin Wheildon, the editor of an Australian publication conducted a test to see the impact reverse type has on comprehension. Here is a summary of the results:

  • 70% of the participants reported good comprehension, 19% fair and 11% poor when black text is used on a white background.
  • 0% of the participants reported good comprehension, 12% fair and 88% poor when white text is used on the black background.

You may use the reverse types, but it is better to avoid its usage on the parts that are really critical. The KISSmetrics blog is a nice example of proper usage of reverse type. The main section utilizes black text on white background. The reverse type is used only in the sections that are secondary.

It is quite clear now that both the copy and the design are integral to the success of any website. A commendable copy on an excellent design draws readers in and focus their attention on the copy works certainly better than a distracting design. To get this done, make sure to remember the above-discussed essentials. This will pave the way for an excellent design that works in communion with the copy ensuring optimal results.

Image Courtesy: ela.mobi