Rethinking UX — Case study

Si vous lisez cet article, c’est pour en savoir plus sur la façon dont j’ai travaillé le design de mon site. Il m’a fallu un temps de réflexion pour savoir vers quoi me diriger, je voulais pouvoir m’exprimer graphiquement dans un style qui me plait. J’ai décidé de réaliser un story telling de la série “DARK” afin que vous ayez l’occasion de comprendre mon expression graphique.

Dans la petite ville de Winden, en Allemagne, la disparition de deux enfants ouvre un abysse qui bouleverse le concept de temps. La question n’est pas de savoir qui a kidnappé ces enfants… mais quand.

L’idée de base …

Je voulais faire un story telling, car c’est dans le milieu de l’illustration dans le web que je veux me développer, progresser et avancer. Pendant deux jours j’ai commencé à chercher des références graphiques dans mes livres et sur internet.

J’ai toujours trouvé qu’un dessin en disait plus long qu’un texte … Du fait que je veuilles me développer autant dans ce milieu.

Vous pouvez retrouver ci-dessous les inspirations qui m’ont menées vers le chemin que j’ai emprunté à la réalisation de ce site. Je vous invite aussi à consulter mon tableau pinterest concertant le web design. Vous retrouverez les références des images ci-dessous, ainsi que d’autres sources m’ayant fortement inspirées.

See more on https://www.pinterest.fr/mariamlonard/web-design/

Pourquoi “DARK” ?

Et puis pourquoi pas surtout ? J’ai découvert cette série durant ce workshop le soir en rentrant chez moi. Des élèves en parlaient comme quoi c’était “La nouvelle série tendance”. J’ai aimé l’univers sombre, mature et malaisant que reflétait DARK.

J’avais envie de voir les yeux de mes lecteurs un peu briller en se rendant compte qu’il s’agissait de la série qu’ils avaient tellement aimé regarder …

Durant ces jours où je réfléchissais à un design qui pourrait me plaire et me toucher, je regardais toutes les images j’avais et j’ai commencé à imaginer un site où le décor évoluerait et changerait au fur et à mesure que l’on progressait dans le contenu. Je n’ai pas voulu établir de proposition graphique, et j’ai commencé par une illustration pour le header.

J’ai continué sur ma lancée une série de quelques illustrations afin d’établir le début de mon cheminement. Je montrai donc le résultat à mon copain. On s’emballe un peu sur le design, et dans le mouvement je dis “Oh et puis je peux faire des clins d’oeil à la série “DARK” !” et de là, je continue mes illustrations en me fiant à ma mémoire et non pas aux images de la série.

Savoir rebrousser chemin

Être graphiste, c’est aussi savoir accepter la critique pour s’améliorer. J’ai codé l’entierté de mon site , même s’il manquait des images, pour ensuite le confronter à l’avis de mes profs et des élèves de DWM.

Monsieur Vrins m’a d’ailleurs avoué qu’il ne voyait pas tellement le lien avec Dark, et c’est logique. Je n’avais pas consulté les images qui auraient du m’inspirer pour le dessin. J’avais terminé la série depuis environ deux semaines, les souvenirs commençaient à s’estomper. Même si ca m’avait pris du temps, j’allais recommencer.

Il faut que je corrige certains détails et que je refasse des illustrations. Je peux reprendre des créations mais je dois les modifier : les montagnes de mon header deviennent la centrale nucléaire, le footer sera la grotte, je devrais rajouter un manteau jaune à mon personnage dans les arbres et des fiches d’enfants disparu qui virevoltent, des oiseaux morts au sol, etc …
Moodboard réalisé par mes soins — Inspiration pour les nouvelles illustrations

Avec du style

De là, les idées reviennent de plus belle. Je voulais faire du SVG comme on me l’avait si souvent conseillé mais c’était impossible à mes yeux avec le style graphique que j’ai tenté de réaliser. Je ne pouvais pas utiliser uniquement deux couleurs, donc j’en ai rajouté quelques unes, toujours discrètes et dans les teintes que je m’étais appropriées. J’ai travaillé sur des formats png sur photoshop.

Dessiner a été la partie la plus chouette, où j’ai été le plus heureuse. Je les plaçais au fur et à mesure dans mon site, et mes yeux brillaient, j’étais encore plus motivée à rendre quelque chose de dingue, où les profs se diraient “Elle a pas chômé !”, où je pourrai fièrement montrer le résultat et partager un petit bout d’histoire.

Au niveau du dessin et de la technique

J’ai réalisé l’ensemble de mes illustrations sur photoshop. Si certains désirent créer un style graphique semblable, n’hésitez pas à générer des calques et des nuanciers comprenant vos couleurs “reines”, celles que vous emploierez tout le long.
Je n’ai pas fait usage de textures, mais d’une gomme et de jeux d’opacité, de brush au style crayonné, et de BEAUCOUP de test avant d’arriver à un resultat concluant.

Une illustration qui m’a pris 4h de travail, pour s’avérer inutilisable pour la réalisation de mon site RUX.

J’ai pris énormément de temps et d’heures pour essayer des styles graphiques, des brush, des effet jusqu’à trouver le résultat qui, selon moi, rendait le mieux. Soyez patient et continuez à travailler avec passion.

Résultat final

Ce n’est pas tout …

Mais bon, si mon aventure dans le web s’arrêtait à pouvoir me laisser gratter toute la sainte journée ma tablette graphique, je ne rencontrerai pas des embuches qui me feraient grandir et progresser.

Le code, encore et toujours.

Je le sais, je suis pas très douée, assez maladroite et j’oublie souvent de rajouter un point avant mes classes, de fermer, de comprendre cette logique. J’ai craqué plusieurs fois dans les derniers jours avant la remise en me disant que je n’avais pas du tout le niveau en matière d’HTML, CSS et Javascript. Je reste honnête, autant j’adore concevoir, autant j’ai deux mains gauches quand il faut mettre tout ça en oeuvre.

Comme je suis très sympa, je partage avec vous une de mes “humeurs du jour” que j’ai fait profité à mes amis sur facebook.

Vraiment que ça ?

Evidemment, mon site n’était pas parfait. Je ne pouvais pas me déplacer à l’école pour des raisons de santé, et j’avais pas non plus envie d’étaler ma vie devant tout le monde. J’ai la chance de pouvoir communiquer avec mes profs via “Slack”.

J’ai envoyé à nombreux d’entre eux mon site, et j’ai eu pas mal de retours pour que je puisse m’améliorer. Y’avait clairement du travail à faire : Je m’étais tellement focalisée sur mes illustrations au détriment du texte.

J’ai donc finalisé mes textes, remis en page tout cela, travaillé avec un ami pour toutes mes difficultés en javascript, et honnêtement, je me suis donnée à fond.

Je me suis levée tôt tous les jours, je travaillais tard, j’étais déterminée à rendre un BON site. Peut être que mon code serait dégueulasse et bourrée d’erreurs, mais au moins j’aurai essayé, réalisé quelque chose.

Au final …

Finalement, après avoir pleuré, crié, mangé du chocolat en boule dans une couverture en pleurnichant et en me disant que je n’y arriverais certainement jamais et que j’allais me faire exploser sur la note, j’avais quand même un site qui me plaisait et qui me rendait fière.

Et t’as appris quoi ma grande ?

Un tas de trucs supers utiles. Déjà que mon dessin ne suffirait pas, que c’était un ensemble travaillé qui formaient un design construit et achevé.

Que s’en prendre plein la gueule de la part de certains profs ça fait mal, mais c’est pour qu’on rende quelque chose de mieux et qu’on se surpasse.

Que d’autres profs n’hésiterons pas à nous montrer qu’un a fait de belles choses et nous montreront aussi le positif dans notre travail, que ça m’a redonné confiance en moi et donné envie de m’y remettre de plus belle.

Comme quoi, la forme c’est vraiment important.

Mes résolutions

C’est de consacrer au deuxième quadri au minimum deux soirs par semaines où je travaille mon code et j’approfondis mes connaissances. J’ai eu beaucoup d’idées que je n’ai pas su mettre en place par un manque de connaissance en javascript, html et css. J’ai pris énormément de temps à essayer de réaliser des choses impossible, et j’ai été très frustrée d’avoir des idées que je trouvais super et de ne jamais les voir naitre.

Je pense que j’ai fait un site où j’ai énormément travaillé. Ses points faibles étant la mise en page simple du texte et le code. Cependant j’ai de l’originalité et des idées que j’ai exécutées au travers de mes illustrations. RUX c’était bien, mais je sais que je pourrai faire encore mieux par la suite.

Et c’est bien normal, je suis en plein apprentissage.

J’aimerais aussi plus me renseigner sur la culture du web pour avoir des nouvelles inspirations et nouvelles idées. Si d’ailleurs, toi, lecteur de ce case study tu aurais des références à me faire part, n’hésite pas à m’en envoyer sur mes réseaux.

Je vous remercie, vous qui êtes resté si intéressé de ce travail que j’ai mis beaucoup de temps et de coeur à réaliser.