[Avis] Mon portfolio .:: Suzaku.fr ::.

Mon portfolio .:: Suzaku.fr ::. [Avis] - Web design - Graphisme

Marsh Posté le 21-03-2007 à 18:40:22    

Vu que j'ai ENFIN un site potable, et que tous le monde ne va pas dans le café pour voir mes tribulations en PHP, je vous demande votre avis.
 
http://www.suzaku.fr
 
Ha oui précision, je suis débutant en PHP et en réa de site.
 

  • Le but

Un site en PHP, beau, sobre, froid, respectant les normes XHTML 1.0 Transitional, CSS, ayant la même apparence quelque soit le navigateur, avec une interface d'administration. Et accessoirement dans un premier temps, une démo de l'utilité du PNG 24bits.
 

  • l'idée


Étant enfin "pro", mais fraîchement chômage, il me fallait un portfolio pour exposer mes compos. Contrairement à la plupart des sites que j'ai pu voir, les parties "créations" et avis de l'auteur sont souvent sous un ratios de 80/20, la belle part aux créations, off course. Mon optique était de mettre un peu plus en avant les humeurs, les idées, bref l'état d'esprit dans lequel je suis lorsque je travaille. Certes, le principe d'un commentaire sous l'image est là pour çà, mais je préférai laisser des commentaires sur l'état d'avancement, les humeurs bien que mises en avant sur le site sous formes de news se devant d'être détachées pour ne pas "entraver" le visionnage des galeries.
D'où cette tentative de "blog" en première page.
 

  • l'approche artistique

Le but de l'apparence du site est simple: sobre, et volontairement froid.
 
Pourquoi froid. Parque j'ai cherché l'antinomie de mon Pseudo à son paroxysme. Les représentations du phoenix sont toujours des flammes partout, couleur rouge/feu, etc. alors que le phoenix, dont l'état "enflammé" n'est que lors de sa transition vie/mort, est plus proche du paon, avec des couleurs bleues, etc. J'ai donc chercher à me démarqué au maximum des flammes. Et puis disons le tout net, les flammes sur un site, ca fait un peu "Has-been" et très sur-vu.
 
Il fallait une couleur dominante neutre ne gênant pas la "lecture" des images: une couleur gris tinté mauve fut parfaite. Mais cela allait ternir le site. Pour soulever les textes, blanc pour continuer dans le froid, il fallait un fond bien plus sombre sans que cela viennent gêner le principe du fond gris. Ici intervient le dégradé sombre toujours dans une teinte mauve, couplé à des fond de cadres plus sombres eux aussi. Enfin, un liseret autour de ces cadres permet de délimiter le tout, et séparer les éléments pour forcer leur lecture.
 
L'idée à la base était de mettre en transparence le site, pour que celui-ci disparaisse quand on regarde les images. Parti sur cette idée de "glace", les premiers jets comporter des fonds de cadres "brouillés" comme des vitres de salle de bain. Hélas, cela gênait plus qu'autre chose, et l'image de fond ajoutée justement pour renforcer la transparence ne servait plus à rien. J'optais donc pour une image juste plus foncée, au même teinte que les cadres.
 
Enfin, bien que les titres se trouvait dans une partie plus sombre que le texte à lire grâce au dégradé, la lecture avec une police unilatéralement en blanc empêcher la bonne lecture du site: impossible de différencier le titre du contenu, de l'important et du détails. Après de nombreux teste, j'optais donc pour des titres en bleu ciel, ressortant bien sur le dégradé sombre, une couleur grise pour les accessoires, et enfin, le texte blanc, ressortant aussi bien sur du sombre que du gris, le dégradé aidant à baisser les yeux et aider la lecture.
 

  • les logiciels utilisés:

Dreamweaver au début, vite lâché pour Notepad ++ (surtout pour le codage PHP). Topstyle Lite 3.0 pour le CSS.
 

  • Notes diverses:

Les designs dans le milieu sont soit très flexible (XHTML, CSS + PHP) et donc d'une grande sobriété, soit très beau, mais peu flexible et surtout, bien souvent en Flash. Cherchant à avoir le plus grand panel de visionnage possible, je renonça à Flash, et opta pour un design exploitant au maximum le CSS, combinée à un site entièrement en PHP, avec une interface d'administration pour l'upload de fichiers pour la galerie, les news, etc. Pour cela, l'utilisation de PNG 24bits et d'astuces CSS me semblait alléchante...
 
Hélas, Internet Explorer 6, bien qu'étant majoritaire dans le monde des navigateurs, souffre de sa vieillesse, et ne gère pas le PNG 24bits, et mal le CSS. J'ai donc utilisé un "hack" appelé IE7 pour pouvoir palier au manque du "papy browser". Le résultat, bien que golabelement satisfaisant, comporte de nombre bug dont je ne saurait expliquer leur provenance (gestion étrange du margin, certain lien ne sont plus cliquables, etc.).
 
Une fois que la galerie sera remplie, je ferais une pause pour faire de nouvelles compos. Mais une mise à jour est prévue, notamment un selecteur CSS.
 
Site normalement XHTML 1.0 Transitional compliant et CSS compliant.
Affichage identique sous IE7 et FF. Des bugs sous IE6.
 
En dehors du système de template, tout à été codé de ma main.
 
Voilà si vous avez des questions, n'hésitez pas.
Je rajouterai pitête des détails dans le descriptif.
 
Modo, si j'ai oublié un truc, merci de me le dire. :o


Message édité par The Real Phoenix le 23-03-2007 à 21:40:26

---------------
Portfolio: http://www.suzaku.fr | Blog: http://blog.suzaku.fr
Reply

Marsh Posté le 21-03-2007 à 18:40:22   

Reply

Marsh Posté le 21-03-2007 à 18:42:37    

prem's!
j'aime l'aspect blog, même si c'est une gallerie a la base. ça fait moins gallerie quoi :/
j'aime aussi l'utilisation de smileys from hfr, ça permet de rester dans l'ambiance [:huit]
et puis, les travaux... du tarpay, ça défonce! :o


Message édité par shadowdim le 21-03-2007 à 18:45:00

---------------
Mangas/DVD - Chiptune
Reply

Marsh Posté le 21-03-2007 à 18:46:41    

Très bon évidement, surtout que j'ai appris beaucoup de choses au fur et à mesure de ton avancement
j'aime beaucoup le site mais surtout le sens que tu lui donnes, une réflexion très poussée c'est très agréable et je le vois, du coup, différement
 
le selecteur css sera pour quoi ? changer le style à la demande ?  
 
 ( et en plus tu as fait un topic exemplaire :d )

Reply

Marsh Posté le 21-03-2007 à 18:49:15    

justeleblanc a écrit :

Très bon évidement, surtout que j'ai appris beaucoup de choses au fur et à mesure de ton avancement
j'aime beaucoup le site mais surtout le sens que tu lui donnes, une réflexion très poussée c'est très agréable et je le vois, du coup, différement
 
le selecteur css sera pour quoi ? changer le style à la demande ?  
 
 ( et en plus tu as fait un topic exemplaire :d )


Oui. Le même principe que CSS Zengarden.
Il y aura le "IE6 compatible", le full 3D, 2D, etc...
Mais pas pour l'instant. L'architecture du site le permet, mais ce n'est pas encore codé.


---------------
Portfolio: http://www.suzaku.fr | Blog: http://blog.suzaku.fr
Reply

Marsh Posté le 21-03-2007 à 18:57:43    

j'aurais vu des couleurs plus chaudes avec le nom "suzaku"  [:cupra]  
 
mais j'aime ce style sobre, ainsi que les "Humeur: Musique en tête: "des news  :D  
 
tu ne mets pas un truc du genre copyright, en bas de page ?


---------------
UNICORN OVERLORD | Japanese game developer translations (not mine :o)
Reply

Marsh Posté le 21-03-2007 à 19:00:09    

kyouray a écrit :

j'aurais vu des couleurs plus chaudes avec le nom "suzaku"  [:cupra]  
 
mais j'aime ce style sobre, ainsi que les "Humeur: Musique en tête: "des news  :D  
 
tu ne mets pas un truc du genre copyright, en bas de page ?


 
Oui c'est bien sur fait exprès. Je vais le rajouter.
 
Pour le copyright, si tiends, j'ai prévu un footer dans se but en plus. Complètement zappé.


---------------
Portfolio: http://www.suzaku.fr | Blog: http://blog.suzaku.fr
Reply

Marsh Posté le 21-03-2007 à 20:37:00    

ah oui tiens je me demande toujours le texte qui va bien pour ça
" tous droits réservés " c'est suffisant ? ( surtout que c'est court :d )

Reply

Marsh Posté le 21-03-2007 à 20:42:33    

Aucune idée. :D


---------------
Portfolio: http://www.suzaku.fr | Blog: http://blog.suzaku.fr
Reply

Marsh Posté le 21-03-2007 à 20:58:58    

The Real Phoenix a écrit :

Oui. Le même principe que CSS Zengarden.


ah ouais je viens de voir les changements possibles, c'est excellent


Message édité par justeleblanc le 21-03-2007 à 20:59:14
Reply

Marsh Posté le 22-03-2007 à 14:58:44    

up je pensais avoir un peu plus d'avis.


---------------
Portfolio: http://www.suzaku.fr | Blog: http://blog.suzaku.fr
Reply

Marsh Posté le 22-03-2007 à 14:58:44   

Reply

Marsh Posté le 23-03-2007 à 16:29:04    

[:alexfly]


Message édité par The Real Phoenix le 23-03-2007 à 16:29:09

---------------
Portfolio: http://www.suzaku.fr | Blog: http://blog.suzaku.fr
Reply

Marsh Posté le 23-03-2007 à 16:44:27    

Pour ma part, je trouve ça bien fait, mais un peu terne. Bon ça c'est voulu, donc pas touche je suppose même si de mon point de vue c'est pas génial.
L'autre truc qui me gène le plus, c'est qu'en première page il y a trop de texte, ça brouille vachement la lisibilité parce que ça part dans tout le sens je trouve.  
Le code me fait plaisir par contre ^^


---------------
| .:: www.wizopunk-art.com - Développement web ::. |
Reply

Marsh Posté le 23-03-2007 à 17:11:02    

Pour le coté terne de toute façon, on pourra choisir vi le selecteur CSS donc je suis en train de cogiter sur papier.
 
Que me conseillerai tu alors pour le texte?
 
Et qu'est-ce qui te plait dans mon code?


---------------
Portfolio: http://www.suzaku.fr | Blog: http://blog.suzaku.fr
Reply

Marsh Posté le 23-03-2007 à 17:28:46    

Mon avis :
- J'aime bien le fond
- j'aime bien la transparence des Blocs
- j'aime bien le choix des couleurs (sobre et propre)

 

Par contre, le texte est mal foutu, je trouve. Et ce pour plusieurs raisons : Il ne faut pas toujours justifier les paragraphes. Moi aussi je suis un grand fan du Jutify pour avoir des beaux blocs textes bien carrés mais des fois ça marche pas.
Essaie aligner à gauche ou centrer, ça peut être mieu je pense.

 

Baisser l'alpha des containers des blocs textes ok, mais pas les blocs textes en eux mêmes. Parce que le fond + dégradé des blocs ça bouffe carrément la lisibilité.

 

Idée pour la colonne de droite :
Pourquoi avoir une petite image et une petite crotte de texte coincé à côté ?
Pourquoi ne pas faire une vignette  qui prennent toute la largeur et une 50aine de pixels en hauteur ? Je sais, tu vas devoir retailler chaque vignette pour qu'elle fasse la bonne taille à moins que Php GD le fasse ? Comme ça tu fais un zoom sur une partie de ton image, tu en sors une vignettes genre 190x55. Au passage tu baisses d'1 ou 2 la taille du texte ...

 

Ce qui te donne

 

TON TITRE
http://zedlefou.free.fr/img/vigno.jpg
ton texte

 

par exemple ...

Message cité 1 fois
Message édité par Zedlefou le 23-03-2007 à 17:31:51

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks
Reply

Marsh Posté le 23-03-2007 à 17:43:29    

Zedlefou a écrit :

Mon avis :
- J'aime bien le fond
- j'aime bien la transparence des Blocs
- j'aime bien le choix des couleurs (sobre et propre)
 
Par contre, le texte est mal foutu, je trouve. Et ce pour plusieurs raisons : Il ne faut pas toujours justifier les paragraphes. Moi aussi je suis un grand fan du Jutify pour avoir des beaux blocs textes bien carrés mais des fois ça marche pas.
Essaie aligner à gauche ou centrer, ça peut être mieu je pense.
 
Baisser l'alpha des containers des blocs textes ok, mais pas les blocs textes en eux mêmes. Parce que le fond + dégradé des blocs ça bouffe carrément la lisibilité.
 
Idée pour la colonne de droite :
Pourquoi avoir une petite image et une petite crotte de texte coincé à côté ?
Pourquoi ne pas faire une vignette  qui prennent toute la largeur et une 50aine de pixels en hauteur ? Je sais, tu vas devoir retailler chaque vignette pour qu'elle fasse la bonne taille à moins que Php GD le fasse ? Comme ça tu fais un zoom sur une partie de ton image, tu en sors une vignettes genre 190x55. Au passage tu baisses d'1 ou 2 la taille du texte ...
 
Ce qui te donne  
 
TON TITRE
http://zedlefou.free.fr/img/vigno.jpg
ton texte


 
Merci pour tes remarques.
 
Pour le texte justifié, tu fait référence aux colonnes de la galerie sur la droite? Oui ca fait çà sur des petits espaces. Peu de mots sur un petit espace et çà tire énormément. Ca c'est dans le CSS je ferai des tests.
 
Par contre je ne comprends pas pour les containers des blocs de textes et les blocs de textes en eux même.
 
Pour la colonne de droite, les miniatures sont crées en auto lorsque j'up an JPG (j'ai prévu de choisir d'envoyer à la mano les miniatures pour les autres formats) mais il ne s'agit que d'un resize en PHP de l'image d'origine ou de la miniature si celle-ci dépasse 100px de large.
J'avais pensé à ce ce système mais 3 points noirs:
 

  • Celà siginifirait passer un temps monstre à préparer la miniature (le but étant d'automatiser un maximum l'envoi des fichiers) : Si techniquement le site est prévu pour (miniature à spécifier à chaque fois, la fonction d'uppload que j'ai développé est suffisamment flexible pour le faire), j'ai plus de 200 images à up, imagine le temps passé à créer de miniature!
  • La miniature sert pour la galerie. Donc cela impliquerait un galerie avec uniquement des bandeaux,
  • Impossible d'automatiser la chose, puisque même si en PHP je peux spécifier l'endroit du crop et la taille du resize, la zone ne sera pas la même entre 2 images. Ou alors il faut passer par une espèce d'appli web intégré à l'interface admin pour le recrop, là je sais pas faire...


Pour bien faire, il me faudrait: l'image (ou le lien) la miniature pour la galerie, et le bandeau pour l'accueil (qui pourrait me resservir ailleurs) etc. et là par contre j'ai pas mal de refonte pour le site (BDD, script d'upload et tout les formulaires d'ajout et d'edit des images).
 
A voir plus tard éventuellement.

Message cité 1 fois
Message édité par The Real Phoenix le 23-03-2007 à 18:05:41

---------------
Portfolio: http://www.suzaku.fr | Blog: http://blog.suzaku.fr
Reply

Marsh Posté le 23-03-2007 à 18:17:32    

Citation :

Par contre je ne comprends pas pour les containers des blocs de textes et les blocs de textes en eux même.


C'est juste pour dire que quand on voit l'image de fond derrière le texte du milieu, ça le rend difficile à lire ;)
 

The Real Phoenix a écrit :


Pour bien faire, il me faudrait: l'image (ou le lien) la miniature pour la galerie, et le bandeau pour l'accueil (qui pourrait me resservir ailleurs) etc. et là par contre j'ai pas mal de refonte pour le site (BDD, script d'upload et tout les formulaires d'ajout et d'edit des images).


 
Allez hop au boulot ! :D
Je suis conscient que c'est moins facile que ce que tu as là. Mais à mon avis ça apporterait un gros plus à la présentation.
 
Sinon, c'est faisable en flash :D


---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks
Reply

Marsh Posté le 23-03-2007 à 18:22:07    

Zedlefou a écrit :

Citation :

Par contre je ne comprends pas pour les containers des blocs de textes et les blocs de textes en eux même.


C'est juste pour dire que quand on voit l'image de fond derrière le texte du milieu, ça le rend difficile à lire ;)


 
Ok. Problème c'est que si je ternis encore le fond derrière le texte, on va mieux le voir, certes, mais on perd tout l'intérêt de la transparence.
 

Zedlefou a écrit :


Allez hop au boulot ! :D
Je suis conscient que c'est moins facile que ce que tu as là. Mais à mon avis ça apporterait un gros plus à la présentation.
 
Sinon, c'est faisable en flash :D


Encore une fois, il faudrait que je fasse les miniatures à la main.
Je vais reflechir au truc.
 
Argh. Je pipe quedale à flash (vu qu'il n'y a qu'action script qui semble pouvoir sortir des trucs vraiment intéressant) et surtout j'ai été traumatisé par Flash 5... :D

Message cité 1 fois
Message édité par The Real Phoenix le 23-03-2007 à 18:25:40

---------------
Portfolio: http://www.suzaku.fr | Blog: http://blog.suzaku.fr
Reply

Marsh Posté le 23-03-2007 à 20:58:53    

The Real Phoenix a écrit :

Ok. Problème c'est que si je ternis encore le fond derrière le texte, on va mieux le voir, certes, mais on perd tout l'intérêt de la transparence.


Et si ça n'avait pas d'interêt ?  :ange:  
Fait le juste pour le corps du texte. Pour les titres et le reste ça se vera toujours ...
 

Citation :

Argh. Je pipe quedale à flash (vu qu'il n'y a qu'action script qui semble pouvoir sortir des trucs vraiment intéressant) et surtout j'ai été traumatisé par Flash 5... :D


Ah oui, ça a bien changé depuis  :lol:  


---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed