Wethere, une nouvelle façon de voir le temps

LE PROJET

Wethere, combinaison des mots "We" et "There" (et jeu de mots se rapprochant de "Weather" en anglais) est une application météo qui se veut claire et lisible au premier coup d'œil. La simplicité de son interface lui permet de s'adapter sur tous les types de supports, quelqu'ils soient. Nous avons abordé ce projet en binôme : Justine Gaudin et moi-même.

DOSSIER DE RECHERCHES

Ce dossier contient les classiques benchmark et moodboard, ainsi que les **wireframes. **Il y a aussi une interview d'Achraf Chouk, spécialiste du responsive web design !

Dossier de Recherches

WIREFRAMES

Lorsque l'on a abordé Wethere, nous voulions que sa lecture soit extrêmement simple. Après avoir établi un benchmark et regardé la concurrence, beaucoup proposent des fonctionnalités qui viennent compliquer la navigation et qui apportent énormément d'informations à l'écran. Au fur et à mesure de nos itérations, la navigation dans la timeline devenait de plus en plus intuitive et le menu disparaissait.

Wireframes de l'application Wireframes de l'application

PICTOGRAMMES & AVATAR

Bien entendu, cette simplicité de lecture passait aussi par des icônes claires. Voici quelques esquisses des icônes utilisées ; certaines étaient trop fines tandis que étaient d'autres trop fouillies et illisibles en petite taille, elles ont donc été retravaillées.

Esquisses d'icônes Esquisses d'icônes

En conservant la direction artistique appliquée sur les pictogrammes, la création et la présence d'une mascotte nous as permis d'établir un lien empathique avec l'utilisateur. Ce petit et mignon soleil vient s'animer en fonction du temps, et apporte une dimension émotionnelle dans l'application. Les yeux blancs étant très anxiogènes (du moins, sur une illustration réaliste), il fallait s'éloigner de cette piste tout en gardant assez de contraste entre les yeux et le corps.

Expressions de la mascotte Expressions de la mascotte

MAQUETTES

Cependant, la création de cet avatar n'était pas à la base du projet et n'est arrivée que plus tard. Dans les premières versions, l'information était primordiale : les couleurs ont été retravaillée pour une meilleure lecture.

version-03 Premières versions de Wethere

Enfin, les maquettes finales répondaient aux volontés exprimées à la base du projet. La couleur donne immédiatement l'information : vert pour un temps calme, orange pour un temps ensoleillé, bleu pour un temps pluvieux, violet pour un temps orageux, jaune pour un temps nuageux, et enfin bleu clair pour un temps glacial.

final-08 Versions finales

CONCLUSION

L'objectif était de faire abstraction de tout ce qui était superflu, pour aller directement à l'essentiel. Vouloir du simple c'est joli, le faire c'est plus compliqué ! Dans les premières versions, notre idéal d'esthétisme a été revu plusieurs fois : le dégradé sombre à été abandonné, la timeline du dessus aussi, etc. De plus, la clarté des pictogrammes se devait d'être aussi bien sur des formats réduits que sur des formats agrandis.

LE MOT DE LA FIN

C'était un réel plaisir de travailler sur cette application et de créer un avatar aussi mignon et simple (:

Wethere est la propriété de son auteur, et ne saurait être utilisé, reproduit, représenté, ou utilisé sans son accord préalable et explicite.

Wethere, une nouvelle façon de voir le temps
Share this

Subscribe to Anis Chouk