[Résolu] Besoins de conseils pour l'intégration d'un design

Bonjour à tous,

Je me suis mis en tête de me créer un site portfolio pour y présenter mes créations et mon CV.

J'ai réalisé un design à l'aide de Photoshop que voici (en trois coloris différents pour laisser le choix aux visiteurs) :
http://img51.imageshack.us/slideshow/webplayer.php?id=designpreview.jpg

La partie graphique étant pratiquement terminée, je commence à chercher un moyen de coder ça au mieux.

J'aurai aimé avoir vos avis sur plusieurs points :
- Plutôt un header centré à largeur fixe ou étendu sur toute la largeur du navigateur ?
- Idem pour le footer ?
- Le menu doit-il être dissocié du header ?
- Le contenu doit-il est séparé en deux colonnes ? (sachant que la petite partie de droites contiendra des informations qui seront les mêmes sur chacune des pages)
- Et enfin, quel gabarit selon vous serait le plus simple à adapter pour ce design ?

Si je n'ai pas été assez clair sur certains points, n'hésitez pas à me le faire savoir. Par ailleurs, je ne suis pas contre d'éventuels critiques ou conseils sur le design en lui même

Cordialement,
Ryuja
Modifié par Ryuja (14 Dec 2009 - 23:37)

Bonjour,

La réponse à ta question est assez subjetive et va dépendre de la sensibilité et des préférences de chacun. Voilà mon avis :

- Le fond du Header et du Footer (les zones de couleur et de dégradés) allongés sur toute la largeur de la page et leur contenu centré (avec une largeur fixe correspondant à la taille de la div centrale).
- Une div centrale (zone grise) divisée en deux div flottantes (une pour le contenu et une pour le menu).

Voilà voilà, pour le design global moi j'aime bien en tant qu'utilisateur. Je laisserai le soin à de vrais graphistes de le critiquer, ce n'est pas ma spécialité.

Si je ne suis pas clair n'hésites pas

Bonne journée,

Smiff.

Salut,

Vu la hauteur qu'ont l'air de prendre ton header et ton footer sur ta maquette, j'ai peur qu'ils phagocytent un peu trop le contenu par leur présence.

Sur des pages très longues ça ne sera peut être pas gênant car on ne verra jamais les deux en même temps, mais sur des pages courtes il y a bien plus de chances de voir les deux.

Sur un écran en grande résolution, la largeur sera toujours plus importante que la hauteur, et à fortiori maintenant que les écrans CRT en 4x3 laissent de plus en plus la place à des écrans TFT/LCD plutôt en 14x10, 16x10 ou 16x9, donc beaucoup plus larges. Un bandeau répété sur toute la largeur sera donc vite envahissant dans ces conditions.

Concernant le gabarit, selon ton choix je partirai soit du

Maintenant, tu ne semble pas être arrêté définitivement à ton design en l'état, donc je pense que si tu réduits la hauteur de ces header et footer tu peux te permettre de les avoir sur toute la largeur, si tu tiens à cette hauteur déja existante, peut être sera-il plus sage de ne pas les étendre au dela de la largeur du contenu.
Après, étant libre de ton choix, tu peux aussi faire une extension partielle de ces deux éléments, en leur interdisant toutefois la largeur totale de l'écran (max-width).

Enfin comme répondu par Smiff, c'est purement subjectif, et il sera difficile de tenir compte de plein d'avis différents.

Pour la navigation, je te conseille en effet de la séparer du header, si un jour tu veux revoir le design et la disposer différemment, tu n'auras pas forcément besoin de retoucher ton code html.

Concernant les deux colonnes, je pense que tu réponds toi même à la question. gabarit 07, soit du gabarit 11 en supprimant la troisième colonne.

Bonsoir,

Je ne contredirais pas les deux avis précédents. Je pense aussi que le haut de page sera plus logique à coder en le séparant en 2 blocs horizontaux : bannière-logo + onglets de navigation.

Pour ce qui est d'étendre ou non sur la largeur d'écran les haut et bas de page, c'est une affaire de goût. Tes photos hébergées chez imageshack sont verticales alors que les écrans sont généralement horizontaux et elles sont perdues au millieu d'un gigantesque fond noir… Tu pourras mieux juger de la décision à prendre en voyant ton projet dans une situation plus réaliste.

Par exemple : (je n'ai fait que la version bleue parce que je suis super flemmard)
haut et bas étendus sur la largeur
haut et bas sans prolongements
Modifié par Aureance (13 Dec 2009 - 03:22)

Bonsoir à vous,

Il est vrai que ce sont des questions assez subjectives dans l'ensemble, mais le fait de recueillir des avis extérieurs aux siens est toujours enrichissant.

Je tiens donc à vous remercier pour ces conseils que je vais prendre en compte :
- Header et Footer étendus sur toute la largeur (ou sinon, il faudra que je modifie légèrement les bords pour ne pas que ça coupe directement si je souhaite uniquement les centrer)
- Menu dissocié du header
- Contenu séparé en deux divs flottantes

Bonne soirée à vous, et merci encore !
Modifié par Ryuja (13 Dec 2009 - 20:55)

Bonsoir,

> Aureance : C'est exactement comme ça que je le voyait
> Ryuja : Sujet [Résolu] ?

Bonne soirée à vous,

Smiff.

En effet, résolue, merci encore.

Cordialement,
Ryuja