You have finally found a visual theme for your site. The messages are well distributed, the text and the white spaces balance perfectly. The photographs come from image banks. It’s a good start, but unfortunately, a standard visual identity will not help you get attention and stand out …

The more you are in a congested sector of activity, the more the use of standardized and unoriginal images will penalize you.

Training & Co'm

The visual is one of the most decisive aspects when it comes to differentiating yourself (with the value proposition). Not because it’s pretty, but because visual elements also provide information about you and your products.

For a web entrepreneur, the choice of a graphic theme and more, the choice of images will be decisive when it comes to grabbing the attention of a visitor and engaging them to continue browsing the site.

The visual identity is often perceived as the wrapping of a message that you will send on your site: a blog post, a product, a service offer.

This is an error, the image is an integral part of the message as shown in the infographic below.

The following article will introduce you to the main points to take into account when starting to create a visual identity. that reinforces your messages and sets you apart.

A gross visual identity

In February 2017, the Parisian fashion house Balenciaga launched its new site and triggered contrasting reactions within the web design community.

The comments highlighted the fact that with this redesign of its visual identity, the brand was upsetting the existing rules and announced a change in the profession of web designer in the coming years. For some people critics, the web design risked becoming a profession of engineers and coders without creativity.

alt=”Mobile homepage of balenciaga.com ” width=” 500 ” height=” 888 ” />
Balenciaga.com mobile home page

The style of the Balenciaga site is linked to the trend brutalist web design, widely used in events and museum sites since the early 2010s.

Documenta de Kassel website - Five-year exhibition of modern and contemporary art
Documenta de Kassel website – Five-year exhibition of modern and contemporary art
Brutalist YouTube according to The Verge
October 2016 Las Vegas Design Conference Site

Advocates of “brutalism” demonstrate that by drastically simplifying the visual components of a website, there are always creative possibilities.

Designer Pierre Buttin, for example, had fun imagining the metamorphoses of YouTube and other sites in brutalist versions.

Brutalist version of YouTube according to The Verge
Brutalist YouTube according to The Verge

A current inspired by architecture

Originally, the brutalism is the architectural current founded by the Swiss architect, Le Corbusier. The latter attached great importance to the aesthetic qualities of raw concrete and its construction potential (in particular the height allowed by the combination of concrete and iron reinforcement).

Many constructions of brutalism are very interesting such as the radiant city of Marseille, the City Hall of Boston or the City of Dance in Pantin.

Boston City Hall when built in 1960
Boston City Hall when it was built in 1960

The web designers who claim to be part of this movement draw an analogy between the simplifying intentions of the brutalist architects and their own.

What about conversions?

Still, by improperly associating an original web design with an architectural trend of the 1950s, we miss the real questions.

The visual identity is an integral part of the value proposition made by the site. It must contribute to the message of an entrepreneur or a brand and allow conversions.

From there, only two questions are interesting:

1 – Is it possible to build visually an original website that reveals the personality of a brand and an entrepreneur and strengthens its connivance with its audience?

2 – How to create a very high quality design without distracting attention and threatening the conversion and purchase?

To build a visual identity, a theme or a web design is not enough

By asking these two questions, we realize that the Balenciaga site is not a bad example of web design.

Here, minimalism sends a few messages.

Aesthetically, it differs from that of its competitors like Christian Dior thanks to an unusual style in luxury ready-to-wear.

In addition, balenciaga.com can also be seen as a way of citing artistic trends of the twentieth century to which the public of luxury brands is reputed to be sensitive.

Finally, the site allows the visitor to quickly arrive at the clothes sold. Color and photographs are thus reserved for the parts that we will order online.

Piet Mondrian
Piet Mondrian, Composition in Black and White, with Double lines, 1934

The design of balenciaga.com can help strengthen the brand’s connivance with its audience while promoting conversions.

But it is ultimately little compared to the visual work of some entrepreneurs that we will see below. They start from standard themes and use images to build a unique style.

The reason is simple: images make it possible to pass far more messages than graphics.

Consistency of websites when images are weak

As the three home pages of major phone manufacturers below demonstrate, it is not through web design or images that they stand out.

Iphone

Galaxy Huawei

For a large brand, this uniformity can be explained.

In their book Positionning, the battle for your mind, Al Ries and Jack Trout specify that to position themselves and stand out, a brand and entrepreneurs must pass messages that are in relation to the client’s cultural references.

Leaders and long-established brands in their market do not need to do this job. They are already positioned among these cultural references of the client. We all know what an iPhone or Galaxy is and we see them as much a commercial product as a cultural object of our time. Apple and Samsung don’t need a website that sets them apart.

But for web entrepreneurs and brands, being content with standard web design and master images is limiting because they are not positioned in the mind of the client. They must capture his attention. For them, the visual is a great asset for getting immediate messages where the text requires attention and reflection.

An example of what is not working

Here are two examples of consultant sites.

Poor visual identity Poor visual identity

These two examples of a design show a total absence of graphic biases:

  • Exclusively verbal message
  • Hollow images and questionable photographic effects
  • No visual contrast
  • Nothing to get attention
  • So little chance of entering a message and engaging the customer towards a call to action and a conversion …

These two examples demonstrate one thing: these entrepreneurs forgot that images also convey a message and that this message can be particularly effective when it is intelligently combined with text.

Take the example of cinema and Harry Potter to make images speak

This point is not specific to web design. In the cinema, good directors know how to make images speak and associate them with a verbal message.

Take the example of the third part of the Harry Potter saga, Harry Potter and the Prisoner of Azkaban directed by the Mexican filmmaker Alfonso cuaron

Harry Potter explained to marketers

This image comes from the time when Arthur Wheasley, Harry’s best friend’s father, takes him aside to alert him to danger. He tells her that a dangerous criminal named Sirius Black has escaped from Azkaban prison and is looking for him. He asks her not to put her life in danger by trying to meet the fugitive.

If we stop at the dialogue, the message is quite simple: Harry Potter is wanted by Sirius Black and Mr. Weasley asks him to avoid putting himself in danger.

The picture completes the dialogue

By looking closely at the composition of the scene at the top (click on the image to see other images of the sequence), we can see that:

  • Mr. Weasley seeks to hide from the eyes and ears of those present in the tavern
  • Mr. Weasley is stiff and has a pinched smile
  • The image of Sirius Black (between the two protagonists) seems to react to the presence of the two protagonists
  • The image of Sirius Black seems to mean something to Harry
  • Mr. Weasley is embarrassed by the presence of the image of Sirius Black
  • In the next shot, Mr. Weasley ends up isolating himself completely with Harry in a corner where the mirrors and mirrors no longer reflect anyone.

This image alone sends many other messages and give density to this scene.

She tells us that Sirius Black may not be who you think and those around Harry Potter who think they are protecting him may instead endanger him.

In cinema, images and dialogues that combine their meaning without repeating themselves convey many more messages.

It is for this reason that more and more marketers are turning to cinema images to illustrate their words on YouTube for example. This can be very successful as for Stan Leloup and his chain Marketing Mania.

But to stand out and build your style, you can also work on your own images and make sure they get the right messages across.

How to combine the visual and the verbal to create a website that sets you apart

A website is constrained by three things: its structure (the ordering of the landing page), the messages to be conveyed and the language used (the words and images chosen). The first aspect is constrained and does not allow much originality.

The two little original sites described above just stick to the structural rules that I will present now.

1. Structural constraints: use simple and efficient scheduling

The design of a website is the result of several constraints:

  • the requirements of a graphic designer who will want the site to be beautiful
  • the wishes of the entrepreneur who wishes his personality to be affirmed
  • the efficiency requirements of a marketer who wants the visual structure to contribute to conversions first
  • The requirements of an SEO which will wish that the choices of the other speakers do not penalize the referencing of the site
  • Etc.

Formats have emerged to try to reconcile these constraints. They allow many possibilities while making navigation and conversion smooth. Component management, for example, is the subject of a consensus today illustrated in the infographic below.

Infographic Visual Hierarchy

In addition, graphic design tools such as the Thrive suite reinforce this aspect by offering solutions that are simple to handle. They make it possible to obtain convincing results by following the rules for structuring a landing page which encourage conversions.

Previously, landing pages were rather reserved for software and training. Today, all sectors are concerned, as demonstrated by the example of the e-commerce site of the American perfumer ABBOTT.

landing page ” width=” 500 ” height=” 1185 ” />

All these structural composition rules are explained in this article on the landing page with a result evaluation. But it is not these rules that allow us to stand out and create a visual identity.

2. Pass on the 4 messages essential for conversion

The entrepreneur or the brand will now have to build a story where:

  • The target will have to recognize himself
  • His problem should be raised
  • The entrepreneur and his product must differentiate themselves from those of the competition
  • The product should appear as an obvious solution to the problem

Achieving these four goals simultaneously by combining text and visuals takes a bit of work and time. But the result can be very successful as we will see below with Gary Vaynerchuk. It is therefore by starting to master these four messages that we will start to stand out.

3. Put pictures and words that complement each other

Usually, on most websites and on social media, the images are illustrative. That is to say that the image will repeat what is already said by the text as we see here for the site pap.fr. To stand out, that’s exactly what you shouldn’t do.

Image PAP

A message is much more effective when words and images complement each other to give meaning to the message as is the case for example for this basic, but effective photograph used by the agency here.

Image Bien'ici

The very simple picture projects the person looking for an apartment into the balcony of an ideal accommodation. The text highlights the most laborious part: research. The messages complement each other effectively.

We will now see with the example of Gary Vaynerchuk that it is possible to go even further.

How Gary Vaynerchuk builds his visual identity

Gary Vaynerchuk is a character with many faces. Here is a non-exhaustive list of its activities:

  • Founding President of Vaynermedia, one of the largest American digital marketing agencies
  • Highly requested speaker on the topic of digital marketing
  • Reference of personal branding on social networks
  • High value influencer for a brand that wants to promote its products like KSWISS right now
  • Compulsive social media user
  • Personal development expert who gives facebook / Instagram and YouTube video advice
  • An investor in the world of startups
  • Etc.

I suggest you get inspired by the way he markets his lecturer services on his site www.garyvaynerchuk.com

Structure: Classic page scheduling

Vaynerchuk landing page

The structure of Gary Vaynerchuk’s home page builds on the good practices described above by adding visual messages.

A language based on images and Pop Culture

Vaynerchuk delivers Gary Vaynerchuk places great emphasis on cultural elements to convey his messages. Here is what he wrote in his book Jab Jab Jab, right hook.

A generation is defined by its Pop culture . Without these benchmarks, she is lost. […]

La jeune génération n’est pas la seule à consommer de la culture par téléphone. Tout le monde le fait, y compris ceux qui écoutaient de la musique sur des vinyles, des cassettes et des CD. Utilisez ceci à votre avantage, montrez à vos fans que vous aimez la même musique qu’eux.

Créez du contenu qui révèle votre compréhension de leurs problèmes et de ce qui compte pour eux.

Gary Vaynerchuk —Jab Jab Jab, right hook.

Aux États-Unis et un peu partout dans le monde aujourd’hui, le mot Pop culturerenvoie à un univers culturel dense (et distinct de la notion française de culture populaire).

Il regroupe la musique populaire, le pop art, l’industrie culturelle contemporaine, l’univers des comics, les stars hollywoodiennes, le cinéma, etc.

Il définit une création culturelle accessible aux plus grands nombres, mainstream, et qui place tout type de production culturelle sur un pied d’égalité. Typographie, dessin, photographie, illustration de presse, design et Beaux Arts peuvent s’associer pour créer un message visuel qui caractérisera son créateur.

Voici comment Gary Vaynerchuk applique sa consigne à son propre site : il s’appuie essentiellement sur des images originales renvoyant à la pop culture.

La description visuelle du produit

Vaynerchuk produit

Présentation de l’entrepreneur

Vaynerchuk positionnement

Première preuve : un article de blog sur la réalisation de podcast

Vaynerchuk podcast

Deuxième preuve : un article de blog sur un partenariat entre Gary Vaynerchuk et KSWISS

Vaynerchuk & kswiss

Le thème de Gary Vaynerchuk assez neutre et standard. Mais le fait de recourir à une imagerie typée donne un style très personnel au site web.

Les 4 messages indispensables à la conversion (Client / Problème / Produits et Différenciation) sont boostés par ces messages visuels

Gary Vaynerchuk Identité visuelle et démarcation

On voit avec ce tableau comment les principaux messages passent par des composants visuels. C’est l’un des aspects peu soulignés de l’originalité de Gary Vaynerchuk sur son site web et sur les réseaux sociaux également.

Pour les entrepreneurs qui sont à la recherche de démarcation, cet exemple leur permet de décrypter la stratégie originale de Gary Vaynerchuk. Cette dernière est accessible avec des outils de conception graphique standards ou en recourant à un illustrateur en ligne et en lui expliquant ce que l’on attend de lui.

Un autre exemple, Marie Forleo s’appuie sur photographie pour mettre en avant les expériences de ses clients

Il existe des façons encore plus simples de se démarquer visuellement, avec la photographie notamment. C’est ce que fait Marie Forleo par exemple. Elle utilise la photographie pour documenter l’expérience de ses clients et elle les met en avant dans une landing page.

Identité visuelle Marie Forleo

Le problème avec les thèmes standards et les images vues mille fois ailleurs

Lorsque vous créez un site web, vous cherchez généralement à éviter la faute de goût. Après tout, l’identité visuelle est censée être un métier de graphiste. Vous vous appuyez alors sur des thèmes élégants, mais basiques illustrés par des photographies provenant de banques d’images.

Jusqu’au jour où vous tombez sur un site traitant du même sujet que le vôtre. Les contenus sont moins experts, mais l’auteur de ce site se démarque par son audace visuelle.

Ses images sont reprises sur les réseaux sociaux, car elles ne font qu’un avec son contenu. Il est de plus en plus reconnu.

Ce jour-là, vous réalisez que les thèmes standards et les images vues mille fois ailleurs dévalorisent vos contenus et que vous devez rattraper le temps perdu.

Cet été, j’ai rédigé un guide dans lequel je détaille 9 stratégies visuelles simples et accessibles basées sur l’utilisation de l’image. Ce guide vous donnera les règles à suivre et les pièges à éviter pour commencer à créer votre style.

Maintenant, à vous de jouer

Téléchargez le guide « 9 styles visuels pour vous démarquer sur le web ». Un guide de 79 pages pour décrypter les styles visuels créatifs et efficaces qui démarquent leurs auteurs. Dans ce guide, vous découvrirez :

– 9 styles visuels originaux, simples et accessibles

– Les fondements d’une bonne stratégie visuelle

– Une méthode pour trouver rapidement votre style

– La liste des erreurs les plus fréquentes (et que l’on fait tous:))

– Des outils et des références pour obtenir des résultats rapides et convaincants, sans graphiste