Case study

“IOLCE” c’est l’acronyme des mots « Input Output Lire et Communiquer sur Écran ». Si vous êtes toujours autant perdus en lisant ça, dites vous que c’est ce que j’ai ressenti la première fois que j’ai entendu parler de ce projet. Heureusement, la consigne qui suivait était plutôt simple : retranscrire une conférence en une interface web. Pour ça, il a fallu procéder en plusieurs étapes. Lesquelles je vais vous décrire dans cette étude de cas.

Partie 1 :
L'analyse

C’est lors de cette étape que nous avons dû nous organiser pour travailler en groupe. Nous étions cinq, mais je n’en connaissais aucun auparavant. Après avoir choisi la conférence sur laquelle nous allions nous pencher, nous l’avons regardée chacun de notre côté tout en notant les informations les plus importantes. Quelques jours plus tard, nous nous sommes retrouvés pour mettre au propre une analyse précise de ce que racontait le conférencier.

L’objectif final de cette partie était d’écrire le contenu commun qu’aurait nos différentes interfaces. Il ne fallait donc garder que les informations les plus précieuses. Notre analyse ne devait être ni trop courte, ni trop longue mais surtout, elle devait être fluide et structurée pour que le lecteur n’aie aucune difficulté à la lire. C’est pourquoi nous avons sélectionnés et placés avec parcimonie les quelques sujets abordés lors de la conférence.

Pour ce qui est des titres, on voulait se démarquer du style classique, c’est comme ça que l'idée d’utiliser des titres aguicheurs comme le font les vidéastes de Youtube est née.

Une fois le contenu de notre site rédigé, nous allions maintenant travailler chacun pour soi.

Photo de la structure de notre analyse sur papier

Partie 2 :
L'esthétique des lettres

Mais que serait un texte sans une bonne typographie ?

Lors de cette étape, il fallait que je trouve la couleur de paragraphe qui conviendrait à mon interface, celle qui attirerait l’œil des lecteurs. Pour ça, je devais d’abord faire un choix parmi de nombreuses polices. Plutôt avec ou sans empattements ? Classique ou fantaisiste ? J’étais face à un vrai dilemme. C’est pourquoi j’ai décidé de demander leur avis à différentes personnes.

J’ai finalement opté pour deux polices différentes, une pour le corps principal (Raleway) et une pour les titres (Montserrat).

Screenshot des comparaisons de polices pour mon corps et mes titres

Mais cette étape n’était pas encore terminée. Je devais maintenant choisir un rapport hiérarchique adéquat pour mon texte. Vous ne savez pas de quoi il s’agit ? C’est en réalité très simple.

Si je vous parle du nombre d’or, ça vous mettra sûrement la puce à l’oreille. En effet, celui-ci est un rapport hiérarchique.

J’ai donc fait mon choix parmi les différents rapports proposés par notre professeur.

Screenshot de mon choix parmi les rapports hiérarchiques

Partie 3 :
Du papier aux écrans

Désormais, j’avais toute les cartes en mains pour réaliser des maquettes grâce au logiciel InVision Studio. Mais il fallait pour ça que je choisisse un nuancier de couleurs. J’ai décidé de partir sur une sorte de mauve comme couleur principale et j’ai ensuite utilisé Adobe Color pour trouver les couleurs secondaires.

Screenshot de mon nuancier sur Adobe Color

Étant en plein dans l’ère du smartphone, tous les sites que nous créons doivent être “responsives”, ce qui signifie qu’ils doivent s’adapter à la largeur de l’écran de l’utilisateur. Pour cela, nous procédons toujours d’abord par l’élaboration de maquettes pour smartphone, puis nous adaptons le design à un écran plus large, pour une tablette ou un ordinateur. J’ai donc élaboré une première version de mon interface. Celle-ci comportait des sections de couleurs qui permettrait une lecture plus agréable.

Screenshot de la première version de ma maquette

Le problème était que le lecteur pouvait être perturbé par les différents blocs, ne sachant pas quelles sections allaient ensemble. C’est pourquoi j’ai ajouté des espaces autour de celles-ci et réduit l’alternance de couleurs, dans le but d’aérer un maximum le site.

Screenshot de la deuxième version de ma maquette

Partie 4 :
Des colonnes et des lignes

À partir de là, ma version mobile était plus ou moins validée. Il était donc temps de l’adapter aux écrans plus larges. Pour ça, j’ai dû construire une grille. C’est durant cette partie que j’ai eu le plus de difficultés.

En m’inspirant d’autres sites, j’ai remarqué que la plupart étaient construits d’après une grille symétrique. Le problème c’est que nous voulions casser ces codes, ces habitudes. Il me fallait donc par toute logique créer une grille asymétrique grâce aux conseils de mon professeur.

Une fois terminée, je devais l’adapter à mon contenu. Par conséquent, j’ai réalisé plusieurs croquis sur papier, pour au final en retenir un.

Photo du croquis de ma grille

Avec ce-dernier, j’ai pu réaliser le mock-up final de la version tablette et ordinateur de mon interface sur InVision.

Screenshot de ma grille sur InVision Studio

Partie 5 :
Le design amène le design

Tout au long de ce projet, j’ai dû faire preuve de beaucoup de curiosité. Que ce soit pour m’inspirer visuellement, mais aussi pour apprendre à créer. J’ai également dû être rigoureux et précis pour parvenir à respecter les différentes consignes données par les professeurs. Je réalise donc qu’à force de créer des interfaces, des designs, je suis de plus en plus à l’aise. Comme l’expression « C’est en forgeant qu’on devient forgeron » le dit si bien, c’est en créant des designs, qu’on devient web designer.