IOlce acte deux !

Aline Meunier
Aug 16, 2019 · 4 min read

Bonjour, Je m’appelle Aline Meunier, j’ai 22 ans et je suis actuellement élève à la Haute École Albert Jacquard. Je vais vous raconter mon parcours du combattant pour la réalisation de mon deuxième IOlce !

Première étape : Le projet

Cet article medium est le case study du IOlce « Input Output, Lire et communiquer sur écran » un travail individuel dans le cadre de l’option DWM. Vous trouverez dans cet article le déroulement étape par étape de ce travail.

J’ai reçu comme vidéo : «World-Wide Work» , une conférence d’Ethan Marcotte.

Deuxième étape : Commencement du travail

Après l’annonce du boulot à faire, c’est parti, on se motive et on y va !

Seule face à mon écran d’ordinateur, je découvre la vidéo reçu par mes professeurs. Première inquiétude : la vidéo est en anglais et je parle pas très bien cette langue…

Sur ce, je me concentre, écoute plus d’une fois la vidéo afin de prendre des notes et j’analyse les images de la conférence pour mieux comprendre.

Après des sueurs verser et une concentration au maximum, mon contenu pour le travail est fait ! Une bonne chose de fait !

NEXT

Troisième étape : Recherche d’un design

Pour trouver un design ça peut-être simple comme compliqué à la fois. Encore heureux j’étais inspiré pour créer un design pour ce projet.

Pour la typographie j’en ai choisi qu’une, pour la simple et bonne raison que ça m’a permis de jouer avec la graisse de la lettre. Un choix simple qui peut s’avérer compliqué à la fois.

Pour les couleurs j’ai choisi, un bleu qui est à la fois imposant et à la fois doux à regarder.

Quatrième étape : Le code

C’est parti pour le plus gros du travail !

Tout d’abord je m’attaque à la structure de mon code :

  • faire une hiérarchie;
  • diviser le texte en section;
  • où mettre les images;
  • créer un menu;
  • faire une liste;
  • mettre un pied à mon site

et j’en passe…

Je fais une recherche de toutes les images dont j’aurais besoin pour les jours à venir.

Une fois que la structure du site est fini, je passe au design. J’ai mis, en arrière plan, un dégradé linéaire qui va vers le gris au transparent. Le titre, “Le web design, si innocent ?”, j’ai joué avec la typographie en utilisant deux tailles de police et ajouté du bleu à “innocent” pour bien accentué ce mot, pour semer le doute aux utilisateurs et ainsi les obliger à lire le contenu du site. Enfin pour finir sur la page d’accueil, j’ai ajouté une flèche menant vers le bas pour guider l’utilisateur à aller visiter le restant du site.

Pour la structure, j’ai mis des sous-titres avec un bord sur le côté gauche en bleu pour rappeler cette couleur. J’ai aussi mis des mots ou phrases plus importants en bleu et mis des images, car les images peuvent parler plus que des mots.

Le “Résumé”, si je peux l’appeler ainsi, je l’ai mis en bleu avec une taille de police plus importante pour qu’il attire l’attention de l’utilisateur.

Pour la section consacré à Ethan Marcotte, J’ai mis son nom comme sous-titre Mais cette fois-ci j’ai mis un fond en bleu et la typo en blanc, pour la démarquer des autres sections.

J’ai d’abord commencé par développer la version mobile. La version la plus simple à réaliser, toutes les informations sont en dessous et se suivent. Puis la version desktop.

Vient en dernier les petits détails, qui ne sont pas toujours agréable à faire. Beaucoup de chipoteries pour avoir le résultat final !

ENFIN FINI, même si c’était long à la réalisation, j’ai bien aimé faire ce travail car en général, j’aime voir la progression de mon boulot. Pouvoir le publier et le montrer à tout le monde, c’est une grande satisfaction pour moi !

More From Medium

Top on Medium

Top on Medium

Apr 5 · 6 min read

11.1K

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade