Webdesign pour une future refonte majeure

[Ishimaru Chiaki]

Salut !

Je relance un peu la section avec du nouveau matériel.

Après avoir fait des travaux sous le capot de mon site, voilà que je pensais depuis un bout à un nouveau design pour mon site, et aussi à une nouvelle ergonomie.

Cette fois-ci, au niveau créatif, mon objectif était d'allier l'oriental et le moderne, ce qui fait que j'ai fini par m'inspirer du bambou pour les couleurs de la charte graphique. Je suis allée chercher un dessin de plant de bambou sur Openclipart pour l'intégrer dans la charte graphique, et c'est d'ailleurs le seul élément n'étant pas de moi. Pour le reste, tout a été fait par moi. Les trois icônes à droite du header ont été dessinés avec Inkscape.
Pour la largeur, j'ai opté pour une largeur fixe de 1000px, ce qui me permettra de mieux gérer l'affichage des galeries de ressources.

Je viens donc de terminer le codage d'une page de démo dont voici une capture :

ishimaru-v6-preview.png

Aperçu du webdesign

(142.41 Kio) Téléchargé 0 fois

La page d'accueil ne fera donc qu'afficher les dernières mises à jour du site, tandis que la barre horiszontale sous le header variera en termes de contenu selon si on est dans les ressources, les tutos ou sur le forum (qui tourne sur CB). J'utilise aussi des proproétés CSS3 pour les coins arrondis.

J'espère juste que le vert n'est pas trop prédominant, vu que je prévois un footer plus élaboré pour les liens secondaires et les partenaires.

Donc, à vos claviers !

[Flamme]

Très sympa. Je n'ai pas le temps d'analyser plus avant, mais juste une remarque : c'est jolie, net, propre, mais effectivement trop mono-teinte à mon goût quand même. Il suffirait juste de varier un peu les nuances dans le vert pour que cela prenne un peu plus de relief.

Après, c'est juste une question de goût.

[Ishimaru Chiaki]

J'ai eu justements des retours similaire sur le "trop vert" du design.

Avec la méthode du calque en mode couleur à 80% placé par dessus plusieurs carrés de couleur, je viens de faire quelques variations dans les teintes.

Voici donc deux variantes :

ishimaru-v6-var1.png

Première variante

(222.53 Kio) Téléchargé 0 fois

ishimaru-v6-var2.png

Deuxième variante

(222.58 Kio) Téléchargé 0 fois

EDIT : obligée de refaire l'upload du premier parce que FF a planté pendant la rédaction...

[Flamme]

Mieux !

Je trouve le premier plus audacieux, mais le gros pavé trop bleu-vert du bas gêne un peu du coup...

[Ishimaru Chiaki]

C'est la première fois que j'y vais pour un footer élaboré pour un de mes propres sites, donc je ne suis pas habituée à doser avec ce type de footer qui n'a rien à voir avec le petit footer que j'ai sur mon blog.

Sinon, j'ai tenté deux variantes du header
http://ishimaru-blog.servhome.org/diver ... 6-var3.png (header plus sombre)
http://ishimaru-blog.servhome.org/diver ... 6-var4.png (header moins saturé)

À part de ça, je n'ai pas encore tenté le coup des côtés grisés.

[Flamme]

J'avoue que j'ai une petite préférence pour le header plus sombre, et comme mon écran au travail a un rendu assez sombre, cela signifie qu'il n'est pas "trop" sombre !

Je ne sais pas pourquoi, mais je trouve qu'ici le pied de page passe mieux !

(Pardon d'avoir mis tant de temps à réagir, mais je pensais que, quand même, quelqu'un allait le faire ! Je suis toujours surprise de voir à quel point ce sous-forum est déserté... )

[Ishimaru Chiaki]

Oups, j'étais en train d'oublier les deux nouvelles variantes, avec les deux nouvelles variations du header, mais avec la première variation du footer et des blocs.

http://ishimaru-blog.servhome.org/diver ... 6-var5.png (header plus sombre)
http://ishimaru-blog.servhome.org/diver ... 6-var6.png (header moins saturé)

[Flamme]

J'aime décidément la première, mais je trouve que les en-tête des blocs font un peu pâlichon...

[Ishimaru Chiaki]

Voilà, je viens de retravailler et retoucher selon les retours que j'ai eus.

Voici la maquette :
http://ishimaru-blog.servhome.org/wp-co ... -beta1.png

[plovemax]

Salut,

j'aime bien je ne peux pas t'en dire beaucoup plus malheureusement. Par contre une remarque : ce soir avec mes yeux fatigués de quarantenaire, j'ai eu du mal à lire le texte vert dans les trois cartouches au centre plus précisément, c'est désagréable pour moi et je dois forcer pour lire. Manque de contraste je pense.

[Flamme]

Je ne suis pas si loin derrière toi mais pour ma part, pas de soucis : je lis sans problème. Peut-être un service que me rend paradoxalement ma myopie ?

Il faut dire que mon écran ici est particulièrement foncé... Mais même à la maison, ça ne me semble pas scandaleux... Le design semble avoir atteint un bon équilibre.

[plovemax]

Je pense qu'il y a la conjonction de deux éléments : mon écran de portable manque ici de contraste (par rapport à mon écran externe et celui du bureau) et mardi soir j'étais particulièrement fatigué (travail + sport + 1 heure de lecture de Kant sur un bouquin imprimé dans les années 60 dans une édition tout sauf luxe)
Je n'ai aujourd'hui pas ce problème sur mes écrans autres que le portable; et sur le portable c'est tout à fait supportable (bien que je n'ai dormi que 4h en deux fois cette nuit :p )

Petite précision : mon souci était semble-t-il un souci d'accommodation visuelle.

[Flamme]

Les soucis d'accommodation visuelles quand je lis m'arrivent depuis que je porte des lunettes, c'est en effet pénible. Je résous la chose généralement en... ôtant mes lunettes , à la grande surprise de certaines personnes de mon entourage : "Quoi, tu ne mets pas de lunettes pour lire ???". Ce qui montre qu'un défaut visuel aussi répandu que la myopie est extrêmement mal connu et largement assimilé à d'autres problèmes comme l'astigmatisme ou l'hypermétropie. Mais passons...

Je ne pense pas que le design présente des problèmes criants, mais je dois constater que sur mon écran de mauvaise qualité au boulot, les lettres sont entourée d'un léger halo. Je pense que c'est dû au fait que l'image n'est pas un rendu de la page mais une capture d'écran, le résultat final sera plus net. En outre, sur Firefox, l'image ne paraît pas d'emblée à sa taille réelle, elle est donc redimensionnée et forcément moins nette.

[Ishimaru Chiaki]

En effet, c'est une capture, puisque la page de démo est en local. Mais une fois l'image chargée, tu peux l'agrandir avec un clic. Je pensais attendre d'avoir fini quelques pages de démo avant de les mettre en ligne dans un dossier de mon répertoire /tests/ sur mon site.

[Ishimaru Chiaki]

Re-bonjour,

Je viens de finaliser les maquettes codées des pages de démo pour donner un aperçu live de la prochaine version de mon site. Un de mes collègues de phpBB France a eu la chance de voir quelques pages et ça m'a du coup permise de faire quelques correctifs dans le CSS, notamment pour le menu en haut à droite qui, sous certaines configs, n'avait pas assez de place pour s'y positionner et se trouvait donc décalé en bas.

Voici un aperçu de la page d'accueil :
http://ishimaru-design.servhome.org/tes ... index.html

En version connecté :
http://ishimaru-design.servhome.org/tes ... necte.html

Page des news :
http://ishimaru-design.servhome.org/tes ... /news.html

Accueil des ressources :
http://ishimaru-design.servhome.org/tes ... urces.html

Page spécifique à une catégorie :
http://ishimaru-design.servhome.org/tes ... hpbb3.html

Une liste des styles :
http://ishimaru-design.servhome.org/tes ... hpbb3.html

Détails d'un style :
http://ishimaru-design.servhome.org/tes ... buntu.html

Une liste de MODs et hacks
http://ishimaru-design.servhome.org/tes ... ds-cb.html

Détails d'un MOD/Hack :
http://ishimaru-design.servhome.org/tes ... index.html

Accueil des tutoriels :
http://ishimaru-design.servhome.org/tes ... riels.html

Une liste de tutoriels :
http://ishimaru-design.servhome.org/tes ... -gimp.html

Plan du site :
http://ishimaru-design.servhome.org/tes ... /plan.html

Et deux exemples de pages "fixes" :
http://ishimaru-design.servhome.org/tes ... ropos.html
http://ishimaru-design.servhome.org/tes ... vhome.html

Quant à la partie Forum, ça se fera quand je commencerai l'intégration dans CB.

Jusqu'à maintenant, les pages ont été testées sous FF 2.x (mon collègue en question) et 3.6.x ainsi que sous Chromium. Je n'ai donc pas encore testé sous IE, étant sous Linux, mais je sais que les arrondis en CSS3 ne fonctionnent pas avant IE9 et donc, j'hésite entre mettre le script Roundies ou non.

EDIT : Icone "Ressources" changée, pour une nouvelle icone qui colle plus.

[Nebula]

Question de goûts , j'aime bien parce que le vert et les bambous, ça donne un coté zen, reposant (sous-entendu : on peut aborder tes tutos avec sérénité)
Je trouve que les nuances de verts s'accordent bien, Sinon, j'aurais bien vu un très léger texturage, au moins pour le fond visible sur les cotés (je sais pas pour le web, mais en tissus, on appelle ça des faux-unis)
Après, tu pourras toutes façons pas plaire à tout le monde
(désolée pour le retard de ma réponse ... j'ai une vie en dehors de gimp)