Cascading Style Summer Refresh 2010
Sogam - Portfolio d'Orane Schick par sogam
Voir en ligne http://www.sogam.ch
Après refresh
Note obtenue : 6.200/10
Voir en ligne http://www.sogam.ch
Note obtenue : 6.200/10
Les commentaires sont clos.
Ça span pour moi !
(Plastic Bertrand)
Commentaires
Bravo sogam ! J'aime beaucoup ton site. Rien à redire sur l'efficacité et l'utilité de la refonte. Juste un petit truc sur la nouvelle version : ta police d'écriture a l'air un peu écrasée en largeur, c'est volontaire ?
Je pense que c'est la police qui est comme ça.. je pourrais peut-être lui mettre un letter-spacing plus grand... merci de la suggestion... vive le @font-face
Très très bon travail !!
Design audacieux, rapide, très bon affichage sous IE6, HTML valide... que dire d'autre ?
Dommage que la CSS ne soit pas valide par contre... Il existe des astuces pour éviter ces erreurs. Je pense que c'est la seule chose à vraiment corriger...
Bravo !
IE6 m'a bien prix la tête... merci aux hacks bien qu'il y en a peu...il y a quelques bugs mais l'essentiel ds IE6 est là... sa serait bien que ce navigateur disparaisse non?
Oui le CSS n'est pas tout à fait valide mais pas facile de ne pas utiliser la propriété opacity qui n'est pas encore valide w3c ni tout ces nouveaux outils très utiles comme le box shadow les @font-face... enfin toute les nouveauté CSS3
Aurais-tu des suggestions pour remédier à cela?
J'adore ! Ca me rappelle feu le style indus de The Designers Republic, excellent !
Merci beaucoup ... Tu parles de la canette de coca pour les designers republic?
La nouvelle version est mieux que l'ancienne! ;)
@sogam : La canette ? Je n'en ai pas vu désolé ^^
Je parlais plutôt dans le style général, le fait que ça soit dans un style brute et industriel (les mires), presque pas de texte, etc… C'est très sympa !
@billou ils avaient fait avec d'autres agences un redesign de bouteille de coca cola voilà une image http://www.twistedsun.net/files/1910019e7733e...
Tout a fait c'est un style sobre surtout... de la simplicité! plus j'avance dans le monde du web plus je trouve la simplicité une force!
L'idée c'était surtout de reprendre l'univers du print tel que les gamuts, traits de coupe, décalage d'impression pour le logo etc.
Le peu de texte, c'est volontaire, car je me suis rendue compte qu'au final on regarde plus un portfolio qu'on ne le lit.
Et la trame en fond, c'est ma grande découverte du moment... on peut la mettre à toute les sauces, ça apporte tjrs au site un petit plus.. mais l'idée c'était surtout qu'elle s'apparente à la trame d'impression.
Pareil pour les encres, encre d'impression mais aussi pour rappeler un peu l'inspiration comme un flux d'idée qui jaillit et grandit pour former un tout.
@shokojjo merci beaucoup effectivement il y a un sacré bas en avant... mais surtout une grande différence de temps entre les deux, enfin temps de réalisation.
Un de mes préférés ! En tant que PAOiste de formation, j'apprécie le clin d'œil fait à l'univers du print. Et en plus ça tourne sous IE6.
Juste une remarque sur tes pop-up : un petit contour éviterait de chercher quelquefois les boutons fermer, next et prev. Mais bon, je chipote... BRAVO
@velvet Oui sa tourne sous IE6 c'était pas une obligation mais je suis contente d'avoir réussi à ce qu'il marche plus ou moins même pas mal à quelques détails près.
Oki alors je vais tester alors avec un petite contour voir si sa rend mieux. J'ai beaucoup ce modul js enfin ce shadowbox que je trouve très propre et épuré.
Un travail magnifique, autant au niveau du design que du code, bravo.
A oui, avec une petite nuance tout de même, il y a pas mal d'effet qui sont réalisé en Javascript et qui aurait peut-être gagnés à être fait en CSS.
Super joli ! Des tons pastels qui donnent envie, un site d'utilisation simple (c'est un compliment) et claire, un graphisme visuellement très agréable. Une refonte super chouette ! Bravo !
@jep oui effectivement les effets de roll over sous fait en js mais je vois pas comment j'aurais pu les faire en css en leur donnant un effet peux-tu m'expliquer?
@oh-drey ton pastel? dans l'ensemble oui sauf que les encres sont très colorées donc pas si pastel que sa! :D .
Je voulais un site facile d'utilisation et assez instinctif sans trop de cliques pour aller le plus vite à la réponse qu'attend l'utilisateur, dans l'idée du "je ne veux pas chercher, ou je ne veux pas cliquer".
C'est personnel, mais je préfère un site clair, peut être moins "fancy", mais dans lequel on prend tout de suite ses marques plutôt qu'un site pas forcément intuitif.
@sogam : Tu as raison de souligner qu'il n'y a pas seulement des tons pastels, mais c'est ce qui ressortait le plus à mes yeux, et qui donne un air frais et agréable au site ; les encres colorées rajoutent un effet chaleureux et dynamique qui n'est pas non plus négligeable mais que je n'avais pas mentionné dans mon message précédent plus par oubli qu'autre chose.
Tu as raison lorsque tu parles de "l'idée du "je ne veux pas chercher, ou je ne veux pas cliquer"." Les graphistes, web-designers, intégrateurs et autres pros de la toile oublient parfois que tout le monde n'est pas spécialiste et qu'un site simple d'accès, plus "instinctif" comme tu le dis accroche plus les gens contrairement à des sites très complexes qui fait très vite décrocher une cible moyenne (j'entends ici, les non-spécialistes dont je reconnais faire partie).
Bonne chance pour la suite !
Pour moi la meilleure solution ça sera toujours de tester des gens qui ne sont pas né avec l'informatique... comme nos parents par exemple...sa paraît bête peut-être mais si eux avec le peu de passé informatique ils ont comprenne... c'est qu'on a pas tout faux.
N'hésitez pas de me faire par d'amélioration possible
Très bon travail dont le point fort est une charte et un habillage graphiques adapté au contenu du site : les couleurs primaires et les repères de coupe, liés au domaine de l'impression. La seule réserve concerne la lisibilité de la typographie, adaptée à l'impression papier sur fond clair, et moins sur un écran avec un fond tramé. Un challenger sérieux, assurément.
@designer1959 tu as tout à fait compris ma charte et c'est cool..
La typographique tu n'es pas le premier à me le dire. Je voulais tenter d'utiliser les @font-face, pour changer de notre tendre verdana... Mais apparemment il faudrait que je mette un plus grand letter-spacing..
Et puis je ne suis pas un challenger mais UNE challenger.
je trouve que le coté print est bien travaillé, en general ce genre de mise en page fait un peu kitch (je trouve) mais la c'est vraiment bien!!j'aime beaucoup pour ca, les couleurs et typo sont bien, c'est tres épuré et créatif, il y juste ce qu'il faut!beau travail! :)
@laurie, il est certain que le côté print, il faut le traiter avec parcimonie sinon ça peut prendre enfin accrocher beaucoup le regard.
Merci beaucoup pour tes compliments ça fait plaisir.
Sincèrement très réussi ! Style impeccable, rien à redire !
Bonne chance !
@+
Chantal
@chanclindoeil merci beaucoup ça fait toujours quand notre travail plait aux autres
Bonsoir
Ton site est très joli et on sent le travail d'une graphiste passionnée et chevronnée :)
Coté code, il me semble que tu t'es bien compliquée la vie... logo, texte du menu, texte du slider en images avec des text-indent, ok, mais images désactivées, les text-indent ne servent pas à grand chose (tu me diras, quelle idée d'aller désactiver les images sur un site de graphiste :)). pourquoi tu n'as pas mis du texte en dur et ton logo dans le html ?
Toujours images désactivées, 4 alt identiques pour le slider, je pense que c'est trop :)
Je suis d'accord avec Velvet, une bordure autour des images agrandies serait bien, j'étais parfois un peu perdue...
A ce sujet, je rebondis sur une de tes remarques, étant de la génération de tes parents (voir même plus vieille ;)), je suis désolée, mais je n'ai pas compris tout de suite les subtilités de ton site et la manière de n
...je reprends, (en plus de mon cerveau, mes doigts sont engourdis aussi ;))
...la manière de naviguer et de m'approprier l'information...
Ceci dit, ton site est très très chouette, un grand BRAVO :)
@cilou... pour ton information, je suis pas réellement graphiste, enfin c'est une partie de mon métier.. en réalité, je suis conceptrice multimédia... donc graphiste webdesigner, réalisatrice, monteuse, preneuse de son bref, tout ce qui touche au monde du multimédia de près ou de loin.
Alors les text-indent c'est une solution que j'ai trouvé, enfin une solution qu'on m'a proposée.
L'idée c'est de mettre, au lieu d'avoir une image comme tu dis en dur dans l'html, de la mettre via un background pour une meilleure lisibilité du code html. Je m'explique:
Prenons l'exemple du logo:
Sur mon site il fait parti d'un a , entouré d'un h1, dans lequel j'ai marqué « logo du portfolio sogam » (un truc du style), comme ceci:
<h1><a href...>logo du portofolio sogam</a></h1>
J'ai mis à ce h1 a un background correspondant à l'image du logo + un text-indent de 3000px pour éviter qu'on voie le texte lorsqu'on est sur le site, sans oublier une largeur et une hauteur pour que l'image apparaisse, et un display block..
h1 a{
background: url(le chemin de mon logo);
text-indent: -3000px;
height:38px;
width:118px;
display:bloc;
}
En bref l'image background reste, le texte aussi sauf qu'il est propulsé dans la stratosphère du code web (pour qu'on ne le voie pas bien-entendu) :D.
Ainsi lorsqu'une personne par exemple non-voyante (ils ne voient que l'html avec leur logiciel de lecture joze) ou et SURTOUT les robots arrivent sur mon site (ils lisent également que l'html dur), au lieu qu'il n'y est rien pour le logo (juste le alt) , il aura le texte, contenu dans le h1, même s'il est perdu dans la stratosphère du text-indent: 3000px.... (Les deux, non-voyants et robots, voyent le code avec les images désactivés + tous les styles css)
Si il n'y avait pas l'image en background + un texte indent. Le logiciel ou les robots liraient pour le h1, le alt de l'image.
Pour les bons codeur, un alt est une description de l'image. Donc cela n'a pas le même impact/valeur, quand il lira par exemple: image représentant le lien pour aller vers le graphisme, dans le cas où mon logo est une simple image.
Dans mon idée il lira simplement ce qui a marqué dans le a: Sogam, Portfolio..
Pareil pour le menu...
Si tu mets des images en dur sans mettre de texte dedans (avec un alt), dans le code html il lira le alt, soit une phrase pour décrire l'image, dans mon idée il lira simplement graphisme, web etc.
Trouves-tu pas que c'est une bonne suggestion?
Oki pour la bordure je rajouterais ça merci pour l'idée.
Pour la navigation, j'ai essayé de reprendre ce qui se fait le plus souvent dans les sites, où il y a du contenu image à montrer, à savoir une lightbox. Maintenant on devient relativement habitué à appuyer une image presque instinctivement pour voir si on peut aller plus loin dans la navigation.
Je pense pas qu'il y est de l'information à s'approprier, jusque à regarder.
J'aimerais savoir ce que tu entends pas subtilités? Explique-moi pour que j'améliore.
Merci pour ton commentaire... J'espère ne pas avoir été trop longue, mais je pense que ça vallait la peine d'expliquer mon idée.
Peut-être que ça va faire débat, car il est certain que moi j'ai toujours fait avec une image dans le h1 d'autres avis sur cette idée?
Bonjour
Je suis d'accord avec toi sur le tex-indent et il m'arrive de l'utiliser aussi :) mais :
- Ici, sur alsacréations (ailleurs aussi), on peut souvent (tout le temps???) lire que lorsqu'une image est porteuse de contenu, il faut la mettre en dur dans le code avec sont alt bien renseigné. Pourquoi ? ok, pour le text-indent des lecteurs vocaux, mais, l'internaute, qui, pour une raison ou une autre (infinitésimal, je te l'accorde) surfe sans images, il fait comment pour savoir où il est et naviguer sur ton site...
- Pour les robots, là, je suis moins d'accord avec toi. J'ai souvent lu que les robots ne donnaient pas plus de "poids" à un texte en h1 qu'au alt de l'image en h1 et je crois que personne n'a pu démontrer que h1+texte positionne mieux le site que h1+alt.
- dans ton cas de figure (bouton graphisme par exemple), je ne vois pas la valeur ajoutée (référencement) de mettre le mot "graphisme" en text-indent, alors que s'il est en texte dans la page, il convient à tout le monde, robot compris. (sauf si répéter 4 fois le mot graphisme est un plus pour le référencement...)
Pour subtilités, j'entendais par là les fonctionnalités que tu as mis en œuvre (les 2 "diaporamas" entre autres) pour s'approprier l'information (j'y tiens). Pour moi, une image est toujours porteuse d'information puisqu'elle nous invite par son contenu à la réflexion.
Je t'explique :
Quand je suis arrivée sur ton site, j'ai vu en premier le slider puis les miniatures dessous... je n'ai pas fais le lien entre les deux, je me suis dis tiens un "truc" qui bouge et un diaporama avec une flèche... construction bizarre... cliquons sur une miniature ! J'ai continué à cliquer sur d'autres miniatures puis au bout d'un moment (le cerveau est bien fait, il avait enregistré le menu à mon insu), je me suis encore dit "mais, où a t'elle caché ses réalisations web et vidéos, il n'y a que des objets graphiques là".
Un visiteur pressé serait peut-être reparti sans se poser plus de questions...
Comme je suis tenace, je me suis posée et j'ai enfin fini par "voir" le mot "graphisme" à droite et j'ai enfin compris que j'étais sur la page graphisme ;).
Tout ça pour dire, qu'effectivement, quand on arrive sur une page d'accueil, on s'attend à trouver un "récapitulatif" des prestations, réalisations ou autre... et que là, non.
Ta page d'accueil (une fois comprise), c'est ce qui m'a aussi incité à vanter tes talents de graphistes car en toute logique, si tu la met en premier, c'est bien pour qu'on reconnaisse ceux-ci avant tout...
Voilà, mes explications sont à prendre pour ce qu'elles valent, mais c'est mon expérience utilisateur lambda de la cinquantaine ;)
@cilou c'est certains que si un internaute surfe sans image, il aura beaucoup de mal à surfer sur mon site... mais je pense que c'est un cas assez rare... et je sais même pas, si l'internaute lambda c'est comment enlever les images...
Ça nous arrive à nous qu'en nous développons, mais on remarque vite qu'il y a un truc louche :D
Ça serait un débat intéressant à avoir avec d'autres internautes de Alsacréations! Et j'aimerais bien avoir d'autres avis sur la question!
Pour les robots, du moins ce qu'on m'a enseignée, c'était qu'ils prenaient le site comme une masse d'informations qu'ils triaient par type d'importance.
Soit body - > h1 ->h2 et qu'un p avec de toute façon moins de valeur d'un h etc...
Le fait de le mettre en text-indent permet d'évider de le mettre en visibility:hidden, parce qu'il me semble que les navigateurs n'aiment pas trop les hidden. Sinon, si je ne le mets pas ainsi, il apparaît sur l'image bouton graphisme non? Je ne sais pas si tu l'a remarqué, mais les menus ne sont pas dans une typo web standard, donc impossible de les écrire réellement autre que par les images.
Mais j'apprécie le fait de me rendre attentive à cela et de provoquer un petite débat entre nous, ça nous amène toujours à réfléchir.
Par contre, répéter trois fois le mot « graphisme », je n'avais jamais entendu. Donc faire un menu où écrit graphisme 4 fois?
Pour la construction de mon site, je me suis inspirée et aider des principes de la gestalt. Il y en a pas mal, à appliquer ou à désappliquer.
Un des principes, c'est qu'un utilisateur à tendance à regarder un site en haut à gauche, un peu comme si tu avais une photo nette (le coin) à un endroit et flou le reste. Donc le cerveau fait comme une sorte d'analyse rapide de l'info en ne regardant que le bord gauche du site.
En premier lieu, je voulais donner toute l'importance à mes travaux, que ce qu'on voit en second.
Les slides show deviennent monnaie courante actuellement dans le web et prennent en général une bonne partie du contenu et résument ce que fait l'artiste. On parle bien là de ce qui se fait actuellement, atelierweb en est un exemple parfait.
Mon choix de faire que l'utilisateur arrive sur la page graphisme était volontaire, car je voulais montrer cela en premier, comme c'est mon atout et c'est ce dans quoi j'aimerais travailler. D'où le fait qu'il n'y est pas de home.
J'apprécie ta franchise et le temps que tu as pris pour m'expliquer tout ça merci beaucoup. J'aime comprendre et inciter au débat, car c'est toujours fructueux.
Petite question tu es dans quoi exactement?
Bonjour Sogam
Effectivement, ça serait intéressant d'avoir d'autres avis sur le bien fondé (ou non) de vouloir restituer l'information images désactivées...
Oui, text-indent est à utiliser plutôt que visibility hidden et pour les polices, tu peux aussi regarder du coté de CSS @font-face.
Pour "Par contre, répéter trois fois le mot « graphisme », je n'avais jamais entendu. Donc faire un menu où écrit graphisme 4 fois?"... en fait, je te posais la question de savoir si, utiliser 4 fois le mot graphisme (ce que tu fais dans ta page) était une technique de référencement ?
Sinon, tu peux me trouver là : http://www.alsacreations.com/concours/crea/37... et me connaitre mieux dans la page a propos :) (n'hésites pas à me laisser un petit commentaire, ça m'aidera à m'améliorer...a priori, niveau graphisme, c'est plutôt moyen ;))
@cilou le @font-face je l'ai utilisé pour la typo générale, car c'est une typo "downloadable" et donc libre d'être utilisée.
La typo des menu c'est de l'ITC avant garde, dont je n'ai pas les droits, donc pas possible de la mettre en version @font-face sinon je risque quelques choses, car ce @font-face c'est facilement "piratable" donc vaut mieux utiliser des typos libres de droit.
Non alors le fait de répéter le mot c'est plutôt involontaire, le mieux c'est d'avoir des bons métas... tu n'as qu'à t'inspirer de gros sites et tu fais les tiens en fonction.
Alors vais aller voir ton site et te laisserais un comment.
Ok alors, là je vais commenter au niveau design ce que tu pourrais améliorer.
En premier, pourquoi ne pas faire un menu "caché" du type menu jquery qui apparaît quand tu passes dessus? Car ici on voit que tu ne savais pas trop où mettre ta navigation. Dans l'idée un peu comme sur le site de thecssawards.
En deuxième, la typographie, à mes yeux elle est beaucoup trop grande, prend l'habitude soit de la regarder sur un petit écran (là j'ai un 1024X768 comme écran pour mes palettes et un autre plus grand bien-entendu) ou soit tu as la possibilité de simuler ça, avec la web developpeur, en redimensionnant ta fenêtre dans une petite résolution.
A mon avis la typo dans l'entête (là où il y a le colibri) en plus grand, faut pas avoir peur, limite à faire un slide show et tu le mets sur plusieurs "pages". Ça t'amènerait de l'interactivité.
Mais surtout ce qui me dérange, ce sont les liens pour filtrer le contenu, n'es pas peur de les mettre en petit, car on ne les utilise pas souvent.
Ensuite pour des visuels de travaux, moi j'essaierais de les mettre plus en avant lorsqu'on fait un rollover dessus. Type soit un changement de couleur de la typo, changement du background etc.
Lorsque tu cliques sur un travail, n'est pas tout ce texte qui revient à chaque fois (les petits plus et le vos pages...). Tu pourrais même enlever ton header avec le colibri, pour faire tte la place à tes travaux.
Sinon retravaille ton logo, le f est bien trop voyant lorsque tu fermes un œil et la fleur de crocus ou je ne sais pas quoi, on en a pas besoin... on comprend que c'est un oiseau.. un colibri je pense. Et surtout pas de reflet dans ton logo. Il y a pleins de bons sites d'inspiration de logos comme : logo of the day, creattica et LogoPond.
Voilà j'espère que ça te seras constructif.
Sinon code c'est bien tout ça m'a l'air d'être de l'html 5... je n'utilise pas tout mais c'est bien.
Pardon je voulais commenter sur ton site, pas sur le mien c'est une erreur de ma part cilou (je viens de le mettre sur ton site à toi enfin ta page concours)
ok, merci sogam :)
Bon on arrive dans la dernière ligne droite, alors laissez-moi vos avis et surtout votez!!!