La conception d’un site web ou d’une application se compose de plusieurs étapes clefs : l’étude, la conception et la réalisation. Afin de concevoir l’aspect graphique d’une application, on passe par deux phases : la première phase consiste à positionner les éléments sur la page et la deuxième consiste à maquetter graphiquement les pages.

La conception ergonomique de l’application


La conception graphique va permettre de décrire l’interface de l’application. Cette phase détermine l’ensemble des fonctionnalités techniques ou non nécessaires pour répondre aux attentes de l’internaute. Cette phase se décompose en trois partie. L’ordre d’application est important, car chacun des processus se réfèrent au processus précédent.

  • Le zoning
Zoning d'une page
Zoning d’une page

Le zoning d’un site ou d’une application permet de positionner les différentes zones (ou blocs) dans la page. En d’autre termes, c’est à ce moment que l’on va placer le logo, le menu, le contenu, séparer la page en colonne etc.

Enfin, ce schéma liste les contenus et commence à organiser l’information sur la page.

 

 

  • Wireframe
Wireframe d'une application
Wireframe d’une application

Le wireframe ou maquette filaire reprend le zoning précédent en détaillant les contenus des différents blocs (nature des contenus, textes, boutons…). On le considère comme un schéma informatif pour l’étude de l’application. Cette méthode permet de valider l’aspect fonctionnel du site.

 

 

 

  • Prototype

Le prototype d’une application sont des pages fonctionnelles qui rendent la navigation entre elles possible. Le prototype permet par exemple de décrire les étapes d’ajout d’un article. On peut alors effectuer des tests sur l’utilisation de l’application et/ou du site.

La partie graphique : maquettage


Les maquettes graphiques sont le prolongement des maquettes fonctionnelles. Elles apportent le choix des couleurs, typographies et autres : c’est à dire la représentation précise de l’application, le rendu final.

Il est important de ne pas oublier d’adapter les maquettes graphiques à tous types d’écrans  (smartphone, tablette, PC) afin que l’application ou le site soit accessible sur tous supports. 

Les maquettes graphiques sont réalisées à l’aide d’un logiciel d’édition graphique. Elles peuvent aussi être réalisées directement en HTML/CSS (feuilles de style).

Astuces et logiciels existants

[tabs type=”top”] [tab active=”true” title=”Zoning et Wireframe”]

Logiciels :  Balsamiq, PencilMoqupsMockflowCacoo

[/tab] [tab active=”” title=”Prototype”]

Logiciels :  DummyJetstrap

Langage : HTML/CSS

[/tab] [tab active=”” title=”Maquettage”]

Logiciels :  Photoshop, Illustrator, The Gimp

Langage : HTML/CSS

[/tab] [tab active=”” title=”Trucs et Astuces”]

Colour Lovers – Code couleur – Palette de couleurs – Colrd

[/tab] [/tabs]