IFOSUP Wavre | Webdesign | Ergonomie et Communication Web - Gérard Barmarin | Les Formes

Les Formes

• Ex.4.1 - Observez les couleurs, les typos et les formes utilisées pour le site Notos et proposez quelques modifications qui pourraient changer l’atmosphère du site:

  • 2 polices (Raleway et ProximaNova)
  • Il s'agit de deux polices sans empâtement, elles sont précises et lisible et collent bien au thème d'une gastronomie maitrisée.
  • Raleway: Elle est employée uniquement pour les titres. Elle est centrée, en majuscule avec une taille légèrement plus grande que le texte principal (environ 25%).
  • ProximaNova: Hormis pour les titres, elle est utilisée pour tous les caractères présents à l'écran. Les bloc de textes sont centrés, ce qui pose problème sur certaines tailles d'écran surtout avec les balises "br" forçant les retours à la ligne. Aucun élément des zones de texte ne subit de transformation pour être mis en avant ce qui rend la lecture fatiguante et peu séduisante ce qui nuit au message.
  • 0 couleurs (des nuances de gris)
  • Les nuances de gris: Triste ambiance, on est loin de la palette de couleurs que peut proposer la gastronomie et la Grèce. La photo d'introduction est mal choisie, le restaurant donne l'impression d'être fermé, la porte à droite suggère une invitation à partir et le filtre gris utilisé pour facilité la lecture du texte blanc appuie l'atmosphere globale de tristesse. Le gris présent en couleur de fond du call-to-action ne donne absoluement pas envie de cliquer dessus...
  • 1 type de forme simple, le carré et des lignes horizontales
  • Le carré: Employé uniquement pour le logo qui est présent au centre haut de la page d'introduction, il évoque la précision, la maitrise des plats.
  • Les lignes horizontales: Utilisées pour délimiter les sections, elles représentent la constance de la qualité des plats et du service.

  Conclusion: L'atmosphère générale du site pousse à la mélancolie, les éléments du logo ne sont jamais exploités, les call-to-action sont camouflés, les blocs de texte sont sans relief... pour résumer, il y a quelques soucis d'ergonomie et de gros problèmes de communication. Lors de l'échange effectué durant les cours nous lui avions donné une note de 6/10, je serai bien moins généreux en lui donnant un 4. Il est vrai que les modifications devant être apportées pour améliorer les points qui fachent ne sont pas nombreuses, cependant il est probable que le nouveau client arrivant sur la partie d'introduction de la page fasse demi-tour avant même d'avoir effectué le moindre scrolling. La photo séléctionnée à cet endroit est triste (restaurant vide, le local n'est pas particulièrement séduisant et aucun palt sur la table), le call-to-action n'attire pas le regard et lui aussi est triste à pleurer. Il aurait été préférable de placer une photo mettant en avant le point fort de l'établissement: "les plats". Concernant les couleurs, pourquoi ne pas s'inspirer des environnements grecques ou des plats voir des similitudes entre les deux (en évitant le bleu qui est LA couleur non-alimentaire).

• Ex.4.2 - Imprimer une copie d’écran et noter l’adresse de 3 sites dont le design utilise des lignes/formes particulières et commenter:

  • Univers du Thé

    Site web: Univers du Thé

    Arrière plan déchiré pour mettre en avant la section des catégories de thé. La couleur "lime" d'arrière plan de cette section communique de la joie, de la vivacité et bien qu'il ne s'agisse pas d'un "vert bio", il nous rappelle que nous sommes face à un produit naturel et frais. Le contraste de ce vert avec le faux noir présent en arrière plan sur tout le site est très effiace, il est impossible de passer à côté de cette section. Malgré la volonté de simuler des déchirures, qui aurait pu évoquer le désordre et l'inconfort, le designer a décidé d'employer principalement des courbes pour rester cohérent avec le produit vendu (thé: douceur, confort, chaleur, etc.).

  • Dorothy's Teas

    Site web: Dorothy's Teas

    La courbe au centre des lignes horizontales vient rompre la monotonie tout en rappelant la forme des services à thé. De plus, ces courbes apportent de la souplesse au rectangle formé par les deux lignes horitontales et offre un espace de respiration au nom de l'établissement et au titre présent sous le slider. La forme réalisée à partir du rectangle et des courbes est accompagnée de pointillés qui suggère un chemin de table de qualité avec des finitions précises. Le tout propose une atmosphère élégante, chalereuse et maitrisée.

  • Leaf Tea Shop

    Site web: Leaf Tea Shop

    Le design de base du site, composé essentiellement de rectangles, ressemble fortement aux thèmes que l'on retrouve dans les CMS. Cependant, pour donner un aspect plus organique à l'ensemble, le designer a choisir de briser les lignes horizontalles en sortant de leur conteneur une partie du sujet principal des photos utilisées. Ce choix permet d'apporter des transitions plus fluides entre les sections, ainsi qu'une homogénéité et un peu de dynamisme à l'ensemble.

• Ex.4.3 - Repérez au moins sur un site un détail dans son design qui montre le soin apporté par le webdesigner à la conception de la page:

  Noc Coffee Co
  • Le produit: Le café est mis au second plan, c'est le concept de l'établissement qui est vendu, blanc immaculé, design épuré, luxueux et futuriste... On se retrouve face aux "temples" Apple qui auraient changé d'orientation pour passer de la technologie au café... Autant ce choix de design semble pertinant pour la firme à la pomme autant c'est un choix déconcertant pour un établissement proposant du café. Quelque soit la pertinence du concept de la marque, le webdesigner respecte à la lettre les codes de l'établissement.
  • Une composition inhabituelle: Le menu de navigation se trouve au centre de la composition, il occupe toute la hauteur. La partie gauche illustre les propos de la partie droite avec de jolies photos/vidéos.
  • Les transitions de navigation: Il s'agit d'une single page, chaque déplacement entre les pages propose des animations qui renforcent l'aspect technologique, futuriste, haut de gamme. Noc Coffee Co se veut être le précurseur proposant des produits luxueux et de qualité dans un environnement unique, le tout illustré par un site web possédant une interface pas comme les autres.
  • Par contre, si le service en salle est aussi lent que le chargement des pages, ça ne va pas le faire...