Visual strategy in projects

Hrvoje BIeleń

Digital Designer

Scanning or skimming isn’t reading. It’s just catching keywords. Because of the sheer amount of content that’s available, people tend to filter what they read.

Try not to skim the blog, because we prepared a free download! ;)

Provide readers with the content they want to read

In the book “Don’t make me think”, Steve Krug claims that users don’t read, they scan. Jakob Nielsen stated that less than 20% of the text is actually read on an average website.
There are many different sources that can lead people to your content, but the one you must always keep in mind is is a good SEO (search engine optimization). After they are lead to your content, next step is to make skimming easy for them.

Here are the top two:

  • Subdivide big amounts of content to smaller chunks; Use meaningful headlines as a short description of what is said in the given paragraph. Implementation of typography helps legibility, accepting and believing information, memorizing of keywords etc. Overall aesthetically appealing text allows user to read it more easily and quickly; even by skimming through the text they can catch the keywords.
  • Divide and supplement text with visuals; Visuals add value and explain the written thesis. They also make content more memorable because they employ visual memorizing. Use them for breaking long text in smaller, more meaningful chunks that will ease skimming and hold readers on your text.

If the user just skims through content, he’ll notice the visuals that will grab attention so he will be more interested in finding out more about the topic.

ZABA case study

ZABA 100 years website had a lot of content that we chose to break down in paragraphs and accompany with illustrations that further communicate the meaning of a specific paragraph.

Synergy of visual and copy

A strong visual is nothing without a clear and concise copy. Good synergy between them produces the best results. If a visual is good, copy doesn’t have to be long and overly descriptive and vice versa. The best practice is to keep them both short and precise.

Some of the key aspects of synergy between visual and copy are:

  • Complement
  • Integrate
  • Summarize
  • Visualize
  • Remember

This synergy means that, by working together, visual and copy both produce better results. They can carry a message by themselves, but incorporate them together, and you’ll get simpler and more powerful message with wider recognition and interest.

How a key visual and accents grab users attention

Main or “key” visual sets the visual code and tone, carries the main message and energy that will interest the user to consume the content of your post. If that visual is weak or absent, most users might be pulled by stronger attraction and leave your content.

There are few tricks on how to grab users attention. Use beautiful and meaningful visuals. Users like magnified, exaggerated, very detailed and in perspective visuals, if possible, with bright colors and nice contrasts. However, don’t underestimate the power of simple visuals – minimalist and/or flat visuals are also excellent.

Minimalist / flat visuals

These icons were created specifically for our case studies.

Another important element of the visual is accents. If a certain element is put in a contrast with the other elements, it will be more accented (visible) and carry a certain message. Accents can be almost everything – color, light, size etc., but their main function is to spur readers interest.
No matter what kind of accent or visual you use, it should carry a message, question, claim and smart metaphor to build interest and virality.

First invite and interest users with beautiful header visual combined with a short copy, then complement content with smart graphics to present visual proofs and to break content into smaller sections.

The main purpose of key visuals and accents is simple – easier memorizing of content.

Custom visuals matter

Creating custom visuals for a website or a campaign is a lot of work.
Sure, anyone can grab a cheap stock photo, add a logo and copy, but this will result in an idea that’s been seen a thousand times before. Investing time and effort to create custom dedicated visuals is actually a truly rewarding endeavour. Using this approach, every project is custom made and looks different. If executed with care and knowledge, it just might be better than most of the others on the internet.

Customized visuals

It is said that people make first impression about website in less than 50 milliseconds. What do you think, could they detect stock photo? They can and they do. Every time.
Be sure to use images as supplements to the text. They are commonly used alongside textual content to explain it a bit more or to present a proof to a point in the text. One great way to do this is by giving candies out to users. :)

Small UI candies

UI candies are small icons, images and pictograms used to enrich the interface of the project. They are mainly used instead of text as they take less space and make the content diverse.

They are easily recognised and translated into meaning to anyone. But other benefits for the projects are also important:

  • They add value to the project by summing up into a wider and smarter strategy and visual identity.
  • They give recognisability to the project in full because they convey metaphors more easily, which is something you should pay special care to when designing them.

These candies aren’t dependent of any language, but because of cultural differences of consumers of your project, some UI candies can mean different things in two different countries. For instance, look at all the crosses in the world: latin, greek, maltese, st. Andrew’s etc. All are crosses and all carry similar, but different messages.
Another good example of different meanings is letter X. It could mean close or delete in user interface, but also a goal or a purpose such as “X marks the spot” in treasure hunt. Go figure. :)

As every client and every project differs from one another, the best practice is to create visuals tailored to the project. Not only key visuals for homepage, but also small “invisible” graphics like search icons, player controls, menu (hamburger) icon etc.

How we use the visuals in digital

When planning projects, we lay down the visual strategy for storytelling. We take that part very seriously, because storytelling is the best carrier of message there is and we use this strategy as a reference throughout the whole project.

Details in visuals

Details carry stories and deliver messages.

We use all media at our disposal – photo, video, illustration, interactive etc. With them, we tend to produce contrast and to raise awareness of the project. We like to think in a way that the consumers sees small and seemingly unimportant details, because they divide the best from good or passable products.

Degordian’s Design team is keen on quality and detailed work for clients which you can see in our case studies. Also, we care about other designers opinions on our work that they can see on Dribbble account. We are also very proud that our Website is one of the top 100 best projects on Behance!

Show us what you can do at jobs@degordian.com.

Free candy for download

Some of you who just scanned the text probably missed our free UI candy, so the rest of you can put on that smug face of yours and grab a freebie. :)


First name

Last name

Email address

Company

Job title

Phone number

Author

Hrvoje BIeleń

Digital Designer

Designer with a soft spot for digital illustration. Plays ukulele, jaw-harp, and cajon.

All stories by Hrvoje

SIGN UP FOR OUR MONTHLY NEWSLETTER

Get more digital stories directly in your inbox.
Your email is saved
Join the discussion

No Comments

Share your thoughts

Let's work together  →
Go to top
css.php