Refonte de
Loci Anima
UX Design | UI Design | Charte graphique
Portfolio d'une agence d'architecture
Contactée par un architecte travaillant dans l’agence Loci Anima, j’ai retravaillé la structure et l’esthétique du site de l’agence afin de le moderniser et transmettre une image de marque prestigieuse.
Voir le prototypeClient
Loci Anima
Type de projet
Refonte de site vitrine
Date
Juin 2020
Le besoin.
À l’origine, le commanditaire voulait avant tout retravailler l’aspect graphique du site internet car il était peu moderne et attrayant.
Comme on peut le voir sur les captures d'écran, le site ne répondait plus aux codes graphiques actuels : une mise en page ressemblant à un journal papier, des images en noir et blanc, un manque de hiérarchisation visuelle de l’information et un manque d’aération. En bref, le site n’était pas engageant.
En parcourant le site, j’ai identifié qu’au-delà du travail graphique à engager, il était aussi nécessaire de revoir l’ergonomie. De nombreux codes n’étaient en effet pas respectés ou pas assez mis en avant pour faciliter la navigation. Il est difficile d’identifier où l’on peut cliquer, les retours d’informations (feedbacks) sont insuffisants, etc.
La proposition
d'évolution.
Pour répondre à la problématique, j'ai réalisé un prototype fonctionnel de 12 maquettes permettant de simuler le futur nouveau site internet de Loci Anima.
Voir le prototype
Une mise en page asymétrique
Ce style graphique a pour avantage d’apporter modernité et dynamique en « cassant » les codes graphiques communs à la majorité des sites internet, basés sur une grille linéaire traditionnelle. Ce genre de mise en page offre une expérience plus riche et moins monotone, permet de dynamiser l’image de marque et par conséquent, de se démarquer de la concurrence.
La mise en page asymétrique n’est pas applicable dans tous types de projets. Dans le cadre du site de Loci Anima, ce style graphique s’y prête parfaitement, car il rappelle l’architecture moderne : des tracés nets et précis dans un esprit minimaliste, des palettes de couleurs très simples et des formes asymétriques contrôlées. Par asymétrie contrôlée, j’entends que même dans son aspect déstructuré, on y retrouve une symétrie, une cohérence, un fil conducteur, une réflexion.
De plus, l’architecture faisant partie intégrante à mes yeux du secteur de l’art, on peut se permettre de créer un site internet pour une agence d’architecture aussi artistique et original que ses bâtiments.
Le minimalisme
Le plus grand défaut dans l’expérience vécue avec le site actuel de Loci Anima se trouve dans la mise en page bien trop condensée et malheureusement illisible, ne mettant donc pas en valeur les contenus, notamment les images qui sont pourtant très belles.
J’ai donc choisi d’opter pour une mise en page minimaliste et très aérée. L’avantage du web est que l’espace est infini et que l’on peut en profiter pour mettre en avant le contenu grâce à des espaces « vides ». De même, les images étant riches en couleurs et en formes, j’ai choisi des couleurs simples pour les mettre en valeur. Les espaces « vides » permettent justement d’attirer l’œil directement sur les images qui sont déjà très riches en informations visuelles.
La typographie XXL et serif
Le site actuel de Loci Anima ressemble beaucoup à un journal papier. J’ai donc voulu garder cet aspect grâce à cette typographie grande avec serifs pour les titrages.
L’usage des typographies XXL est très en vogue depuis 2019 dans le design graphique, car il permet de créer des effets plus artistiques et de mettre en avant les informations principales. De par sa grande taille, la typographie limite le nombre de caractères à utiliser et permet, par conséquent, d’apprendre à aller à l’essentiel, ce qui est primordial sur le web.
La typographie dite « serif », c’est-à-dire à empattements, arrive de plus en plus sur les écrans et apporte une véritable image prestigieuse. Plutôt utilisée pour les supports papier jusqu’ici, la police serif est très appréciée par nos yeux de par ses formes plus arrondies et donne un aspect authentique. Elle permet de briser le côté trop moderne et superficiel du numérique en apportant un peu de chaleur et d’humain puisqu’il s’agit de ce qui se rapproche le plus de l’écriture manuscrite. Peu agréable à lire sur un écran pour des grandes zones de texte, contrairement à un livre, ce type de typographie est à utiliser avec parcimonie dans un site web. C’est pourquoi, je l’ai utilisée uniquement pour les titres de pages et de sections qui se veulent courts, lisibles et attractifs.
