Chez T2Oplus, on aime partager nos idées, nos projets et nos bonnes pratiques et aujourd’hui on va parler de webdesign ! 

De temps en temps on vous partagera cher(s) lecteurs, lectrices un design de site (fictif bien-sûr) en vous expliquant notre réflexion et nos choix graphiques. Pour cette première édition du T2Oshare Design ! C’est moi la webdesigneuse de l’agence qui ait choisi le thème ! Amie des animaux je me suis dit go ! 

On va apposer notre créativité au service d’une clinique vétérinaire et pas n’importe laquelle : un endroit réservé à nos petits matous. 

Pour tout type de création design (site internet, supports de comm, logo, etc…) je passe par plusieurs phases qui m’aident à m’organiser, gérer et suivre l’avancée du projet durant sa réalisation. 

Ces étapes sont les suivantes :

1. Appropriation du sujet & veille concurrentielle & graphique : une clinique pour matous : quels sont ses services, sa valeur ajoutée… analyse de la « concurrence », de ce qui se fait dans le milieu vétérinaire sur la toile, l’ergonomie et l’arborescence des sites existants etc…

2. Réalisation d’un moodboard qui me permet de poser ma démarche créative, mes inspirations, mes pistes.. 

3. Réalisation de la maquette graphique 

Appropriation du sujet & veille concurrentielle/graphique

Dans le cadre d’un projet fictif : pas de consignes particulières, pas de cahier des charges, je suis totalement libre de suivre ma propre piste ! La feuille est blanche et c’est à moi de la remplir (bonheur) ! 

Je prends connaissance du milieu, de ce qui se fait, des cliniques existantes et de tout supports me permettant de m’orienter vers la bonne voie. 

On ne démarre pas un projet sans faire une veille ! Ça peut paraître logique mais elle est indispensable en webdesign (et dans n’importe quel travail créatif). Cette étape de veille je la décompose en plusieurs étapes : 

  • Une veille concurrentielle 
  • Une veille graphique

Cette veille me permet non seulement d’appréhender le marché et l’univers graphique adéquat par rapport au positionnement de la clinique mais également de m’inspirer des tendances webdesign actuelles pour créer un site cohérent et actuel. 

Moodboard & démarche créative

La deuxième étape a donc été de réaliser un moodboard pour regrouper tous les éléments recueillis lors de la première étape. Le moodboard m’aide à synthétiser mes recherches et avoir une vision illustrée et graphique de mon travail de veille et de mes diverses sources d’inspiration. Le moodboard regroupe à la fois des éléments photographiques, typographiques, colorimétriques, iconographiques ainsi que des éléments de langage qui me permettront de choisir le ton des messages mis en avant sur le site et les mots clés dans une logique de stratégie de communication pertinente (on fait ça bien n’est-ce pas ?).

J’ai réalisé ce moodboard sur Illustrator (parce qu’Illustrator c’est un peu mon petit bébé).. plus sérieusement qui a pour moi le grand avantage de créer plusieurs plans de travail différents et de diviser mes planches par thème. 

Maquette graphique : c’est là que ça devient intéressant !

Dans une logique ergonomique, je passe d’abord par le maquettage fonctionnel (un croquis) qu’on appelle aussi wireframe du futur site internet (enfin on a fait qu’une page d’accueil ^^). Cette première étape plus schématique me permet de définir les zones et les composants de l’interface. Afin de hiérarchiser les contenus, je procède à un découpage des pages sous forme de blocs en précisant le rôle de chaque contenant.

Dans un second temps je passe au maquettage en me basant sur le moodboard et le wireframe. 

Roulement de tambours …. On passe maintenant à la présentation du rendu et la description de mes choix et orientations graphiques.

Pour rappel mon client est une clinique vétérinaire pour chats :

Je suis partie sur un graphisme minimaliste en me focalisant sur la navigation et l’expérience utilisateur et pas uniquement sur l’esthétique pur et simple (sans pour autant le laisser de côté bien-sûr).
J’appelle ça le triangle doré du webdesign : esthétisme, navigation et expérience le combo parfait pour un webdesign de qualité. 

L’épure et le minimalisme : 

Je me suis donc positionnée sur un univers visuel épuré collant relativement bien à l’activité de l’entreprise, pas de fioritures mais un focus sur l’essentiel : soigner votre matou.

L’objectif est donc de simplifier le travail de l’internaute en lui donnant rapidement accès à l’info qu’il recherche. Pour notre clinique vétérinaire, j’ai choisi de sectionner la homepage par type d’information, ma page est donc construite en sous-parties bien distinctes les unes des autres. 

Beaucoup d’espaces, certain parleront même de « vides », en webdesign on préfère parler d’espaces. Pas n’importe quels espaces, du blanc, du blanc et encore du blanc car le blanc permet d’aérer la présentation et une meilleure mise en valeur des éléments qui favorise leur accès dans la page.

L’écran de l’internaute paraîtra moins chargé l’encourageant donc à rester plus longtemps sur le site (et oui nous aussi on pense analytics). 

J’ai également choisi de rester sur un agencement « full width » ou pleine largeur en utilisant l’intégralité de la largeur de la page pour placer mes éléments. La pleine largeur joue un rôle important dans la cohérence globale d’un site internet et créée aussi cet effet aéré sans pour autant prononcer l’aspect « vide ». 

Dans une logique ergonomique, je passe d’abord par le maquettage fonctionnel (un croquis) qu’on appelle aussi wireframe du futur site internet (enfin on a fait qu’une page d’accueil ^^). Cette première étape plus schématique me permet de définir les zones et les composants de l’interface. Afin de hiérarchiser les contenus, je procède à un découpage des pages sous forme de blocs en précisant le rôle de chaque contenant.

Dans un second temps je passe au maquettage en me basant sur le moodboard et le wireframe. 

Roulement de tambours …. On passe maintenant à la présentation du rendu et la description de mes choix et orientations graphiques.

Pour rappel mon client est une clinique vétérinaire pour chats :

Je suis partie sur un graphisme minimaliste en me focalisant sur la navigation et l’expérience utilisateur et pas uniquement sur l’esthétique pur et simple (sans pour autant le laisser de côté bien-sûr).
J’appelle ça le triangle doré du webdesign : esthétisme, navigation et expérience le combo parfait pour un webdesign de qualité. 

Du gras pour les titres et du light pour le reste 

police_grasse_titlesCôté typo, je pars sur deux codes typographiques très différents pour le titre H1 et les paragraphes. Cette différence de typo permettra à l’internaute de facilement identifier l’activité et le nom de la clinique (qui n’en a pas pour notre exemple). Pour le titre, on met le régime de côté pour une typo grasse et ronde, la police utilisée est « Work Sans » en version Bold. J’ai choisi de graisser uniquement le titre afin de délivrer rapidement l’information pour l’utilisateur et ne pas surcharger la page. Pour le reste du contenu texte de ma home c’est « Roboto Light » sans serif (sans empattements) qui est élue. 

Les polices sans serif simplifient la lecture de l’internaute, encore plus sur un écran, aucun superflu ne vient parasiter la qualité de lecture. La légèreté du light sans serif vient alléger et contraster le titre rond et bold de notre H1.   

Les codes du webdesign conseillent de ne pas utiliser plus de deux typographies différentes sur un site internet (3 grand maximum) afin de conserver une certaine homogénéité et favoriser la clarté de l’identité de marque. 

Pour la quantité des contenus, il faut synthétiser et essayer d’alléger en soulignant les informations importantes et pertinentes pour l’internaute qui ne prends plus le temps de lire les textes. Son attention est limitée alors allez à l’essentiel ! Le but n’est pas de tout supprimer mais restez concis c’est déjà bien, ça sera d’autant plus clair pour vos visiteurs ! 

En jouant sur des CTA (l’accordéon par exemple qui n’affiche le contenu texte que lorsque le visiteur clique sur +) on permet d’alléger la page sans pour autant supprimer les éléments textes importants. Pour ma clinique vétérinaire j’ai catégorisé mes différents contenus par typologies d’informations : présentation de la clinique et des docteurs, les services, les valeurs, les testimonials, les infos de contact.  

On bascule sur des formes plus organiques que géométriques 

Les formes géométriques encore très largement utilisées en webdesign laissent peu à peu place à des formes plus douces et plus « organiques ». Pour mes petits matous tout doux j’ai décidé de suivre cette nouvelle tendance en misant sur de l’arrondi plus naturel qui va venir adoucir et assouplir le caractère brut des formes géométriques classiques. 

Pour donner du rythme à ma page, j’ai choisi de donner ces formes naturelles à mes photos afin de créer du dynamisme et davantage de mouvement. Ma homepage n’intégrant pas d’animations ou d’interactions particulières, mes formes apportent du lien avec l’internaute et permettent de mieux capter son attention. organiques_formes_clinique

La qualité des photos choisies est très importantes en webdesign ! Pourquoi ? Parce qu’un site parfaitement construit mais qui intègre des images de mauvaise qualité peut gâcher complètement l’expérience de l’utilisateur et désservir la marque. Avec la qualité photo proposée par nos téléphones aujourd’hui, plus d’excuses ! On veut de la netteté ! 

Ici le centre de l’activité de notre clinique est le chat, vous me direz « assez facile de rendre un site joli avec des chats » mais d’un côté on peut vite partir sur le kitsch ! J’ai donc choisi soigneusement mes photos (sur Unsplash : la banque d’images LDD la plus folle que je connaisse) de petits matous en superbe qualité. 

L’asymétrie 

Même si on sait que les grilles sont davantage recommandées pour créer de l’harmonie et de la cohérence et bien nous on fait comme les chats, on snobe cette bonne pratique ! L’asymétrie créée du dynamisme et booste la créativité d’un site internet et cette tendance est de plus en plus à la mode en 2019 (bon courage pour nos amis les développeurs). 

Même si ma clinique n’est pas non plus un modèle d’asymétrie, j’ai souhaité donner un peu de  swing à ce design en superposant certain de mes éléments (images), en disposant mes contenus textes à différents endroits de ma page (en variant le côté gauche et le côté droit par exemple). 

Une touche de « Material Design »

Le Material Design est un cousin du Flat et le petit bébé de Google. C’est un dérivé de notre cher ami le Flat basé sur des formes iconographiques simples, sans détail et aux couleurs uniformes, sauf que là on y ajoute quelques bonus; des ombres, des formes plus rondes, du mouvement : plus de vie quoi ! Une version du Flat moins figée et plus stylée aussi. 

On retourne auprès de mes petits chats, j’ai intégré quelques codes du Material Design notamment sur l’intégration des ombres sur les icônes ronds des services de la clinique, des ombres sur certain de mes éléments (sur la section ressources), des formes douces et des différences légères d’opacité sur certains endroits.

material_design_clinique

Ma roue colorimétrique : bleu, blanc, jaune 

roue_colorimetrique_clinique
Pour les couleurs, j’avoue je suis restée assez sobre, beaucoup de blanc et des nuances de gris clair et de bleu. Pour donner un peu de pep’s à tout ça j’ajoute quelques touches de couleurs franches : du jaune presque moutarde et du bleu canard (parce que les petits chats ils aiment bien les canards).

Ces deux couleurs fonctionnent très bien ensemble, sont douces et juste assez fortes pour rythmer le tout. Le milieu vétérinaire fait parti du monde médical souvent associé à la couleur verte et bien nous on a prit les deux essences de la couleur verte : le bleu et le jaune (ça cogite la dedans ^^) !

Bon j’avoue la couleur de l’année 2019 c’est le corail mais je trouvais qu’avec les chats ça ne collait pas vraiment ! 

Voilà le premier petit topo webdesign de T2Oplus, on espère que cette maquette vous plaît et que notre description aussi mais surtout qu’elle vous inspirera pour vos futurs projets et vous donnera quelques idées ! 

Création de sites internet à Nantes Agence T2Oplus

Abonnez-vous aux IZI-NEWS !

 

Faites partie de notre IZI-Base et retrouvez les actus et nouveautés de la galaxie webmarketing !

Bienvenue dans la IZI-Base ! :)

Pin It on Pinterest

Share This