Webdesign pour une future refonte majeure

Habillage de sites web et de forums : réalisation graphique et technique.

Modérateur : Ze Techos

Répondre
Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Webdesign pour une future refonte majeure

Message par Ishimaru Chiaki » mar. nov. 30, 2010 7:21 am

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 !
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Webdesign pour une future refonte majeure

Message par Flamme » jeu. déc. 02, 2010 5:00 pm

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.
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Re: Webdesign pour une future refonte majeure

Message par Ishimaru Chiaki » jeu. déc. 02, 2010 8:14 pm

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...
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Webdesign pour une future refonte majeure

Message par Flamme » jeu. déc. 02, 2010 8:54 pm

Mieux !

Je trouve le premier plus audacieux, mais le gros pavé trop bleu-vert du bas gêne un peu du coup...
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Re: Webdesign pour une future refonte majeure

Message par Ishimaru Chiaki » ven. déc. 03, 2010 7:12 am

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.
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Webdesign pour une future refonte majeure

Message par Flamme » ven. déc. 10, 2010 10:21 am

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 ! :D

(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é... :cry:)
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Re: Webdesign pour une future refonte majeure

Message par Ishimaru Chiaki » sam. déc. 11, 2010 12:39 am

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é)
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Webdesign pour une future refonte majeure

Message par Flamme » sam. déc. 11, 2010 12:04 pm

J'aime décidément la première, mais je trouve que les en-tête des blocs font un peu pâlichon...
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Re: Webdesign pour une future refonte majeure

Message par Ishimaru Chiaki » lun. déc. 27, 2010 7:39 am

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
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
plovemax
Macgimpeur de choc
Messages : 1288
Inscription : jeu. oct. 12, 2006 9:43 pm
Localisation : quelque part pas loin du centre

Re: Webdesign pour une future refonte majeure

Message par plovemax » mar. janv. 11, 2011 7:08 pm

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.

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Webdesign pour une future refonte majeure

Message par Flamme » jeu. janv. 13, 2011 11:01 am

Je ne suis pas si loin derrière toi :P 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é... :roll: Mais même à la maison, ça ne me semble pas scandaleux... Le design semble avoir atteint un bon équilibre.
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
plovemax
Macgimpeur de choc
Messages : 1288
Inscription : jeu. oct. 12, 2006 9:43 pm
Localisation : quelque part pas loin du centre

Re: Webdesign pour une future refonte majeure

Message par plovemax » jeu. janv. 13, 2011 12:45 pm

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.

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Re: Webdesign pour une future refonte majeure

Message par Flamme » jeu. janv. 13, 2011 1:48 pm

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 :l0l:, à 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. :x 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.
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Re: Webdesign pour une future refonte majeure

Message par Ishimaru Chiaki » ven. janv. 14, 2011 10:25 pm

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.
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Re: Webdesign pour une future refonte majeure

Message par Ishimaru Chiaki » lun. févr. 07, 2011 7:04 am

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.
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Nebula
Gimpeur extraordinaire
Messages : 141
Inscription : ven. déc. 26, 2008 3:54 pm
Localisation : sur les sentiers d'etoiles
Contact :

Re: Webdesign pour une future refonte majeure

Message par Nebula » lun. févr. 21, 2011 10:57 pm

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)

Répondre