Bonjour,
j'ai récemment terminé mon CV interactif et j'aimerai avoir un avis sur le design du site, s'il est trop abstrait, si les couleurs ne vont pas, etc... ou tout simplement s'il est moche Smiley ravi
Outre le design, j'ai un petit problème avec Jquery. Dans la rubrique web du portfolio, lorsque l'on clic sur une puce pour charger les autres images, l'animation fadeIn/fadeOut s'effectue correctement à l'exception d'une chose qui me perturbe...lorsque que l'animation s'effectue, on peut remarquer que l'image de fond passe devant l'image du cadre et je ne vois pas pourquoi.
Regardez par vous même et n'hésitez pas à me dire si vous n'avez pas bien compri le problème que j'essaye de vous expliquer, j'ai parfois du mal à expliquer Smiley ravi

www.jscaliadesign.fr
Modifié par jscaliadesign (14 Nov 2010 - 21:24)
salut, salut,

Je suis a l'école donc je ne pourrais pas être complet, mais c'est plutôt un bon point, car ici c'est des petites résolutions, et ton site s'affiche de facon assez arbitraire, étant donner que je dois scroller vers la droite pour lire ton contenu.

Pour les images de ton portfolio, je ne sais pas si c'est un effet voulu, mais rien n'est aligner, c'est pas très joli, mais bon c'est totalement subjectif ^^

Tu as mal géré ton positionnement a mon avis.

De plus ton formulaire n'est pas du tout accessible, tu as balisé tes inputs dans des div, pourquoi ne pas utilisé des label ? c'est plus accessible, et en plus ca ajoute une valeur sémantique a ton formulaire, que du bénef quoi^^

De plus il n'y a pas de title sur les éléments du menu.

Dans ta partie contact l'adresse email est un lien pourtant rien ne l'indique, a part au passage de la souris, bref on ne détecte pas au premier coup d'oeil que c'est un lien, ce principe s'appel l'affordance ^^

Voila j'espère que je t'ai un peu aidé ^^
Gili a écrit :
De plus il n'y a pas de title sur les éléments du menu.
Et c'est une bonne chose. Ajouter un title reprennant le contenu du alt et, donc, l'intitulé du lien serait totalement contreproductif. Title, sur les liens sert à apporter une information supplémentaire à l'intitulé du lien et nécessaire à la bonne navigation du visiteur. La navigation est suffisament claire, nul besoin de rajouter du "bruit".
Salut jscaliadesign,

Design:
# Les couleurs sont harmonieuses et c'est lisible. Par contre, je ne suis pas fan du fond. T'as ouvert Photoshop (ou autre) et t'as fais joujou avec les brushs et le biseau. C'est l'impression que ça dégage en tout cas. De plus, ça manque de personnalisation. C'est trop "passe partout". Il n'y a même pas de header.
# Une barre de scroll horizontal s'affiche pour les écrans en 1024 pixels de largeurs.
# Dans ton folio, tu perds une place folle à cause d'une tache verte qui ne sert à rien. Je ne dis pas qu'elle doit disparaitre, je veux dire qu'elle ne montre pas une compétence particulière. Du coup, rien ne t'empêche de continuer ton contenu par dessus ce contenu.
# Je ne suis pas fan de l'ombre interne sur le formulaire de contact.

Contenu:
#Si tu ne veux pas mettre de logo ou autre, mets au moins ton nom en plus gros. Smiley cligne
# Il manque l'essentiel dans ton texte d'intro. Est-ce que tu cherches un emploi? Dans quoi? Ton domaine de compétence?
# Ton folio est très pauvre en détails. On a juste le droit à une image et un titre/commentaire très léger. Tu affiches un screenshot d'une animation en flash. Ce ne serait pas mieux de mettre directement l'animation flash?
Ce ne serait pas mieux de détailler ce que tu as fait? Quels outils? Pourquoi? ect.
Quel est l'intérêt d'une page "Projet en cours" sans aucun détails sur ce projet?
# Sur la page "print", il serait mieux de proposer une version "HD" pour profiter au mieux des détails subtiles de ta créations.

Je ne commente pas encore la partie code pour le moment. Smiley cligne

Voilà, j'espère t'avoir aider.
a écrit :
Et c'est une bonne chose. Ajouter un title reprennant le contenu du alt et, donc, l'intitulé du lien serait totalement contreproductif. Title, sur les liens sert à apporter une information supplémentaire à l'intitulé du lien et nécessaire à la bonne navigation du visiteur. La navigation est suffisament claire, nul besoin de rajouter du "bruit".


On m'a appris à mettre obligatoirement l'attribut title sur les liens et images, parait que pour les navigateurs vocales c'est un plus. Mais merci de me faire remarquer que c'est une mauvaise façon de faire ^^ je ne le ferais plus !
Dis à ton prof de se documenter un peu plus...

Sur les images avoir un title est d'autant plus idiot que alt est là pour "apporter un plus pour les consoles vocales" (sic).
Gili a écrit :
salut, salut,

Je suis a l'école donc je ne pourrais pas être complet, mais c'est plutôt un bon point, car ici c'est des petites résolutions, et ton site s'affiche de facon assez arbitraire, étant donner que je dois scroller vers la droite pour lire ton contenu.


J'ai fait le choix d'opter pour un site avec de grande dimensions pour une fois, je ne voulais pas me restreindre à 800px de largeur comme pour quasiment tous les sites que j'ai eu le plaisir de créer, je voulais vraiment offrir quelque chose d'assez grand et visuel, ne laisser aucune limite à ma création Smiley ravi

Gili a écrit :

Pour les images de ton portfolio, je ne sais pas si c'est un effet voulu, mais rien n'est aligner, c'est pas très joli, mais bon c'est totalement subjectif ^^

Tu as mal géré ton positionnement a mon avis.


Rien est aligné ?
Les cadres d'en haut sont alignés avec ceux d'en bas et ceux du milieu sont volontairement décalés pour ne pas donner un aspect trop carré et trop stricte.
Moi ça ne me choque pas, bien au contraire !
Chacun a son avis et ses goûts mais je dois dire que tu es la seule personne à qui j'ai montré le site qui pour l'instant a trouvé ça choquant Smiley ravi
Maintenant peut être que le décalage est accentué par une mauvaise compatibilité avec ton navigateur, même si j'ai codé en prenant en compte un grand nombre de navigateur (fire fox, safari, opéra, chrome, ie, iPad et bientôt une web app pour iPhone).
Envoie moi un screenshot si tu veux bien, l'histoire que je te dise si c'est normal ou pas Smiley smile

Gili a écrit :

De plus ton formulaire n'est pas du tout accessible, tu as balisé tes inputs dans des div, pourquoi ne pas utilisé des label ? c'est plus accessible, et en plus ca ajoute une valeur sémantique a ton formulaire, que du bénef quoi^^

De plus il n'y a pas de title sur les éléments du menu.


Qu'entends-tu par "ton formulaire n'est pas du tout accessible" ?
La balise label est utile pour les éléments "radio" et "checkbox" d'un formulaire mais pour écrire du texte franchement je ne voie pas de différence, merci de bien vouloir m'expliquer Smiley smile

Gili a écrit :

Dans ta partie contact l'adresse email est un lien pourtant rien ne l'indique, a part au passage de la souris, bref on ne détecte pas au premier coup d'oeil que c'est un lien, ce principe s'appel l'affordance ^^


Le lien sur l'adresse mail n'était pas prévu au dépard, ce n'est qu'après avoir déveleppé le site pour l'iPad que j'ai rajouté ce lien.
Etant donné que le mail est envoyé à la même adresse que ça soit en remplissant le formulaire ou en cliquant sur l'adresse mail, le fait que cette adresse ne soit pas mise en valeur pour que l'on remarque dès le premier regard que c'est un lien, n'est pas grave pour moi. C'est juste une option, un petit plus Smiley ravi

Gili a écrit :

Voila j'espère que je t'ai un peu aidé ^^


Oui en effet, quelque soit l'avis, tant qu'il est constructif c'est toujours instructif Smiley cligne

David-Dante a écrit :

Design:
# Les couleurs sont harmonieuses et c'est lisible. Par contre, je ne suis pas fan du fond. T'as ouvert Photoshop (ou autre) et t'as fais joujou avec les brushs et le biseau. C'est l'impression que ça dégage en tout cas. De plus, ça manque de personnalisation. C'est trop "passe partout". Il n'y a même pas de header.


Le fond a en effet était créé avec des brushes et des effets biseau mais je ne vois pas en quoi c'est gênant que ça dégage cette impression, pourquoi trouves-tu ça gênant ?
Je n'ai pas besoin de header pour ce site, le header est très répandu (d'ailleurs je l'ai utilisé pour tous les sites que j'ai créé, à l'exception de celui-ci Smiley ravi ) mais il n'est pas indispensable.
Je suis d'accord qu'il permet de donner une identité au site mais je compte bientôt me faire un logo pour ça Smiley smile

David-Dante a écrit :

# Dans ton folio, tu perds une place folle à cause d'une tache verte qui ne sert à rien. Je ne dis pas qu'elle doit disparaitre, je veux dire qu'elle ne montre pas une compétence particulière. Du coup, rien ne t'empêche de continuer ton contenu par dessus ce contenu.


Rajouter les cadres au dessus de "la tâche verte" serait peut être un peu moins joli et pour l'instant je n'ai pas besoin de plus de place pour montrer mes créations étant donné que je n'ai pas encore publié énormément de site web (je sors tout juste de DUT Smiley ravi )

David-Dante a écrit :

# Je ne suis pas fan de l'ombre interne sur le formulaire de contact.


Toi peut-être pas, mais moi j'aime bien Smiley ravi
C'est juste une question de goût c'est tout...

David-Dante a écrit :

Contenu:
# Il manque l'essentiel dans ton texte d'intro. Est-ce que tu cherches un emploi? Dans quoi? Ton domaine de compétence?


Je ne cherche pas d'emploi, alors est-ce-que je dois mentionner "n'est pas à la recherche d'un emploi", non je ne pense pas que ça soit subtile.
Dans quoi ?
eeehhh...l'agroalimentaire peut-être, ou bien la médecine...non sérieusement je pense que l'intitulé "Web Designer - Infographiste" est assez précis Smiley ravi

David-Dante a écrit :

# Ton folio est très pauvre en détails. On a juste le droit à une image et un titre/commentaire très léger. Tu affiches un screenshot d'une animation en flash. Ce ne serait pas mieux de mettre directement l'animation flash?


Effectivement j'y ai déjà pensé et je l'avais même déjà programmé. Le seul problème c'est que pour pleinement profiter de mon animation, il faut la musique qui est intégrée dans celle-ci et comme tout le monde le sait, il faut des droits pour utiliser une musique sur internet, c'est droits je ne les ai pas (c'est un site que j'ai créé dans le cadre de mon DUT)
Voilà pourquoi j'ai pri la décision de ne pas la diffuser...

David-Dante a écrit :

Quel est l'intérêt d'une page "Projet en cours" sans aucun détails sur ce projet?
# Sur la page "print", il serait mieux de proposer une version "HD" pour profiter au mieux des détails subtiles de ta créations.


Là tu as entièrement raison, je voulais déjà plusieurs fois rajouter des informations et même quelques aperçu de mes projets mais je n'ai jamais encore trouvé le temps de le faire (ni la motivation Smiley ravi )
Quand à la version HD, 40 Mo n'est pas super rapide à être afficher mais c'est vrai que l'idée est bonne et que je n'y avais jamais pensé Smiley biggrin

David-Dante a écrit :

Voilà, j'espère t'avoir aider.


Évidemment, sans aucun doute merci Smiley cligne
Modifié par jscaliadesign (19 Nov 2010 - 20:28)
a écrit :
Le fond a en effet était créé avec des brushes et des effets biseau mais je ne vois pas en quoi c'est gênant que ça dégage cette impression, pourquoi trouves-tu ça gênant ?

Salut jscaliadesign,
Je me suis mal exprimé. L'impression que ça dégage est que ce n'est pas du tout travaillé. T'es parti en freestyle quoi. Smiley ravi
Ça pourrait mieux rendre en changeant la couleur du fond (gris très foncé par exemple). Ce n'est qu'un conseil, naturellement.


a écrit :
Je n'ai pas besoin de header pour ce site, le header est très répandu (d'ailleurs je l'ai utilisé pour tous les sites que j'ai créé, à l'exception de celui-ci ravi ) mais il n'est pas indispensable.
Je suis d'accord qu'il permet de donner une identité au site mais je compte bientôt me faire un logo pour ça

Ouais, enfin un header n'est pas forcement une image rectangulaire dans mon esprit. Smiley cligne


a écrit :
Rajouter les cadres au dessus de "la tâche verte" serait peut être un peu moins joli et pour l'instant je n'ai pas besoin de plus de place pour montrer mes créations étant donné que je n'ai pas encore publié énormément de site web (je sors tout juste de DUT ravi )

Je ne suis pas d'accord. Tu as créé 2 pages de réa pour la partie web (+ la page "projet en cours"). Il y a largement la place pour tout fusionner en 1 page non?

Cette tache n'apporte aucune plus valus à tes compétences. A la limite, ce serait un perso modeler en 3d, on pourrait comprendre mais là, c'est juste une brush.

a écrit :
Toi peut-être pas, mais moi j'aime bien ravi
C'est juste une question de goût c'est tout...

Et tu as raison. Je te donne mon avis. Après, tu en fait ce que tu veux. Smiley smile

a écrit :
Je ne cherche pas d'emploi, alors est-ce-que je dois mentionner "n'est pas à la recherche d'un emploi", non je ne pense pas que ça soit subtile.
Dans quoi ?
eeehhh...l'agroalimentaire peut-être, ou bien la médecine...non sérieusement je pense que l'intitulé "Web Designer - Infographiste" est assez précis

Non, la mention Infographiste Amateur suffit amplement. C'est ce que j'ai fait sur le mien par exemple.

a écrit :
Quand à la version HD, 40 Mo n'est pas super rapide à être afficher mais c'est vrai que l'idée est bonne et que je n'y avais jamais pensé

Pas forcement la vrai version HD. Mais un 1500 pixels (ou +) de haut est un bon compromis. En jpg, ça doit aller chercher dans les 700 ko.

a écrit :
Évidemment, sans aucun doute merci

De rien.

Sinon:
a écrit :
J'ai fait le choix d'opter pour un site avec de grande dimensions pour une fois, je ne voulais pas me restreindre à 800px de largeur comme pour quasiment tous les sites que j'ai eu le plaisir de créer, je voulais vraiment offrir quelque chose d'assez grand et visuel, ne laisser aucune limite à ma création

Tu n'a pas la bonne démarche.
En Web, on ne dit pas "je vais faire un site pour tel résolution, pour tel navigateur". Par contre, tu peux gâter un peu plus ceux qui ont une plus grande résolution ou un navigateur récent.
Par exemple, si tu affiches un fond de 2000 pixels de large, les petites résolutions ne profiterons pas entièrement de cette image mais cela ne gênera pas la navigation.
Idem avec un dégradé en CSS3. Les vieux navigateurs l'ignoreront et cela affichera une couleur unie qui ne gênera pas la navigation.
Enfin tu piges certainement ce que je veux dire quoi. Smiley langue
jscaliadesign a écrit :
Qu'entends-tu par "ton formulaire n'est pas du tout accessible" ?
La balise label est utile pour les éléments "radio" et "checkbox" d'un formulaire mais pour écrire du texte franchement je ne voie pas de différence, merci de bien vouloir m'expliquer Smiley smile


C'est signe qu'on ne t'a pas du tout enseigné les principes d'accessibilité et que tu ne t'es donc jamais penché sur comment un non-voyant navigue sur internet.
Pour ces gens, utiliser des <label> est un gros plus, car si les champs ne sont pas attachés à leurs étiquettes, comment feront-ils pour s'assurer qu'ils ont correctement rempli le formulaire ?
http://www.alsacreations.com/astuce/lire/6-utiliser-element-label-input-formulaires.html

Je te donne le lien d'une vidéo que j'ai trouvé :
http://www.youtube.com/watch?v=Kz1AQ4dqxgA

Et pour pouvoir tester par toi-même : http://www.framasoft.net/article4534.html


a écrit :
Le fond a en effet était créé avec des brushes et des effets biseau mais je ne vois pas en quoi c'est gênant que ça dégage cette impression, pourquoi trouves-tu ça gênant ?
Je n'ai pas besoin de header pour ce site, le header est très répandu (d'ailleurs je l'ai utilisé pour tous les sites que j'ai créé, à l'exception de celui-ci Smiley ravi ) mais il n'est pas indispensable.
Je suis d'accord qu'il permet de donner une identité au site mais je compte bientôt me faire un logo pour ça Smiley smile


Il faut faire très attention avec les filtres et les brushs, car ça devient très vite apparent quand ça ressemble trop à du pré-fait.
Un petit lien : http://siteduzero.com/forum-83-1801-pourquoi-je-n-aime-pas-les-filtres.html

a écrit :
Effectivement j'y ai déjà pensé et je l'avais même déjà programmé. Le seul problème c'est que pour pleinement profiter de mon animation, il faut la musique qui est intégrée dans celle-ci et comme tout le monde le sait, il faut des droits pour utiliser une musique sur internet, c'est droits je ne les ai pas (c'est un site que j'ai créé dans le cadre de mon DUT)
Voilà pourquoi j'ai pri la décision de ne pas la diffuser...


As-tu déjà pensé à regarder du côté de Jamendo ? Tu pourrais y trouver un morceau qui correspondrait bien à ton animation, à condition que la licence y soit compatible (donc exit ceux avec la clause ND dès le départ).

En savoir plus sur Jamendo : http://fr.wikipedia.org/wiki/Jamendo
Et en cas de doute juridique, tu peux aller demander sur le forum de Framasoft.
IshimaruChiaki a écrit :


C'est signe qu'on ne t'a pas du tout enseigné les principes d'accessibilité et que tu ne t'es donc jamais penché sur comment un non-voyant navigue sur internet.
Pour ces gens, utiliser des &lt;label&gt; est un gros plus, car si les champs ne sont pas attachés à leurs étiquettes, comment feront-ils pour s'assurer qu'ils ont correctement rempli le formulaire ?
http://www.alsacreations.com/astuce/lire/6-utiliser-element-label-input-formulaires.html

Je te donne le lien d'une vidéo que j'ai trouvé :
http://www.youtube.com/watch?v=Kz1AQ4dqxgA



Il se trouve que je connais bien une personne non voyante qui dispose du même logiciel que celui montré dans ta vidéo, la façon dont navigue les mal voyant sur internet ne m'est pas du tout inconnu, c'est juste que j'ai fait le choix de ne pas me préoccuper de la faculté à rendre mon site totalement exploitable pour les non voyant.

IshimaruChiaki a écrit :


As-tu déjà pensé à regarder du côté de Jamendo ? Tu pourrais y trouver un morceau qui correspondrait bien à ton animation, à condition que la licence y soit compatible (donc exit ceux avec la clause ND dès le départ).

En savoir plus sur Jamendo : http://fr.wikipedia.org/wiki/Jamendo
Et en cas de doute juridique, tu peux aller demander sur le forum de Framasoft.



Merci de m'avoir fait connaître ce site, je pourrai m'en servir pour plus tard Smiley ravi
Mais pour cette animation, aucune musique ne peut coller mise à part la musique originale.
Chaque apparition de texte, d'image, d'animation est en harmonie avec la musique, c'est pour cela que si je change de musique, il faudra aussi changer toute l'animation...
Modifié par jscaliadesign (29 Nov 2010 - 20:33)
Bonsoir,
j'ai fait une petite mise à jour du site : j'y ai ajouté des screenshots de mes applications iPhone/iPad sur la troisième page de la rubrique web.

J'aimerai bien avoir quelques avis sur le design de ces applications, alors si vous voulez bien m'en faire part, j'en serai ravi Smiley ravi

Merci d'avence Smiley cligne
Modifié par jscaliadesign (24 Dec 2010 - 00:45)
Mon sujet étant en deuxième page (vu la date du dernier message c'est pas étonnant^^), je me permet de faire un petit UP Smiley ravi
Bonjour,
J'ai l'impression de faire un bon de 5 ans en arrière, des ascenseurs de partout, même en 1680x1024 Smiley ohwell le design je le trouve furieusement Old school mais pas en bien, old school genre début du web. Ce n'est sans doute pas ce que tu souhaites lire mais ça ne fait absolument pas pro. Tu pourrais par exemple au moins centrer le site dans la page et mettre le gros brush en arrière plan et le centrer via css. As-tu regardé ton site en 1024*768, dans la société ou je travail nous sommes sur des 17'' (bon sauf moi) et le rendu n'est vraiment pas flatteur.
Si tu veux que ton site fasse sérieux il faut au moins que le rendu soit plaisant en 1024x768

Attention je ne descend pas ton site en flèche hein, c'est mon avis. Je recherche de temps en temps des free lance, et ton site n'incite pas à te contacter. La critique semble sévère mais ne t'inquiètes pas quasiment tous les créas sont passés par là.

par contre j'aime bien le script jquery qui permet de resizer l'image à la taille de la fenêtre du navigateur, très pratique.

j'aime beaucoup aussi l'illustration/logo "sine qua non"
Modifié par albtr (24 Dec 2010 - 16:16)
Je suis carrément d'accord avec toi concernant la résolution.
Mon site aurait dû être visible sans ascenseur en résolution 1024*768, je ne l'avais même pas capté en fait...c'est vrai que j'ai un autre écran depuis quelques temps et j'avais tellement l'habitude d'avoir une résolution 1024*768 que lorsque j'ai intégré mon site et vu qu'il n'y avait pas d'ascenseur je m'étais dit que c'était bon...alors qu'en fait mon écran est en 1280*1024 Smiley ravi
C'est abusé que je m'en rend compte que maintenant, en plus plusieurs personnes m'avaient averti de certain problème avec la résolution enfin bref c'est une grosse erreur de ma part et merci de m'avoir ouvert les yeux Smiley ravi

Pour le design, j'ai repensé à ce que tu as écrit mais je n'arrive pas à comprendre pourquoi ça fait "old school genre début du web". Il est vrai que je n'ai pas vécu le début du web en tant que web master, cependant je pense pouvoir affirmer avec certitude que le début du web ne ressemblait pas du tout avec le design de mon site. Les premiers sites étaient des pages blanches remplies de texte et avec quelques très rares images GIF (dû au fait que les connexion internet ne permettaient pas encore des débits important).
Après si en parlant de "début du web" tu voulais dire 5 ans en arrière, ok si tu veux mon site fait old school dans le mauvais sens du thermes et que me conseillerais-tu pour y remédier ?
Dois-je changer les couleurs, la disposition, ou recommencer le design à zéro ?
Et quand tu parlais du design old school, tu voulais parler de celui du site ou tout confondu (site + créa web + créa print + etc...) ?
Modifié par jscaliadesign (25 Dec 2010 - 23:28)
Personne d'autre ne voudrai donner son avis ?

Pour ce qui est du design des Applications iPhone et iPad, vous en pensez quoi ?