Quelques soient vos projets, créer un site web, concevoir une application, développer des modules e-learning ou illustrer un diaporama, le design ne doit pas être négligé. La principale raison tient bien entendu de l’esthétisme. Un design agréable attirera plus facilement l’utilisateur. Mais le design ne doit pas prendre le pas sur la clarté des contenus et l’ergonomie de l’interface. Il doit au contraire être au service de vos messages, de vos objectifs. En ce sens le Flat Design est un parfait exemple d’esthétisme simple et clair qui ne prend pas le pas sur vos contenus mais qui, au contraire, sert à les renforcer.

Osez le Flat Design

Le Flat Design n’est pas une nouveauté. Il est apparu avec la nouvelle interface de Windows 8 et ses fameuses « tuiles ». Certes celles-ci n’ont pas fait l’unanimité. Peut-être était-ce trop avant-gardiste ?… Pourtant le Flat Design s’est aujourd’hui très largement répandu au point d’évoluer vers de nouvelles formes telles que le Long Shadow ou le Material Design (que l’on doit à Google et qui a envahi les écrans de nos smartphones et tablettes Android). Même Apple a abandonné ses icônes réalistes (empreintes au skeuomorphisme – n’essayez pas de prononcer ce mot, je n’y arrive pas non plus) au profit de ce style épuré…

Caractéristiques du Flat Design

Le Flat design et ses évolutions se caractérisent par un abandon du superflu et un dessin minimaliste, souvent mis en valeur par des couleurs vives mais sobres. Les formes utilisées sont simples et basiques, souvent géométriques. Le Long Shadow et le Material Design se distinguent par l’ajout d’ombres qui valorisent les objets présentés et renforcent leur impact visuel.

Les avantages du Flat Design

L’un des principaux atouts du Flat Design tient de ses propres caractéristiques : la simplicité. Nul besoin d’être un as du dessin ou de devoir disposer d’applications sophistiquées pour réaliser des éléments en Flat Design. Les outils proposés via les onglets « insérer » des différentes applications (Word, Powerpoint…) du célèbre pack Office de Microsoft peuvent suffire.

Ainsi le Flat Design est accessible à une plus grande majorité de personnes. C’est aussi un style plus rapide à mettre en place et par conséquent souvent plus économique.

Mais au-delà de cet aspect conceptuel, le Flat Design renforce également l’expérience utilisateur.

Optimiser l’impact d’un site Web

• Le site se charge plus rapidement. Les graphismes sont plus simples donc moins lourds. Le poids des images est réduit. Les temps de chargements sont plus courts.
• Le visiteur va plus facilement cliquer sur ce que vous voulez. Cet aspect est plus spécifique au Material Design. En mettant en avant des icônes facilement identifiables par des jeux d’ombres il est possible de guider, mener, conduire l’internaute aisément.
• La navigation sur appareils mobiles est plus confortable. Nous sommes de plus en plus nombreux à utiliser nos smartphones, nos tablettes pour surfer sur le Web. Par ses graphismes simples, le Flat Design est plus facilement redimensionnable. Ce style est parfaitement adapté aux exigences du responsive web design.

Simplifier l’usage d’une application

• L’utilisation est plus intuitive. Il n’est pas nécessaire de naviguer dans d’innombrables menus ou bien de lire des messages à rallonge pour accéder à une fonction spécifique.
• L’application s’universalise. Nul besoin de traduction. Grâce à ces graphismes simples et conventionnels (un triangle pour une fonction de lecture par exemple), il n’est plus nécessaire de traduire les commandes d’une application.

Renforcer l’objectif d’un module e-learning

•  La mémorisation est renforcée. Certaines personnes sont plus réceptives aux dessins qui accompagnent vos messages. En ajoutant des visuels simplifiés, vous touchez davantage de monde.
• La concentration des apprenants est accrue. A l’instar d’une application, une ergonomie simplifiée et intuitive facilite l’apprentissage des apprenants.

Cette liste d’exemples et d’avantages est bien entendu non exhaustive. Les bénéfices sont nombreux et multiples. Et vous, qu’en pensez-vous ? 

PUBLICITÉ

L’article Le design au service de vos messages est apparu en premier sur i-NT Conseil et Formation - Le Blog.

Le principe des banques d’images

Plusieurs choix s’offrent à vous pour illustrer vos créations :

• Prendre vos propres photos ou créer vos propres images.
• Faire appel à un tiers photographe et / ou graphiste.
• Télécharger vos illustrations via une banque d’images.

Chacune de ces méthodes possède ses propres avantages et inconvénients. La banque d’images vous offre l’avantage d’être simple, rapide et peu, voire pas du tout, onéreuse.

Le principe de fonctionnement est simple. Vous disposez d’un moteur de recherche par mots clefs pour sélectionner vos images parmi une bibliothèque variée de photos de qualité professionnelle. Un certain nombre de filtres et d’options vous permettent d’affiner les résultats (types de photos, taille, couleur dominante…). Vous pouvez dans certains cas télécharger une maquette pour effectuer des essais, des tests…

Ces banques d’images sont nombreuses sur le Net. Pour vous aider à les trouver plus facilement,  voici quelques liens sélectionnés pour vous :

Pixabay

pixabay.com

Ce site vous propose un très large éventail d’images, photos ou vidéos distribuées sur le principe du Creative Common. L’utilisation de ces médias est par conséquent gratuite mais sous certaines conditions.

On notera que le site est traduit en plusieurs langues, dont le français, ce qui facilite la recherche des visuels.

Freepik

fr.freepik.com

Ce site vous propose aussi un large éventail d’images et d’illustrations gratuites (sous réserve de mentionner l’auteur). Sa particularité est de proposer des fichiers au format PSD (format propre à Photoshop) et des images vectorielles exploitables avec des outils du type Illustrator par exemple.

Adobe Stock

stock.adobe.com

Adobe Stock est, comme son nom l’indique, un produit de l’éditeur, Adobe. La particularité de cette banque d’images réside dans la compatibilité du site avec le Creative Cloud (cloud dédié aux utilisateurs de logiciels tels que Photoshop, InDesign, Illustrator, Première… autrement dit la quasi intégralité des outils d’Adobe). 

Ainsi on y trouve des photos, mais aussi des images vectorielles, des templates, des vidéos… et même de l’audio !

La majorité du contenu proposé est payant, mais il y a quand même une belle quantité de photos gratuites.

Icon packs

iconpacks.net

Est-il besoin de traduire ? Icon Packs vous propose des packs d’icônes. C’est une banque incontournable pour trouver une icône en forme de téléphone, d’enveloppe, de carte de crédit… et bien plus encore.

Free PNG

freepng.fr

On termine avec Free PNG. Cette banque d’images rassemble des illustrations au format PNG qui intègrent donc de la transparence (c’est la spécificité de ce format). La bibliothèque est conséquente. Faites attention toutefois aux droits d’usage spécifiés avant de télécharger et d’utiliser un visuel sur ce site. Si c’est précisé « usage personnel », vous n’avez pas le droit d’utiliser cette image pour un site web ou des publications pros par exemple…

Bien entendu cette liste de banques d’images est non exhaustive. Il en existe beaucoup d’autres. Mais celles-ci devraient vous permettre de répondre à de nombreux besoins.

PUBLICITÉ

L’article 5 banques d’images pour illustrer vos sites, réseaux et autres… est apparu en premier sur i-NT Conseil et Formation - Le Blog.

Capter les visiteurs

A l’instar du paon qui séduit en dévoilant son plumage coloré, votre site attirera et captera plus de visiteurs s’il est beau, si son design est agréable. De belles couleurs, équilibrées, qui s’accordent parfaitement et ne jurent pas, qui sont en adéquation avec les thématiques de votre site, son contenu, une police de caractère simple, claire et lisible, attireront plus facilement, capteront les regards et l’attention.

Par ces signaux graphiques plaisants vous suggérez que le contenu, le fond, autant que la forme, l’est aussi. Le visiteur est ainsi plus enclin à visiter plus en détails et à passer plus de temps sur votre site.
N’oubliez pas que les internautes sont de véritables zappeurs. Ils surfent à la vitesse de l’éclair. Il ne leur faut que quelques secondes pour décider s’ils vont rester ou non sur un site. A ce stade, la plupart d’entre eux ne prend même pas le temps de lire quoi que ce soit. C’est donc l’aspect visuel et graphique qui prime.

Respecter les codes et conventions

Vous devez respecter les codes et conventions établies. Si votre activité est, par exemple, liée à l’environnement, au bio, les nuanciers de votre charte graphique devront faire appel à des tonalités vert clair. Tout ce qui touche à l’informatique, aux nouvelles technologies, fait souvent référence à des tonalités bleues…

A chaque secteur d’activité correspondent des couleurs, des codes graphiques. Respectez-les, ne les cassez pas. Vous risqueriez d’être associé à un domaine ou un secteur qui n’est pas le vôtre avant même que les visiteurs n’aient vu ce que vous proposez vraiment…

Comment trouver les couleurs qui correspondent le mieux à votre activité ? Commencez par rechercher et observer les sites de vos propres concurrents et/ou confrères. Il y aura nécessairement une dominante quasi commune qui ressortira. Faites aussi appel à vos amis, vos proches et demandez-leur de répondre le plus vite possible à la question suivante : « Quelle couleur vois-tu quand je te dis… » en citant votre activité. Interrogez le plus de personnes possible et notez la couleur qui revient le plus souvent.

Unité graphique

Vous devez respecter la règle de l’unité graphique. La charte graphique appliquée à votre site doit être la même pour l’ensemble des pages qui le compose, sans quoi l’internaute peut croire qu’il n’est plus sur le même site. Perdu, il va nécessairement voir ailleurs et ne gardera pas un très bon souvenir de votre site. Il y a donc aussi très peu de chances qu’il y retourne un jour…

Cette unité graphique doit aussi être respectée au-delà de votre propre site. On doit retrouver des éléments similaires dans vos flyers, sur vos véhicules, dans les locaux de votre entreprise, sur vos colis, dans vos courriers… Vous devez être facilement identifiable.

Un site doit être le reflet de votre entreprise et par conséquent revêtir les mêmes signaux graphiques, les mêmes couleurs, polices… Pourquoi seriez-vous différent sur le net de ce que vous êtes en dehors ?

Un outil en ligne

Pour vous aider dans la conception de vos chartes graphiques et dans le choix de vos couleurs il existe plusieurs sites et outils en ligne. J’apprécie particulièrement Paletton qui permet de créer un nuancier, de visualiser des exemples, d’obtenir les codes RGB des couleurs indispensables pour la conception graphique.

En résumé

• Gardez à l’esprit qu’une charte graphique plaisante est un moyen primordial pour capter davantage de visiteurs.
• Respectez les codes et conventions graphiques de votre secteur, vos thématiques.
• Soyez facilement identifiable en respectant une unité graphique dans et en dehors de votre site internet.

PUBLICITÉ

L’article Élaborer une charte graphique est apparu en premier sur i-NT Conseil et Formation - Le Blog.