Water Waster

rédaction d’article webdesign intégration

Voici mon premier projet étudiant lorsque j’ai rejoint le DUT MMI de Montbéliard. On avait pour but de créer un site web mobile-first. On devait à partir d’un super-héros parler d’un problème environnemental. De mon côté, j’ai choisi le héros Super Mario.

Le Projet

Le contexte

Super Mario

Le Projet

Le contexte

Voici mon premier projet étudiant lorsque j’ai rejoint le DUT MMI de Montbéliard. On avait pour but de créer un site web mobile-first. On devait à partir d’un super-héros parler d’un problème environnemental. De mon côté, j’ai choisi le héros Super Mario.

Super Mario

La Maquette

Du webdesign !

Mockup de la maquette de Water Waster

J’ai tout d’abord créé une maquette pour avoir une idée de ce que pourrait donner le site avant son intégration. C’était la première fois qu’on utilisait le logiciel Adobe XD. Ce fut une agréable première expérience. Ici le site a une harmonie colorée basée sur l’univers aquatique et sur Super Mario. L’idée était d’adapter le site pour un jeune adolescent.

Mockup de la maquette de Water Waster

La Maquette

Du webdesign !

J’ai tout d’abord créé une maquette pour avoir une idée de ce que pourrait donner le site avant son intégration. C’était la première fois qu’on utilisait le logiciel Adobe XD. Ce fut une agréable première expérience. Ici le site a une harmonie colorée basée sur l’univers aquatique et sur Super Mario. L’idée était d’adapter le site pour un jeune adolescent.

Les Articles

Un peu de rédaction !

Livre

Ma première expérience de rédaction web. J’ai essayé de respecter les critères fondamentaux de l’écriture web (pas trop de mots dans une phrase, des titres pertinents, …)

Les Articles

Un peu de rédaction !

Ma première expérience de rédaction web. J’ai essayé de respecter les critères fondamentaux de l’écriture web (pas trop de mots dans une phrase, des titres pertinents, …)

Livre

Intégration Web

Un peu de code !

mock-up du projet water waster

J’ai intégré le site web en HTML / CSS / JS et d’un point de vue mobile-first. Ça m’a permis d’avoir une première expérience avec ces langages.

mock-up du projet water waster

Intégration Web

Un peu de code !

J’ai intégré le site web en HTML / CSS / JS et d’un point de vue mobile-first. Ça m’a permis d’avoir une première expérience avec ces langages.

Outils Utilisés

Les logiciels, et autres qui m'ont aidé

Adobe XD utilisé pour le maquettage.

Filezilla utilisé pour déplacer les fichiers sur le serveur du département.

HTML / CSS pour structurer et habiller le site.

Javascript pour ajouter de l’interaction, notamment au niveau du menu.

Google Suite m’a permis de faire la rédaction de mes articles et de stocker les documents en ligne afin de ne pas les perdre

Fontawesome, la bibliothèque d’icônes.