Du zoning à la maquette graphique. Comment être éfficace ?

Salut à tous,

Etant débutant dans la création de sites internet mais ayant tout de même créer quelques sites internet. Je remarque que je manque d'efficacité certainement du à mes méthodes de travail dans les différentes phrase de création d'un site.

Je m'explique:

Il y a bien sûr toujours l'idée de départ et donc la création d'un sorte de cahier des charges pour préciser un maxium de chose dès le départ. Ensuite il m'arrive de faire quelques esquisse sur papier mais très vague et absolument pas détaillée.

Je procède ensuite à la création d'un zoning ou de ce que je pourrais appeler une maquette non graphique dans photoshop. C'est à dire juste la disposition des blocs, leur forme et du texte, mais aucune couleurs, mise en forme et design à proprement parler.

Après cela j'habille le tout dans photoshop et je pense que c'est la que ca pose problème, car je créer littéralement dans dans ce dernier et je perd pas mal de temps car j'essaye ceci, cela, cette texture comme ceci, une autre comme cela. Bref beaucoup de manipulation sans y avoir pensé vraiment avant car de 1 je ne sais pas absolument pas dessiner, de 2, je ne vois pas comment je rendrais ce que j'ai dans la tête sur papier. Je finis généralement avec un fouilli de calque que je prend un certain à réorganiser aussi !

D'ou ma grande question. On m'a toujours dis de faire un max sur papier avant mais je ne vois absolument pas comment rendre des effets "précis" avec des crayons et une feuille de papier.

Comment donc procéder au mieux entre la phase de zoning et celle d'une vrai maquette graphique afin de préparer au mieux celle-ci et de n'avoir plus cas la réaliser facilement dans photoshop. Un peu comme quand on intègre un design en css qui à été bien penser à la base..

Comment procédez-vous, vous ? Y a t'il une manière bien précise de travailler le plus efficacement possible a fin de se préparer à la réalisation (ou mise au net) d'un maquette graphique dans photoshop ?

D'avance merci

Euh... Vous pouvez répéter la question
Modifié par lddsoft (17 Mar 2011 - 20:13)

Salut,

personnellement, je ne sais absolument pas rendre ce que je fais dans photoshop sur une feuille de papier. Il est vrai qu'il est plutôt long de créer des maquettes sous photoshop car on ne peut pas modifier rapidement les éléments comme on le ferait sous illustrator et il n y a réellement aucune fonctionnalité très adapté au design d'interface.

Maniaque que je suis, faire du pixel perfect n'est pas non plus évident.

Firework est beaucoup plus adapté pour tout cela mais je ne m'en sers pas car dans la version cs4, la compatibilité avec illustrator et flash est trop limité ce qui est rédhibitoire là où je travaille.

Donc je n'ai pas vraiment trouvé de solution, je prend juste du temps pour faire mes maquettes. Ça reste dans tout les cas un travail qui prend du temps.

Donc tu ne fais aucuns croquis au préalable ?

Non, au départ je fais un cahier des charges dans lequel je réfléchis à l'arborescence aux fonctionnalités et aussi à la présentation. Ensuite lorsque vient l'heure de réaliser le design, je positionne tout les éléments sur mon psd ~ce que tu appelles le zoning.

Parfois il m'arrive de faire quelques dessins à l'arrache dans photoshop mais honnêtement je n'en tire pas souvent quelque chose de probant. J'ai déjà tenté aussi sur papier mais je fais pas mieux et transposer de la feuille à l'écran n'est pas évident.

Ok merci de ton feedback. Moi le truc c que je me retrouve souvent avec un fouilli de calques par exemple car je je fais des essai sur puis je le masque etc.. Ou alors j'en ai besoin de plusieurs que je groupe et tout et tout

Il n'y a donc pas spécialement de méthodologie indiquée à ce que je vois

La mise en place d'un storyboard, en amont pour la création d'une maquette photoshop est innévitable a mon sens. Nous pouvons visualiser alors les "incohérences" d'ergonomie et/ou d'architecture.

Il y a plus ou moins une méthodologie :

-Création d'un storyboard
-Création de la maquette
-Recroisement avec l'intégrateur
Modifié par nemeton73 (20 Mar 2011 - 10:04)

Merci pour ta réponse nemeton,

qu'appel tu un storyboard ?

Diox a écrit :
Ok merci de ton feedback. Moi le truc c que je me retrouve souvent avec un fouilli de calques par exemple car je je fais des essai sur puis je le masque etc.. Ou alors j'en ai besoin de plusieurs que je groupe et tout et tout

Il n'y a donc pas spécialement de méthodologie indiquée à ce que je vois

C'est sûr que ça dépend de chacun. Je faisais pas mal de fouilli de calque avant mais maintenant je ne conserve plus trop mes essais. Généralement quand je veux faire des modifications importantes je créé un nouveau fichier. Au départ j'avais un peu peur de modifier/de ne pas pouvoir revenir en arrière.

Outre les méthodologies l'expérience fait aussi pour beaucoup.

nemeton73 a écrit :
La mise en place d'un storyboard, en amont pour la création d'une maquette photoshop est innévitable a mon sens. Nous pouvons visualiser alors les "incohérences" d'ergonomie et/ou d'architecture.

Qu'entends tu réellement par story board? Ce sont des écrans synthétiques du site?

Il y a deux types de storyboard, qui se complémentent parfaitement :

- Un storyboard qui permet d'avoir une vue d'ensemble du site :

Un schéma papier qui montre les différentes pages ainsi que la concordance des liens entre chaques pages (on notera le thème pour chaque page), le tout regroupé sur une page, un schéma explicite d'une vue d'ensemble.

- Un storyboard détaillant l'ensemble du site :

Un dessin papier détaillé, page par page (une page pour l'index, une page pour le contact....)

Ces deux schémas se complémentent parfaitement et illustre d'une manière précise et concrète un projet. Un client est friand de ce genre de petite attention !
Modifié par nemeton73 (20 Mar 2011 - 16:07)