Le Blog

Le blog laboratoire de F.L.D. Studio
0

Modèle de conception idéale

Conception site Modèle de conception idéale

Lors de sa conférence à la Kiwi Party 2013 ( http://romy.tetue.net/zoning-mockup-maquette-web ) Romy Duhem-Verdière  nous recadre sur les méthodes de conception d'un site WEB. En revenant sur le vocabulaire, souvent mal compris ou interprété et en remettant dans l'ordre les différentes bonnes pratiques que nous pourrions utiliser pour fluidifier la conception des sites.

Le cheminement idéal serait donc :

Dessiner à la main

En s'aidant si besoin de modèles , quelques sites pour se les procurer

Zoning

Pour l'identification des zones principales de l'écran utilisateur. C'est un simple shéma en noir en blanc qui permet de commencer à hierarchiser l'information. () Le zoning ne contient aucun texte, ni images, ni couleur.

Zoning

Wireframe ou maquette filaire

Toujours en noir et blanc mais avec du faux texte (lorem ipsum)

Wireframe

Le prototype

Il s'agit d'un site fonctionnel, les liens sont cliquables, on peut l'utiliser pour faire des tests d'utilisabilités.

Prototype

Ce qui nous donne dans l'ordre le processus suivant :

zoning-wireframe-prototype

Habillage graphique

En abordant cette thématique, Romy nous dévoille les techniques du Mooboard (planches d'inspiration) et du Style Tiles (planches de style http://styletil.es/ ) avant d'arriver enfin au Mockup qui est la maquette graphique la plus fidéle possible. ( http://www.photoshopetiquette.com/ )

Mockup

Ce qui donne le processus créatif graphique suivant :

moodboard-styletile-mockup

Une fois les définitions, roles et outils bien identifiés elle nous propose son Workflow idéal, celui pouvant même être paralléliser entre différents intervenants ou équipes.

Workflow idéal

Cet ensemble de méthodologies n'est cependant pas aussi rigide que cela. Elle nous donnes des exemples de conceptions qui sautent parfois quelques unes des étapes. Il s'agit en fait d'être pragmatique et de s'adapter à la taille, l'importance et au budget temps et argent dédié au projet.

Les slides de la conférence

Le .PDF de la conférence (11 Mo)

Prototyper dans le navigateur :  https://webflow.com

Catégories: Développement WEB, Conférence, Vidéo

Tags: Outil

Commentaires: Pas de commentaires

Envoyer un commentaire