The Visual Differences Between Online and Offline Communications

Learn how graphic elements online should differ from their offline counterparts

The rules for online and offline communications are not the same: the things we say and do online are not exactly the same as those we say or do in real life. For companies and brands, this is no different, each space has different requirements that need different strategies to achieve a particular image.

James Eccleston (@james80) is a Brand and UX Specialist with over 18 years of international experience working for major brand communication agencies in London, digital start-ups in Latin America, and running his own agency in Madrid.

He considers the main different between successful online and offline branding campaigns is attention span, "When you communicate online," he says, "your users have a very short attention span. Usually, it's around 15 seconds."

Keeping someone's attention is challenging enough on a desktop, but more so on mobile, when the screen space is smaller, and there are more distractions.

The hero image

A website's main graphic element is known as the hero image, and that's where an online and an offline strategy will begin to diverge. The hero image has a powerful impact on the visual aspect of communications, so you want to capture the viewer's attention with bold, striking photos.

You want to choose this first image very carefully. "It has to say a lot of things very, very quickly," explains Eccleston. At the same time, it has to be work in harmony with the other elements on the page, like cookie notices, search boxes, your logo, etc.

A video can often be a more dynamic and engaging solution. Just make sure it doesn't distract visually from other areas of the webpage.

The closest thing to a hero image would be a magazine cover in the print world, but it's not exactly the same. You can see several magazines covers simultaneously in a newsstand, whereas we tend to have only one active browser window on a PC or phone. That's why magazine covers tend to be more shouty and bold, with faces looking directly at you.

Less is more

Online copy also needs to be punchier. Once you have a magazine in your hands, you are probably ok reading what's on the cover, even if it's a little lengthy. Online, even a short text can feel overwhelming, so it's important to use short, direct sentences to convey your message.

Digital thumbnails are more like magazine covers: they are images that are usually part of a group so you want them to stand out. On your own page, thumbnails might just need to guide the user. On a third-party website, such as YouTube for example, magazine cover tactics with bold, eye-catching images might come in handy.

That is why YouTube thumbnails tend to have people and faces in them and bold fonts. If you don't want faces in your thumbnails, find another, original way to stand out to make people stop scrolling and click on your video.

Content images follow a different set of rules. These are the images that are next to your page's content and are similar to how photos work in an article. They have more time to communicate, so they can have a little more detail.

However, don't forget that they need to change shape and scale well to support all kinds of devices and screen formats. In a magazine or brochure, that's never a problem.

Color and fonts

Color also works differently online and offline. In digital media, you'll use RGB (a mix of red, green, and blue components). Colors are usually composed of CYMK (cyan, yellow, magenta, and black) in printed media. This means some shades are harder to obtain in printed form. Acid colors, for example, look great online but will require specials inks to be printed. It's essential to consider this if you are trying to project a consistent look.

Online, on the other hand, forces you to be more selective with different tones or gradients. Think about how many shades of gray a web service like Gmail has. Because some page elements are interactive, they need extra colors to signal intent or that they are clickable. All this has to be taken into account and codified in a style guide to avoid a confusing UX.

And don't forget that color can be used to provoke emotions. The shade of a button or link can change your what feeling your website transmits.

As for fonts, the common wisdom was that sans-serif fonts work better online, but that had more to do with the resolution limits of old computer screens.

These days, you can use a serif type in webpages without impacting legibility at all, so choose the one that better suits your needs.

If you want to learn more about online brand strategy, James Eccleston's Domestika course Brand Strategy for Online Platforms will teach you how to develop a professional brand concept and effectively apply it to a website.

You may also like:

- 5 Essential Brand Strategy Books and the Power of Presentation.
- What Elements Make Up A Brand?