Level Up!
Published in

Level Up!

How to make website design memorable?

by Bradley Nice, Content Manager at ClickHelp.com — online documentation tool

Business vector created by freepik

According to research, users read only a fifth of the text on the page, evaluate the visuals of the page in 50 milliseconds(!) and 57% of them pay attention only to the information on the first screen

That’s why you should spend some time on thinking your imagery through so you can attract user’s attention with eye-catching visual language.

I need a hero

The promo block at the top of the page came from printed ads, and is called the “hero image”. These images are the main focus of the page and affect not only the aesthetic component, but also the user experience.

So what should be in this important place?

  • Your product. This is a good approach for tangible goods — gadgets, interior items.
  • One of the use cases, product in context.
  • Metaphor. This works for non-specific products or services, such as cloud solutions.

Try several options and don’t forget about A / B testing to help you decide which hero image your audience likes more and whether it meets your conversion goals. There is one rule to remember: one idea — one image.

The formula for a perfect image is:

  • Helps to understand page message.
  • Corresponds to the design of the entire page and leads to the target action button.
  • Reflects the benefits and values ​​of the brand.
  • Evokes emotions which help moving user towards the target action.
  • Shows the customer as a character possessing your product.

Stock Photos VS. Illustrations

Images from a photo bank are popular due to quick access and low prices — a subscription allows to access an entire library with thousands of images. But they are often boring and feel unnatural, and the user will not remember them when they leave the website. To find an image that fits your brand and sells your product, you’ll have to look through thousands of photos with exaggeratedly happy people in unnatural postures.

With such photos it will be difficult to preserve the consistency of the design and convey a metaphorical meaning.

Since infographics and charts have become another non-verbal language, the illustrations are no longer just a decorative element. The original illustration can be just as recognizable as a logo, a font, or a video.

Brand is a promise. Designers help businesses reach the audience, this is a promise through a visual concept.

Illustrations quickly became an alternative to hero image. Their main goal is not aesthetics, but communication. It is an integral part of the modern UI with the unique ability to convey meaning. Illustrations have many advantages over traditional photos:

  • Express an abstract concept that can be impossible to express with one photo.
  • Personalize and customize the brand.
  • Make the site more user friendly.
  • They tell a story, and also reinterpret reality in their metaphorical nature.

Will the illustration work for your brand?

It depends on the values of the brand, its message, the target audience. When the main strategy is outlined, the next step is to decide on the style.

Brand mascot

Creating a mascot that is associated with a company is a popular brand personification strategy. A good image will be associated with the product. It will become the metaphorical face of the brand and help form a memorable experience.

In conclusion

Individual illustrations help create a visual language, an emotional connection with the brand and better understand the product. They also create the basis of a unique style that will be remembered by your users.

When working with photos, use them in a non-standard way: it can be a macro, unusual angle or color effects. Try to create a metaphor, do not choose a direct visualization of the text.

If you have the resources to create illustrations, start by developing a guide. Analyze the colors and composition, imagine how the scene will look from different angles. In addition, illustrations should be combined with icons and typography.

Whatever visual technique you choose for your brand — a banner with the parallax effect, a photo, a video, a comic, an animation — it should become a part of your identity.

Stories for technical writers, web developers and web designers. It's time to level up your skills!

Recommended from Medium

How to Ideate Better — Learn the Path to Thinking Differently

How to Make Animated Videos, The Ultimate Guide

Redefine Your Mobile App Retention Strategies 2021

TVE for iOS & Android

Go Where Your Customers Are

Other than the project; some assignments. Here you go.

¡Verano! The Clemente Team Heats Up

What the Hecks is a Product Manager?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bradley Nice

Bradley Nice

Content Manager at https://medium.com/level-up-web 👈. I write about web design, web development and technical writing. Follow me on Twitter and Facebook

More from Medium

UI Trends: What to Expect in the Future of UI Design

UI design trends

Daily web design inspirations, January 19

10 Days of Daily UI Challenge

Keep It Stupid Simple, The Website UX Philosophy SEO Supports