« Moi »
Design Web - Portfolio - 2025
Ce projet était un devoir dans le cours de Design Web mais aussi un élément important pour notre futur stage ou emploi. J’avais un cahier des charges à respecter et donc des pages à avoir obligatoirement :
- Le site doit être développé avec WordPress;
- Le site doit être utilisable et accessible lorsque Javascript est désactivé;
- Il doit être accessible, l’utilisable, doit avoir un concept et respecter notre branding;
- Votre portfolio doit être composé au minimum:
- d’une « archive » reprenant tous les projets que vous allez présenter;
- d’une vue détaillée pour chaque projet présenté;
- d’un formulaire de contact ainsi que vos informations de contact;
- d’une présentation de vous-même.
Mon projet est de partir sur quelque chose de simple et efficace comme je suis moi. C’est pour cela que j’ai pris une ambiance sobre, qui fait bien son boulot, qui me représente et que j’aime
1 - Inspiration - Moodboard
Pour ce projet j’ai commencé par faire un léger moodboard pour déjà avoir un idée de base sur ce que je voulais avoir et je suis venue au fur et à mesure ajouter des éléments sur la police, les couleurs et autres en avançant dans mon projet. Comme mes idées se précisent en travaillant sur le projet, il faut plus d’inspiration et elles peuvent changer alors c’est toujours en évolution.
2 - Création - Prototype
Ensuite j’ai fait un prototype rapide sur les sujets que je voulais aborder dans le site et sur quel page. Cette étape m’était nécessaire pour voir comment organiser mes pages et poser mes idées afin que la suite soit plus claire.
3 - Création - Wireframe
Viens l’étape du wireframe. On fait notre design le plus pure, sans couleur, sans police juste avec la disposition que l’on veut ainsi que les éléments : textes, images, navigation… Cette partie nous permet de voir comment on peut agencer les choses et ce qu’on peut y mettre. Pour ce projet si je voulais mettre beaucoup d’image pour illustrer tous mes projets mais aussi partir sur l’idée qu’on arrive sur le site pour voir un film, le miens et c’est ça que j’ai voulu rendre dans ce wireframe et pour ensuite avoir plus facile de construire le design.
4 - Création - Design
Voilà l’étape du design. Je viens ajouter la couleurs, les polices que je veux et toutes les images pour rendre mon projet plus attractif et pour qu’il soit vraiment en lien avec mon thème. Pour cela je suis partie sur un fond noir pour coller à l’ambiance cinéma. Ensuite, j’ai mis beaucoup de photos pour mes projets et aussi parce que le cinéma est fait d’images. Pour la page d’accueil, j’ai mis l’affiche de mon film pour les différents choix à faire comme sur un DVD. Pour le reste des couleurs, je suis restée sur des couleurs sobres.
5 - Création - WordPress/CSS/JavasScript
La dernière étape est de créer le site. Pour ce projet, nous avions comme obligation d’utiliser WordPress comme cms, c’est un outil qui permet de créer, gérer et modifier facilement un site web sans avoir à coder tout à la main. Il faut rendre cette interface la plus facile et logique possible. Pour modifier ça, il faut faire le php, c’est là où on ajoutera les différents champs, par exemples : les maisons, les dons, les règles… Cette partie remplace la partie html. Après il faut toujours faire du css voir scss pour styliser le site et également du JavaScript pour animer le site.