Design

Les meilleurs outils pour créer des wireframes - Agence Sharing

Quels sont les meilleurs outils pour réaliser des wireframes ?

Quels sont les meilleurs outils pour réaliser des wireframes ? 2000 1500 Sharing

Sans passer par des étapes préliminaires comme le wireframing, concevoir une page web ou une application mobile serait beaucoup plus difficile. Afin de ne pas le confondre avec le prototype, comme c’est souvent le cas, commençons par rappeler ce qu’est un wireframe.

Un wireframe, c’est quoi?

Le wireframe, appelé aussi maquette fonctionnelle est une première représentation de l’architecture brute d’un site web ou d’une application contrairement au prototype qui se rapproche déjà du produit final. Le wireframe sert à indiquer l’emplacement de chaque élément des pages et à définir les liens qui doivent être établis entre elles. Il s’agit d’un document synthétique et simple où les annotations sont courtes et précises. Il ne faudra cependant pas oublier d’y indiquer les éléments essentiels comme le menu, les CTA et la barre de recherche outre les blocs de textes et les images. Pour vous faciliter la vie, il existe des logiciels dédiés à la création de wireframes mais avant d’en parler, il faut comprendre pourquoi est-ce qu’il faut passer par cette étape.

Pourquoi utiliser des wireframes

Le wireframe est indispensable pour avoir une vision globale de l’envergure d’un projet web. Par conséquent, vous pourrez non seulement prévoir toutes les ressources nécessaires mais vous pourrez aussi avoir une idée plus précise du coût du projet. 

Le wireframe est également un outil efficace pour organiser la structure de votre site ou application et pour prévoir à l’avance ce qui peut être amélioré et de quelle façon. Il permet ainsi de mettre en place une meilleure expérience utilisateur. 

Mais l’intérêt premier du wireframe se trouve dans la gestion du temps. La création d’un wireframe permet à votre client d’avoir un premier aperçu de ce qui sera réalisé et d’émettre dès le départ ses opinions. Ainsi, vous n’aurez pas à réaliser des modifications et des corrections complexes qui risquent de plomber votre budget temps quand la réalisation du projet se trouvera à un stade plus avancé. Il est utile pour toute l’équipe, notamment pour le web designer.  

Maintenant que vous connaissez les avantages que la création d’un wireframe représente, voyons comment vous pouvez en créer un. 

Les outils freemium 

Il existe de nombreux logiciels qui permettent de créer des wireframes. Les plus courants sont les outils freemium. Parmi les plus appréciés, on notera :

Moqups : c’est une application très complète qui est adaptée au travail d’équipe car elle est reliée à Confluence et à Jira. Lier les wireframes est aussi facile avec Moqups. L’application existe en version gratuite mais pour avoir les fonctionnalités complètes, la version de base coûte 13$/mois

Adobe XD : cette application permet d’animer le wireframe afin de mieux illustrer les interactions entre les pages.

MockFlow : il s’agit d’une suite d’applications qui vous permet de créer un site de A à Z en commençant par le wireframe. L’utilisation de chaque application est gratuite pour un projet. Comptez 19$ mensuel pour un nombre illimité de projets.

Whimsical : c’est un outil facile d’utilisation avec des fonctionnalités qui permettent d’avoir rapidement un bon rendu.

MarvelApp : cette application permet de synchroniser les projets sur Dropbox et de les partager avec votre équipe. Créez des wireframes directement sur votre navigateur avec MarvelApp.

Justinmind : créez des wireframes cliquables avec cet outil. Comme Whimsical et MarvelApp, Justinmind est aussi adapté à la création de prototype. 

Outre les outils freemium, il y a aussi des outils 100% gratuits qui permettent de créer de bons wireframes.

Les outils gratuits pour créer des wireframes

Figma : cet outil permet de créer gratuitement des wireframes en ligne. Grâce à lui, on peut partager facilement les wireframes et les échanges peuvent se faire en temps réel.

Mockingbird : Outil gratuit et facile à prendre en main pour créer et partager des wireframes cliquables et interactifs. La version payante de l’outil offre des fonctionnalités plus développées.

Si les outils gratuits peuvent être d’une grande utilité dans certains cas, il est quand même préférable d’opter pour les outils payants, afin d’accéder à plus de fonctionnalités et pour obtenir un rendu  plus professionnel. Voici quelques outils que vous pouvez utiliser.

Les outils payants

Balsamiq : bénéficiez d’une large palette d’éléments de base avec cet outil et déplacez-les facilement sur votre plan de travail grâce à la fonctionnalité drag-and-drop. Balsamiq permettra à votre équipe de travailler à plusieurs sur un même document. Comptez 9$/mois pour 2 projets simultanés si vous travaillez en ligne, 89$/utilisateur si vous achetez l’application pour travailler offline et 5$/mois pour utiliser Balsamiq for Google Drive. Pour chaque option, un essai gratuit de 30 jours est offert. 

Sketch : Outil destiné aux web designers, très riche en ressources et avec une interface intuitive. Il fonctionne cependant uniquement sur Mac et l’interface est en anglais. On peut acheter une licence à 99$/an ou opter pour un abonnement de 9$ par utilisateur par mois. Un essai gratuit de 30 jours est également offert.

Axure : cet outil est adapté aux professionnels et au travail en équipe. Collaborer devient facile avec Axure, l’outil permet l’ajout de notes et commentaires. Axure est seulement disponible sur ordinateur (Mac et PC). Prévoir 29$/mois pour l’utiliser. A noter qu’Axure offre cependant des outils gratuits de wireframing pour les étudiants et les professeurs. 

les bonnes pratiques en UX design de site web - Agence Sharing

UX design de site web : les bonnes pratiques

UX design de site web : les bonnes pratiques 2000 1500 Sharing

Pendant longtemps, on a eu la mauvaise habitude de penser que le design était un élément purement décoratif. Ce n’est plus vraiment le cas aujourd’hui. Le design ne sert pas uniquement à embellir un site web, il doit faciliter son utilisation et ainsi augmenter le niveau d’attention des internautes sur son contenu. Il est donc tout à fait pertinent de parler d’UX design de site web. Mais comment se servir du design pour améliorer l’expérience utilisateur ? Voici les bonnes pratiques à suivre pour mettre vos talents de designer au service des utilisateurs de vos sites.

Connaître l’audience du site à designer

Le design doit être conçu dans le but de faciliter la navigation à l’intérieur du site, de comprendre les différentes fonctionnalités qu’il propose et de retenir l’attention des internautes. Il est donc nécessaire de bien connaître l’utilisateur final du site. C’est indispensable afin de choisir le bon UX design, celui qui touchera au mieux la cible visée.

Mettre en place une hiérarchie visuelle

La hiérarchie visuelle dirige l’internaute à porter d’abord son regard sur les informations les plus importantes d’une page web. Généralement, la meilleure façon d’y arriver est de rendre les éléments à mettre en valeur plus grand que les autres. Par ailleurs, comme les yeux de l’internaute sont naturellement attirés par les premières lignes qui se trouvent en haut à gauche de la page web (technique du eye-tracking), le designer doit exploiter cet emplacement pour mettre en valeur le message le plus important.

Faire preuve de créativité sans bousculer les standards

En tant que designer digne de ce nom, vous vous devez d’être original. Toutefois, cela ne veut pas dire que vous devez modifier tous les standards du web, sans quoi les internautes ne s’y retrouveront plus. Par exemple, il n’y a aucune pertinence à déplacer le login d’un site ailleurs qu’en haut à droite de l’écran, car les internautes ont l’habitude de le trouver à cet endroit.

Expliquer aux internautes ce que vous leur demandez de faire

Tous vos visiteurs ne sont pas branchés informatique et web. Pour qu’ils soient à l’aise en utilisant votre site, l’UX design doit leur apporter l’explication dont ils ont besoin. En pointant leurs souris sur une icône peu parlante, les internautes pourraient par exemple voir son sens expliqué dans une bulle. C’est également valable pour les formulaires de contact. Il est important de bien signaler quelle erreur l’internaute a commise pour lui permettre de la corriger facilement. Ne vous contentez pas de dire qu’il y a une erreur.

Situer l’utilisateur dans son parcours

Pour que vos visiteurs ne quittent pas votre site à cause d’un malentendu, prévoyez des pages ou des messages leur notifiant ce qui est en train de se passer : téléchargement ou recherche en cours, page introuvable, etc.

Utiliser des éléments cohérents

La cohérence à l’intérieur d’un site est en étroite relation avec le respect des standards du web. Pour que le parcours utilisateur soit facile et intuitif, il est important d’uniformiser les éléments utilisés sur toutes les pages comme les checkboxes, les menus drop down, l’affichage des liens, des boutons, etc. Les internautes auront ainsi moins de difficulté à s’en servir.

Etablir un menu de navigation simple et intuitif

Votre menu et ses intitulés doivent être clairs pour les visiteurs afin qu’ils puissent naviguer sans problème entre toutes vos pages et ainsi rester plus longtemps sur le site.

Créer des pages bien aérées

Les espaces blancs sont utiles pour faciliter la lecture d’une page web mais surtout, ils permettent de mettre en évidence les éléments importants de votre page comme les call-to-action par exemple.

Un design responsive

Le mobile est en train de devenir le support le plus utilisé par les internautes aujourd’hui. La responsivité des sites n’est donc plus un choix, c’est une obligation. Les sites doivent être affichés correctement quel que soit le support que les visiteurs utilisent pour les consulter. Dans le cas contraire, les mobinautes quitteront rapidement le site en question.

En suivant ces quelques conseils, vous améliorerez de manière significative l’expérience utilisateur de votre site par le design. Les bénéfices seront nombreux en commençant par la diminution de votre taux de rebond jusqu’à la conversion de vos visiteurs en clients. Bref, il ne vous reste plus qu’à tout mettre en pratique !

Le design thinking c'est quoi - Agence Sharing

Introduction au design thinking

Introduction au design thinking 2000 1500 Sharing

Afin de réussir un projet quel que soit son type, il est important de mettre l’utilisateur au cœur de sa conception. Une entreprise ne peut en effet créer un nouveau produit sans savoir s’il sera bien apprécié des consommateurs. Parmi les différentes méthodes utilisées afin de cerner les besoins des clients, le design thinking s’avère être l’une des plus efficaces. Si son nom nous fait penser immédiatement aux projets digitaux, son usage est beaucoup plus large et il peut tout à fait servir à résoudre d’autres problématiques concernant l’entreprise. Pour comprendre son utilité, commençons par le définir.

Qu’est-ce que le design thinking ?

Quand on applique le design thinking, on adopte la méthode de travail d’un designer. Il s’agit d’une démarche créative qui consiste à créer une équipe pluridisciplinaire afin d’analyser les besoins des utilisateurs d’un produit. Elle apporte également des solutions aux éventuels problèmes qu’ils pourront rencontrer à l’utilisation de ce produit.

Bien que les origines du design thinking remontent aux années 50 avec l’apparition du Brainstorming, le terme a été vu pour la première fois dans un ouvrage de Peter Rowe intitulé “Design Thinking” et publié en 1987.

Le maître-mot du design thinking est la collaboration. En effet, pour créer un produit innovant, il faut se mettre à la place de l’utilisateur et les demandes de ce dernier s’adressent à toutes les compétences de l’entreprise. Afin de mettre en œuvre le design thinking, il faut généralement passer par 5 étapes dont l’ordre peut varier selon le produit ou la problématique en question.

Les étapes du design thinking

Dans le but de proposer un produit satisfaisant aux utilisateurs, le design thinking doit permettre de les comprendre, leur offrir des solutions et tester ces dernières afin de trouver la meilleure solution. Pour ce faire, voici les principales étapes à suivre :

Comprendre les utilisateurs 

Il s’agit de comprendre comment l’utilisateur se sent et réagit par rapport au produit que le porteur de projet veut proposer. Le design thinking ne se contente pas de poser des questions pour identifier ces besoins. Il demande une véritable immersion, c’est-à-dire de se mettre à la place des utilisateurs afin de les comprendre, de savoir à quelles problématiques ils sont confrontés dans la réalité, de connaître leurs habitudes. Le travail en équipe permettra ici de soulever une plus grande diversité de points de vue. 

Définir les besoins

Selon les résultats de l’observation ci-dessus, la seconde étape consiste à organiser et à hiérarchiser les besoins des utilisateurs dans le but de définir la ou les problématiques que le produit va devoir résoudre. Cette étape tiendra aussi compte des objectifs de l’entreprise à l’origine du projet. L’objectif devrait donc être clair à partir de cette étape.

Générer des idées (idéation)

C’est ici que l’intelligence collaborative va prendre tout son sens. Les collaborateurs issus de différentes disciplines vont tâcher de trouver différentes idées qui permettront de résoudre les problèmes : ce sont les hypothèses. Dans le design thinking, il faut plusieurs alternatives afin de pouvoir choisir la meilleure solution.

Créer des prototypes

Le prototypage est la phase clé du design thinking. Les hypothèses vont servir à créer des prototypes, c’est-à-dire que les équipes vont pouvoir créer un « brouillon » du projet selon leurs meilleures idées. Elles procéderont ensuite à une sélection parmi les prototypes selon les différentes contraintes comme le temps, le budget, la faisabilité technique. A cette étape, le plan d’action devra aussi être défini. 

Faire des tests

Le produit doit passer en phase de test avant d’être définitivement lancé à une plus grande échelle. Il est important d’avoir les retours des utilisateurs afin de corriger les éventuels défauts du produit et de savoir s’il permet d’atteindre l’objectif prévu ou s’il doit être amélioré.

Outre la possibilité d’assurer le succès d’un projet avant son lancement, le design thinking a l’avantage de renforcer la cohésion des équipes au sein de l’entreprise, de stimuler la créativité de chacun et surtout d’offrir une bien meilleure expérience utilisateur. Bref, pourquoi ne pas l’adopter pour votre prochain projet ? 

Tester les combinaisons de typos grâce à FontPairings

Tester les combinaisons de typos grâce à FontPairings 2000 1500 Sharing

La Typographie est parfois considérée comme un élément secondaire dans la création d’un projet digital ou d’une campagne de communication. Pourtant, elle a un rôle majeur à jouer, car avant d’être un élément décoratif, c’est elle qui véhicule en premier le message à communiquer. Trouver la bonne typographie est d’ailleurs loin d’être une tâche aisée, spécialement pour les designers. En effet, on n’utilise pas les mêmes typos pour un magazine et un e-book, pour une start-up et un restaurant, etc. Même à l’intérieur d’un site web, on n’utilise pas toujours la même typo. Pour faciliter la tâche des designers, il existe aujourd’hui des outils comme Fontpairings qui est d’une aide précieuse pour la recherche de typos.

Fontpairings pour trouver la typo idéale

Les designers se servent généralement des mêmes sources pour choisir les typos qu’ils utilisent. Aussi, pour avoir un projet web unique et bien en accord avec son objectif, il est souvent nécessaire de faire des combinaisons. Fontpairings est l’un des meilleurs outils pour réussir cette mission. Cet outil créé par bypeople.com est en effet simple d’utilisation. Les designers n’ont pas à chercher loin pour trouver les typographies à combiner car le site fait des propositions selon le type de projet qu’on veut créer. Il suffit de choisir au préalable le thème du projet en question et Fontpairings génère de nombreuses combinaisons que vous pouvez tester.

Si vous voulez aller plus loin, les typographies combinées sont encore modifiables manuellement. Vous pouvez avoir un aperçu de votre création sur un desktop, une tablette ou un mobile. C’est un critère à ne pas négliger pour un projet web car les rendus sont parfois différents. Avoir les typos adéquates pour tous les supports permet de gagner beaucoup de temps et de palier aux éventuels problèmes d’affichage lors de la création d’un site ou d’une application web.

L’interface de Fontpairings

Créer est plus facile avec Fontpairings

Si vous êtes un graphiste chevronné, vous préférez peut-être faire vos designs selon vos propres inspirations. C’est même certain que vous avez déjà vos propres règles quant à la combinaison des polices de caractères. Néanmoins, sachez que Fontpairings n’est pas réservé aux débutants et d’ailleurs, il se base sur vos propres choix pour vous faire des propositions. Grâce à ce genre d’outil, vous pourrez découvrir facilement de nouvelles polices que vous pourrez ensuite utiliser pour vos combinaisons. Diversifiez vos créations avec Fontpairings afin de personnaliser vos projets et d’avoir plusieurs choix à proposer à vos clients.

Pour vous simplifier la vie, Fontpairings est totalement gratuit et les polices de votre choix sont téléchargeables depuis le site. Utiliser un tel outil vous permettra de vous consacrer davantage à la création au lieu de perdre du temps en faisant des recherches à divers endroits. Les typographies proposées par Fontpairings vous aident à trouver des polices de caractères cohérentes pour chaque type de projet. Vous n’aurez plus à vous demander quelles polices associer ni à consulter l’histoire de la typographie afin de trouver les typographies qui ont été créées à la même période avant d’entamer votre combinaison.

Les 5 meilleures sources d’inspiration en web design

Les 5 meilleures sources d’inspiration en web design 2000 1500 Sharing

Créer un site web de toutes pièces est un véritable challenge. Si vous ne savez pas par où commencer, sachez qu’Internet regorge de sources d’inspiration. Voici donc les 5 meilleures plateformes pour trouver de l’inspiration pour le design de votre site web.

Pinterest

Dès qu’il s’agit de trouver de l’inspiration, et cela qu’importe le domaine, Pinterest est une valeur sûre. Ici, vous trouverez une quantité impressionnante d’images et pourrez affiner ou élargir votre recherche selon vos envies : qu’il s’agisse de trouver une palette de couleur ou un design général pour votre site, vous trouverez votre bonheur sur Pinterest.
inspiration web - Pinterest

 

Designspiration

Designspiration est quasiment similaire à Pinterest, à la seule différence que vous n’y trouverez que des publications en rapport avec le design. Vos recherches seront donc bien plus précises qu’avec Pinterest.
inspiration web - Designspiration

 

SiteInspire

SiteInspire concerne uniquement le web design. La barre de recherche y est particulièrement pratique, puisqu’il est possible de trouver des inspirations de sites web selon des mots clés, représentant une activité par exemple. SiteInspire propose une capture d’écran de la page d’accueil de chaque site, mais vous pouvez évidemment vous rendre sur les sites originaux.
inspiration web - SiteInspire

 

CSSnectar

CSSnectar rassemble des milliers d’inspirations pour votre site web, notées par des graphistes selon trois critères : le code, le design et la créativité. Vous pouvez vous rendre sur les sites présentés, et filtrer les résultats selon la couleur, le thème, les fonctionnalités ou le pays. Si cependant vous recherchez un design simple type WordPress, passez votre chemin : vous ne trouverez que du contenu créatif et original sur CSSnectar.
CSSnectar

 

Awwwards

Cette plateforme est certainement la plus complète de cette liste. Particulièrement bien conçu, ce site est constamment mis à jour, avec du nouveau contenu chaque jour. Là encore, de nombreux filtres sont applicables pour vos recherches. Chaque site web présenté se voit attribuer une note selon son design, sa créativité, son contenu et bien évidemment l’expérience utilisateur. Des sites les plus fonctionnels et épurés aux interfaces les plus élaborées, vous trouverez forcément ce que vous cherchez sur Awwards.
Awwwards

Créer un bon logo : les 5 principes clés

Créer un bon logo : les 5 principes clés 2000 1500 Sharing

L’objectif d’un logo est que celui-ci représente parfaitement une marque tout en la différenciant des autres. Lorsqu’une personne est face à un logo, elle est en mesure de déterminer si elle pourrait potentiellement acheter un produit : bien plus qu’un simple dessin, le logo est un argument de vente. La création d’un logo est un processus complexe reposant sur quelques principes fondamentaux. Une fois que vous avez déterminé qui est votre client, et surtout le message que vous souhaitez lui faire passer, voici les 5 principes auxquels vous devez penser pour être sûr de ne pas vous tromper.

La simplicité

Un logo doit être visible et accessible, tout en reflétant l’ADN de la marque. La simplicité rend un logo facilement reconnaissable, polyvalent et mémorable. Nike l’a bien compris, avec son emblématique “Swoosh” monochrome. Pour autant, simple ne veut pas dire facile. Du choix des éléments actifs, au choix des typographies, des couleurs et des effets de style : il faut trouver un juste milieu afin d’obtenir un résultat à la fois esthétique, cohérent et mémorable.

logo Nike

© Nike

La flexibilité

Ce principe suit de près celui de la simplicité. Lors de la création d’un logo, il faut penser à tous les supports sur lesquels celui-ci pourra se retrouver : il doit être applicable sur le web comme en impression, sur un fond clair comme sur un fond sombre, en petit comme en grand, sur des supports publicitaires, sur un site web, une signature de mail… Bref, il doit être lisible partout, et plus encore, il doit être aussi efficace en couleurs qu’en noir et blanc.

L’équilibre

L’esprit humain perçoit un design harmonieux et équilibré comme naturellement attrayant. Pour atteindre une telle harmonie, le logo doit être le résultat d’une réelle réflexion quant à l’équilibre entre le graphisme, les couleurs, et les typographies, mais aussi quant aux proportions et à l’espace qu’occupe chaque élément.

La durabilité

Le logo est une signature : c’est l’élément qui permet aux consommateurs de reconnaître une marque, et cela sur le long terme. Il est donc important de ne pas se fier qu’aux tendances actuelles et de réfléchir en termes de longévité. Si beaucoup d’entreprises procèdent à une refonte (modernisation) de leur logo au bout de quelques années, rares sont celles qui le changent complètement.

L’originalité

Un logo est unique, et c’est s’il se démarque des autres qu’il attire l’attention. Il faut cependant garder à l’esprit que les textures, les typographies, les couleurs ou les formes peuvent transmettre des émotions (parfois inconsciemment), et que bien qu’original, un logo doit transmettre un message cohérent avec l’ADN de la marque.

ux

4 tendances UX à suivre

4 tendances UX à suivre 2000 1500 Sharing

L’UX design vise à optimiser l’interaction d’un utilisateur avec une interface. Satisfaire l’utilisateur par un meilleur confort a toujours été une priorité, et cela dans tous les domaines. En matière d’UX, l’innovation est aussi un objectif prioritaire.
Voici donc les 4 tendances à suivre en matière d’expérience utilisateur en ligne.

La reconnaissance vocale

Les recherches vocales sur Google ont été multipliées par 35 entre 2008 et 2016. Les assistants virtuels tels que Siri, Alexa ou Google ont participé à démocratiser l’usage de la reconnaissance vocale : la voix est est un marché en plein essor. Cette pratique, qui rend l’expérience utilisateur plus fluide et pratique, et aujourd’hui surtout utilisée pour écouter de la musique ou faire une recherche internet. Néanmoins, il est plus que probable que d’autres usages tels que le shopping se développeront petit à petit.

Les interfaces personnalisées

Netflix l’a bien compris, la recette du succès est de proposer une expérience personnalisée selon chaque utilisateur. L’interface réagit et évolue en fonction des intérêts de l’utilisateur, ses précédentes recherches, ses interactions ou encore ses préférences. Finalement, l’expérience vécue est totalement personnalisée et correspond exactement à ce que recherche l’utilisateur, le graal pour un UX designer.

La réalité augmentée

Si les réseaux sociaux, notamment Instagram et Snapchat, utilisent la réalitée augmentée depuis quelques années déjà à des fins ludiques, les plateformes de e-commerce y voient aujourd’hui une réelle opportunité. D’ailleurs, le géant suédois Ikea l’utilise déjà : depuis l’application mobile Ikea, les utilisateurs peuvent visualiser la manière dont un meuble s’intègre à leur intérieur en réalité virtuelle.

L’authentification biométrique

Les menaces numériques ont augmenté, et dans un monde où la protection des données est au coeur des préoccupations, les entreprises et leurs clients doivent renforcer leur sécurité en ligne. Les technologies biométriques, notamment la reconnaissance faciale et les empreintes digitales, sont certainement la meilleure des solutions à ce besoin. D’ailleurs, elles sont déjà utilisées pour sécuriser les banques en ligne, par exemple. À l’avenir, la possibilité de se connecter biométriquement sur différents réseaux sociaux ou interfaces sera certainement une banalité, mais surtout un gage de sécurité pour les utilisateurs (d’autant plus que cela règle aussi le problème des multiples mots de passe à retenir).

signification couleurs

La signification des couleurs en communication

La signification des couleurs en communication 2000 1500 Sharing

De nombreuse études sur la couleur démontrent que celle-ci influence notre inconscient et de ce fait notre comportement. La perception des couleurs varie selon le contexte ou les cultures : les esquimaux ont par exemple plus de 70 termes différents pour définir la couleur de la neige tandis que nous n’avons que le blanc, nous associons le noir au deuil tandis que les indiens y associent le blanc…

Quoi qu’il en soit, il est primordial de mener une réelle réflexion quant à la signification des couleurs dans l’élaboration d’une identité visuelle, afin que le message soit pertinent et percutant.

Rouge

Le rouge est une couleur chaude communément rattachée à la passion et à l’amour. Cette couleur évoque l’énergie et la vitesse, mais aussi le désir sous toutes ses formes. Cependant, elle est à manier avec précaution, puisqu’elle est aussi associée au danger et au vice.

rouge

Bleu

Le bleu est la couleur de la confiance, de la responsabilité, de l’honnêteté et de la loyauté. Il inspire la sincérité et le calme. Un bleu pâle est plutôt méditatif tandis qu’un bleu vif est énergisant et rafraîchissant. C’est une couleur populaire et particulièrement utilisée par les banques, le secteur juridique et la santé ainsi que dans le high tech.

bleu

Jaune

Couleur du soleil, le jaune traduit en général la joie, l’énergie et l’intellect. Cependant, perçue comme une couleur enfantine par les hommes et parfois associé à la lâcheté et la tromperie, le jaune est à manier avec précaution. Il évoque en général des moments agréables, et est souvent utilisé dans l’agroalimentaire, le tourisme ou le domaine des assurances.

jaune

Vert

Spontanément, le vert renvoie à la nature, à l’écologie et au développement durable, mais cette couleur a autant de déclinaisons qu’elle a de significations. Tandis que le vert clair évoque la jeunesse et l’énergie, le vert foncé évoque plutôt la croissance économique et le vert olive la paix. Enfin, cette couleur peut aussi renvoyer à la maladie et est source de superstitions dans certains métiers (les comédiens et acteurs notamment). C’est la couleur de prédilection de la science et de la médecine, ainsi que des ressources humaines et bien évidemment des métiers en rapport avec la nature et l’environnement.

vert

Orange

Couleur phare des sixties, le orange inspire autant l’énergie du rouge que le bonheur du jaune. Il s’agit ici d’une couleur “amicale” et chaleureuse, qui inspire la générosité et le plaisir. Elle s’adapte autant à l’e‑commerce et à la technologie qu’au divertissement, au sport, à la communication ou encore à la mobilité.Ses déclinaisons les plus foncées inspirent quant à elles le luxe, notamment avec le célèbre orange d’Hermès.

orange

Rose

Le rose suggère la douceur, la tendresse et la féminité, mais a surtout une connotation jeune voire enfantine. Cette couleur est souvent associé à du contenu ciblant les jeunes filles, ainsi qu’aux confiseries, à la pâtisserie ou encore aux loisirs créatifs.

rose

Violet

Le violet est un mélange entre la stabilité du bleu et l’énergie du rouge. Synonyme de rêve et d’imagination, le violet est considéré comme une couleur assez artificielle, puisqu’elle n’est pratiquement pas présente dans la nature. Elle est souvent utilisée dans les domaines culturels et spirituels. Quand il tend vers le fuchsia, le violet transmet de l’énergie et s’associe tout à fait à l’esthétique et aux cosmétiques.

violet

Marron

Le marron est la couleur de la terre, de la tradition et de la stabilité. Cette couleur inspire la masculinité, la force, la densité et la virilité, et correspond particulièrement à des produits alimentaires tels que le café ou le chocolat, mais aussi aux produits du terroir. Associé à du doré par exemple, le marron inspire plutôt le luxe et l’élégance.

Gris

Le gris, autrefois associé à la tristesse, est aujourd’hui une couleur moderne et intemporelle. Il est sobre et passe-partout et se marie à la perfection avec les autres couleurs. Cette couleur s’adapte particulièrement aux domaines du design et de la technologie.

gris

Noir

Le noir est une couleur controversée : quand certains y voient le deuil et la tristesse, d’autres y voient au contraire la puissance, le luxe et la sophistication. Cette couleur est à utiliser avec parcimonie, puisqu’elle peut rapidement alourdir une composition. La mode et le marketing privilégient régulièrement son utilisation dans leur identité visuelle.

noir

Blanc

Le blanc, associé à la pureté et de la perfection, inspire un sentiment positif. Le blanc représente la brillance et l’éclat et se marie à la perfection avec toutes les autres couleurs. Son utilisation apporte de la clarté, à une composition, cependant trop de blanc peut laisser un sentiment de vide au spectateur.

blanc

Le vocabulaire du Web Design

Le vocabulaire du Web Design 2000 1250 Sharing

Le webdesign et les métiers du web utilisent souvent un vocabulaire que seuls les initiés comprennent : CSS, header, wireframe, favicon… Voici une sélection de mots bien utiles pour comprendre un webdesigner quand il parle.

A

Antialiasing

L’anticrénelage (en bon français) est une technique permettant de réduire l’effet de pixellisation d’un caractère à l’écran. Si une typo vous paraît floue à l’écran, c’est que l’antialiasing n’a pas été activé.

Arborescence

Organisation schématique et hiérarchique des différentes pages d’un site. L’arborescence permet d’avoir une vue générale de la navigation sur un site.

B

Bannière

Image fixe ou animée présentant un contenu publicitaire. Le but principal d’une bannière est, bien sûr, de recevoir le plus de clics.

Baseline

Phrase simple et courte, résumant à elle seule la fonction ou l’activité générale du site. Cette baseline est généralement placée, en gros, sur la home page du site, bien en évidence au-dessus de la ligne de flottaison.

Brief

Document de travail, en général rédigé par le commanditaire d’un projet, qui définit tous les contours de sa commande : contexte, particularités et objectifs du projet (et parfois même, budget !). Ce document est extrêmement précieux pour les agences, puisqu’il permet de cadrer au mieux la demande et d’éviter les hors-sujet. Lire la définition complète…

C

Call-to-action

Le CTA est un bouton dont la fonction principale est d’inciter au clic.

Charte graphique

Document contenant toutes les exigences graphiques liées à une marque et devant être respectées, par exemple, dans la création d’un site web. On y trouvera les typographies, les couleurs, le logo et ses variantes, et parfois des exemples d’images et d’icônes à utiliser.

CMS

Un CMS (“Content Management System”) est, comme son nom l’indique en anglais, un système de gestion de contenu, permettant de gérer des sites complets. Exemple de CMS : WordPress, Drupal, Magento…

CSS

Acronyme de “Cascading Style Sheets”, le CSS est un format de fichier contenant toutes les information de style d’un site web.

E

Em

Le “em” est une unité de mesure de typographie, comme le pixel ou le point. Sa particularité : elle est relative et non fixe. Elle permet donc d’adapter sa taille relativement aux résolutions et aux paramètres des utilisateurs, ce qui est très pratique dans le cas d’un design responsive.

Ergonomie

Plus un site ou une application est ergonomique, plus le parcours utilisateur y est facilité. C’est en partie le travail de l’UX designer de rendre une interface web la plus ergonomique possible.

F

Favicon

Le favicon (“favorite icon”) est un logo miniture permettant d’identifier facilement un site sur les onglets d’un navigateur.

Footer

Le footer, ou “pied de page” en français, désigne la zone la plus basse d’un site. On y retrouve généralement le menu détaillé.

G

Gabarit (template)

Un gabarit est un modèle de page que l’on pourra réutiliser dans la construction de différentes pages d’un site. Contrairement aux sites statiques, les sites dynamiques construits sur des CMS utilisent un certain nombre de gabarits standards qu’un webdesigner devra designer, quoiqu’il arrive. Ces gabarits sont, par exemple : une page type, la liste des articles, un article seul, la liste des items de portfolio, un item de portfolio seul, etc.

H

Header

En-tête d’un site, où l’on placera généralement le logo et le menu. On peut également créer un pré-header, qui se placera comme son nom l’indique, au-dessus du header

L

Ligne de flottaison

Limite théorique de visibilité dans une page. Au-delà de cette ligne, l’utilisateur doit scroller pour afficher le contenu. En webdesign, il est important de bien définir la ligne de flottaison d’un site (“page fold” en anglais), pour bien placer les éléments les plus importants dans la partie visible des pages du site.

M

Mock-up

Un mock-up est une maquette graphique simplifiée d’une page web. On n’utilise plus trop le terme, qu’on remplacera par les termes plus précis de “wireframe” (vue schématique d’une page) et “gabarit” (maquette standardisée d’une page).

P

Pictogramme

Représentation graphique minimaliste et porteuse d’un sens unique et aisément compréhensible. En webdesign, le choix ou la création d’un “set de pictos” cohérent graphiquement est très important, puisqu’il permet d’informer ou d’orienter rapidement l’utilisateur.

Pixel

Un pixel (souvent abrégé en “px”) est le plus petit élément d’une image numérique et permet d’en déterminer la résolution. Un pixel permet de créer une couleur, à partir de trois composants diffusant les couleurs primaires rouge, vert et bleu (RVB, ou “RGB” en anglais).

PSD

Acronyme de “PhotoShop Data”, le PSD est un format propriétaire d’Adobe permettant d’enregistrer des compositions réalisées avec le logiciel Photoshop. Ce format permet notamment de conserver tous les calques d’une image. Initialement très utilisé pour créer des designs de sites web et d’applications, Photoshop est de plus en plus remplacé aujourd’hui par des logiciels plus spécialisés et plus adaptés au webdesign, comme Adobe XD, Sketch ou Figma.

R

Responsive design

Le responsive design permet d’adapter un design de site web aux différentes tailles et résolutions d’écrans, comme les écrans d’ordinateurs, tablettes, téléphones…

Résolution

La résolution est la finesse de rendu d’un élément graphique sur un écran. La résolution d’un écran est son nombre de pixels sur sa longueur multiplié par celui sur sa hauteur. Par exemple, la résolution d’un MacBook pro 15,4 pouces retina est de 2880 x 1800 px.

Retina

Le retina est un type d’écran lancé par Apple et présentant une résolution très élevée. Ces écrans, composés en général de deux fois plus de pixels que les écrans traditionnels (donc d’une densité de pixels deux fois plus importante), nécessitent de créer des éléments graphiques adaptés, notamment des images deux fois plus grandes (@X2) pour qu’elles n’apparaissent pas floues sur ces écrans.

Rollover

Effet de texte ou d’image apparaissant au survol d’une zone d’une page web avec le curseur de la souris.

RVB

Le RVB (ou “RGB” en anglais), abréviation de Rouge, Vert et Bleu, est le principal système informatique de couleur. Les écrans, grâce aux pixels (eux-mêmes une combinaison de ces trois couleurs), reconstituent une couleur par synthèse additive de ces trois couleurs projetées. Chaque pixel crée ainsi une couleur unique en combinant des pourcentages

U

UI

L’UI (pour “User Interface”) désigne le lien entre l’homme et les machines, notamment par le biais d’une interface visuelle. Le travail sur l’UI d’un site web ou d’une application consiste à créer un système visuel qui facilitera l’accès aux contenus.

UX

L’UX (pour “User experience”) regroupe le travail sur l’expérience générale vécue par l’utilisateur d’un site web ou d’une application. L’UX designer devra donc prendre en compte aussi bien la dimension fonctionnelle d’une interface que sa dimension affective.

V

Vectoriel

Une image vectorielle est une image numérique composée d’éléments graphiques ne se dégradant pas lorsqu’on l’agrandit. Elle diffère en cela d’une image matricielle (JPEG, PNG…) qu’elle n’est pas composée de pixels, mais de formes et de couleurs. Les principaux formats d’images vectorielles sont EPS, AI et SVG. Dans la suite logicielle d’Adobe, Illustrator est spécialisé dans la création et l’édition d’images vectorielles.

W

Wireframe

Un wireframe est la maquette fonctionnelle d’un site ou d’une application. Créés en amont des maquettes graphiques, les wireframes permettent de définir la structure générale des pages sous forme schématique. Nous recommandons l’application en ligne Moqups. Lire la définition complète…

Typographie : les outils indispensables

Typographie : les outils indispensables 2000 1003 Sharing

On ne présente plus la typographie, l’outil indissociable du travail des graphistes et autres webdesigners. Pourtant, cet art n’est pas si aisé à maîtriser : il requiert  de l’expérience, de la patience, et surtout un œil connaisseur et aiguisé.
Quelle typographie choisir ? Quelles associations faire ? Est-elle bien dessinée ? Quelles sont les dernières tendances ? Tant de questions que vous vous posez chaque jour ! Pour vous faciliter la tâche et créer de beaux visuels qui ont du sens, voici une liste d’outils à utiliser sans modération :

FontFace Ninja

Il s’agit d’une extension qui vous permettra d’identifier très simplement les typographies des sites internet. En survolant avec votre curseur, vous pourrez connaître le nom et la taille de n’importe quelle fonte, mais aussi de les acheter ou de les télécharger gratuitement.
www.fontface.ninja

FontReach

Vous vous demandez quels sites utilisent l’Helvetica, l’Arial ou encore  la Roboto ? Il suffit de demander ! Entrez n’importe quel nom de fonte dans la barre de recherche, Font Reach vous indique la liste des sites qui utilisent la police en question.
www.fontreach.com

Font Pair

Vous avez trouvé LA typo de titrage qui colle parfaitement à votre visuel ou site internet, mais voilà, vous ne savez pas à quoi l’associer. Pas de panique, Font Pair vous vient en aide : le site vous propose une liste de Google fonts qui s’harmonisent parfaitement, il n’y a plus qu’à choisir votre association favorite.
www.fontpair.co

Typ

Vous êtes en panne d’inspiration ? Typ vous propose une sélection des plus beaux sites du moment et indique les polices utilisées. Des liens vous redirigent ensuite sur des sites comme Fontsquirrel, Google Fonts et bien d’autres pour télécharger les typos, pratique !
www.typ.io

Typewolf

Typewolf est un autre site pour suivre les tendances de la typographie. Il vous permet également de faire des recherches par police, raconte l’histoire de chaque fonte, propose des tops et des conseils. De quoi être incollable sur la question.
www.typewolf.com

Fontea

Fontea est une extension gratuite pour Photoshop qui vous permet en quelques clics de retrouver les 800 polices de Google sans télécharger votre sélection en amont !
www.fontea.madebysource.com

Prototypo

Vous pratiquez le dessin de caractère ou vous souhaitez vous lancer, mais le travail titanesque que cela représente vous fait peur ? Prototypo est fait pour vous ! Créez votre typographie le plus simplement du monde en jouant avec les formes de chaque glyphe. Créé en 2014 par deux Français, le logiciel risque de bousculer le monde de la typographie !
www.prototypo.io

Kern Type

Pour finir, voici un petit jeu très amusant pour tester vos connaissances sur l’interlettrage et le crénage. Kern Type vous propose de régler l’approche de 10 typographies différentes, vous êtes évalué sur chacune des étapes, puis obtenez une note finale sur 100. À vous de jouer !

www.type.method.ac