Création d’un site internet

Alice Junckers
Nov 5, 2017 · 7 min read

Nous avons visionné une conférence dans la cadre du workshop IOLCE (Input Output Lire et Communiquer sur Ecrans) à l’HAEJ, section DWM. Les instructions étaient de résumer la conférence et d’en faire une site internet. Pour ce faire, nous avons formé un groupe de 4 personnes.

La conférence a été présentée par Christian Heilmann et traitait des différentes manières de développer sur le web.

Le visionnage

Nous avons visionné individuellement la conférence et nous avons réalisé une première prise de notes. Ensuite, s’en est suivi une multitude de recherches sur internet: par rapport à Chris Heilmann, nous avons trouvé son blog, sur lequel figurait une version écrite de sa conférence. Cette découverte nous a beaucoup aidé pour la suite de notre travail…

Un texte uniforme

La seconde étape consistait à réunir nos notes afin de former un texte commun. Nous avons pu, grâce aux précieux conseils de nos professeurs, le corriger, le retravailler à maintes reprises, … pour aboutir à un texte uniforme.

Captures d’écran de nos textes en amélioration

Un texte structuré

Ensuite, notre travail s’est porté sur la structure de notre texte. Chercher des titres appropriés, des sous-titres, ajouter des images, organiser le texte en plusieurs paragraphes et alléger la lecture de celui-ci.

L’abstract

Il nous a été demandé aussi de rédiger un abstract en anglais. C’est-à-dire résumer notre texte commun et donner envie aux utilisateurs de lire notre travail.

En commençant cet atelier, nous pensions qu’il y avait deux façons de penser: faire un site pratique, ou faire un beau site. Mais cette conférence nous a permis de comprendre qu’il y a plus de deux modes de pensée dans le développement web. Certains ne jurent que par le Javascript, certains sont très attachés aux bases même du web, et d’autres combinent les deux.

Ensuite est venu le moment d’élaborer nos sites internet séparément… Nos ressentis étaient donc différents pour chacun.

Les wireframes

Nous avons trouvé judicieux de commencer par mettre nos idées sur papier en commençant par des petits croquis, et les retravailler au fur et à mesure pour pouvoir avoir une idée plus précise de notre site internet.

Nos wireframes respectifs

Alice

J’ai tout d’abord commencé par regarder quels gabarits nous avions le droit d’utiliser, et en fonction de cela, j’ai dessiné mes premiers croquis. En prenant du recul, la mise en page de mon site aurait été trop simpliste et trop monotone si j’avais suivi ce modèle. J’ai alors recherché après plusieurs idées, je me suis inspirée d’autres sites internet pour arriver à dessiner un deuxième croquis. Je l’ai ensuite retravaillé à maintes reprises pour que le résultat final me plaise, soit cohérent avec le sujet et corresponde le plus aux demandes du briefing.

Simon

J’ai commencé par dessiner mes premiers croquis en me basant sur les gabarits que nous pouvions utiliser. Le plus difficile était de trouver un moyen permettant de ne pas être trop répétitif dans les différentes pièces du jeu tétris et dans les gros blocs de textes. J’ai donc retravaillé mon wireframe à plusieurs reprises jusqu’à atteindre un certain équilibre entre dynamisme et variation des blocs pour ne pas être trop monotone.

Logan

Dès le début de mes croquis j’ai essayé de contrer la répétition provoquée par les 7 “pièces de Tetris” j’ai au début pensé à un slider mais ça ne correspondait pas aux attentes de l’exercice. Je suis donc revenu à un wireframe plus classique sur base des 4 types de colonnes disponibles en évitant la répétition.

Maxence

J’ai utilisé tous les types de colonnes disponibles pour créer un wireframe attirant et agréable à regarder, ainsi qu’assez aéré, le tout sur un one page, plus approprié pour expliquer une conférence à mon avis. J’ai aussi essayé de maintenir une certaine symétrie verticale à savoir texte — colonnes gauche/droite — texte.

Les documents Photoshop

Par après, nous avons chacun créé un document sur Photoshop qui allait nous servir de prototype: tirer des repères, placer nos images, nos textes, nos fonds,… pour nous faciliter la tâche au moment du codage.

Captures d’écran de nos documents Photoshop

Alice

Pour mettre au net mon croquis final, il a fallu que je réfléchisse aux couleurs de mon site. Vu le sujet “ludique” de la métaphore de Tétris, je voulais trouver des couleurs qui soient gaies et ludiques comme est le jeu Tetris. Cette étape a été fort longue mais une fois les couleurs trouvées, le reste s’est déroulé plus facilement.

J’ai alors placé mes images où je voulais qu’elles soient en fonction de la grille que j’avais formée au préalable. Placé mes titres, mes couleurs de fond, mes icônes,…

Simon

Lorsque je pensais avoir trouvé le bon wireframe, j’ai réalisé un PSD avec notre contenu et des images qui m’ont permis de me rendre compte de ce que donnerait mon site une fois codé. J’ai tout de même dû modifier certaines choses qui me plaisaient en dessin mais beaucoup moins sur ce document. J’ai ensuite fait des recherches pour trouver des couleurs qui allaient bien ensemble et qui n’étaient pas trop agressives pour faciliter la lecture à l’utilisateur. Cette étape m’a aussi permis de me rendre compte que mes polices s’accordaient bien ensemble.

Logan

Après la réalisation du wireframe je suis passé à la version PSD sur photoshop pour avoir une bonne idée de la taille des éléments et leur disposition précise. J’ai aussi vérifier que les polices s’accordent bien ensemble ainsi que l’interligne de mes paragraphes. Grâce au PSD j’ai pu aussi sélectionner mes photos et mes backgrounds.

Maxence

J’ai commencé par faire une recherche de typographie, puis je suis parti sur une mise en page simple, avec des images de pièces du jeu utilisées pour l’exemple, chacune d’une couleur différente et unie. Pour le design global, j’ai choisi deux couleurs, à savoir blanc et gris clair, pour éviter d’avoir un fond trop vide.

Le codage

Finalement, il a fallu que nous codions nos sites internet, sur base de nos documents Photoshop et pour finir, les mettre en ligne.

Nos codes respectifs

Alice

Au moment du codage, j’ai d’abord commencé par rédiger le code HTML de ma page, en ayant sous les yeux mon document Photoshop, pour plus de facilité et de précision. J’ai donc placé dans mon code les paragraphes, les titres, les liens, les images, …

Ensuite j’ai écrit mon CSS: les couleurs des textes, des fonds, des liens, les états en hover, les boutons,… Ensuite tout vérifier, si tout était sémantiquement correct et si mon site correspondait à mon modèle Photoshop, pour finalement mettre le en ligne.

Simon

Une fois que j’étais suffisamment content de mon PSD j’ai commencé à coder mon site. Comme vu au cours de Frontend Design j’ai dans un premier temps rédigé l’entièreté de mon HTML avant de passer au CSS avec toujours mon document PSD à vue. J’ai ensuite codé la page de l’abstract en respectant le même style graphique. La dernière étape était la mise en ligne et la correction de petits détails comme des fautes d’orthographes ou des erreurs d’affichage.

Logan

Sur base du PSD j’ai commencé par rédiger dans un premier temps tout l’HTML nécessaire à mon site. Après écriture complète de l’HTML un petit détour sur W3C validator pour corriger les petites erreurs. Ensuite place au CSS pour donner à mon site son aspect final (couleurs,images ainsi que positionnement des éléments).

Maxence

Pour la programmation du site, j’ai utilisé bracket avec comme référence mon fichier PSD. J’ai commencé par rédiger tout le code de base, en divisant bien tous les textes en sections, avec un header et un footer. Vient ensuite le CSS où j’ai appliqué la méthode BEM, en structurent le code avec des commentaires, pour avoir un code clair. J’ai fini par passer le code au vérificateur W3C et corriger les quelques erreurs qui ont été mises en évidence.

Captures d’écran de nos sites internet

Nos sites: , , et .

Cette expérience de création d’un site était des plus enrichissantes. Nous avons réellement pu nous rendre compte du travail à fournir pour créer un site internet et de toutes les choses auxquelles il faut penser pour que le site soit cohérent avec le sujet et rendre l’utilisation agréable.

Après l’effort, le réconfort !

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