Penser design ou penser structure pour la création visuelle

Bonjour,

quand vous proposer un site web à un client, vous pensez visuel d'abord, ou bien structure ?
Je veux dire, montrer des maquettes faites sous Photoshop/Illustrator, et suite à ses validations, vous proposez alors un rendu web le plus proche possible (suite à des adaptations pour que ça passe en xhtml + css).
Ou bien vous faire un export Photoshop avec des découpes de tranches ?

Ou alors, vous pensez structure, et partez du codage pour aboutir à un visuel qui sera de fait plus pensé "web" ?

Je demande cela car je lis souvent que l'apparence n'est pas primordiale, que le contenu est le plus important.
Pour le moment et avant la découverte du XHTML et de l'accessibilité, les gens voulaient (et veulent encore, car ne s'y connaissant pas en technique) valider un visuel souvent proche d'un visuel "papier" dans ce que j'ai pu constater.
Mais je n'ai pas travaillé en SSII, ni en web agency.

Merci
Modifié par osscour (22 Oct 2008 - 20:40)

osscour a écrit :
quand vous proposer un site web à un client, vous pensez visuel d'abord, ou bien structure ?

Message/contenu/fonctionnalités/ergonomie?

osscour a écrit :
Je veux dire, montrer des maquettes faites sous Photoshop/Illustrator

Oui, ou Fireworks, ou autre logiciel encore. En export PNG-24.

osscour a écrit :
et suite à ses validations, vous proposez alors un rendu web le plus proche possible (suite à des adaptations pour que ça passe en xhtml + css).

Suite à validation, on passe à l'intégration web, qui ne se résume pas à «des adaptations pour que ça passe en xhtml + css». C'est un boulot à part entière. (Le mien en l'occurrence.)

osscour a écrit :
Ou bien vous faire un export Photoshop avec des découpes de tranches ?

Ha ha ha ha ha lol.... hum, pardon. Donc non, pas d'export de jambon découpé en tranches et htmlisé par tel ou tel outil automatisé.

osscour a écrit :
Ou alors, vous pensez structure, et partez du codage pour aboutir à un visuel qui sera de fait plus pensé "web" ?

Pour le design, il faut un minimum penser structure / contraintes et fonctionnement du Web.
Pour l'intégration, il faut commencer par penser structure HTML, oui. Puis styler en CSS pour aboutir au visuel recherché.

osscour a écrit :
Je demande cela car je lis souvent que l'apparence n'est pas primordiale, que le contenu est le plus important.

Le contenu, le message, le business model, le référencement et/ou la communication et/ou publicité (hors-site), l'ergonomie. Le design graphique, c'est une mise en avant du contenu et du message, une implémentation de l'ergonomie et de l'identité visuelle.

osscour a écrit :
valider un visuel souvent proche d'un visuel "papier" dans ce que j'ai pu constater

Valider un visuel: bien.
Valider un visuel proche d'un visuel "papier": pas bien, signe d'une méconnaissance du média.

osscour a écrit :
quand vous proposer un site web à un client, vous pensez visuel d'abord, ou bien structure ?

D'abord bien bien bien comprendre ce que fait le client, essentiel ça, ensuite (ou en même temps plutôt) rassembler et organiser toute les informations dont tu disposes sur l'activité de l'entreprise, qui te permettrons d'encore mieux comprendre et d'ébaucher une structure. Ça ne sert à rien d'essayer d'illustrer ou de décorer un truc vide. D'abord placer sur ta feuille l'information dont tu disposes et ensuite mettre en couleur. Ça inspire plus.

Selon l'activité une navigation type arborescence correspond mais pour une autre une navigation type mot clés et préférable, pour d'autre les deux. Ce sont des éléments a prendre en compte dans ton design, non seulement parce qu'ils faut les intégrer mais surtout parce que tu peux graphiquement jouer avec. Selon les éléments présent dans tes menus ils iront naturellement ce placer horizontalement ou verticalement, au contraire si tu décides d'abord ton design de menu et ensuite tu le remplis il peut y avoir des problèmes de navigation.

osscour a écrit :
Pour le moment et avant la découverte du XHTML et de l'accessibilité, les gens voulaient (et veulent encore, car ne s'y connaissant pas en technique) valider un visuel souvent proche d'un visuel "papier" dans ce que j'ai pu constater.

Tout le probléme c'est qu'il faut quand même plus de temps à créer un design css qu'un design sur Photoshop/Illustrator. Donc ceux ci permettent une recherche graphique plus libre et plus rapide.
Par contre comme tu dis, si tu te retrouve à faire un design "style papier" valider par ton client c'est un peu contraignant.

Une bonne solution c'est de ne pas présenter une maquette du site tel qu'il se verrat mais un concept graphique, une ligne directrice un peu comme les documents de charte graphique d'une entreprise, le document défini l'usage du logo des couleurs, des typo etc... mais permet la création de plusieurs types de document.

Ce document est donc un guide plus qu'une image à reproduire dans un autre langage. Il défini le style, le type de visuel, les couleurs la typo.

Par exemple au lieu de faire toute ta maquette 1024X768 (qui ne correspondra forcement pas à la réalité) avec une image de fleur style Warhol comme header, tu fais un document "guide" avec une partie "visuels" (qui correspond a tes header sur ta maquette) et la tu parles de ton concept visuel "Warhol flors" .

Travailler ainsi te donnes plus de liberté pour l'intégration, si ensuite tu veux utiliser tes fleurs comme header ou comme entête d'un menu ou comme menu.
Modifié par matmat (23 Oct 2008 - 05:55)

Merci beaucoup pour vos réponses, cela m'aide à mieux comprendre.
À cela je voudrais vous poser d'autres questions : de quelle parcours êtes-vous ?
Écoles d'Arts graphiques, autodidactes ?
Avez-vous exercé en agences web, de communication, en SSII ?
Cela m'aiderait à tenter de comprendre mieux comment cela se passe dans la production.

J'avais lu dans le livre Conduite de projets web la maquette photoshop (mais les exports en tranches et les tableaux pour la mise en page au lieu de xhtml et css) et le concept board.
En formation, on a vu la première chose, mais la maquette était vraiment une maquette transformée en html via l'outil (Photoshop).
On n'a pas eu de formation orientée graphisme en général, mais plus web et techniques (outils, programmation côté client et serveur).
Et on ne nous a pas appris le xhtml et css alors, ce qui me complique la tâche.
Durant vos formations, vous a-t-on orienté vers des livres références pour apprendre les méthodes de conceptions que vous me décrivez ?

De même, faites vous des outils d'administration (genre mini-CMS) qui est valide xhtml et css et compatible multi-navigateurs sans trop de difficultés ?

Merci beaucoup.

Juste au passage, un sujet récent traitait à peu près du même sujet, ça pourrait t'intéresser également: Les propositions aux clients.

osscour a écrit :
À cela je voudrais vous poser d'autres questions : de quelle parcours êtes-vous ?
Écoles d'Arts graphiques, autodidactes ?
Avez-vous exercé en agences web, de communication, en SSII ?

Autodidacte pour l'essentiel. J'exerce comme indépendant et je travaille avec des webdesigners, mais ne suis pas graphiste moi-même.

osscour a écrit :
En formation, on a vu la première chose, mais la maquette était vraiment une maquette transformée en html via l'outil (Photoshop). (...) Et on ne nous a pas appris le xhtml et css

Donc pas du tout de formation à l'intégration web. C'est regrettable, mais pas inattendu.

osscour a écrit :
De même, faites vous des outils d'administration (genre mini-CMS) qui est valide xhtml et css et compatible multi-navigateurs sans trop de difficultés ?

La plupart des outils CMS récents permettent de générer du code valide, et surtout permettent de générer le code souhaité grâce à un système de templates/squelettes/thèmes. Ça n'est généralement pas un souci. Par contre ça n'est pas toujours facile d'usage.

Benjamin D.C. a écrit :
Juste au passage, un sujet récent traitait à peu près du même sujet, ça pourrait t'intéresser également: Les propositions aux clients.

Merci beaucoup, c'est vrai que cela y ressemble.

Merci aussi Florent (je ne vois pas comment je peu citer ta réponse et celle de Benjamin à la fois avec cet outil).
Tu fais aussi de la programmation ? Ou tu penses que ce n'est pas forcément utile vu qu'il existe des CMS ?

Pour préciser un peu mes questionnements, je vais ajouter:
-j'ai toujours travaillé pour des clients, mais pas en indépendant, via des CDD.
-je ne veux pas me mettre à mon compte.
-je ne sais pas trop comment se positionnent les limites de ce qu'on peut attendre de moi (et de ce que je peux supposer faire, si ce n'est que je sais ne pas être un artiste graphique sachant dessiner comme un infographiste)
Ce qu'il me manque c'est justement un travail en équipe avec des rôles bien définis peut-être (ça existe en vrai).
Je me dirais entre le Webmestre et le Développeur web.

Ce que j'ai pu lire dans le bouquin de Stéphane Bordage ou d'autre, ça me semble pas possible à maîtriser pour un seul homme, même si je peux comprendre globalement.
Cela me paraissait un peu beaucoup pour des projets plus simples de sites où toute une formalisation précise préalable ne parait pas envisagable.
Souvent le client veut un résultat visible rapidement, le CSS, l'accessibilté, Photoshop, l'ergonomie, tout ça il s'en fout.
Sauf s'il s'agit d'un pro du domaine (consultant, autre agence) qui ne sait pas ou ne veut pas s'embarasser de la technique.

Aussi je ne sais pas dans quel sens aller pour "être le plus dans la réalité du métier actuellement".
Je veux dire qu'en dehors de besoins demandés en telles ou telles techniques (web 2.0, ou autres nouveautés comme les CMS), comment savoir sans essayer de le faire ?

Vous formez-vous pour évoluer ? Via quelles formations ? (je ne suis pas de Paris, ça ne facilite pas les choses)

Merci

osscour a écrit :
Tu fais aussi de la programmation ? Ou tu penses que ce n'est pas forcément utile vu qu'il existe des CMS ?

Je suis avant tout intégrateur web, je fais surtout du HTML et CSS.
Pour développements spécifiques ou CMS: les deux ont leurs avantages et inconvénients. Développement spécifique: permet de mieux coller aux besoins. Inconvénients: cout élevé, et éventuellement site mal développé si le développeur n'est pas bon, ne maitrise pas les bonnes pratiques (ou si on le paye pas assez bien pour qu'il les applique ). Avec une bonne équipe et un projet qui le nécessite, pour peu qu'on ait le budget, c'est tout à fait pertinent.
CMS: couts faibles, mise en place rapide, nombreuses fonctionnalités. Inconvénients: pas du sur-mesure, éventuellement problèmes de stabilité ou sécurité si le CMS n'est pas bien développé ou pas bien maintenu.

osscour a écrit :
Ce que j'ai pu lire dans le bouquin de Stéphane Bordage ou d'autre, ça me semble pas possible à maîtriser pour un seul homme, même si je peux comprendre globalement.

Ça dépend de la taille du projet. Avec une cible TPE/PME, ça peut être jouable. Mais il faut éventuellement sous-traiter certaines tâches (design par exemple), être capable de gérer un projet, une relation commerciale, etc.

osscour a écrit :
-j'ai toujours travaillé pour des clients, mais pas en indépendant, via des CDD.
-je ne veux pas me mettre à mon compte.

Tu peux donc rajouter à la palette des possibiltés de statuts le portage salarial; c'est comme un CDD sauf que l'employeur n'est pas directement l'entreprise ... Pour toi ça change rien, certaines entreprises préfèrent.

osscour a écrit :
Vous formez-vous pour évoluer ? Via quelles formations ? (je ne suis pas de Paris, ça ne facilite pas les choses)

Pour se former aux métiers du web, il y a un truc formidable qui s'appelle le web
Ça ne remplace pas une formation initiale de qualité mais comme celles-ci sont rares ...
Et puis il y a aussi <pub>Eyrolles.com (les livres de R. Goetter/Alsa, M. Nebra/SDZ et pour les développeurs PHP5 avancé d'E. Daspet et C. de Geyer, etc)</pub>
Et Paris-Web pour LA conférence (existe maintenant pour les profils décideurs)
<teasing>Et bientôt ... ah zut c'est encore secret me souffle Florent V. </teasing>

EDIT tardif: j'ai une mémoire de poisson rouge pendant les vacances. Le teasing n'est plus http://forum.alsacreations.com/topic-9-37845-1.html
Modifié par Felipe (28 Oct 2008 - 11:14)