Case Study

Au début de ce projet, nous avons dû former des équipes de quatre personnes. Idéalement composées de trois B2G1 et un 2.5, dont une personne à l'aise avec l'anglais. France et moi étions dans la même classe en première année et comme j'apprécie énormément cette fille et sa façon de travailler, nous nous sommes mises ensemble pour ce travail. Pour le 2.5, je connaissais déjà brièvement Benjamin car nous avons un ami en commun. Je savais qu'il était bon en anglais et sympa, donc nous lui avons demandé s'il voulait faire équipe avec nous. Benoît, est venu nous rejoindre de lui même par la suite.

La rédaction du contenu

La première étape de ce travail consistait à regarder une conférence en anglais et à la retranscrire mot à mot. Benjamin nous a été d'une aide précieuse à ce niveau car le reste du groupe n'est pas très doué en anglais... C'est donc en grande partie grâce à lui que le contenu de notre abstract à vu le jour, et j'ai ainsi pu poursuivre le travail en ayant bien compris ce que notre ami Jeffrey avait à dire.

Dans un groupe, il faut savoir écouter les autres car on fait de bien meilleures choses tous ensemble. Même si tout le monde a un style d'écriture différent, nous sommes vite tombés d'accord sur le ton que nous voulions employer. Nous voulions nous adresser directement aux web designers avec un ton amical et pas trop formel. Notre contenu est le fruit de longues heures de travail en commun; de lecture, d'écoute et de réecriture. Ce qui nous a permis de passer du “wat?!” au “beau”.

meme wat commentaire beau

Grâce à ce projet j'ai appris à travailler à distance avec des outils comme Slack et Google Doc. C'est génial de pouvoir, à toute heure, modifier et montrer son travail à ses coéquipiers.

J'ai également appris à itérer, itérer et itérer encore et toujours. À chaque lecture de notre contenu, j'ai eu envie de modifier quelque chose. Et comme j'ai pu constater le même phénomène chez chez d'autres membres de mon équipe, je peux vous dire que notre google doc a bien servi.

Mais dans un groupe, tout le monde ne s'investit pas toujours à fond. Certains n'ont pas forcément le réflèxe d'aller voir les modifications du contenu ou les discussions sur Slack. Cela complique parfois la tâche.

Mais si la motivation d'un membre n'est pas au rendez-vous, tant pis, prenez ceux qui sont motivés et mettez-vous au boulot. Cette personne n'aura qu'à s'en mordre les doigts si le travail final n'est pas comme elle le désire ou ne lui correspond pas.

J'ai quand même beaucoup apprécié ce travail d'équipe. J'ai toujours adoré travailler en groupe avec des personnes motivées et à l'écoute, et je trouve qu'ensemble et grâce à toutes nos différences nous avons su créér un contenu de qualité.

La création du site

Une fois notre contenu rédigé, le reste du projet se poursuit individuellement. Nous devons créer un site web comprenant un abstract en anglais ainsi qu'une page contenant toute la restranscription de la conférence et pour finir, le case Study que vous êtes en train de lire actuellement. C'était la première fois que je crée un site web de toute pièce et j'avais peur de ne pas être à la hauteur.

wireframe papier

J'ai commencé par dessiner quelques wireframes papier et j'ai réalisé un style guide, pour avoir une idée globale de ce que je voulais.

J'ai gardé en tête les principes de la Gesltalt, comme la loi de la proximité, en définissant des espaces réguliers entre mes titres et mes textes. Ce qui m'a posé le plus problème fut le choix mes couleurs. Je cherchais quelques chose de simple et efficace qui corresponde au thème de la conférence et j'ai donc décidé de ne prendre que trois couleurs: le gris foncé, le blanc et le orange. Le gris et le blanc car ce sont deux couleurs bien contrastées et donc bien lisibles, même pour les personnes souffrant de déficience visuelle. Et le orange car il représente la créativité, l'optimisme mais surtout la communication.

Pour mes typographies, je voulais un contraste entre une typo sans-serif et une avec pour moderniser ma mise en page. C'est pourquoi j'ai choisi Oswald, une typographie très droite et épaisse qui correspond à l'effet moderne que je voulais pour mes titres. Et Lora, une typographie avec serif qui est plus élégante mais qui reste agréable à lire pour les textes. Je trouve qu'Oswald et Lora forment un joli couple.

Mais une fois cela prêt, il me manquait toujours quelque chose...J'avais ma structure, mais cela manquait de précision, c'était toujours trop flou dans ma tête. Et je savais pertinemment que si je me lançais dans le code, sans avoir plus qu'une structure, j'allais y perdre beaucoup trop de temps. J'ai donc décidé de créer mon design sur photoshop avant de coder. J'en ai profité pour modifier ma grille afin d'avoir des colonnes plus étroites que les gouttières afin que mon texte respire plus.

Ancien design du site Design du site actuel

Cela à rendu mon travail beaucoup plus clair et m'a permis de me structurer bien plus facilement. Même si c'est long d'élaborer un design sur photoshop, c'est tout sauf une perte de temps pour moi. Je me suis sentie bien plus prête à attaquer mon code après l'avoir fait car je savais où je voulais aller. Cela m'a aussi permis de ne pas céder à la facilité de créer des formes et des mises en page que je maîtrisais (si tant soit peu que j'en maîtrise...) mais plutôt de créer un design qui me plaît et de tout faire pour arriver à le coder.

Pour cela j'ai dû souvent rechercher des astuces et solutions (Google est un ami précieux) ou demander des avis sur mon travail. Ce n'est pas en restant seul face à son code que l'ont crée des expériences intéressantes. J'ai donc demandé beaucoup de retours sur le design et la practicité de mon site à des amis et proches, avec et sans connaissances en web, et cela m'a permis de modifier certaines choses, notamment le placement de bouton “back to top” ou encore la disposition du call to action par rapport à mon contenu.

J'apprécie vraiment de plus en plus la communauté web. Toujours prête à aider et à vous apprendre de nouvelles choses tout en vous poussant vers le haut. J'aime cet esprit de partage et d'entraide lorsqu'il s'agit de donner un avis constuctif ou d'aider lors de l'élaboration d'un code Javascript...

C'était un dur labeur mais au final je suis plutôt contente du résultat. Je suis passée de la première version qui était pas très sexy, à une version finale plus minimaliste et efficace qui n'a eu que des retours positifs autour de moi. J'ai appris un tas de choses et utilisé un tas d'outils nouveaux. C'était un projet très enrichissant.

Retour en haut de la page