À vos marque, prêts, codez !
« Salut tout le monde, je suis Angie Courtoy élève en webdesign à la haute école d’Albert Jacquard. Sur cette page, je vous invite à découvrir les différentes étapes de réalisations d’Input, Output, Lire et Communiquer sur Écran, en bref I.o.l.c.e. »
?
Par où
commencer…
Dans le cadre de ce nouveau projet il nous a été demandé de sélectionner une conférence parmi une liste de vidéos proposées par les professeurs, de la visionner, de l’analyser puis d’en faire un site internet.
Pour ma part, la conférence que j’ai sélectionnée s’intitule « take back your web » de Tantek Çelik. J’ai choisi cette vidéo, car j’aimais bien le titre, disons que je le trouvais accrocheur, c’est ce qui m’a donné envie d’en savoir plus sur la conférence.
Une fois la vidéo visionnée, j’ai réalisé mon résumé personnel de 2500 caractères sur ce que j’avais compris de la conférence. Ça n’a pas été facile pour moi, car soit j’avais trop de caractères, soit pas assez… J’ai donc modifié mon texte à plusieurs reprises, afin de correspondre à la demande.
Ensuite, il a fallu former un groupe en fonction des personnes ayant choisi la même conférence que moi pour créer un résumé collectif. C’est ainsi que je me suis retrouvé avec Jérôme, Steven et Elodie. Le résumé collectif terminé, j’ai pu commencer à chercher différentes informations sur Tantek Çelik.
Dans la peau d’une détective !
Tout au long de la conception de ce projet, pas mal d’idées ont défilé dans ma tête. Seul bémol, apprendre à canaliser ses idées et surtout ne pas filer tête baissée comme j’ai l’habitude de le faire… C’est pourquoi, j’ai divisé mon travail de mise en forme en différentes étapes que je vous invite à découvrir.
Ses réseaux
La première étape fut d’analyser l’atmosphère des réseaux de Tantek Çelik, afin de « m’imprégner » au mieux de son univers. Ce que j’en ai déduit au niveau de son site est que Tantek Çelik favorise les mise en pages simples avec des couleurs épurées en grande partie du vert. Au niveau de la typographie, il utilise une police assez neutre utilisée en majorité pour mettre l’accent sur les informations importantes, l’Helvetica.
Instagram, Twitter, etc.
Sur ses réseaux sociaux, on voit que le conférencier aime être dehors pour courir, être entouré de nature ou juste profiter du magnifique paysage offert par la nature.C’est donc en me basant sur les différentes informations trouvées sur ses réseaux que mes idées de mise en page se sont concrétisées. J’ai alors transformé ses idées en mots-clés que voici : simplicité, mise en avant d’informations importantes, liberté et nature. Mots clé qu’on retrouve sur l’ensemble de mon moodboard.
Place
au design !
C’est en gardant mes mots-clés en tête que j’ai commencé à faire le design visuel de mon site. Problème, le trop-plein d’idées…
J’ai tendance à oublier que les interfaces que je conçois ne seront pas les dernières, j’ai envie de mettre énormément de choses sur mes sites, alors que ce sont tout simplement des idées que je peux enregistrer et garder pour d’autres projets.
J’ai donc repris mes mots-clés cachés dans ma tête que j’ai collé sur mon écran. Ce qui m’a énormément aidé, car à chaque fois que je voulais faire quelque chose de trop complexe, il me suffisait de lever les yeux, de lire mes mots-clés puis de me recentrer sur mon travail.
On passe au code ?
L’une des consignes du briefing était d’appliquer des CSS grids et un burger menu à notre mise en page. Au début, j’étais paniqué, car je ne savais pas du tout comment m’y prendre pour intégrer tout ça à mon site.
Heureusement, cette peur fut de courte durée, car le lendemain de mes interrogations, monsieur Thronte et monsieur Therasse avaient eu la magnifique idée de sortir des vidéos explicatives, afin de nous permettre de mieux comprendre la matière.
Grâce à cela, j’ai pu commencer à coder mon site en ayant les vidéos à mes côtés. Chose que j’ai trouvé très utile, car elles me permettaient de mettre pause, le temps de bien comprendre chaque partie de mon code. C’est ainsi que je suis parvenu à intégrer les CSS grids et mon burger menu, sans trop de difficulté.
Le début d’une grande aventure.
Je vous avoue que pour une fois, j’étais vraiment à l’aise avec mon code quand je le compare à HelloWorld mon premier projet scolaire.
D’accord, il n’est pas parfait, mais dans l’ensemble, je suis assez fière de moi et de la manière dont j’ai évolué tout au long de ces projets, dans HelloWorld, je n’y croyais plus, j’avais l’impression que tout le monde comprenait à part moi…
Finalement, ce deuxième projet m’a rassuré, il m’a permis de voir que mes idées étaient appréciées et que j’étais capable de faire de bonnes choses, il fallait pour ça apprendre à s’écouter soi même et avoir confiance en ses capacités.