Webdesign pour mon site - Prise 3

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 mon site - Prise 3

Message par Ishimaru Chiaki » sam. juin 20, 2009 8:09 am

Bonjour.

Je retente - pour une énième fois, Je suis profondément amusé - de sortir une idée de webdesign, en y appliquant les différents styles que j'ai expérimentés jusqu'à maintenant, et en essayant d'être autant créative que possible. Je me suis donc inspirée en partie de mon portfolio pour l'ensemble, et un peu de mon design Smilemotion Blue (surtout pour les effets sur les côtés). J'ai aussi mis les liens en rouge foncé, question de donner un petit accent à l'ensemble. Et pour souligner le "japonisme" du nom du site, j'ai ajouté un symbole signifiant "art" sur le ventre du Tux.

Voici le lien d'un premier jet : http://ishimaru-portfolio.servhome.org/ ... ign-v1.png

(là cette fois, j'ai pas oublié pour l'hébergement).
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
Papa Ninja
Fou du clic droit
Messages : 78
Inscription : mer. mars 25, 2009 10:42 am
Localisation : Pas de Calais

Message par Papa Ninja » sam. juin 20, 2009 8:41 am

salut,
j'aime bien, c'est efficace. Les liens en rouges c'est très bien aussi.
Bon boulot je trouve.
Tout est relatif ...

[url=http://www.hostingpics.net/viewer.php?id=847102sing_gimp_attitude.png][img]http://img5.hostingpics.net/pics/847102sing_gimp_attitude.png[/img][/url]

Avatar de l’utilisateur
cuak
Maître pisteur
Messages : 1338
Inscription : ven. nov. 03, 2006 8:21 pm
Contact :

Message par cuak » sam. juin 20, 2009 10:07 am

J'adore le contraste que tu y met. Les couleurs sont bien équilibrés, et le contenu aussi. Très bon boulot ;)
[url=http://gatuto.free.fr][img]http://cuak.free.fr/logo/01.png[/img][/url]

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

Message par Flamme » sam. juin 20, 2009 10:22 am

Pareil, c'est vraiment très bien (n'en doute pas) ! :l0l: Mais je suis une pinailleuse :cry:.

Donc quelques micro remarques, plus d'avis perso que remettant en cause la qualité du travail :

Le fait que les lignes encadrant ton accueil et ta new ne soient pas strictement alignées déstabilise très légèrement l'oeil. Il faut soit accentuer ce fait, soit aligner strictement, à mon avis. Pour ma part, je trouve que ce serait pas mal de diminuer de part et d'autre la largeur de la new, si possible en équilibrant la marge de la boite qui est inégale pour l'instant, et aussi les marges internes (texte un peu trop collé aux lignes...)

Pour les menus : ajoute un peu de "padding" entre les liste de sous-menus et les titres, un peu trop collés actuellement.

Sinon, à titre perso, je suis assez sceptique sur les harmonies rouge/vert (et pas seulement à cause des daltoniens :l0l:) : je trouve que le rouge gagnerait à être tiré vers une nuance plus orangée.

Également à titre perso, je suis assez fan de la justification quand les ligne ont suffisamment de longueur, et pas seulement parce que c'est plus soigné : je sais que ça se discute, mais notre oeil est habitué par la typo livresque à parcourir des lignes justifiées, et de plus, il semblerait que cela fatigue moins l'œil de le pas avoir à parcourir une longueur différente à chaque ligne.
Dernière modification par Flamme le dim. juin 21, 2009 9:24 pm, modifié 1 fois.
[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 :

Message par Ishimaru Chiaki » dim. juin 21, 2009 12:28 am

Flamme a écrit :Le fait que les lignes encadrant ton accueil et ta new ne soient pas strictement alignées déstabilise très légèrement l'oeil. Il faut soit accentuer ce fait, soit aligner strictement, à mon avis.Pour ma part, je trouve que ce serait pas mal de diminuer de part et d'autre la largeur de la new, si possible en équilibrant la marge de la boite qui est inégale pour l'instant
Corrigé
et aussi les marges internes (texte un peu trop collé aux lignes...)
Euh... Personne n'a vu qu'il s'agit d'une MAQUETTE NON CODÉE ?
Pour les menus : ajoute un peu de "padding" entre les liste de sous-menus et les titres, un peu trop collés actuellement.
Comme je le rappelle, c'est une maquette non codée, donc j'y prêtais peu attention en me disant que de toutes façons, j'ajusterais ça au moment du codage. Mais je viens quand même de le corriger.
Sinon, à titre perso, je suis assez sceptique sur les harmonies rouge/vert (et pas seulement à cause des daltoniens :l0l:) : je trouve que le rouge gagnerait à être tiré vers une nuance plus orangée.
On me parle assez des couleurs complémentaires, donc...
Également à titre perso, je suis assez fan de la justification quand les lignes ont suffisamment de longueur, et pas seulement parce que c'est plus soigné : je sais que ça se discute, mais notre oeil est habitué par la typo livresque à parcourir des lignes justifiées, et de plus, il semblerait que cela fatigue moins l'œil de le pas avoir à parcourir une longueur différente à chaque ligne.
Que quelqu'un me donne un truc pour arriver à faire ces *biiip* de *biiip* de justifications de texte sous Gimp, car je n'y suis encore jamais arrivée, avec ou sans retour chariot !
(note : je suis toujours sur la 2.4)

EDIT : je me suis rendue compte de mon emportement, parce que ça me gonfle d'avoir tout le temps à le spécifier que c'est une maquette non codée alors que ça semblait pourtant évident à mes yeux >.< Quand je présente un webdesign en WIP, je la présente non-codé, en une grosse plaque PNG, car je veux attendre d'avoir fini la partie graphique avant d'attaquer le XHTML/CSS.

BTW, voici une mise à jour de la maquette non codée : http://ishimaru-portfolio.servhome.org/ ... ign-v2.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
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » dim. juin 21, 2009 9:22 pm

Ouhla, du calme ! :shock:

Pour ma part, quand je fais un design, je passe très vite au codage et je fais une saisie d'écran pour le montrer pour ne pas avoir à héberger immédiatement la page. Sinon, il m'est arrivé le contraire : on a pris l'une de ces saisies pour un "mockup"! :l0l: Je n'ai pas pour autant écorché vif le pauvre Bellette !

Il faut bien voir que nous ne vivons pas accrochés au forum et que nous ne pouvons rester à l'écoute des petites habitudes des uns et des autres, ou tout simplement les capter. Je ne me souviens d'ailleurs pas que ça ait été particulièrement martelé ici - ni annoncé clairement dans un sujet récent... Donc restons sur un mode courtois, on peut rappeler sans agresser, merci ! :)

Pour ce qui est des marges, je pense cependant qu'il n'est pas superflu de régler ce détail de base, qu'il s'agisse d'une maquette graphique ou pas. En effet, ça compte pour beaucoup dans l'effet général... Et contrairement à la justification, entièrement "simulable". ;)

Les couleurs complémentaires... Je n'en suis pas pour ma part des plus fana. Je n'ai jamais vraiment cru à l'intangibilité de ces règles en matière de goût... Je préfère donc de loin ta nouvelle version, d'autant que ça s'harmonise mieux avec le jaune des pattes du Tux qui paraît de fait moins décalé. Mettre ces petites pattes plus orangées pourraient d'ailleurs parfaire l'harmonie.

Sinon, pour le menu, je le trouve encore un peu trop "tassé" mais c'est aussi 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 :

Message par Ishimaru Chiaki » lun. juin 22, 2009 3:33 am

Flamme a écrit :Ouhla, du calme ! :shock:

Pour ma part, quand je fais un design, je passe très vite au codage et je fais une saisie d'écran pour le montrer pour ne pas avoir à héberger immédiatement la page. Sinon, il m'est arrivé le contraire : on a pris l'une de ces saisies pour un "mockup"! :l0l: Je n'ai pas pour autant écorché vif le pauvre Bellette !

Il faut bien voir que nous ne vivons pas accrochés au forum et que nous ne pouvons rester à l'écoute des petites habitudes des uns et des autres, ou tout simplement les capter. Je ne me souviens d'ailleurs pas que ça ait été particulièrement martelé ici - ni annoncé clairement dans un sujet récent... Donc restons sur un mode courtois, on peut rappeler sans agresser, merci ! :)
Le pire, c'est que j'ai déjà édité pour essayer d'adoucir le ton, mais je pense que c'est mon stress venant d'un souci externe qui sort... les chicanes de clocher sur les communautés phpBB francophones sont en train de me rendre folle >.<

Moi, je préfère attendre avant de passer au codage, pour ne pas avoir à redécouper à chaque fois que je modifie le design.
Pour ce qui est des marges, je pense cependant qu'il n'est pas superflu de régler ce détail de base, qu'il s'agisse d'une maquette graphique ou pas. En effet, ça compte pour beaucoup dans l'effet général... Et contrairement à la justification, entièrement "simulable". ;)
Euh... la dernière phrase finit bizarre, donc je suis pas certaine d'avoir complètement compris le paragraphe.
Les couleurs complémentaires... Je n'en suis pas pour ma part des plus fana. Je n'ai jamais vraiment cru à l'intangibilité de ces règles en matière de goût... Je préfère donc de loin ta nouvelle version, d'autant que ça s'harmonise mieux avec le jaune des pattes du Tux qui paraît de fait moins décalé. Mettre ces petites pattes plus orangées pourraient d'ailleurs parfaire l'harmonie.
Moi-même j'ai un peu de misère, mais comment j'peux-tu arriver à bien choixir les bonnes couleurs dans un design bichrome ?
Sinon, pour le menu, je le trouve encore un peu trop "tassé" mais c'est aussi une question de goût...
Je viens de les espacer encore un peu. Mais il y a aussi le fait que je n'ai mis que les textes des liens des pages et donc, je n'ai pas mis les autres modules (derniers sujets, sondage, etc.)

Nouvelle version avec les modifications : http://ishimaru-portfolio.servhome.org/ ... ign-v3.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
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 :

Message par Ishimaru Chiaki » mar. juin 23, 2009 3:00 am

Quelques petites nouvelles :

J'ai présenté la maquette sur mon forum et mon modérateur rôliste a littéralement tripé ! :D Ça confirme donc que cette fois-ci, c'est la bonne !

J'ai d'ores et déjà commencé à le coder et ça avance bien. Une fois le site fait, j'attaque le forum et après, je viendrai poster une capture du résultat final.
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 !

m@noo
Fou du clic droit
Messages : 61
Inscription : mer. déc. 31, 2008 7:10 pm
Localisation : Treize-Septiers(85), Nantes
Contact :

Message par m@noo » mar. juin 23, 2009 8:01 am

ok je comprend mieux ton tatonnement (travail en équipe que je n'avais pas bien capté)
Pour moi il n'y a pas d'évolution importante et j'avais un faible pour la version que tu qualifiais de "girly" :l0l:

Bonne continuation pour le codage ;)
http://manooweb.fr/themes/default/images/logo-manooweb.png
Mes blogs
http://manoo.fr
http://manoo.fr/dev/
http://manoo.fr/cerf-volant/

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 :

Message par Ishimaru Chiaki » mar. juil. 21, 2009 10:24 pm

C'est maintenant en ligne !

Site : http://ishimaru-design.servhome.org
forum : http://ishimaru-design.servhome.org/forum/forum.html

Testé sous FF et IE7 seulement.
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 !

m@noo
Fou du clic droit
Messages : 61
Inscription : mer. déc. 31, 2008 7:10 pm
Localisation : Treize-Septiers(85), Nantes
Contact :

Message par m@noo » mar. août 11, 2009 1:52 pm

cela passe pas mal avec IE6 :)
juste un chti bug avec le bandeau du forum mais le reste de site me semble OK.
http://manooweb.fr/themes/default/images/logo-manooweb.png
Mes blogs
http://manoo.fr
http://manoo.fr/dev/
http://manoo.fr/cerf-volant/

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 :

Message par Ishimaru Chiaki » mer. août 12, 2009 4:11 am

m@noo a écrit :cela passe pas mal avec IE6 :)
juste un chti bug avec le bandeau du forum mais le reste de site me semble OK.
Mettons que je n'avais pas vraiment pu tester sous IE6, puisque ma Ubuntu (qui avait IE6 installé avec Wine) avait crashé avant que j'aie pu terminer le CSS, et comme Multiple IEs ne fonctionne plus sur mon XP, j'ai dû me contenter de la compatibilité IE7 seulement, au moment de la mise en ligne.
Et jusqu'à maintenant, je n'ai pas encore pris le temps de réinstaller Playonlinux, IE6 et IE7 sur ma nouvelle installation Ubuntu.
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
Chris
Maître pisteur
Messages : 1981
Inscription : mar. avr. 26, 2005 12:47 am
Contact :

Message par Chris » mer. août 12, 2009 8:26 am

Ok sous Safari 4.0.3 et sous Firefox 3.5.2
Gimp 2.8.14 sur iMac 27 core i5 et MacBook Air, sous MacOs 10.10.5

Le plaisir est d'en donner
http://www.crisfere.photos

Répondre