Wallpaper May 2011

shnalla — 2011-05-09T11:47:00+00:00

Select your screen resolution in the list below

Wallpaper April 2011

shnalla — 2011-03-31T16:17:00+00:00

Select your screen resolution in the list below

Wallpaper January 2011

shnalla — 2011-01-18T16:09:00+00:00

Select your screen resolution in the list below

Les étapes préparatoires d'un projet web

shnalla — 2010-11-16T10:20:00+00:00

Aujourd'hui nous allons parler des étapes préparatoires à la conception d 'un site web.
Toutes ces étapes sont là pour nous faire gagner du temps et cerner au mieux les besoins du client.
En clair, ce sont les bonnes pratiques qui vont vous aider à gagner du temps et à ne pas perdre d'argent dans vos futurs projets.
C'est aussi la garantie pour le client d'avoir un site qui correspond au mieux à ses attentes et de suivre l'avancement du projet.

Les Etapes :

Brief
Phase de réflexion (Brainstorming,définition des cibles, de l'ambiance graphique, cahier des charges )
Recherches sur l'expérience utilisateur (UX, Personas, Prototypes, Comportements, Ergonomie)
Recherches graphiques (moodboards, maquettes rapides)

Le brief :

C'est le point de départ de tout projet ; généralement vous allez devoir lire entre les lignes et poser les bonnes questions à votre client pour cerner au mieux son projet. Ce qui est évident pour nous ne l'est pas forcément pour lui... A ce moment là vous commencez à avoir une « vision » du projet. Il est important pour la cohérence graphique, ergonomique et technique qu'une seule personne ait la vision finale du projet (On va éviter le "design by committee ).
Tous les clients n'ont pas un cahier des charges déjà établi; ce sera peut être à vous de le définir suite au brief.
Définissez aussi les besoins du client : qu'attend-t-il du site ? Qu'est-ce qui le pousse à créer un site ? Quels sont ses objectifs à court et moyen terme ?

Phase de réflexion :

Suite au brief, vous êtes plein d'idées :-) et d'énergie. Il va falloir poser tout ça et prendre du recul sur le projet.
Définissez la ou les cible(s) du site : qui ? Quel tranche d'âge ? Quelle connaissance d'internet ? Quels besoins ? Il extrêmement important de savoir à qui s'adressera le site ; les étapes suivantes seront conditionnées par la cible. Dégagez des pistes graphiques : couleurs, forme... C'est le moment de chercher de l'inspiration et de trouver les bons exemples. Vous pouvez faire des moodboards (planches d'ambiances) pour organiser vos idées.

Brainstormez ! Si vous travaillez à plusieurs, il est toujours bon d'échanger vos points de vue, vos idées etc.... Travaillez sur papier loin de votre machine, dessinez écrivez toutes vos idées ! Ne pas travailler directement sur votre machine évitera le conditionnement , vous produirez un travail plus "authentique"

Il est temps de définir un cahier des charges, si votre client n'en a pas déjà fourni un.

L'UX ou Expérience utilisateur :

Inutile de vous dire que si vous êtes déjà en train de créer une maquette sous photoshop, vous avez brûlé les étapes...
Nous allons donc aménager notre projet pour l'utilisateur en fonction des informations recueillies plus haut, mais aussi du contenu.
Reprendre tout ce que nous savons à propos de la/les cible(s) pour définir les personas.

Les personas sont des profils types représentés sous forme de personne imaginaire ; c'est l'utilsateur « moyen » de votre site. Ses envies, besoins, et connaisances vont donc conditionner son comportement. A nous d'adapter le site pour que la navigation lui soit agréable et simple et qu'il trouve facilement l'information qu'il cherche.
Lorsque vous avez vos personas (au moins deux ou trois) vous pouvez les intégrer à des scénarios qui vont placer l'utilsation du site dans un contexte concret.

Organisez votre information ! A l'aide de représentations visuelles simples, listez les pages de votre site et leur hiérarchie. En fonction de la quantité de contenu, vous pourrez opter pour une représentation sous formes de liens entre chaque page (hyperlink ).

Faites des wireframes ! Grâce aux wireframes, représentations simplifiées d'un site, vous pourrez définir les zones de contenu et adapter le design à l'information qu'il contiendra.

Pour résumer, vous avez trois types de documents : les personas (que vous pouvez représenter sous forme de fiches ; les shémas qui représentent l'organisation des pages et les wireframes qui représentent l'organisation du contenu et sa quantité.

Recherches graphiques :

A notre niveau, c'est l'étape finale, la concrétisation des étapes précédentes.
Organisez vos recherches selon plusieurs axes bien distincts, n'hésitez pas à sortir des sentiers battus avec des interfaces qui ne suivent pas forcément la tendance... Attention à bien suivre vos wireframes, ce sont en quelques sorte vos « garde fous ».
Pensez aussi à mettre en valeur vos maquettes avec une belle présentation !

Crédit photo : Justin Cline

Wallpaper November 2010

shnalla — 2010-11-09T11:09:00+00:00

Select your screen resolution in the list below

Wallpaper October 2010

shnalla — 2010-10-06T16:41:00+00:00

Select your screen resolution in the list below

Wallpaper September 2010

shnalla — 2010-09-07T09:55:00+00:00

Select your screen resolution in the list below

Wallpaper August 2010 part 2

shnalla — 2010-08-13T09:34:00+00:00

Select your screen resolution in the list below

Wallpaper August 2010 part 1

shnalla — 2010-08-10T11:48:00+00:00

Select your screen resolution in the list below

Wallpaper July 2010

shnalla — 2010-07-05T13:50:00+00:00

design.axenis.net

Wallpaper May 2011

Select your screen resolution in the list below

Wallpaper April 2011

Select your screen resolution in the list below

Wallpaper January 2011

Select your screen resolution in the list below

Les étapes préparatoires d'un projet web

Les Etapes :

Le brief :

Phase de réflexion :

L'UX ou Expérience utilisateur :

Recherches graphiques :

Wallpaper November 2010

Select your screen resolution in the list below

Wallpaper October 2010

Select your screen resolution in the list below

Wallpaper September 2010

Select your screen resolution in the list below

Wallpaper August 2010 part 2

Select your screen resolution in the list below

Wallpaper August 2010 part 1

Select your screen resolution in the list below

Wallpaper July 2010

Select your screen resolution in the list below