[intermédiaire] Site-CV rédactrice et webdesigner... le retour!

Bonjour à toutes et à tous,
Je reviens aujourd'hui avec une "V2" de mon site-CV qui a pour but de présenter mon parcours.
Il s'agit donc d'une nouvelle version, dans laquelle j'ai tenté de mettre en application de nombreux conseils que vous m'aviez donnés sur la 1re version, il y a presque un mois.

Certaines choses n'ont pas changé (le site est tjs en Ajax, il faut tjs avoir JS activé, etc.), mais c'est voulu
En revanche, pour ceux qui avaient déjà commenté le 1er post (merci encore!), voici un résumé des changements :
- Les polices (elles changent et elles sont moins nombreuses ; deux seulement)
- Le fond
- Les cubes (couleurs, texte et donc police)
- L'effet "hover" sur lesdits cubes (plus visible)
- Les cocottes (moins nombreuses + couleurs changées)
- Le texte d'accueil (fond et forme)
- Le bouton retour "accueil" (en fixe pour être tjs visible)
- Les puces dans les textes ainsi que les flèches de navigation dans le book et la galerie (extrapro)
- Les ombres
- Le contenu du book graphisme
...

En plus de vous demander votre avis global, j'aimerais également avoir votre sentiment sur un point précis : le site est responsive et j'ai implémenté pour la version smartphones (640px de large) un effet de "swipe" pour la galerie (extrapro) et la partie book. Pensez-vous qu'il faille que je change les flèches de navigation (qui fonctionnent au demeurant, mais sont loin d'être faciles à cliquer sur cette petite version)? Que j'indique, par un moyen quelconque, qu'il est possible de "balayer l'écran" pour passer au suivant/précédent?

Je vous remercie, une fois encore et avant même de lire vos éventuelles nouvelles réponses, parce que je suis contente de cette V2 et de ce que j'ai pu apprendre, et c'est en grande partie grâce à vous.

L'adresse (toujours temporaire... ^^) : http://webdesign2.mbaudlot.com/

A très vite !

Bonjour,

Le menu en cube est complètement impossible à naviguer au clavier, pas de hover, pas de lien (!)...

Ma visite s'arrête donc là : sans être handicapée (vis-à-vis de l'utilisation d'un ordinateur), je dois porter une atèle au poignet qui rend l'utilisation de la souris plus douloureuse que celle du clavier...

Le handicap (permanent ou temporaire) est partout et parfois là où on ne s'y attend pas; ton menu va te priver de certains utilisateurs (il suffit de visiter le site au mauvais moment).

C'est dommage, je design est mignon.

Bonjour,

hormis l'accessibilité, personnellement je trouve le site plutôt original et bien fait, l'idée des cubes pour enfants et des cocottes est simpa.

quelques remarques tout de même :
- le mouvement de recul des cubes quand on passe de la page d'accueil à une autre page fait un peu bizarre
- l'ombre des cubes est trop peu prononcée
- sous chrome certains caractères se chevauchent dans le texte
- l'éclairage et la couleur des cubes fait "cartoon" alors que le parquet à l'air "vrai" ce qui dénote un peu
- le fichier "http://webdesign2.mbaudlot.com/images/cocotte1_ombre1.png"" n'existe pas, çà génère une erreur
- les fichiers .js ne sont pas zippés, çà permettrait de gagner en temps de chargement
- le cache n'a pas l'air bien réglé, quand on recharge la page tous les fichiers js, images ... sont rechargés, c'est pas bon pour la réactivité, la consommation de ressources et donc pour la planete (voir livre sur l'éco-conception présenté sur Alsacreations il y a quelques semaines)
- les images des cubes ne peuvent-elles pas être regroupées pour faire une seule image ?
- tu redéfinis une fonction AJAX dans myajax.js alors que jquery est présent dans tes scripts quelle est l'utilité ?

Voilà, j'éspère que çà t'aideras un peu a perfectionner ton site.

Si tu as 5 min, moi de mon coté je recherche de l'aide ou au moins un avis sur le design de mon site
idsortie ainsi que la nouvelle mouture sur laquelle je travaille idsortiedev, si tu as un avis ou des recommandations "d'experte" en design ce serait simpa.

Bon WE.

Bonjour Marie,

Cette version 2 est pour moi une jolie surprise ! C'est mieux construit, plus propre, plus soigné, plus contrasté, plus graphique, plus typo, plus pro… Toutes les critiques constructives qui ont été faites sur la version 1 ont été prises en compte avec intelligence. Je trouve ce site vraiment sympa, bravo !

Je ne regrette pas ma longue critique sur la v.1 ! Il y a eu du boulot depuis. Le fond parquet et vieux mur est une bonne idée, c'est bien réalisé.

Quelques remarques/suggestions de finition, pour la forme :

• Les rubriques comme "Projet professionnel" ou "Formation continue", on du texte un peu collé aux bords du bloc clair. Il y a assez de place pour décoller du haut le titre et les paragraphes. L'espace entre les paragraphes est variable d'une rubrique à l'autre. Attention, trop d'éléments soulignés (liens…).

• Un truc qui me titille, c'est ce halo lumineux qui sort du carton, y compris du plis, et qui s'arrête avant le haut. Là il faut faire un choix. Soit le halo est plus réaliste, ce qui risque de compliquer la tâche pour la mise en page, soit il reste rectangulaire, ce qui casse l'effet "carton lumineux". Ce font clair est trop blanc ou pas assez, le choix d'une typo light n'aide pas sur ce type de fond. Peut être un compromis, comme un halo de lumière beaucoup plus flou, ce qui évite de se galérer avec le placement. Ou alors complètement net, comme sur la page d'accueil ? Plus réaliste ou plus graphique, Il y a un truc à trouver, je suis sûr que vous allez y arriver.

• Le texte de contenu light et "rond" luttent un peu avec la typo étroitisée des titres. Peut être une typo de texte plus simple ? Moins marquée, pour ne pas entrer en confrontation avec la typo des titres ?

• Il y a eu du ménage dans votre portfolio graphique et c'est une bonne chose, mais vous démontrez par ce site que vous avez un potentiel supérieur aux travaux présentés.

• La rubrique "extra professionnel" est bien vue. Il y a de très bonnes choses. C'est bien de dissocier les réalisations professionnelles commerciales, et les réalisations artistiques perso. Je découvre que la jolie photo de votre avatar est en fait un pastel. Le nom de cette rubrique n'est pas très explicite. Peu être "Dessin", ou "illustrations"… à vous de trouver. La mention "extra" peut être placée par dessus comme un sticker, comme une rubrique bonus ? Il serait dommage que les visiteurs ratent cette rubrique.

• La rubrique contact est à optimiser selon moi. Le pola du portrait est sympa, mais l'enveloppe d'adresse ne fait pas réaliste (les bandes sur les côtés, bof), le timbre est bizarre, le post-it dans une couleur qui n'est pas celle d'un post-it, la cocotte derrière l'enveloppe inutile. Le lien téléchargé mon CV est moyennement amené. Bref, la mise en page de cette page est décousue, avec des rendus graphiques qui dénotent comparé au reste du site. À composer de façon plus simple.

• Les couleurs fonctionnent plutôt bien. Si les éléments ont un côté "ajouté" avec un style illustré posé sur un fond très réaliste, ça ne me gène pas du tout. Au contraire.


J'espère que ce site donnera du résultat et vous aidera à trouver un taf (en ce moment c'est chaud !). En tout cas il montre que vous avez quelques cordes à votre arc.
Voilà pour moi. Et encore bravo !

Bonjour à tous,
Merci pour vos réponses.

@Laurie-Anne:
En effet, la navigation au clavier est un élément important, vous avez raison, et je vais revoir mon code pour que les cubes puissent être atteignablent en tabulation, à la façon des "liens internes" (dans le texte d'accueil).

@Zebrou:
L'erreur d'img était un oubli de ma part (la "cocotte1" ayant disparu de la V2, le code html était resté par mégarde), c'est corrigé.
Pour les "optimisations" de perf, je suis sur une version temporaire; lorsque je mettrai réellement en production, je prendrai vos recommandations en compte.
Enfin, pour la fonction myajax, c'est loin d'être optimisé, en effet, mais le but était pour moi d'apprendre à m'en servir (c'était une première pour moi), et coder cette fonction a été un point important de cet apprentissage.

Pour votre site, (la nouvelle mouture) je ne sais pas à quel point le projet est abouti, à quelle phase vous en êtes (les liens et filtres ne marchent pas, on arrive sur Toulon par défaut sans pouvoir changer, etc)? Est-ce la page d'accueil ?
Donc uniquement sur le design (même si je ne suis pas une experte, entendons-nous bien ) et en admettant que ce soit la page d'accueil:
- Je la trouve un peu chargée. Pour chaque événement, j'aurai plutôt vu la ville en caps et le titre de l'événement en minuscules pour une meilleure lecture.
- Pour les autres catégories (sorties, resto etc), le lien "fiche détaillée" est trop omniprésent à mon goût, les différents éléments pas assez séparés les uns des autres (on a du mal à les distinguer) et, de plus, peut-être faudrait-il une taille fixe pour tous les éléments, pour les aligner et avoir un côté moins fouilli, le reste des infos pouvant être dans la fiche détaillée?
- Pour les infos et les textes, il y a peu d'éléments qui resortent (un peu de gras pour les dates p-ê?). Il faudrait aussi voir si tous les titres sont en caps ou non et harmoniser le tout.
- Enfin, pour le menu je trouve étrange la petite marge seulement à gauche où le bleu au survol vient se placer: des deux côtés ou la supprimer? Voilà, sinon graphiquement c'est très simple, peu-têtrre un peu trop à mon goût. Côté couleurs, on pourrait imaginer une couleur différente par catégories? Et peut-être un logo simple pour IDSORTIE.FR, au lieu d'un simple texte, pour habiller un peu la page?
Voilà, je suis loin d'être une experte comme je le disais, mais j'esprèe que ça pourra vous aider. Pensez peut-être à poster dans cette même rubrique pour avoir des conseils?

@ spongebrain :
Merci infiniment pour cette réponse qui me fait vraiment plaisir Et merci d'avoir, une fois de plus, pris le temps de regarder ces cubes
Pour le bg du texte sur les cubes ouverts, en effet je pense que je vais l'emmener jusqu'en haut, c'était une hésitation dès le départ pour moi; je vais faire des tests et voir ce qui peut être fait.
La rubrique Contact est la seule que je n'ai pas touchée et j'ai hésité! Voilà donc qui me donne "l'excuse" pour le faire ! Je vais essayer de faire plus simple en effet.

Bref, après ces quelques finitions, j'espère aussi que ces petites cocottes me porteront chance pour trouver un job et apprendre, apprendre et apprendre encore

Merci pour les conseils, effectivement la nouvelle version de mon site n'est pas vraiment fonctionnelle, c'est une maquette quasi-statique, je posterais une "demande d'avis" dans ce même forum quand j'aurais un peu avancé ...

Désolé d'avoir un peu pollué votre post initial ...

Autre petites remarques
- sur votre site, j'ai une erreur Javascript lors du redimentionnement de la fenetre :

onclickAccueil is not defined

- les modifications de design en fonction des tailles de fenêtres (CSS media queries) devraient prendre en compte la hauteur de fenêtre aussi, et surtout la hauteur car votre contenu est quasiment aussi haut que large.

Pour l'erreur JS, je l'ai vu également, je ne suis pas sûre de savoir comment la corriger, mais c'est dans "ma liste".
En revanche, pour les différentes tailles en responsive, c'est totalement volontaire: le but étant de conserver un aspect carré (sauf pour la version 640px, smartphones, qui reste plutôt en longueur).

Merci pour votre retour!

Bonjour,

je n'ai pas vu l'erreur JS par contre j'ai quelques commentaires sur la microtypo, mise-en-page, et détails d’intégration. Ce sont des détails mais quand on veut se vendre en tant que pro, autant éviter les impairs:

– Points de suspensions: Le charactère … est plus adapté qu’une suite de trois points : ...

– «HTML, CSS, JavaScript... Autant de compétences techniques auxquelles je me suis formée». Ici les points de suspensions ne ferment pas une phrase finie, mais sont plutôt utilisés comme une virgule ou un point-virgule. Donc «autant» ne prend normalement pas de majuscule.

a écrit :

[…]afin de pouvoir réellement "parler web".[…]
[…]en JavaScript de la collection “Head First” de O’Reilly[…]

Ici on a une fois des guillemets «techniques», ou «droits»: ", et une autre des guillemets anglo-saxons. Le guillemet français est sous forme de doubles-chevrons: « et ».

– L'interligne de 19px pour un texte de 16px (textes courants) est très faible, ce donne un rapport de 1.1875. À 16px et avec cette typo, le texte devient agréable à lire à partir de 1.4. Les soulignements dans le texte des liens augmentent encore l’illisibilité avec cet interlignage. Ce ne serait d’ailleurs pas un mal de penser à travailler en em.

Ce code

<li class="li-formation_continue" id="li1" style="background-color: rgba(63, 51, 43, 0);">Passion, motivation et ténacité
<p>Habituée à l’organisation et à l’autodiscipline que demande mon premier métier de rédactrice pigiste, je me suis créé un programme d’études dès janvier 2013. Livres, cours en vidéo, tutoriels et sites spécialisés ont été mes&nbsp;outils. <br>J’ai également suivi des cours particuliers dispensés par un développeur professionnel. <br>En parallèle, j’ai entrepris <a class="liensinternes" id="atbook-hover" title="Book" href="#">plusieurs projets</a> pour mettre en œuvre ces connaissances fraîchement acquises et continuer mon apprentissage.</p>
						</li>

il manque le titre et les paragraphes, une version plus sémantique:

<li class="li-formation_continue" id="li1" style="background-color: rgba(63, 51, 43, 0);">
<hX>Passion, motivation et ténacité</hX>
<p>Habituée à l’organisation et à l’autodiscipline que demande mon premier métier de rédactrice pigiste, je me suis créé un programme d’études dès janvier 2013. Livres, cours en vidéo, tutoriels et sites spécialisés ont été mes&nbsp;outils.</p>
<p>J’ai également suivi des cours particuliers dispensés par un développeur professionnel.</p>
<p>En parallèle, j’ai entrepris <a class="liensinternes" id="atbook-hover" title="Book" href="#">plusieurs projets</a> pour mettre en œuvre ces connaissances fraîchement acquises et continuer mon apprentissage.</p>
</li>

en remplaçant le X de <hX> par le chiffre qui va bien.

http://webdesign2.mbaudlot.com/#experience/ a écrit :

Médias : Deco.fr (2013), Usineadesign.com (2011-2013),
Mr-bricolage.fr (2011-2013), Voyages.orange.fr (2010-2013),
Culturclub.com (2008-2011), Hachette (2007), AchatVIP.com (2007), Categorynet.com (2007), Psychonet.fr (2006).

C'est dommage de donner les liens en textes mais pas en lien

P.S.: J’aime beaucoup les peintures! Joli travail.

@kustolovic : Merci pour votre réponse.
- Au sujet des guillemets, j'ai l'habitude d'utiliser les français pour les noms d'oeuvres et les citations et les anglais pour les mots étrangers ou mis entre guillemets à proprement parler. J'ai essayé d'harmoniser tout ça, néanmoins, et pris en compte vos remarques sur l'intégration, merci encore.
- En ce qui concerne l'em, figurez-vous que j'ai démarrer avec cette unité et que j'ai changé mon fusil d'épaule lorsque j'ai vu le résultat sur l'ordi de mon père (qui a réglé sa typo par défaut à + de 16px)! Ce n'est pas forcément la bonne pratique, mais pour ce site-là, avec un design disons particulier, j'ai préféré une taille fixe.
- Enfin, pour les liens dans la partie pigiste d'Expérience, je n'ai pas voulu surcharger avec autant de liens, surtout que dans le book/éditorial il y en a un certain nombre, de surcroît plus précis.

Après les derniers changements (navigation au clavier (même si elle n'est pas top, elle existe ^^), bg du texte changé et partie Contact modifiée, notamment), voilà finalement la version définitive qui voit le jour (à la véritable adresse: www.mbaudlot.com).

Merci encore pour vos commentaires et votre aide! J'espère pouvoir être rapidement en mesure de rendre la pareille !