Un bon début, un bon brouillon ?

Bonjour à tous (toutes) !

J'aimerais savoir ce que vous me recommandez pour faire une première ébauche du site internet. En effet, certains me conseillent de préparer un "brouillon" sur photoshop (ou sur un autre support logiciel graphique) et de reprendre chacune des caractéristiques graphiques pour le coder.

Et vous, comment faites vous ?
La gomme et le crayon ? Dans le cadre d'un site qui n'aura pas de vocation graphique immédiate, comment feriez vous ?

Merci de me dire également si on a déjà (sûrement) posté sur le sujet, je n'ai pas trouvé quant à moi de titre suffisamment explicite pour m'en assurer...

A bientôt !

Bonjour a toi,

Moi personnelement j'imagine le design du site, ensuite j'écris le contenu par bloque comme je percois le design du site, puis dernièrement j'écris la feuille de style pour créer le design.

Chacun ca technique, c'est à toi de faire de la facon dont tu préfères !!
Modifié par red210 (23 Aug 2005 - 23:32)

hello,
je serai toi, je construirai mon site a la mode CSS2 - Pratique du design Web ce qui te permettrai de preparer ton site a ton ou tes futurs design...!

Comme le dit Red210, chacun sa méthode, mais pour ma part Raphael a pas mal débroussailler ce qui me servait de cerveau avec ses explications!

Bonjour,

est-ce que ton site sera très graphique ou relativement simple? Y a-t'il des exigences et contraintes sur lesquelles tu ne peux pas faire l'impasse?
Y a-t'il un site existant qui corresponde plus ou moins à ce que tu imagines (pour t'en inspirer, pas copier )?

Bonjour,

Je part généralement du contenu du site, c'est souvent lui qui va me donner beaucoup d'éléments pour le site et la manière pratique de le concevoir comme le thème général, le volume d'informations à restituer, la nature éditoriale ou non du site, le type de client ou de personne à qui est destiné le site, les contraintes du cahier des charges etc.

Tous ces éléments (entres autres) me dirigent plus ou moins vers des partis pris graphiques. J'essaye de restituer le mieux possible le thème du site, ensuite la façon dont tu prépare les éléments graphiques que ce soit stylo en main ou aux commande de ton logiciel préféré n'a pas grande importance, il faut faire comme tu le sens.

J'ai voté papier + crayon.
Cela pour l'ébauche graphique.

Ensuite, je crée un document (X)HTML blanc, uniquement sémantique.

Et ensuite, je fais mes CSS en visualisant les gribouillis sur mon papier

Papier et crayon...

Un vieux reste de ma lointaine formation d'informaticien (si loin que le PC n'existait pas encore en France à l'époque... Pas le parti communiste, le PC d'IBM )

En fait, j'écris d'abord la structure du site, ce qui deviendra le plan, puis je dessine une page d'acueil qui reprend les "gros titres".

Elle est de plus en plus graphique depuis quelques temps mais ça ne me sert à rien comme de toute façon je n'ai pas le temps de lancer mes nouveaux sites ...

Ensuite, j'en c**e pour essayer de faire quelque chose sur le net qui ressemble à ce qu'il y a sur le papier, mais c'est loins d'être gagné !

Et suite au premiers commentaires du concours, ben il va falloir que je commence à penser différemment ce que je dessine sur le papier

Merci pour vos réponses.

N'hésitez pas à continuer à me répondre, je ne trouve pas ce qui me correspondra le mieux...

Une question bête au passage, comment consulter les résultats de son propre sondage ??? J'ai pourtant lu les FAQ, et tenté de consulter les messages comportant un sondage, mais j'ai dû faire une erreur en le lançant, une option n'a pas été cochée sans doute...

Merci d'avance à celui qui aura la gentillesse de m'éclairer...

Pour ceux qui étaient tout aussi ignorants que moi, voici la réponse que m'a faite Raphaël (merci) :

Pour voir les résultats d'un sondage, il faut soi-même voter (vote blanc si vous ne voulez pas l'influencer)

Ainsi, on ne mourra pas idiots !
Modifié par ptipilou (25 Aug 2005 - 16:14)

Je commence par faire grands blocks de la page et le design. Puis je découpe le design pour coller à mes blocks. Je fais le css en 2 parties :
1: Design "général" (je place les images découpées dans le css)
2: Design "sémantique" (Je remplis avec le plus de balises différentes possibles puis je fais le css correspondant)

Il faut trouver le juste milieu entre "comme un codeur"(qui fait le code entier avec les fioritures avant la charte graphique) et "comme un graphiste"(Qui fait le design et code en fonction)...

Je commence par préparer (sur papier, avec force coups de crayons et de gomme!) la structure générale du site: arborescence, recensement des pages-types, liens entre elles. Ca me fait plein de diagrammes

Puis, toujours sur papier, compte tenu des relations repérées entre chaque page-type, pour chacune d'entre elles je définis la structure de son code (sémantique), sans prendre en compte encore une quelconque mise en page.

J'écris ensuite sur la machine ces pages types (avec quelques lorem ipsum) pour vérifier la cohérence de l'ensemble, sans style.

Je reprends ensuite une zolie feuille de papier et trace à grands coups (je rappelle que je ne suis pas graphiste pour deux sous ) l'allure générale des pages, sans couleur mais uniquement avec le positionnement, pour ensuite individualiser cette allure générale pour chaque page-type.
Au besoin, si je me rends compte que j'ai oublié quelque chose, je reviens à la phase de définition de la structure.

Je repasse ensuite sur machine pour CSS-iser ce positionnement.

Enfin, je choisis et applique les couleurs... et c'est là qu'en général j'ai le plus de soucis

Maxwell a écrit :
hello,
je serai toi, je construirai mon site a la mode CSS2 - Pratique du design Web ce qui te permettrai de preparer ton site a ton ou tes futurs design...!

Comme le dit Red210, chacun sa méthode, mais pour ma part Raphael a pas mal débroussailler ce qui me servait de cerveau avec ses explications!

J'ai reçu il y a quelques temps mon exemplaire de la bible de Raphaël "CSS 2 - Pratique du Design Web" ; j'ai commencé à me repérer dans cet ouvrage, tu dois forcément faire référence à la "Méthodologie Générale" (chapitre 15), c'est bien cela ?

Gilles a écrit :

...
Enfin, je choisis et applique les couleurs... et c'est là qu'en général j'ai le plus de soucis

Pareil... Je suis essentiellement analyste, un peu programmeur et pas du tout graphiste, et quelle galère de mettre des formes et des couleurs sur des éléments parfois abstraits !
Je ne parle même pas des images...

Moi je fait tout directement dans mon colorateur syntaxique.

Je commence par faire deux trois div genre haut / milieu / bas,
je commence deja a voir le site dans ma tête a ce moment la.

Puis je commence a donner quelques propriété CSS aux div,
j'en rajoute, je m'arrete et je regarde ce qui est deja fait.

Je reflechie, j'imagine et je retourne coder ^^

Donc moi ma reponse c'est que je fait l'xhtml et le css en meme temps.
Mon xhtml est prevu pour mon css, et vice versa.

bonsoir

Je fais un div global
Ensuite j'inclus cinq <div> dedans un pour le haut, 3 pour le milieu et un pour le bas
j'applique {border:1px solid #000000;} à chaque <div> ensuite une couleur de bordure différente pour chaque <div>,afin de mieux visualiser mon travail.

je nomme le premier div, global, le deuxième haut, le troisième gauche, le quatrième centre, le cinquième droit et le sixième bas.

j'applique ensuite un float left aux trois div du milieu et pour bloquer le tout
un clear both au div du bas

Pour le css
body{margin:0;padding:0;}
#global{border:1px solid #000000;width:100%;}
#haut{border:1px solid #FF0000;width:100%;}
#gauche{border:1px solid #0FF000;float:left;width:33%;}
#centre{border:1px solid #00FF00;float:left;width:32%;}
#droit{border:1px solid #000FF0;float:left;width:33%;}
#bas{border:1px solid #0000FF;clear:both;width:100%;}

pour la mise en forme
<div id="global">
<div id="haut">Haut</div>
<div id="gauche">Gauche</div>
<div id="centre">Centre</div>
<div id="droit">Droit</div>
<div id="bas">Bas</div>
</div>
Je visualise le résultat et commence a penser à ce que je souhaite vraiment, et là je commence a sculpter.
Quel fond, les couleurs , le positionnement des <div> j'essaye de faire abstraction de la méthode qui consistait à découper des grosses images sous photoshop, je pense aux astuces qui font le charme du css, bien entendu il ne faut pas faire abstraction des images , au contraire,
on peut multiplier des petits bouts qui feront les bordures ,des fond pour des survol de menu etc etc.

pour le positionnement des <div> on fait comme on veut, celle ci est une de mes nombreuses méthodes c'est celle qui me parait la plus judicieuse pour entrer dans le vif du sujet, après c'est une longue histoire, les tutos d'alsa, les liens et les conseils du forum parfois rudes mais justes...

@+

Bonjour,

L'item papier/crayon me correspond le mieux.
Je ne pars jamais sans un schéma d'arborescence que je fais au propre (sous powerpoint ou assimilé), histoire de ne pas me perdre !
(S'il s'agit d'un projet pro, je fais d'abord une étude et un cahier des charges)
De là je décide de l'ergonomie (position des menus, etc.)
Depuis ma découverte des standards, j'écris d'abord une page "maquette" sans div, uniquement avec les balises sémantiques.
Je fais une feuille de style simple pour placer mes éléments, de là je fais évoluer le code.
En parallèle, je cherche des idées graphiques, je travaille sur des photos, des illustrations, le logo, etc.
Puis, par vieille habitude, je fais une maquette graphique ... que je finis par abondonner pour améliorer le design du site à la volée ...
Bon là, je ne suis pas encore au point ! Dans la mesure où je préfère ce qui est extensible, il est difficile (ou peu pratique) de réaliser une maquette graphique statique pour un site extensible : il faut extrapoler ...
Pour rechercher l'harmonie des couleurs, j'utilise désormais la toolsbar FF pour modifier la feuille de style : méthode plus rapide et plus efficace que la maquette graphique, finalement.


Modifié par Vero (31 Aug 2005 - 13:12)

J'ai mis autre :
ce serait plutôt "papier / crayon", mais pas dans l'optique où tu sembles la donner, pas du tout pour du visuel.
J'établis mon cahier des charges : contenus, usagers, "fournisseurs de contenus" + demandes spécifiques des uns et des autres, obligations légales, éléments de chartes imposés...
De là, je peux établir l'architecture de mon site, les outils nécessaires à fournir aux uns ou aux autres et les obligations à respecter : j'aurai ainsi mes rubriques ou dossiers, et donc les menus et liens à établir. Par conséquent, le contenu de ma page d'accueil (avec éventuellement moteur de recherche ou non, accès privés ou non, les différents outils, donc).
Ensuite, quand ils existent, je recherche les éléments identitaires visuels de l'organisme pour lequel je fais le site. Pour un site perso, un blog, on peut aussi trouvé de l'identitaire. On peut aussi créer des visuels. Mais là, je suis nettement moins bon. L'aide d'un professionnel du visuel est d'un grand secours.
Je pense de plus en plus que le travail en "association" (une personne attachée au visuel, l'autre à l'efficacité - dans un sens générique - du site) est une nécessité : chacun ses recherches, ses contraintes, ses compétences, et on élabore en commun. Je n'ai hélas pas encore pu trop travailler de cette façon. Donc j'essaye de dissocier dans le temps ces deux éléments : je m'occupe ou de l'un, ou de l'autre, avec les aides que l'on peut trouver à droite et à gauche. Mais là, on est dans l'avancement du projet, et non plus dans le brouillon.
L'agencement de toute cette cuisine se fait, au final, avec un peu de feeling, ce qui finit par donner une touche perso... Et quand on devient pro, cette "patte" ou ce "touché" se retrouve de site en site, sans que l'un ressemble à l'autre pour autant. (Mais là, j'en suis loin...).

Bonjour à vous tous, et merci pour vos réponses !

Si mon premier projet a pris corps, vous conviendrez avec moi qu'il est très basique, même si çà et là j'ai été aidé par de bonnes âmes pour peaufiner et mettre enfin en ligne un site "qui tienne un peu la route" (pour son contenu).

Il est en effet difficile dans un premier temps de trouver le style que l'on souhaite mettre en page pour que le contenu puisse être lu, voire plus.

Je suis allé visiter vos pages après avoir lu vos contributions, et je me rends compte que si chacun peut avoir sa propre technique, on a toujours du mal à trouver la "patte" du site, qui évidemment peut évoluer avec le temps (compétences, temps, et j'en passe).

Mais il apparaît que si le style n'est pas ce que l'on souhaite mettre en avant, c'est quand même le vecteur (je prends par exemple le site de Véro, la fluidité de ses pages amène à lire le contenu). La découpe d'image semble être difficile à mettre en page pour un site extensible (en tout cas pour un néophyte comme moi).

Le papier et le crayon, puisque c'est la méthode la plus utilisée ne semble pas être celle qui doit exprimer le "design" fini, mais plutôt (arrêtez moi si je me trompe) les idées générales prêtes quasiment à être codées (xhtml ou html voire php), et le css ensuite (comme l'exemple du Ténia).

Voilà peut-être un tuto qui pourrait voir le jour, comment "mettre au brouillon" un projet qui sera un jour en ligne ! Si vous connaissez d'autres sites (outre alsacréations et vos créations à vous !) de ce type, je suis certain que d'autres béotiens dans mon genre iraient les visiter, alors, merci de nous indiquer les adresses ici !

En attendant, je retourne à mon papier et à mon crayon, cela semble être ce qui correspond le mieux pour l'instant !

A bientôt !
NB : bravo pour vos sites à tous !