• Twitter
  • Facebook
  • LinkedIn
Contactez-nous +33 972 197 927
Ankaa Pmo®
  • Nos forces
  • Services & solutions
    • Processus métier et organisation
    • ERP et applications
    • Infrastructure et telecom
    • Sécurité de l’information et du système d’information
  • Blog
  • Témoignages
  • Contact
  • Espace freelance
  • Rechercher
  • Menu Menu

How Illustration Adds Emotion To UX

Actualités, Actualités

From 45,000-year-old cave paintings to 21st-century space rocket diagrams, illustrations have long played a significant role in human communication.

Pictures cross-language and literacy barriers, allowing people to understand and communicate complex moods and feelings that they cannot in words. When we were little, we could understand and appreciate E.H. Shepard’s illustrations of Winnie the Pooh and friends long before we could read A.A. Milne’s words.

The word ‘to illustrate’ has two main meanings: to create a picture of; and to demonstrate or provide an example of. In the context of the web, illustration is part decoration, part emotional signal, helping to create a particular impression to the user by painting a metaphorical picture.

Why Use Illustrations on a Website?

Illustrations provide a useful shorthand means to convey mood or tone, the voice of a brand.

You could argue that icons are illustrations because they are pictorial, but they are symbols. Icons may, and usually should, fit stylistically with illustrations, but they are not illustrations themselves. A symbol is a simplified representation of an object, idea, or action. For example, ‘search’ is usually represented by a magnifying glass shape.

Illustrations, on the other hand, are more complex. They transmit an underlying emotional quality that connects with the intended audience. Illustrations can create a narrative about the subject without the need to add more text. It gives even the most basic, functional website a sense of personality when used properly.

Popular Types of Illustration Online

Illustration styles are many and varied, ranging from simple outlines to detailed, full color, realistic images. And the amount of illustration used varies greatly across sites.

Different styles evoke different feelings and provoke different responses, so it is important to think carefully when choosing an illustration style. There are two major factors to consider: what the site is for and what sort of character do you want to give it.

It is possible to break things down into broad categories to see what works best in different areas. We’re going to look at how designers can use illustration to good effect across four categories…

Financial & Corporate

Financial services, fintech, enterprise software, and larger corporate sites tend to use illustration as a way to humanize themselves.

The style tends to be minimal, using simple shapes and sparingly. Acorns uses a simple oak leaf motif to go with its acorn logo. Other illustrations are tied in by keeping to shades of green.

This creates a feel typical of newer companies (Acorns was founded in 2014), especially those that are primarily web-based.

Longer established, more traditional organizations use illustration for the same purposes, although they may be restricted to certain areas only, where they want to emphasize approachability. Danske Bank, for example (founded in 1871), has illustration on its corporate site in the ‘About’ and ‘Sustainability’ sections.

Visa also limits illustration to a specific area, the section on Visa Direct. This has the effect of separating this particular (newer) service from the rest of what Visa offers.

Another increasingly popular approach in this category is abstract graphics. This is particularly useful when it is difficult to show what is being promoted. For example, Instabase adds arrangements of geometric shapes for visual interest, using the same color palette as the site icons.

One of the key points with illustration in these types of sites is getting the balance right between friendly, human and approachable on the one hand and serious, trustworthy, and secure on the other. Get too cutesy, and potential customers won’t take you seriously. Github’s enterprise page does have some illustration, but the color is less vivid, and Octocat is only alluded to, unlike the home page which is illustration-rich.

Food & Drink

Things get a little freer when it comes to food and drink. Styles vary much more, and the personality conveyed can be stronger and more individual. Some still go for a light peppering of illustration, with aspects such as color and type made stronger, while in other cases, the illustration becomes much more prominent.

Palais Kitchen and Caleño both do the former, with brand-appropriate line drawings.

My Drink’s vintage-style animated illustrations take the place of photographs to balance the text on its home page.

Melopeion Honey doesn’t use very many illustrations, but what it does use is large.

Monkey47 could be described as a concept website, and the illustrations play a key role. (The social media menu is really rather charming.)

Hospitality & Leisure

In this category, what users really want to see is photographs, but illustration can help too. A photograph can only show what something looks like, while illustration can add the extra emotional dimension connected to an experience.

At the minimal end of the scale, Protos Car Rental uses some nice, simple illustrations to emphasize the holiday aspect of its business.

Comptoir Libanais blends photographs with illustration to create a very distinct identity.

Hotel Frida is also about character, and the victorian-style fantastical animal illustrations help create a quirkiness.

Highcourt uses simplified and stylized layout illustrations to give a complete overview of the building’s interior than photographs could.

The Neverlands doesn’t just use illustration; the whole site is an immersive experience based on illustration.

The Responsible Web

Sites promoting ethical and or sustainable companies, natural skincare, natural and/or organic food and drink, vegan products, social responsibility, and so forth tend to rely heavily on illustration, particularly if they are reasonably new.

Quite often, this is in the form of plant drawings that make a lazy allusion to nature, but it can also involve conveying information in a way that doesn’t come across as lecturing.

Wild Souls steers clear of any hint of hippiness, with a sense of randomness to its illustration placement.

Superfood Gin does the plant thing, but it is in reference to the botanical ingredients here, so it is very relevant.

Capsul’in’s main company page is a fairly standard offering, but for its Zero Impact product, it has a separate section with illustrations to help explain the product’s features.

Donate Responsibly uses illustration to explain how well-meant action can be inadvertently damaging without appearing to scold or patronize.

A variety of children’s brands will use illustration — even when it is parents or guardians who are really the target — and Little Yawn Collective combines the child-friendly, and natural product approaches with its sleepy animal illustrations.

Using Illustration on The Web

Illustration can be a powerful tool in a designer’s arsenal, but it can be difficult to get right because it invokes emotion, and emotion is subjective.

Just like type or color, it needs to be used appropriately and with care. Sometimes less is more, and sometimes getting the placement absolutely right can make the difference between a successful design and a flop.

This is just a selection of the wide range of illustration styles and usages out there on the web, but we hope it will give you a starting point when you are considering whether and how to use illustrations in your next project.

Source

The post How Illustration Adds Emotion To UX first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

1 septembre 2021/par Service comm.
Mots-clés : a, abstract, barriers, Be, Business, Color, color palette, communication, concept, Corporate, Design, design ideas, design trends, Designers, enterprise, enterprise software, features, fintech, first, get, go, green, http, HTTPS, Icons, illustration, Illustrations, images, important, impression, information, IT, key, lazy, less, logo, people, post, product, project, range, representation, responsibility, rest, scale, secure, Services, site, sites, social, Social Media, software, usages, ux, web, web design illustration, website, WHO, Wikipedia
Partager cet article
  • Partager sur Facebook
  • Partager sur Twitter
  • Share on WhatsApp
  • Partager sur LinkedIn
  • Partager par Mail
https://ankaa-pmo.com/wp-content/uploads/2021/09/how-illustration-adds-emotion-to-ux.jpg 1408 2560 Service comm. https://ankaa-pmo.com/wp-content/uploads/2017/04/Logo-Ankaa-engineering.png Service comm.2021-09-01 16:45:582021-09-01 16:45:58How Illustration Adds Emotion To UX
Vous aimerez peut-être aussi
ITF Launches Free Font Service Fontshare
What Is File Integrity Monitoring and How Does It Work?
Spotify : son P-dg pourrait toucher le pactole lors de l’introduction en bourse
C++ Creator Bjarne Stroustrup Interview
How I Saved My Design Agency & Tripled My Profits
Deploying a Django Application to AWS EC2 Instance With Docker
12 Best Google Design & Development Tools
SAP acquiert AppGyver, le pionnier du développement no-code

Catégories

  • Actualités (5 852)
  • Amoa et pilotage de projets (60)
  • Ankaa Pmo® Inside (34)
  • Bases de données (5)
  • BPM – Business Process Management (12)
  • Business (418)
  • Commercial et marketing (3)
  • Concours (3)
  • Décisionnel (2)
  • Développement applicatif (189)
  • Développement IoT (236)
  • Développement nearshore (1)
  • ERP & Applications (228)
  • Finances (1)
  • Gestion de production (2)
  • Humour (1)
  • Infrastructure & Telecom (277)
  • Innovation (254)
  • Messagerie et collaboratif (2)
  • Méthodes et organisation des process IT (1 913)
  • Non classé (71)
  • Plan de continuité d’activité (2)
  • Processus métier et organisation (39)
  • Recrutement (2)
  • Réseaux LAN, WAN, MAN (274)
  • Ressources Humaines (291)
  • SAP (253)
  • Sécurité de l'information et du SI (1 906)
  • Sécurité de l’information (1 894)
  • Sécurité de l’information (1)
  • Sécurité du système d’information (1 882)
  • Sécurité du système d’information (1)
  • Séminaire, Salons, Publicité (9)
  • SEO (12)
  • Supply-Chain (14)
  • Système (5)
  • Témoignages (14)
  • Urbanisation du SI (9)
  • Virtualisation & stockage (18)

Notre différence

Notre différence : Redonner du sens à la performance

– En centrant les compétences des managers d’activité internes Ankaa PMO®, chargés de votre suivi dès les premiers contacts commerciaux, sur l’organisation, le pilotage et le suivi Qualité de vos projets.
– En restant objectifs dans le conseil car détachés de tout partenariat constructeur et/ou éditeur.
– En sollicitant de façon flexible et dynamique notre équipe d’experts métiers, fonctionnels ou techniques constituée exclusivement de consultants externes accrédités, gage de vous fournir le meilleur niveau d’expertise sur les projets.
– En apportant une organisation éprouvée sur des projets stratégiques de PME-PMI ou les attentes des grands comptes

Notre organisation est ainsi totalement établie sur l’écoute de vos besoins et l’élaboration de réponse les plus adaptées à vos challenges pour vous permettre d’apporter une réelle valeur ajoutée à vos processus et projets d’entreprise.

Nous contacter

ALPES
HAUTS DE FRANCE
RHONE
SUISSE

SIEGE

: +33 972 197 927
: +33 374 094 994
: +33 428 290 515
: +41 22 519 61 99

: +33 972 197 927


Ankaa logo Blanc
  • Services
  • Contact
  • Témoignages
  • A propos
  • Missions
  • Blog

 

  • English
© 2021 | Ankaa PMO
  • Mentions légales
Using RxJava and Kotlin to Assemble an Android App Cybercriminals Abusing Internet-Sharing Services to Monetize Malware Campai...
Faire défiler vers le haut

En continuant à naviguer sur le site, vous acceptez que nous utilisions quelques cookies.

OKPlus d'info

Paramètres des cookies et politique de confidentialité



Comment nous utilisons les cookies

Nous utilisons les cookies pour nous faire savoir quand vous visitez nos sites Web, comment vous interagissez avec nous, pour enrichir votre expérience utilisateur et pour personnaliser votre relation avec notre site Web.

Cliquez sur les différents titres de catégories pour en savoir plus. Vous pouvez également modifier certaines de vos préférences. Notez que le blocage de certains types de cookies peut avoir un impact sur votre expérience sur nos sites Web et les services que nous sommes en mesure d'offrir.

Cookies essentiels sur ce site

These cookies are strictly necessary to provide you with services available through our website and to use some of its features.

Because these cookies are strictly necessary to deliver the website, you cannot refuse them without impacting how our site functions. You can block or delete them by changing your browser settings and force blocking all cookies on this website.

Cookies Google Analytics

Ces cookies recueillent des renseignements qui sont utilisés sous forme agrégée pour nous aider à comprendre comment notre site Web est utilisé ou l'efficacité de nos campagnes de marketing, ou pour nous aider à personnaliser notre site Web et notre application pour vous afin d'améliorer votre expérience.

Si vous ne voulez pas que nous suivions votre visite sur notre site, vous pouvez désactiver le suivi dans votre navigateur ici :

Autres services

Nous utilisons également différents services externes comme Google Webfonts, Google Maps et les fournisseurs externes de vidéo. Comme ces fournisseurs peuvent collecter des données personnelles comme votre adresse IP, nous vous permettons de les bloquer ici. Veuillez noter que cela pourrait réduire considérablement la fonctionnalité et l'apparence de notre site. Les changements prendront effet une fois que vous aurez rechargé la page.

.

Paramètres de Google Webfont Settings :

Google Map :

Vimeo et Youtube :

Politique de confidentialité

Vous pouvez lire nos cookies et nos paramètres de confidentialité en détail sur la page suivante

Mentions légales.

Accept settingsHide notification only