Du Moodboard au Webdesign

Faire un webdesign, en suivant tout les étapes du procéssus de création.

Du Moodboard au Webdesign

Cette semaine à été conascré au webdesign, en passant par les étapes de moodboard, zoning, wireframe et webdesign. Le but été d'avoir un webdesign pour quatre pages d'un site web.

Créer un Moodboard

La première étape cette semaine était de faire un moodboard. Les informations de départ qu'on avait été de concevoir le webdesign d'une association qui milite pour faire pousser un petit arbre sur chaque balcon. L'association souhaite offrir un pot hi-tech qui comprend la terre avec sa graine. Le site s'adresse donc à tous les habitants qui ont un balcon et vise à les convaincre d'adopter ce petit arbre. J'ai fait le choix de faire deux moodboards pour mettre en avant ce que je voulais montrer. Le premier Moodboard: Nature, mets en avant l'utilisation du vert et du côté végétale. Le deuxième moodboard est pour faire contratse au premier et donc mets en avant un côté industriel (pour rappeler les balcons) avec des nuances de gris, et le rouge est pour faire contrast au vert.

moodboard1

moodboard2

Voici les deux moodboards

Mettre en place un zoning

Suite au moodboard il été temps de mettre en place un zoning, pour les 4 pages, la page d'accueil, de présentation, d'adoption et enfin de Contact. Pour ce zoning, j'ai essayé de resterr sur quelque chose de très simple, mais j'ai comme même essayé de faire en sorte que pour chaque page on ne soit pas tout a fait sur le même zoning pour éviter l'ennui.

zoning

Ici le zoning de la page d'accueil

un premier wireframe et webdesign

A partir de mon zoning, j'ai mis en place un wireframe. C'est à partir de ce wireframe que j'ai fait mon webdesign composé des quatres pages demandés. Je me suis rendu compte a ce stade que c'est assez difficle de pouvoir rester dans le zoning et faire un design qui reste dans le thème du moodboard.

wireframe1

webdesign1_1

webdesign1_3

Ici vous pouvez voir le wireframe de la page d'acccueil et ensuite le webdesign de la page d'accueil et de la page adoption

Deuxième essai du webdesign

Etant donné que j'avais fini le webdesign et qu'il me restait du temps, j'ai decidé de refaire un wireframe et un webdesign, en essayant de faire quelque chose de différent par rapport au premier webdesign que j'ai fait.

wireframe2

webdesign2_2

webdesign2_4

Ici c'est le wireframe de la page d'acccueil pour la deuxième version ainsi que le webdesign de la page d'présentation et de la page de contact.

Hannah Ford