Des écoles au site internet donnant envie d’y retourner

Au détour d’un article peut-être un peu nostalgique, (ou pas) on vous propose de replonger dans vos années d’étude en découvrant notre sélection de sites internet d’écoles ou d’établissements de formations à l’allure venant dépoussiérer les vieilles salles de classe. La leçon du jour va porter sur les dispositifs digitaux et leur conception. Passons aux cas pratiques.

Le 10ème art

L’institut Pratt est l’une des principales écoles d’art aux États-Unis, y sont notamment dispensés des cours de design, d’architecture et d’arts libéraux. Pour une école donnant des cours de design, ce serait un comble d’avoir un site web mal designé non ?

L’art du graphisme

Au premier coup de scroll sur la home, on remarque un système de balises tout à fait différenciant. Il s’agit d’un triangle animé, avec en ses coins des mots-clés mettant en évidence les thèmes abordés. C’est innovant, esthétique et utile à la fois, la lecture de ces 3 ou 4 mots permet à l’utilisateur de se situer. Cette forme géométrique nous plonge dans la sémantique de la science, du dessin et de la précision et donc d’une école d’art.

Sur l’ensemble du site, on retrouve l’utilisation de lignes. Ce sont des éléments qui ne chargent pas le visuel et permettent de structurer l’espace en créant une stabilité graphique. Les designers ont également utilisé une palette de couleurs large allant du rose pâle au jaune flashy. Elles permettent dynamisme et modernité, tout en surexposant certaines informations clés.

Sublimer l’expérience utilisateur

Sur le site internet de cette école, on trouve des pages évidentes telles que les admissions, les programmes ou la vie étudiante mais pas seulement. L’école Pratt est une institution à New York et aux US, elle organise aussi des évènements et expositions, et diffuse sur son site beaucoup de ressources et actualités sur le monde de l’art. C’est donc un site web à l’arborescence large, composé de beaucoup de pages. L’UI doit être conçue en prenant en compte ce paramètre et veiller à ne pas complexifier le parcours de l’utilisateur.

Le site de Pratt s’apparente à un joli bazar organisé, où plusieurs directions artistiques sont expérimentées ce qui illustre bien les différentes formes d’art dispensées.

Une toile de peinture

European Cultural Academy propose des formations à Venise et Amsterdam pour les professionnels et amateurs du monde de l’art et de l’architecture. Comme précédemment, sur le site de cette école on s’attend à découvrir un travail d’artiste.

L’utilisateur au centre de la stratégie

La première section de la home doit être construite avec une attention particulière, il s’agit de la porte d’entrée du site et le premier élément vu par l’utilisateur. Celle du site d’European Cultural Academy est particulièrement percutante. Elle est séparée en trois parties identiques permettant de distinguer en un coup d’œil les 3 offres de formations proposées. C’est une cartographie simple de l’espace mais qui offre une navigation efficace.

Les pages des formations suivent le même principe d’accessibilité et de compréhension. La gestion des différents éléments sur l’espace est très bien pensée et la lecture est limpide et agréable malgré le nombre d’informations. Globalement, on est sur un exemple réussi en termes de réflexion UX.

Un design cohérent

Afin de confirmer cette réflexion, l’UI a été construite en conséquence. Chacune des 3 parties de la première section est illustrée par une couleur et une image différente. Cette proposition apporte donc de la compréhension en plus d’être esthétique.

Le site dispose d’une palette de couleurs développée, des lignes et des formes géométriques sont également utilisées. Ces éléments visuels s’inscrivent très bien sur le site d’une école d’art et permettent d’exprimer plusieurs de ces facettes. Dans cette lignée, on note également un choix typographique original, puisqu’on constate un mélange de 3 polices différentes, respectivement traditionnelle, moderne et scripte. Cette recherche s’applique aussi aux photographies, qui sur les pages respectives aux différents cours, prennent la forme de ce qui semble être des tâches de peinture.

Le site d’European Cultural Academy est un exemple très sympa de site internet disposant d’un parcours utilisateurs simple et bien pensé et d’un design graphique agréable, réfléchi en cohérence. C’est une jolie toile !

Une création sur-mesure

L’institut français de la mode est une école de formations aux métiers de la création, du management, et du savoir-faire. Son site web été confectionné par l’agence New-Yorkaise Base Design.

Quand l’UX rencontre la créativité

Cette école est renommée et assume une position forte dans ce secteur. Son site web se doit d’être la vitrine de cette identité avec une apparence impactante, tout en gérant le nombre important de ressources qui lui est propre.

Sur la première section de la home, notre regard est attiré vers 3 boutons permettant à l’utilisateur d’accéder directement aux formations dispensées sans traverser tout le dispositif digital. La page est ensuite construite avec un système de grille assez efficace pour gérer l’espace. Elle permet de mettre beaucoup d’informations tout en facilitant la lecture grâce à sa structure.

Les pages respectives des formations ont aussi une conception UX intéressante. Elles disposent, dans un premier temps, d’un menu spécifique figé au scroll facilitant l’inscription des étudiants. Le gros plus de ces pages sont leurs blocs rétractables, permettant à l’utilisateur de voir toutes les sections et d’aller simplement à celle qui l’intéresse. C’est une manière astucieuse de triller l’information et faciliter la compréhension.

Un design « codé main »

Sur le site de cette école de mode, la conception UX et son design forment un ensemble deux pièces taillé sur mesure. Sur la home la grille apporte une certaine modernité graphique et de la précision. Les différentes cases sont majoritairement remplies d’un fond blanc et les textes sont noirs, permettant aux photos des shootings, créations ou défilés, aux couleurs vives, de contraster. Le tout forme un genre de patchwork dont on a envie de découvrir les coutures.

Le site est d’ailleurs essentiellement construit en noir et blanc, faisant référence à la tradition, à la sobriété et à la sophistication du luxe. Valeurs fondamentales de la haute-couture, tranchantes avec la créativité sans limite d’autres maisons aux collections ultra-colorées et démesurées, rappelée par le choix des visuels hyper impactant.

Le site ifmparis.fr a été confectionné par son agence en répondant aux exigences d’un dispositif digital avec une grosse pincée de créativité.

La star d’UX

Merici.ca est un collège privé québécois, offrant un large panel de formations, allant des sciences à la gestion, passant par l’éducation. L’agence Mambo Mambo prouve avec cette réalisation qu’il n’y a pas que les écoles de design ou de mode qui présentent un site web réussi.

Un très bon point pour l’UX

La home est ornée d’un menu simple et compréhensible, aux catégories explicites, complété par un bouton inscription au visuel différant, attirant le regard et facilitant la conversion.

Le premier bloc est intéressant, en présentant 3 actualités du collège pouvant servir d’arguments et donner envie de rejoindre ses bancs. Naturellement, en poursuivant la navigation on tombe sur les différents programmes proposés dans l’établissement et ceux présentés sous forme de menu aux animations travaillées incitant au clic.

Le site présente un catalogue de pages avec une superbe lisibilité, c’est clair et la navigation est plutôt douce. Par exemple, la page « nos programmes » présente un second menu pour naviguer facilement entre les différents types de formations.

Un design dépoussiérant

Merici.ca aborde également un design dépoussiérant les codes de l’école traditionnelle. Un très beau travail est fourni sur les animations sur l’ensemble du site web.

La première section de la home s’installe suite à l’apparition d’une forme géométrique bleue animée, traversant l’écran et venant ensuite souligner le contenu visuel et textuel. Les animations bleues fleurissent sur le site au survol de toutes sections cliquables et sur l’ensemble des pages les différents contenus apparaissant de manière fluide au scroll.

Le site web regorge également de pictogrammes bleus, suivant la charte graphique et servant de support visuel pour enrichir les éléments textuels et anticiper la compréhension.

Il y a une citation disant « aux yeux d’un artiste le fond et la forme sont indissolubles » et le digital n’échappe pas à la règle. Mambo Mambo a créé un ensemble moderne et accueillant, visant à attirer et rassurer parents et étudiants.

Envie d’y retourner ?

Avoir un site internet est de tendance ordinaire, que ce soit pour une école ou tout autre porteur de projet. Mais une sélection comme celle-ci et son analyse nous permettent de mettre en lumière des sites impactants. Ce ne sont pas de simples présentations des écoles et de ce qu’elles font, mais des dispositifs digitaux réfléchis pour donner envie aux apprenants de rejoindre les rangs, les immerger au sein de leurs murs avant même qu’ils ne soient inscrits.

Un site internet n’est pas qu’une simple production, il est le fruit d’une stratégie définie et travaillée en amont, composée d’une forte étude de son marché et de son audience afin d’élaborer sa conception en fonction de l’expérience de l’utilisateur accordée à un design absorbant.