[Pro] UX Designer

Bonjour !

Actuellement étudiant au sein du Master UX Design de l'école multimédia, je travaille en alternance chez Pratique - Le Groupe, en binome avec (Jonathan).

En recherche de mon prochain contrat professionnel, j'ai monté mon (petit) portfolio codé main (html5/css3 et un scroll javascript) avec l'aide de Jo.

Pour répondre à plusieurs de mes interlocuteurs internationaux, il est rédigé en anglais. Il y a probablement encore quelques fautes dans le contenu, je vous prie de m'en excuser par avance.

Que pensez vous :

- du design,
- du contenu (et du ton employé),
- éventuellement du code, je ne suis pas intégrateur donc ce n'est probablement pas parfait.
- Quelle a été votre ressenti durant votre visite ? (chiant ? chouette ? bof ?)

Cela se passe par ici : Portfolio

Cordialement,
Modifié par KatOun (13 Nov 2015 - 10:59)

Côté code

Tu n’es pas intégrateur

Malgré un doctype HTML5, ton code HTML ne comporte pas de balises HTML5 qui conféreraient davantage de sémantique audit code (article, aside, main, section, header, footer, etc.) et le simplifieraient (plus besoin de classes s’il y a des balises spécifiques), mais, au lieu de cela, beaucoup de divs (Oups, I div it again !).

De plus en HTML5, il y a lieu de remplacer <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> par <meta charset="utf-8" />.

Enfin, en syntaxe XHTML, il n’est nullement nécessaire d’insérer un espace avant le / final des balises standalone. Cette pratique, malheureusement massivement utilisée, date du temps où les navigateurs ne reconnaissaient pas les balises XHTML standalone sans cet espace. Ça remonte à il y a très très très longtemps.

Ton code HTML fourmille de classes. En usant de sélecteurs “avancés” et en exploitant davantage l’héritage CSS, tu pourrais certainement te passer de certaines de celles-ci, ce qui simplifierait d’autant ton code et en améliorerait la lisibilité.

Un exemple de ciblage d’éléments sans classes ni ids : http://nthmaster.com/.

Vérifie ta page dans un validateur. Les doubles tirets dans les commentaires HTML, ça ne passe pas au Validateur W3C. Ce n’est peut-être pas sans conséquences dans certains navigateurs (pas vérifié).

Côté design et typo

Tout d’abord, je ne suis pas un expert en design, donc…

Je n’ai pas de critiques négatives à adresser à ton site considéré isolément. Au contraire, je le trouve plutôt bien. Malheureusement, il semble que les nouveaux sites flat design de concepteurs web ont réussi la prouesse de se ressembler tous en quelques mois.

Les photos sombres (ou en noir et blanc) pleine largeur de fenêtre, j’ai l’impression d’avoir vu ça mille fois. Enfin, ce sont des teintes à la mode paraît-il. Des photos en couleurs vives seraient sans doute plus originales.

La typo est bien, et j’aime beaucoup la police des grands titres en police serif. Le contraste texte/fond est satisfaisant, en tout cas sur mon écran, mais le texte gris sur fond gris… Peut-être pourrais-tu mettre les icônes de ta home page et les titres serif en rouge ?

Enfin côté langue, il me semble qu’il y a quelques erreurs par-ci par-là. Par exemple, user tests me semble plus approprié que users's test. Je crois que user est dans ce cas utilisé comme adjectif et est donc invariable, et je ne crois pas qu’il faille de toute façon un ’s possessif après un mot se terminant en s, mais seulement un ’ (mais mes cours d’anglais remontent à loin).

C’est tout pour le moment. Très bonne continuation.
Modifié par thierry (14 Nov 2015 - 11:54)

Bonsoir Thierry,

Merci pour ce long retour constructif

thierry a écrit :
Côté code
Tu n’es pas intégrateur

Et non, je ne pense pas avoir le niveau de production d'un intégrateur sur le marché actuel. J'ai creusé sous la bienveillance et la compétence de Jo par curiosité, mais je suis très attiré par la conception ergonomique d'un service ou d'un produit (digital).

thierry a écrit :
Malgré un doctype HTML5, ton code HTML ne comporte pas de balises HTML5 qui conféreraient davantage de sémantique audit code (article, aside, main, section, header, footer, etc.) et le simplifieraient (plus besoin de classes s’il y a des balises spécifiques), mais, au lieu de cela, beaucoup de divs (Oups, I div it again !).

Tu as complètement raison. Tu viens de me le faire réaliser.
La raison probable est que j'ai beaucoup itéré sur le côté conception puis sur le code (version 15 pour chacune je pense :S), et que du coup j'avais besoin de beaucoup de classes pour tester pas mal de choses (et modifier la structure énormément). Il faudrait surement nettoyer tout ça et mettre des sélecteurs HTML5. Mais vu que je continue à réfléchir, ça m'aide à avoir le contrôle sur tous ces éléments, indépendamment. Peut être à tort.

J'ai utilisé la synthaxe "bem" et le design atomique, (conception orientée objet "oocss").

Pour les doubles tirets, c'était un reste d'une de mes itérations. Je les ai retiré

Merci pour le lien sur les nth !

thierry a écrit :
Je n’ai pas de critiques négatives à adresser à ton site considéré isolément. Au contraire, je le trouve plutôt bien. Malheureusement, il semble que les nouveaux sites flat design de concepteurs web ont réussi la prouesse de se ressembler tous en quelques mois.

Les photos sombres (ou en noir et blanc) pleine largeur de fenêtre, j’ai l’impression d’avoir vu ça mille fois. Enfin, ce sont des teintes à la mode paraît-il. Des photos en couleurs vives seraient sans doute plus originales.

Arf. J'entends bien ton feedback (dur ahaha, pour le manque d'originalité ! Je t'explique pourquoi).

Concernant la ressemblance avec d'autres sites et plus particulièrement cette image en premier screen : c'est une question d'impact. Cela accueille agréablement l'utilisateur et touche le côté humain (plus qu'un paragraphe de texte si on fait une comparaison à l'extrême).
Exemple : Airbnb avec la video sur la home, et des visuels pour accéder à des listes de résultats.

Ensuite, à force d'itérer sur ce portfolio, j'ai aussi compris pourquoi certaines informations étaient mieux disposés de telle façon, un genre de bonne pratique design pour les portfolio (peut être éphémère).

Pour les couleurs, sur le fond je suis d'accord avec toi, sur la forme ça pêche. Pourquoi ? Parce qu'en mettant des couleurs pêchues, les titres, le wording que l'on veut mettre en valeur n'est plus "vu" par l'utilisateur. On n'y fait pas attention, et c'est noyé dans la masse. Chose que j'ai voulu éviter sur ce site en ajoutant un filtre qui assombrit l'image, et ainsi fait ressortir le wording avec du blanc et orange.

Pour les titres/icones en orange, c'est encore une bonne idée, j'avais testé. Le souci c'est qu'avec l'animation (que j'aime bien), les utilisateurs veulent cliquer dessus. Ce n'est pas possible, et du coup ils sont frustrés. Pas chouette ! J'ai donc atténué l’intéraction en jouant sur la couleur pour pouvoir garder mon animation.

Il faut prendre en considération que je suis limité techniquement (pas de formation de développeur, je ne souhaite pas devenir développeur mais ça m'intéressait de creuser techniquement pendant un an en alternance).
Jo m'a confirmé plusieurs fois que ce que je voulais faire n'était pas possible si je ne maîtrisais pas le SVG et/ou le Javascript. Peut être pour le prochain.

Merci beaucoup en tout cas pour ce super retour (et désolé pour le pavé wahou la prévisualisation :S)

Dernière petite question : As-tu jeté un oeil aux projets ?
J'ai bien peur d'avoir loupé quelque chose si les visiteurs ne vont pas les voir. Mon responsable de master m'a incité à expliquer le processus de conception, d'où la mise en page assez longue.

Bonne soirée !

Victor
Modifié par KatOun (16 Nov 2015 - 09:48)

Personne pour un autre avis ?
Modifié par KatOun (16 Nov 2015 - 14:11)

Bonjour,

Je viendrai poster mon avis plus tard, mais juste un point qui me fait tiquer dans le commentaire précédent :

thierry a écrit :
Ton code HTML fourmille de classes. En usant de sélecteurs “avancés” et en exploitant davantage l’héritage CSS, tu pourrais certainement te passer de certaines de celles-ci, ce qui simplifierait d’autant ton code et en améliorerait la lisibilité.

Et ainsi supprimer toute chances d'avoir un site facilement évolutif. Avoir une classe comme sélecteur c'est juste génial, les avantages sont multiples. Utiliser des sélecteur type "h1 > p" ou des "nth-child" à la place du sélecteur de class c'est juste se tirer une balle dans le pied. Une modification de structure et ta présentation n'est plus bonne. Non avoir suffisamment des classes c'est une bonne pratique.

Bonjour Gili,

C'est ce que Jo me disait aussi concernant les classes, merci de confirmer la bonne pratique :S
J'attends ton avis quand tu as le temps

thierry a écrit :
[...]ton code HTML ne comporte pas de balises HTML5 qui conféreraient davantage de sémantique audit code (article, aside, main, section, header, footer, etc.) et [...]

surtout que, par exemple, la balise main n'est pas supportée par Internet Explorer. Je sais je sais, on s'en fout d'IE y'a que les vieux qui l'utilise. mais bon..
Modifié par JENCAL (17 Nov 2015 - 12:05)

@ Gili

a écrit :
Et ainsi supprimer toute chances d'avoir un site facilement évolutif. Avoir une classe comme sélecteur c'est juste génial, les avantages sont multiples. Utiliser des sélecteur type "h1 > p" ou des "nth-child" à la place du sélecteur de class c'est juste se tirer une balle dans le pied. Une modification de structure et ta présentation n'est plus bonne. Non avoir suffisamment des classes c'est une bonne pratique.

Ça dépend.

Dans ce cas, pourquoi a-t-on inventé ces sélecteurs ? Ils doivent bien avoir une utilité, non ?

Secundo, si tu as des modifs de mise en forme à faire, c’est uniquement dans les CSS, tu ne touches pas au code HTML, jamais, ce qui, me semble-t-il, est plutôt évolutif et plus rapide.

Par exemple, si je veux mettre le premier paragraphe de chacun de mes articles en gras, je n'aurai qu'à écrire en CSS :

article > p:first-of-type { font-weight-bold }

Je n'aurai aucune classe à ajouter à ces paragraphes, et le premier paragraphe pourra être remplacé par un autre, et c'est alors ce nouveau premier paragraphe qui sera en gras, toujours sans supprimer/ajouter de classe. Enfin, si je veux supprimer cette mise en forme particulière, je n'aurais qu'à supprimer la règle CSS qui la définit, sans avoir à supprimer une classe sur le premier paragraphe de mes articles.

Tertio, ton code HTML est beaucoup plus simple et clair. C’est agréable.

Bref, ton point de vue (comme le mien) sont tous deux discutables.

@JENCAL

a écrit :
surtout que, par exemple, la balise main n'est pas supportée par Internet Explorer. Je sais je sais, on s'en fout d'IE y'a que les vieux qui l'utilise. mais bon..

Je ne me fous pas d'IE en prod, je citais toutes ces balises HTML5 à titre d’exemple. Pour le cas de la balise main sous IE, les solution existent :

http://forum.alsacreations.com/topic-2-77415-1-Balisemain.html.
Modifié par thierry (19 Nov 2015 - 12:00)

@KatOun

a écrit :
Dernière petite question : As-tu jeté un oeil aux projets ?
J'ai bien peur d'avoir loupé quelque chose si les visiteurs ne vont pas les voir. Mon responsable de master m'a incité à expliquer le processus de conception, d'où la mise en page assez longue.

Salut,

J'ai été jeter un coup d’œil aux projets comme tu l'as demandé.

Deux choses m'embêtent à ce propos.

1. (sur mon écran en tout cas : 1600 x 900, Windows 7, Firefox 42 avec barre de titre, barre de menus et Web Developer Toolbar) tes projets sont en dessous de la ligne de flottaison (bas de la fenêtre du navigateur), et je dois scroller pour y accéder.

Avant le flat design, il était recommandé de mettre des contenus importants au dessus de la ligne de flottaison. Maintenant, on tombe toujours d'abord sur une image full window ou full window-width. Perso, je préférerais tomber directement sur les vignettes de tes projets.

2. Les vignettes de tes projets donnent souvent accès à des images isolées. Je préférerais les voir incluses dans une page web avec une flèche Prev plutôt que de me dégager du site pour utiliser la touche Prev du navigateur.

À part ça, je constate encore des erreurs orthographiques orthographiques ou grammaticales ou des choix orthographiques ou grammaticaux sujets à débat dans les PDFs :

Rentres en toute tranquillité > Rentre en toute tranquillité

s à l'indicatif présent deuxième personnes du singulier, mais pas de s à l'impératif deuxième personne du singulier (en tout cas pas pour ce verbe-là)

Le persona / La persona

En latin, le mot est féminin ; en français, il est indifféremment masculin ou féminin, mais tant à cause du féminin latin que de la proximité avec le mot personne, le féminin me semble plus indiqué.

J'aimerai ne plus m'inquiéter > J'aimerais ne plus m'inquiéter

malfamés / mal famés

Les deux graphies existent, mais, perso, jusqu'ici, je n'avais rencontré que la seconde.

@KatOun

a écrit :
Arf. J'entends bien ton feedback (dur ahaha, pour le manque d'originalité ! Je t'explique pourquoi).

Concernant la ressemblance avec d'autres sites et plus particulièrement cette image en premier screen : c'est une question d'impact. Cela accueille agréablement l'utilisateur et touche le côté humain (plus qu'un paragraphe de texte si on fait une comparaison à l'extrême).
Exemple : Airbnb avec la video sur la home, et des visuels pour accéder à des listes de résultats.

Ensuite, à force d'itérer sur ce portfolio, j'ai aussi compris pourquoi certaines informations étaient mieux disposés de telle façon, un genre de bonne pratique design pour les portfolio (peut être éphémère).

Pour les couleurs, sur le fond je suis d'accord avec toi, sur la forme ça pêche. Pourquoi ? Parce qu'en mettant des couleurs pêchues, les titres, le wording que l'on veut mettre en valeur n'est plus "vu" par l'utilisateur. On n'y fait pas attention, et c'est noyé dans la masse. Chose que j'ai voulu éviter sur ce site en ajoutant un filtre qui assombrit l'image, et ainsi fait ressortir le wording avec du blanc et orange.

Je comprend tes arguments, mais jette un œil sur ces pages (j'espère que je n'enfonce pas une porte ouverte, là) :

http://yannickpasquier.com/
https://florianfries.me/fr/
http://www.mikaelcabral.fr/
http://www.paricilestage.eu/
http://delghust-jessy.olympe.in/

Et aussi, avec tes images assombries, quand je les regarde, ce qui m'ennuie, avec certaines d'entre elles, c'est que je ne peux pas en distinguer aisément le contenu, et des images dont on ne peut pas aisément le contenu, pour moi, ça relève un peu du non-sens. Je mettrais dans ce cas les images initiales des pages suivantes :

http://www.victorfinkel.com/work__connectshop.html
http://www.victorfinkel.com/contact.php
http://www.victorfinkel.com/about.html

Enfin, c'est peut-être aussi une question d'écran, faudrait voir...

Concernant la mise en forme sans classes ni ids (idéalement, et en pratique, avec un minimum de ceux-ci), je suis frustré que tu te rendes si vite aux arguments de Gili et Jo.

Bon, là, je fais un peu de techno-évangélisme, pardonne-moi. Supposons une liste non ordonnée dont les items présentent des backgrounds alternés (le CSS est donc dans une balise style dans le head d'une page) :

La technique avec classes :

.odd { background-color: grey}
.even { background-color: blue}

<ul>
<li class="odd">texte</li>
<li class="even">texte</li>
<li class="odd">texte</li>
<li class="even">texte</li>
<li class="odd">texte</li>
<li class="even">texte</li>
<li class="odd">texte</li>
<li class="even">texte</li>
</ul>

La technique sans classes :

ul li:nth-child(odd) { background-color: grey }
ul li:nth-child(even) { background-color: blue }

<ul>
<li>texte</li>
<li>texte</li>
<li>texte</li>
<li>texte</li>
<li>texte</li>
<li>texte</li>
<li>texte</li>
<li>texte</li>
</ul>

Oh ! mais ces backgrounds alternés ne doivent s'appliquer qu'à une liste ul et je dois en insérer une autre avant celle-ci.

Pas de problème :

ul:last-of-type li:nth-child(odd) { background-color: grey }
ul:last-of-type li:nth-child(even) { background-color: blue }

ou plus précis :

ul:nth-of-type(2) li:nth-child(odd) { background-color: grey }
ul:nth-of-type(2) li:nth-child(even) { background-color: blue }

Et c'est fait. Je ne vois pas en quoi cette méthode est moins flexible et moins évolutive que la méthode avec classes et ids, surtout qu'on ne touche (pratiquement) jamais au code HTML, mais uniquement au code CSS, mais manifestement, c'est une démarche toute autre que cette dernière, et qui semble pouvoir dérouter les intés acquis à celle-ci. Bon, moi, je l'avoue, je suis un affreux perfectionniste, et j'adore réaliser ses pages HTML sans les moindre classe ou id pour le fun et la performance. Désolé si je te tanne avec ça, mais je trouve ça trop intéressant pour ne pas être partagé.

Sinon, toujours à ton service, et bonne continuation.
Modifié par thierry (19 Nov 2015 - 16:10)

thierry a écrit :
J'AI PAS FINI, A SUIVRE.

Mdr, ça marche Thierry !

1. Pour la ligne de flottaison, je connais la règle et c'est vrai qu'il y a surement un souci pour le mobile sur les projets.

2. Oui, on a beaucoup débattu la dessus avec Jo. De base, j'avais un pluggin Jquery pour avoir ce slider et pouvoir passer dans les slides.. Le souci c'est qu'en responsive, ça se comportait très mal. Du coup, j'ai préféré privilégier "l'usage classique" des utilisateurs, à savoir l'ouverture comme un pdf (vu que ce sont des présentations .pdf à la base), et le retour en arrière du navigateur que les utilisateurs "connaissent".
Je ne suis clairement pas fan de cette solution, mais une fois de plus, je ne maîtrise pas assez le Javascript pour faire un truc parfait... :'(

3. Merci pour toutes ces corrections orthographiques. Je devrais avoir mes corrections pour la partie anglais cette semaine, et les présentations faites dans le rush comportent surement des fautes de français. Je vais m'atteler à corriger ça, j'avais envie de sortir le site rapidement pour enchaîner sur ma recherche de contrat, mais j'aurais peut être dû attendre encore peu que la chose soit parfaite (ou presque) ...

KatOun, j'ai complété mon commentaire précédent.

Bonne continuation.
Modifié par thierry (19 Nov 2015 - 16:14)

thierry a écrit :
Je comprend tes arguments, mais jette un œil sur ces pages (j'espère que je n'enfonce pas une porte ouverte, là) :
http://yannickpasquier.com/
https://florianfries.me/fr/
http://www.mikaelcabral.fr/
http://www.paricilestage.eu/
http://delghust-jessy.olympe.in/

Et aussi, avec tes images assombries, quand je les regarde, ce qui m'ennuie, avec certaines d'entre elles, c'est que je ne peux pas en distinguer aisément le contenu, et des images dont on ne peut pas aisément le contenu, pour moi, ça relève un peu du non-sens. Je mettrais dans ce cas les images initiales des pages suivantes :
http://www.victorfinkel.com/work__connectshop.html
http://www.victorfinkel.com/contact.php
http://www.victorfinkel.com/about.html

Enfin, c'est peut-être aussi une question d'écran, faudrait voir...

Ah. C'est un problème intéressant que tu soulèves. J'ai testé sur une dizaine d'écran environ pour voir que ça collait. Dans l'ensemble ça semblait bon, mais j'imagine que sur certains écrans c'est pas top top.
Pour les 3 cas que tu soulèves, tu n'arrives pas à voir de quoi il s'agit ?! Mince.
J'ai consulté tes liens et je vois ce que tu veux dire avec les images ! ça me paraissait plus simple comme je l'ai fait (descriptif + visuel) mais c'est surement plus dans l'ère du temps de mettre les visuels en full page comme sur ton premier lien. A méditer.

thierry a écrit :
Concernant la mise en forme sans classes ni ids (idéalement, et en pratique, avec un minimum de ceux-ci), je suis frustré que tu te rendes si vite aux arguments de Gili et Jo.

Bon, là, je fais un peu de techno-évangélisme, pardonne-moi.

Ne te frustres pas Thierry, y a aucun problème ! ^^
J'ai une formation accélérée de chef de projet digital, et Jo m'a formé avec beaucoup de patience, et il est très rigoureux. Du coup, c'est un peu mon Dieu du CSS mais il y a surement des améliorations possibles dans nos pratiques. Je peux l'entendre sans problème.

Je ne sais pas trop quoi te répondre concernant ce débat sur la synthaxe, pour moi c'est plus simple avec des classes alors que je viens d'apprendre la syntaxe "bem", le CSS un peu approfondi, les animations, les flexbox (j'ai déjà des bugs où je m'arrache les cheveux, si en plus je dois penser encore différemment ma syntaxe, je ne code plus et je retourne à mon photoshop !).

Merci en tout cas pour ce long retour, c'est intéressant !
Bonne continuation et à ton service également
Modifié par KatOun (19 Nov 2015 - 16:44)

Bonjour,

Je limiterai mon commentaire au design.

Je partage l'avis de Thierry au sujet du manque d'originalité. Quand un site a un concept fort et original, il n'y a pas besoin de l'expliquer, le site parle de lui même.

Là concrètement, que me raconte ce site ? En terme de design, de concept, de typographie, d'illustration, de technicité, d'idée, de créativité, d'originalité, d'efficacité ?… Pas grand chose. Franchement, entre un site aussi impersonnel et un template Wix, je choisis la seconde option.
Un étudiant doit savoir prendre des risques, faire preuve d'une réelle curiosité, montrer qu'il est créatif, talentueux, qu'il est force de proposition, quitte à être maladroit ou à se casser la gueule, pour apprendre de cette expérience et mieux avancer. Ce qui servira ensuite quand on bosse sur des projets réels, qui peuvent demander d'avoir une approche institutionnelle ou très rock'n'roll. Les deux sont complémentaires. Un Designer doit pouvoir faire le grand écart.
Le site que vous nous soumettez ne présente aucune prise de risque et reprend les codes les plus formatés, ennuyeux et usés du moment. Ce qui pourrait passer si s'était fait avec créativité et style (typo, couleur, graphisme… ). Mais ce n'est pas vraiment le cas. Pour le moment…

Par exemple, placer une photo en arrière plan avec le texte dessus (titre + baseline) demande une mise en scène de la typo, une "dramatisation". Cette mise en scène doit être cohérente par rapport à un concept, un style, une histoire. Là j'ai rien de tout ça. J'ai 4 ou 5 polices de caractère sans styles qui luttent sur l'accueil, pas de composition, pas d'idée, pas de travail des couleurs, une photo en arrière plan qui depuis qq jours fait écho aux événements qui ont marqué le pays, pas d'illustration ou de travail de design. Juste un template classique, avec quelques pictos qui semblent récupérés, des carences en typo, créativité et une charte qu'on a du mal à cerner.

OK, j'ai l'image en fond avec un filtre foncé, le texte dessus, mais tout le reste manque. Et c'est ce qui manque qui est le plus important, qui est la trame de l'histoire dans laquelle vous devez nous embarquer. Montrez ce que vous savez faire !

Devant ce template, je suis face au vide. Le vide de la page blanche, quand on manque d'inspiration. Ce qui fera illusion face à des néophytes, moins devant des pros, même pour l'école dont vous parlez (que j'ai eu la mauvaise idée de choisir pour une formation en intégration), avec ses diplômes en carton et ses profs dont le niveau de compétence reflète parfois le niveau de rémunération. Apparemment, ils avaient pas assez de budget pour les cours de typo.
Et même avec une politique "clientéliste", ils risquent de vous allumer au final, même avec un jury d'amis.

Exemples concrets tirés de ma présentation web 2016 :
http://fr.slideshare.net/philipperondepierre37/tendances-web-design

Mise en scène de la typo sur image 100 %, le travail de typo prend sens par rapport au sujet, à l'ensemble du site. C'est structuré :

http://img15.hostingpics.net/pics/988656tendanceswebdesign2016etaprs151024.jpg

https://insideabbeyroad.withgoogle.com/en/welcome


Raconter une histoire, utiliser l'émotion (le concept, le texte, les effets techniques et le design devant se compléter de façon cohérente) :

http://img15.hostingpics.net/pics/830774tendanceswebdesign2016etaprs171024.jpg

http://www.apple.com/fr/music/

Il faut savoir utiliser les codes, les détourner au service d'une idée ou d'un concept. Si ça carbure à vide, le site ne fonctionne pas. Même dans le style minimal (ce qui n'est pas le cas ici), il faut d'abord qu'il y ait de la matière, du contenu, et emballer tout ça pour rendre le site inspirant.

Quelques liens créatifs, qui collent plus à ce qu'on attend de la part d'un débutant. Certes, ce sont des liens pros, mais c'est de ça que vous pouvez vous inspirer, plutôt que de chercher à justifier les manques de votre site actuel :
http://www.siteinspire.com/
https://www.behance.net/
…

Pas de panique, ce n'est pas la quantité qui compte… Essayez juste de vous exprimer, de montrer de quoi vous êtes capable. Et même, de remettre en question quelques standards du moment.

Inspirez-vous. Ensuite, prenez un papier, un crayon et oubliez l'ordinateur…
Allez hop ! Foncez !
Modifié par spongebrain (20 Nov 2015 - 01:47)

spongebrain a écrit :
Bonjour,

Je limiterai mon commentaire au design.

Le site que vous nous soumettez ne présente aucune prise de risque et reprend les codes les plus formatés, ennuyeux et usés du moment. Ce qui pourrait passer si s'était fait avec créativité et style (typo, couleur, graphisme… ). Mais ce n'est pas vraiment le cas. Pour le moment…
[...]
Franchement, entre un site aussi impersonnel et un template Wix, je choisis la seconde option.

Vous êtes dur. Bien.
Comparer un template Wix et mon travail (qui m'a occupé 2 mois et où l'objectif était quelque chose de sobre et clair, et non impersonnel), je trouve ça limite irrespectueux, bien qu'il y ait surement des bons design chez Wix (au secours le code qui en sort).
Votre expérience sur le site n'est pas bonne, j'en prends note. Vous ne parlez à aucun moment de l'utilisabilité ou d'ergonomie (qui sont mon coeur de métier).

spongebrain a écrit :
Par exemple, placer une photo en arrière plan avec le texte dessus (titre + baseline) demande une mise en scène de la typo, une "dramatisation". Cette mise en scène doit être cohérente par rapport à un concept, un style, une histoire. Là j'ai rien de tout ça. J'ai 4 ou 5 polices de caractère sans styles qui luttent sur l'accueil, pas de composition, pas d'idée, pas de travail des couleurs, une photo en arrière plan qui depuis qq jours fait écho aux événements qui ont marqué le pays, pas d'illustration ou de travail de design.

Il y a 2 typo sur le site (PlayFair et de l'Open sans) + le logo.
Pas d'idées ? J'apprécie ...
La photo ne fait pas référence aux événements, c'est celle de ma maquette depuis 2 mois.

spongebrain a écrit :
Juste un template classique, avec quelques pictos qui semblent récupérés, des carences en typo, créativité et une charte qu'on a du mal à cerner.

Je me suis demandé à la fin si ça ne ressemblait pas à un template, mais j'ai cherché pour chaque information le meilleur moyen de la présenter pour en arriver à ce résultat (Pour le desktop mais aussi pour tous les comportements en responsive, ce qui limite parfois la créativité à cause des contraintes du code).

Les picto ont été choisis, changé plusieurs fois, ce n'est pas un choix fait à la va-vite. Pas parfait, pas de problème, aussi nul que vous le décrivez... ça fait mal. Après avoir (re)regardé votre présentation, je ne suis clairement pas fan même si je comprends votre travail de typo etc., j'étais déjà passé sur votre site (qui est plus que simple pour le coup vu que y a un blabla et un pdf). Vous êtes Directeur artistique Print ?! Je n'ai pas l'impression que vous preniez en considération les contraintes techniques du web.

spongebrain a écrit :
Montrez ce que vous savez faire !

Je n'ai pas l'autorisation de vous montrer le projet professionnel qui m'occupe depuis un an (date de mon entrée dans ce secteur d'activité), ma compétence est davantage centrée sur l'expérience utilisateur. J'ai cependant mis un petit paragraphe dessus. Je pourrais le présenter en entretien.

spongebrain a écrit :
Devant ce template, je suis face au vide. Le vide de la page blanche, quand on manque d'inspiration. Ce qui fera illusion face à des néophytes, moins devant des pros, même pour l'école dont vous parlez (que j'ai eu la mauvaise idée de choisir pour une formation en intégration), avec ses diplômes en carton et ses profs dont le niveau de compétence reflète parfois le niveau de rémunération. Apparemment, ils avaient pas assez de budget pour les cours de typo.
Et même avec une politique "clientéliste", ils risquent de vous allumer au final, même avec un jury d'amis.

C'est super sympa de votre part tout ça. Faudrait peut être revoir la forme de votre critique. Je ne vais surement pas rentrer dans un débat en public sur ce sujet mais j'apprécie très moyennement votre façon de tout casser, et de juger ces écoles sur la seule base de votre expérience négative.

spongebrain a écrit :
Raconter une histoire, utiliser l'émotion (le concept, le texte, les effets techniques et le design devant se compléter de façon cohérente)

Oui.

spongebrain a écrit :
Il faut savoir utiliser les codes, les détourner au service d'une idée ou d'un concept. Si ça carbure à vide, le site ne fonctionne pas. Même dans le style minimal (ce qui n'est pas le cas ici), il faut d'abord qu'il y ait de la matière, du contenu, et emballer tout ça pour rendre le site inspirant.

Quelques liens créatifs, qui collent plus à ce qu'on attend de la part d'un débutant. Certes, ce sont des liens pros, mais c'est de ça que vous pouvez vous inspirer, plutôt que de chercher à justifier les manques de votre site actuel

http://www.siteinspire.com/
https://www.behance.net/
…

Pas de panique, ce n'est pas la quantité qui compte… Essayez juste de vous exprimer, de montrer de quoi vous êtes capable. Et même, de remettre en question quelques standards du moment.

Inspirez-vous. Ensuite, prenez un papier, un crayon et oubliez l'ordinateur…
Allez hop ! Foncez !

Je connais ces sites. Je lis bouquin sur bouquin, je fais de la veille tous les jours, et je vais continuer. Bookmarks publics

Je viens de relire votre post, et c'est bien qu'il me semblait. Il n'y a rien de positif, rien de bien fait selon vous. Dommage. J'entends qu'il me manque encore pas mal de choses au niveau DA, pour le reste, je vous souhaite une bonne journée.

Cordialement.

Victor

EDIT : Merci pour votre retour. Je n'ai pas la prétention d'être un DA, l'idée était de me présenter simplement et le processus utilisé pour améliorer/optimiser l'expérience utilisateur sur différents sujets. Vos retours m'ont blessé vu le temps passé (et l'envie de bien faire).
Modifié par KatOun (20 Nov 2015 - 11:42)

Re,

Désolé que mon commentaire ait été perçu de façon un peu trop directe. Ce n'est pas le but.

Si je me permet de vous dire que ce site est trop light en terme de design (je ne parle que de design, pas de DA), c'est vraiment parce que certains composants de base du design sont mal gérés, voir sont manquants. Savoir écouter les critiques argumentées, même vertes, peut aussi aider à avancer. Si cela reste dans un esprit de partage et de respect, bien entendu. Et vous avez tout à fait le droit de les réfuter. Mais ce n'est pas un match.

Même si je n'ai pas cité le mot, si vous relisez bien , je parle d'ergonomie sur de nombreux points. Le travail de typo, la cohérence graphique, c'est la base de l'ergonomie. Et même avant ça, c'est la base du design.
Le design graphique (dont le webdesign fait partie), c'est 90% de travail de typographie.

Je vais pas tout réécrire, mais pour reprendre le point de la typo. Désolé, mais il a pas de cohérence, c'est brut de décoffrage, et on a échappé à l'Arial et à la comics de peu. Chaque police a un style, une histoire, un sens. Si on mélange des styles antinomiques, qu'on ne construit pas, qu'on ne hiérarchise pas, qu'on a pas de ligne directrice, tout part dans tous les sens. Et à la place d'une maquette équilibrée et lisible, on a du remplissage.
Désolé, mais entre la script du nom, la redondance du nom dans une autre police sans serif dans un style opposé (non complémentaire), la police serif de la fonction, le retour du sans serif pour le titre, des titres de paragraphes un coup calés à gauche un coup alignés par 2, avec le dernier chapitre qui tombe platement sur le côté gauche de la page… Non, désolé mais ce n'est pas possible, et si votre prof vous appuie dans cette direction, ça s'engage difficilement.

Si en plus, le travail graphique se limite à quelques pictos assez pauvres et convenus, on se retrouve avec un template standard, interchangeable, sans personnalité. D'autres avis vont dans ce sens.

Allez voir sur Wix, sans parler du code de ce type de CMS souvent alambiqué, de nombreux templates on vraiment de la gueule. Voir même sont très jolis et efficaces.

Pour la photo, manque de bol, j'ai l'impression qu'il manque les policiers et les pompiers. Probablement à cause du style. Un style moins "reportage" aurait mieux résisté à tout rapprochement. Photo noir et blanc, grisée, couleurs stylisées, bichromie, patte Instagram… ou une illustration (qui se décline dans les pictos).
C'est l'occasion de réfléchir sur un vrai concept, une vraie idée, et une palette de coloris qui va avec.

Je note aussi que votre amis qui a soumis un autre site, a fait un travail plus abouti en terme de design, d'ergonomie, de typo, d'illustration, même s'il a conçu un template simple. Le but n'est pas de réinventer le design, mais au moins d'en appliquer les bases. Avec un petit quelque chose de personnel.

Oui je sais, je suis méchant !

Ben en fait non.

Maintenant je ne remet pas en question le travail d'intégration. Vous avez visiblement de bonnes bases, probablement meilleures que les miennes. Mais il est mentionné UX Designer dans l'intitulé du site, et c'est le thème de cette partie du forum. Donc je vous ai parlé du design de votre site.

Pour l'aparté à propos de l'école en question. Étant déjà pro en graphisme, j'ai juste suivi une formation technique courte pour les professionnels (intégration). Sous l'appellation design ou graphiste, ils préparaient plutôt à l'éxé. Les élèves talentueux, présentés en vitrine, l'étaient déjà avant d'intégrer la formation, en fait très/trop axée sur les outils et la technique, pas assez sur le cœur de métier. Des stagiaires chinois qui parlaient 3 mots de français (et encore), du coup j'ai du "former" ma voisine en essayant de lui retranscrire ce que je pouvais. Etc. Sans parler des "Master DA" dans les formations longues, qui sont un non sens puisqu'on devient DA uniquement après avoir exercé en tant que graphiste ou concepteur (je sais pas si ça existe encore). Ou des formations dév. qui préparaient en réalité des intégrateurs (et encore… ). "Développeur" avec environ une semaine de PHP et deux de JavaScript, il faut oser…
Pour conclure, des élèves qui se voyaient félicités par les formateurs (aspect technique), pour se faire allumer au final. Et les réalisations en équipe, avec certains qui laissaient les autres tout faire ou qui portaient les projets à eux seuls. Une vraie loterie…
Et pour les tarifs, le prix d'une bagnole, voir d'une berline selon les cas. Là dessus, ils sont au top.
Modifié par spongebrain (20 Nov 2015 - 14:20)

spongebrain a écrit :
Re,

Désolé que mon commentaire ait été perçu de façon un peu trop directe. Ce n'est pas le but.

Si je me permet de vous dire que ce site est trop light en terme de design (je ne parle que de design, pas de DA), c'est vraiment parce que certains composants de base du design sont mal gérés, voir sont manquants. Savoir écouter les critiques argumentées, même vertes, peut aussi aider à avancer. Si cela reste dans un esprit de partage et de respect, bien entendu. Et vous avez tout à fait le droit de les réfuter. Mais ce n'est pas un match.

Dans cette logique là, vous avez toute mon attention.

spongebrain a écrit :
Même si je n'ai pas cité le mot, si vous relisez bien , je parle d'ergonomie sur de nombreux points. Le travail de typo, la cohérence graphique, c'est la base de l'ergonomie. Et même avant ça, c'est la base du design.
Le design graphique (dont le webdesign fait partie), c'est 90% de travail de typographie.

Je vais pas tout réécrire, mais pour reprendre le point de la typo. Désolé, mais il a pas de cohérence, c'est brut de décoffrage, et on a échappé à l'Arial et à la comics de peu. Chaque police a un style, une histoire, un sens. Si on mélange des styles antinomiques, qu'on ne construit pas, qu'on ne hiérarchise pas, qu'on a pas de ligne directrice, tout part dans tous les sens. Et à la place d'une maquette équilibrée et lisible, on a du remplissage.
Désolé, mais entre la script du nom, la redondance du nom dans une autre police sans serif dans un style opposé (non complémentaire), la police serif de la fonction, le retour du sans serif pour le titre, des titres de paragraphes un coup calés à gauche un coup alignés par 2, avec le dernier chapitre qui tombe platement sur le côté gauche de la page… Non, désolé mais ce n'est pas possible, et si votre prof vous appuie dans cette direction, ça s'engage difficilement.

Si en plus, le travail graphique se limite à quelques pictos assez pauvres et convenus, on se retrouve avec un template standard, interchangeable, sans personnalité. D'autres avis vont dans ce sens.

Vous avez raison sur l'importance de la typographie.
Concernant le logo, j'ai fait plein d'esquisses (pour une forme avec en jouant sur l'espace négatif) qui ne me satisfaisait pas, du coup j'ai mis celui-ci "en attendant" mais je comprends l'argument formulé de cette façon.
Pour le reste des remarques sur la typo, je vais vous faire confiance et continuer à me remettre en question. Je suis d'ailleurs en train de lire ce bouquin en ce moment Typographie pour le web, ça tombe bien. Pour les picto, je n'ai pas de compétences en illustration donc c'est vrai que je suis allé les chercher sur une base de données, mais le choix était réfléchi.

spongebrain a écrit :
Pour la photo, manque de bol, j'ai l'impression qu'il manque les policiers et les pompiers. Probablement à cause du style. Un style moins "reportage" aurait mieux résisté à tout rapprochement. Photo noir et blanc, grisée, couleurs stylisées, bichromie, patte Instagram… ou une illustration (qui se décline dans les pictos).
C'est l'occasion de réfléchir sur un vrai concept, une vraie idée, et une palette de coloris qui va avec.

J'entends votre point, et j'étais initialement parti sur du noir et blanc, mes retours utilisateurs m'ont souligné le fait que ça faisait trop terne, du coup, j'ai fait évolué différemment. A tort semble t il, mais ok pourquoi pas.

spongebrain a écrit :
Je note aussi que votre amis qui a soumis un autre site, a fait un travail plus abouti en terme de design, d'ergonomie, de typo, d'illustration, même s'il a conçu un template simple. Le but n'est pas de réinventer le design, mais au moins d'en appliquer les bases. Avec un petit quelque chose de personnel.

On a 8 ans d'expérience de différence, heureusement j'ai envie de dire

spongebrain a écrit :
Oui je sais, je suis méchant !

Ben en fait non.

Votre premier post m'a un peu énervé, mais avec celui-ci, je suis réceptif à vos critiques constructives. (Un peu de forme et toute de suite, ça passe mieux ! ). En tout cas, c'est chouette d'être revenu dans cette dynamique, et merci encore pour le retour. Je vais prendre en considération vos remarques, et le faire évoluer.

Bonne continuation.

Victor
Modifié par KatOun (20 Nov 2015 - 14:16)

KatOun a écrit :

Pour le reste des remarques sur la typo, je vais vous faire confiance et continuer à me remettre en question. Je suis d'ailleurs en train de lire ce bouquin en ce moment Typographie pour le web, ça tombe bien.

Si vous pouvez nous faire un rapide retour sur ce livre, je suis preneur.

Chapitre 1 : L'expérience de lecture
Chapitre 2 : Les rouages de la typographie
Chapitre 3 : Evaluer une police
Chapitre 4 : Choisir et associer des polices
Chapitre 5 : Systèmes typographiques
Chapitre 6 : Composition

J'en suis au chapitre 3, et j'apprends plein de choses donc mon expérience est plutôt bonne.
J'imagine que le Chapitre 4 m'aidera à corriger certaines incohérences que vous avez souligné.

edit :
En parallèle, je lis (relis) celui ci sur les bases du design graphique les fondamentaux du design graphique, et celui-ci pour les logos logo et identité visuelle. Il y a celui-ci méthodes de design ux sur les méthodes UX écrit par une de nos intervenantes de qualité.
Je suis preneur d'ouvrages intéressant si vous en avez à partager.

P.S : concernant l'école multimédia, ma formation ne me coûte rien grâce à un contrat de professionnalisation. Je suis au courant des tarifs plutôt cher pour la formation que vous avez suivi, celle que j'ai payé de ma poche sur un prêt est celle de l'IESA, et je ne la regrette absolument pas.
Modifié par KatOun (22 Nov 2015 - 18:25)

http://forum.alsacreations.com/topic-9-77453-1-RechlivresurTypographieweb.html

Modifié par spongebrain (22 Nov 2015 - 13:07)

C'est vu