Design internet,
un graphisme adaptatif
La première étape pour la conception graphique d’un site web consiste, comme pour une identité visuelle, à bien connaître et comprendre son client, vous. Cela nous permettra de définir votre identité de marque et vos cibles. C’est une étape indispensable, elle m’aiguillera pour définir les éléments graphiques (formes, typographies, couleurs, iconographie) qui serviront à créer le graphisme de votre site internet. L’ambiance visuelle de votre site doit vous représenter et aussi séduire vos cibles.
L’utilisabilité (l’expérience utilisateur) de votre site est un des points à ne pas négliger. Pour cela, un site web doit être conçu en intégrant une bonne ergonomie, vos visiteurs doivent trouver, en minimisant le nombre de clics, ce qu’ils cherchent. Une ergonomie efficiente passe par un rubricage réfléchi, un cheminement intuitif, une hiérarchie visuelle adéquate, une accessibilité irréprochable et tous ces aspects seront renforcés par une conception graphique claire et pertinente.
Je pense également au moment de la conception graphique à intégrer la composante responsive design en anticipant certains éléments qui seront redesigné ou éliminé au moment du passe sur petits écrans de type smartphone.
N’oubliez pas de rédiger des textes optimisés pour les moteurs de recherche (SEO), qui renforceront le fameux référencement naturel. Deux règles : dévoilez rapidement l’objet principal de votre texte et accompagnez-le de mots clés pertinents.
Un site tout nouveau tout beau
L'association Art Palette de Pechabou m'a demandé de moderniser son site internet devenu très lourd à mettre à jour.
Art Palette dispense toute l'année des cours de dessin, de peinture et d'arts créatif, sur la commune de Pechabou pour les grands et les plus jeunes.
L'idée était de disposer d'un site responsive design, facile à mettre à jour et avec un graphisme plus actuel.
La page la plus sollicitée par des mises à jour est la page des événements. Elle est gérée de manière dynamique, les articles sont stockés dans une base de données et affichés selon un design unique mis en place une fois pour toutes.
La page des cours est gérée de la même manière ce qui ne posera pas de difficulté pour sa mise à jour annuelle.
Côté graphique le choix a été fait de proposer une interface sobre et claire pour mettre en avant les réalisations et les informations. J'ai donc fait le choix de deux couleurs secondaires, un violet-parme et un vert pistache. Et pour les typographies j'ai fait le choix de l'alliance d'une typo sérif (pour les titres) afin d'illustrer le savoir-faire des techniques (Caudex) et d'une linéale (pour les textes) pour l'aspect moderne (Avenir).
La conception graphique du site d’Action First
Toujours dans le cadre de la refonte de l’image de cet organisme de formation, j’ai conçu ce nouveau site en partenariat avec le développeur avec lequel j’ai l’habitude de travailler.
Ce type de site fourmille d’informations et l’idée principale qui a mené mon graphisme était de proposer quelque chose d’aussi clair et hiérarchisé que possible.
J’ai utilisé les couleurs de la charte graphique, sur une base de blanc et avec l’appui d’un gris clair.
Pour minimiser les textes superflus j’ai eu recours à l’utilisation de pictogrammes, leur simplicité de compréhension et le peu de place qu’ils occupent m’ont permis de gagner en lisibilité et d’aérer le contenu.
Pour le texte lui-même j’ai employé la typographie Roboto, une linéale sobre et efficace pour renforcer la lisibilité en jouant beaucoup sur les tailles employées pour hiérarchiser les informations.
Pour ce site le contenu textuel n’a pas été difficile à produire puisqu’il découle en grande partie des fiches formations proposées par les formateurs et d’actualité mise à jour régulièrement.
Dans le cadre de l’expérience utilisateur, des choix ont été faits d’après les directives du client. Il s’agissait principalement d’accéder le plus rapidement possible à des formations, ce qui explique le moteur de recherche dans le header, présent sur tout le site. Et nous avons renforcé cet outil en proposant un moteur à base de menus déroulants sur l’image principal de la page d’accueil. Enfin, trois formations sont proposées juste en dessous. Cela fait pas moins de trois façons de découvrir le catalogue très fourni proposé par Action First.
Ce site a bien entendu été pensé et conçu de manière à s’adapter à tous les types d’écrans (responsive design).
Un nouveau design pour le site du restaurateur Marc Cordy, l’Auberge du Château
La demande du client était d’obtenir un site internet plus moderne – que l’ancien site, basé sur la mise en valeur des photos – réalisé in situ par un photographe professionnel (Studio END), pour son auberge trois étoiles située à Muret-le-Château entre Rodez et Conques en Aveyron.
Le résultat est un site aux couleurs sobres, majoritairement du noir et du blanc et des gris colorés pour mettre en avant les visuels et reproduire l’ambiance propre à l’auberge.
Ce texte est présenté le plus sobrement possible en utilisant deux polices différentes : une police linéale pour le corps du texte et une police élégante et sérif pour les titres. Il n’y a que deux niveaux de hiérarchie, ce qui permet une lisibilité optimale.
La composition est basée sur la juxtaposition et la superposition de blocs texte et image, mais toujours de façons bien délimitées.
