Analyse de sites
Comprendre c’est apprendre
Avant de concevoir, il faut analyser l’existant. Pourquoi ? Car on ne connait pas forcément la thématique ou le domaine d’activité de notre client.
Avant toute chose il est important d’analyser la communication du client, en commençant par son logotype.
Nous n’avons sans doute pas conçu la communication initiale du client, mais la personne l’ayant réalisée a peut-être conçu en pensant sens et forme.
Faire du beau c’est « facile », par contre faire du sens, et du sens beau c’est plus compliqué.
Ici je vais vous donner mon analyse de différents sites de tonnelleries.
Il s’agit d’une analyse personnelle qui ne remet en question en aucun cas le travail des agences qui ont réalisé ces sites web.
Lorsque l’on fait une analyse, il faut que celle-ci soit constructive, elle vise à trouver un sens à ce que l’on voit, on émet des hypothèses. Il ne sert a rien d’être médisant, méchant ou mauvais, il faut re contextualisé entre la période de création, les tendances, l’univers…
Certains sites peuvent paraitre fades, mais sont riches de sens et étaient sans doute pour l’époque de qualité.
source
Tonnellerie Sirugue
Tonnelier à Nuits Saint Georges en Bourgogne
source
Général :
En regardant le site, pas de date de donnée. Il faut rentrer dans le code pour voir qu’il existe depuis 2009.
Logo :
Situé au centre de l’image, forme ovale, typogramme. Peut faire penser à un sceau pour marquer le bois.
Accueil
Dès la home on sait de quoi traite le site grâce au nom « Tonnellerie Sirugue » et à l’accroche « Un savoir-faire de maîtres-tonneliers depuis 5 générations ». Mise en place de la notoriété grâce à cette accroche et à la présence des drapeaux pour montrer sans doute des pays d’exportation.
En image de fond, on a la matière première pour concevoir des tonneaux : le bois
Sur l’image sur laquelle on retrouve le logo/sceau, on a les étapes de conception du tonneau jusqu’à son utilisation : un bois qu’on travaille d’où les copeaux, qu’on « cercle » avec les anneaux métalliques. En fond le tonneau ouvert, en bas le tonneau fermé. Sur le tonneau une bouteille de vin, car les tonneaux servent à contenir, entre autres comme liquide du vin.
Forme des boutons ovale : Rapport direct avec le logo/sceau et la forme du dessus d’un tonneau avec un certain angle.
Couleurs utilisées rappellent le bois avec des tonalités jaunes et brunes et le vin avec des tonalités rouges et jaunes.
Historique
Structure similaire à la page d’accueil à l’exception des marges dans la partie recevant le contenu de la page.
Typo différente de la home, on est sur du noir et plus sur un rouge « bourgogne ».
Peu ou pas d’aération, typo grasse ce qui avec l’image de fond perturbe la lisibilité du texte.
Mise en avant de l’authenticité avec la présence de photographies montrant l’Homme travaillant son produit. On est sur de l’artisanal, du fait main.
Produits
On peut voir un bug d’affichage avec l’item de la page sur laquelle on se trouve qui reste sans « effet » de bouton enfoncé, tandis que d’autres items de la nav nous donnent cette impression.
Attention à l’orthographe (oui oui c’est bien moi qui dis ça). Galerie avec un seul L. Deux L en anglais, un seul en français.
Ici on arrive sur une page qui nous présente un tonneau, la pièce traditionnelle bourguignonne, or au-dessus on nous parle de 4 types de tonneaux dont un semble avoir une « extension de lien ».
Que nenni. Il s’agit en fait ici de 5 liens de navigation : au clic sur Produits l’utilisateur arrive donc sur un produit, choisi par la société. L’utilisateur n’est donc pas libre de ses choix. Les autres produits sont « noyés » dans la masse, il s’agit d’un sous-menu qui n’est pas présenté comme un sous-menu ou avec un style graphique qui nous ferait penser qu’il s’agisse d’un sous-menu.
Nouveau traitement typographique, pas de cohérence des typos les unes avec les autres au fil des pages.
Lien cassé sur la page Fûts kasher, mais après une recherche sur un moteur de recherche je peux voir que cette page existe.
Les autres pages sont toutes présentées de la même façon par la suite.
Page Fûts kasher, texte présenté encore différemment des textes des autres pages. Il s’agit d’un brun pouvant faire penser au bois.
Conseils
Souci d’item mis en avant dans la nav sur cette page ici aussi, je suis sur conseil et c’est Produits, Contact et Infos liens qui sont mis en avant.
Nouvelle présentation textuelle avec l’utilisation d’une nouvelle couleur, pouvant faire référence au raisin.
Utilisation — Réparation et entretien semblent être un sous-menu, et c’est le cas. Présentation différente entre cette première page et les deux autres. Une stylisation du lien correspondant à la page sur laquelle on se trouve aurait permis de mis faire comprendre au visiteur que les Réparation et Entretien sont aussi des liens.
Page Entretien : ancre de navigation qui permet d’accéder au clic à l’endroit sur la page faisant référence au contenu.
Tonnellerie Montgillard
Tonnelier à Saint Nicolas les Citeaux en Bourgogne
source
Ici un site plus actuel que le précédent, car plus récent.
Général
En analysant le logotype, on peut voir directement le sens et la cohérence de celui-ci.
Un cercle central faisant pensé au-dessus d’un tonneau, les traits verticaux référence aux planches de bois utilisées pour la conception d’un tonneau. La couleur fait aussi référence au bois.
Typo avec empâtement : ressenti : Ancienneté, luxe.
Ici une navigation latérale gauche fixe, le contenu défilé au centre.
Site multilingue, deux boutons Contact, l’un à gauche dans le menu principal et le second à droite dans le menu secondaire.
Une troisième navigation est présente, elle permet de passer d’un « écran » à l’autre avec un système d’ancre douce
Effet de fade (fondu) en arrivant sur le site, effet que l’on retrouve sur les différentes pages par la suite.
Accueil et La tonnellerie
Le terme Accueil a disparu du menu de navigation, seule possibilité pour retourner sur la home le clic sur le logo. Ce qui est évident aujourd’hui ne l’était pas avant, sur Sirugue oar exemple pas de retour à la home via la logo. Il s’agit d’un nouveau comportement des utilisateurs.
La tonnellerie
Item mis en avant dans le menu, couleur brune, relation logo et bois.
Reprise du logotype pour présenter le titre de la page et reprise d’élément du logo pour marquer des parties de la page. Cohérence entre logo et webdesign.
Gamme
On ne parle pas de tonneaux, on ne parle pas de contenant, mais de gamme. Ici le wording tout comme le logotype et le webdesign se veut haut de gamme.
Pour continuer dans ce sens la tonnellerie présente ses trois types de bois, de grain lui permettant de concevoir les tonneaux.
La présentation des contenances se fait juste au-dessus de la présentation des différents types de bois.
Agents et Actualités
Présentation des agents via un système de Tab.
Pour les actualités animation au hover sur le plus, type d’anim que l’on ne retrouve nulle part ailleurs. Au clic affichage de plus de contenu.
Une seule actu, sans doute créée lors du lancement du site en 2018. Attention, une rubrique actu sans contenu n’a pas d’intérêt.
Site Responsive ?
Il faut tester le site pour voir s’il est responsive et quels sont les points de rupture.
C’est aussi un bon moyen de comprendre comment designer une version mobile de site internet.
Tonnelerie Bordelaise
Tonnelier à Martillac en Aquitaine
source
Général
Logotype
Une feuille de chêne, le chêne étant un bois utilisé pour la conception de tonneaux.
Feuille de chêne dorée avec un léger dégradé, la dorure pour le côté haut de gamme, que l’on peut aussi ressentir grâce à l’utilisation d’une typographie à empattement.
Accueil
Ici présence d’un menu burger, gain de place, car cela évite d’avoir un long menu de navigation.
Scroll down avec la présence d’une répétition de flèches qui nous incite à scroller vers le bas. Flèches non cohérentes avec le logotype qui est au trait et le menu burger lui aussi au trait.
Teintes sombres sur le site, toujours en relation avec le haut de gamme. Relation entre le visuel et le lieu où se trouve le tonneau (dans une cave, sombre, même possible souhait pour le site de Montgillard). Image en noir et blanc pour rester dans cet esprit.
On reste sur une utilisation du trait pour présenter les boutons de navigation et donner un sens de lecture avec les barres verticales au-dessus des titres.
Légère parallaxe en fond de site pour donner un subtil mouvement.
La tonnellerie
La structure de la page est perceptible. L’image à la part belle. Présentation de l’équipe, apporter de l’humanité à l’entreprise.
Utilisation de pictogrammes sous le staff. Pictos non cohérents avec le logo, ils auraient pu être en filaire.
Gamme et modèles
Un texte d’introduction aurait été le bienvenu afin d’introduire le système de tab qui présente la gamme de bois.
Carrousel présentant les barriques avec, en dessous un « menu » les présentant toutes. Au clic sur l’un des items nouveaux système de Tab avec apparition d’un texte apportant plus d’informations sur le tonneau. Une mise en couleur du nom du tonneau sélectionné dans le carrousel lorsqu’on a choisi via la Tab aurait été un plus visuel.
Site Responsive ?
Il faut tester le site pour voir s’il est responsive et quels sont les points de rupture.
C’est aussi un bon moyen de comprendre comment designer une version mobile de site internet.