[Amateur] Mon portfolio pour une recherche de stage

Bonjour, je suis actuellement étudiant en 2ème année de DUT MMI (Métiers du Multimédia et de l'Internet). J'ai un stage de 10 semaines à faire à partir de Janvier, c'est pourquoi j'ai créé mon propre site internet pour y rassembler et présenter mes créations, mon CV etc.

http://www.jorisbrianti.fr/

J'aimerai donc avoir vos avis sur le design ainsi que les fonctionnalités, tout ce qui pourrait être modifier et même ajouter

Merci d'avance !
Modifié par JorisB (07 Oct 2014 - 12:03)

Salut !

C'est pas mal !
Je en suis pas entré dans le code donc je laisse ce soin à d'autre.
C'est light mais il y a juste ce qu'il faut et c'est responsive
Manque peut être un lien vers viadeo/linked in ?

Pour ce qui est du design :
- j'aime bien la page d'accueil mais sur mon 24' ca fait un peu quiché au centre (un peu d'air sur le bouton et ton statut)
- un titre en face des points/menus sur la droite pour savoir ou aller ?
- Les gouts est les couleurs c'est très différents hein, pour moi les 4 couleurs que t'as pris ne vont pas super bien ensemble, on passe un peu du coq à l’âne sans vraiment coller une couleur précise a ton "image de marque"
- l'effet glossy blanc au survol je suis pas fan du tout (autant l'ombre sombre sur les titre passe bien) et le hover du bouton ne se vois pas super bien...
- Le formulaire de contact : il est trop large (toujours sur mon 24') et avec les label centrés et les input aligné a gauche la lecture est ultra difficile. De plus on ne distingue pas tes champs (pas de background juste des lignes) et la largeur accentue encore plus cet effet on ne sait plus bien quelle est la ligne de l'input.
- La validation du formulaire foire complet changement de vue + click pour recommencer (pas fonctionnel en plus). Tu t'es un peu trop lâché de ce coté là !

Hop je passe au rapidement au CV pour une seule petite remarque concernant les jauges, à première vue, le blanc capte direct l'attention et on a l'impression que c'est le blanc qui remplie la jauge alors que c'est la couleur en foncé (si j'ai bien compris). Le contraste le plus fort devrait se faire avec la couleur qui rempli et non avec le vide..

Sinon t'es sur la bonne voie
Bonne continuation !

Merci beaucoup pour ces précieux conseils ! C'est super important pour moi d'avoir des avis car quand on y a passé du temps, c'est difficile de regarde ce que l'on fait avec un oeil extérieur et ducoup, d'arriver à voir les défauts

J'attends bien entendu d'autres avis/critique

Bonjour,

Tests réalisés sur iPad via safari.

1/Le formulaire de contact ne semble pas protégé du bombing.
Tu as du recevoir un ou plusieurs mail(s) contenant un nom, un email et un mot un peu bizarre. Genre ghg, gg,hg etc...

Le bombing est une chose qui n'arrivera certainement jamais sur ton site perso, mais je pense qu'il est important de s'assurer que l'utilisateur entre une adresse de messagerie valide. En la renseignant deux fois par exemple. Car une erreur de frappe est vite arrivée.
Imagine le recruteur de tes rêves qui te contact, mais qui commet une erreur dans l'email. Tu ne pourras pas lui répondre et lui pensera que tu ne prends pas le temps de répondre.

Sinon, après validation du formulaire, on fait comment pour le recharger? Quand j'actualise, que je renvoi le formulaire ou non, j'ai toujours le message de succès.

2/ Attention aux fautes d'orthographe. Notamment sur le détail du Drift Trike Bourgogne.

3/ je partage l'avis de Laurent sur ton CV.

Voilà voilà. J'aime bien le principe du site soft et efficace.
Modifié par Alexbass (08 Oct 2014 - 17:16)

C'est pas mal. Je te conseille un peu de lecture si jamais, ca peut aider, sur mon blog concernant le web, et les demandes de stages.

Merci encore pour vos réponses !
Pour le formulaire, je l'ai améliorer un peu ! En effet ce n'était pas le top avant !

D'autres avis sont les bienvenus

Hey, c'est encore moi.

Et je reviens sur ton formulaire

Il y a des messages qui indiquent à l'utilisateur d'inscrire une adresse email valide, de mettre un nom avec au moins deux caractères. C'est cool, mais un coup c'est en français et un coup c'est en anglais.


Modifié par Alexbass (08 Oct 2014 - 21:36)

Oups
Voilà c'est corrigé, merci de l'avoir signalé

salut,
et puis vu qu'on est dans les formulaires, penser à contrôler le redimensionnement des <textarea> via la propriété "resize" si non, ça ne fait pas très pro.

D'accord merci pour ce conseil
Modifié par JorisB (11 Oct 2014 - 15:29)

Bonjour Joris,

Juste qq remarques.

Bonne idée que de faire un site monopage. Le bleu du haut fait un peu Microsoft, à retoucher ? Un poil plus foncé et plus indigo ?

After Effects n'est pas un logiciel de PAO (publication assistée par ordinateur). Peut être vaut-il mieux parler des outils de création Adobe plutôt que de PAO qui ne s'applique qu'à certains logiciels.

Des liaisons à revoir ? "…je suis originaire de Le Creusot, mais je suis actuellement à l’IUT de Dijon…", écrivez plutôt "…je suis originaire du Creusot. Actuellement à l’IUT de Dijon…", ou bien enlevez la mention au Creusot, pas indispensable…

Équilibrez les interlignes et les espaces verticaux. Et certains éléments semblent mal centrés.

Évitez certaines formules malheureuses qui peuvent donner l'impression que vous vous vantez :
" me donnant à ce jour un certain niveau dans ces différents domaines". Sauf que vous avez beaucoup à apprendre aussi bien en graphisme qu'en développement. La vidéo "BidJokers" en est la démonstration, si ça fonctionne techniquement, toutes les bases du design restent à apprendre (graphisme, couleur, typographie, illustration, concept, équilibre… ). Parlez plutôt de votre envie de continuer sur cette voie dans un but de professionnalisation.
Si vous choisissez le cap "Graphiste" il faudra beaucoup travailler le dessin et le style, c'est long et laborieux mais ce sont les bases. Le graphisme ne s'apprend pas avec des tutoriels, il faut avant tout acquérir une base artistique solide, ce qui prend des années. Attention le secteur est bouché et il existe beaucoup d'écoles bidons, sans parler des entreprises qui abusent des stages…
Idem pour le développement web qui demande une compréhension approfondie des langages qui va bien au delà de quelques tutoriels.

Attention à la police de caractère, les associer est une tâche délicate. Il faut que les styles se complètent et/ou s'assemblent. Là la typo script des titres a un petit côté fifties. Alors que la police étroite choisie pour le paragraphe de présentation (fond bleu) a un style techno qui fait années 90. Donc les deux styles luttent et créent un manque d'harmonie. Quand on utilise une police typique, il faut bien choisir la police de complément pour qu'elle aille avec ou ne lui fasse pas concurrence. Souvent on choisit une police neutre pour ne pas alourdir. Là je pense qu'il suffirait de reprendre la police qu'on trouve dans "télécharger mon CV" et dans le formulaire. Surtout qu'il est déconseillé de choisir plus de 2 polices, sauf cas particulier. La tendance est d'aller vers la simplicité :
http://fr.slideshare.net/philipperondepierre37/web-designtendances2015-38916551

Le filet autour du portrait ne me semble pas indispensable.
Le formulaire de contact n'est pas centré et il manque la mention des champs obligatoires.

Attention aux incohérences. Pour le logo "Game Over" la charte graphique présente un logo différent, que je préfère d'ailleurs car moins lourd et plus élégant que la version avec le rond rose et les éléments qui frôlent la surcharge. C'est un peut comme si Renault présentait sa charte avec le logo Peugeot…
De plus un logo doit toujours avoir un bord tournant pour le laisser respirer, donc soit vous enlevez ce disgracieux cadre blanc qui colle au logo, soit vous l'accentuez pour laisser suffisamment de marge. Et ne choisissez qu'une variante du logo quitte à en enlever.

Globalement, un site avec des atouts techniques, la volonté de faire et d'apprendre. Les maladresses peuvent passer vu votre âge mais pour avancer, il faudra vous former avec des professionnels et des enseignants, en mettant un peu de côté les tutoriels pendant un temps.

Voilà pour moi,
En attendant la suite ?

Merci pour ces précieux conseils

J'ai modifer les couleurs et modifier quelques éléments, car en effet je trouve qu'il mannquait quelque chose ! Des avis ?

http://www.jorisbrianti.fr/
Modifié par JorisB (12 Oct 2014 - 14:04)

Salut,

Rapidement :
* il manque le doctype (soit dit en passant, ton code n'est pas valide, même en HTML 5) ;
* il vaut mieux que tout code JavaScript se trouve dans un fichier JS externe plutôt qu'en ligne, idem pour les CSS ;
* il faudra que tu apprennes, à terme, à être moins feignasse en renonçant à utiliser Bootstrap (si tu connais ce framework CSS, tant mieux pour toi : c'est toujours une corde à ton arc) ;
* dans ton portfolio, la valeur de l'attribut alt de chaque image n'est pas du tout pertinente (« img01 ») ;
* un bouton de fermeture d'un bloc ne se code pas avec un span : si j'ai le bras cassé et que je navigue avec le clavier (au moyen de la touche de tabulation), je ne pourrai pas fermer ;
* vire ta photo : l'apparence physique n'est pas un critère discriminant dans nos métiers.

Mes remarques concernant le code sont peut-être rudes ; mais, n'oublie pas qu'en postulant, tu auras affaire à des gens chevronnés en matière de code et qui n'hésiteront pas à jeter un œil à ton code pour voir s'il est de qualité. Penses-y.

Bon courage dans tes recherches.

Re,

Je trouve que ça passe mieux, notamment au niveau de la police de caractères et des couleurs. Même si certains points mentionnés n'ont pas encore étés optimisés. La différence entre un site loupé et un site réussi se joue souvent dans les détails.
Les couleurs bariolées et la Times des thermomètres passent mal. Faites plus simple et enlevez les chiffres. Il vaut mieux rester dans le flou pour ce type d'info, chacun n'ayant pas les mêmes critères et le même niveau d'appréciation. De plus si vous indiquez un excellent niveau dans un langage ou un logiciel et que votre site prouve le contraire, ça peut être contreproductif.

Il ne faut pas mélanger les outils techniques (dont les bases s'apprennent facilement avec des tutoriels en effet) et la connaissance d'un langage ou d'un art appliqué, qui demandent des aptitudes, des années de formation et de pratique. C'est toute la différence entre les amateurs et les pros.

L'article d'edenpulse est instructif et bien vu.

Plutôt que "Linguistiques", mettez "Langues" qui est plus approprié.

Victor BRITO a écrit :
* vire ta photo : l'apparence physique n'est pas un critère discriminant dans nos métiers.

En même temps on voit bien qu'il ne s'agit pas d'un site de rencontre !
Pour la photo, je pense qu'il faut laisser à chacun la liberté de la mettre ou pas. Elle donne des informations autres que l'apparence physique, comme le jeune âge du candidat qui a ici toute son importance pour une recherche de stage. Avant même de lire, on le positionne immédiatement comme étudiant. Ça peut donner de l'indulgence au recruteur qui passerait au candidat suivant s'il s'agissait d'une personne plus âgée à ce niveau.
De plus ici, le design du header s'articule autour de la photo, avec une partie professionnelle et une autre plus personnelle. Là si on enlève la photo, c'est tout le design du site qu'il faut revoir. C'est une approche plus empathique qu'un CV basique, et qui peut fonctionner.

Sur les réseaux sociaux professionnels (LinkedIn, Viadeo… ), les profils avec photo sont beaucoup plus visités et il est recommandé de la mettre, quelque soit le type de profil. Même pour des ingénieurs ou des cadres techniques… Un profil sans photo pourra être considéré comme "suspect". Ce qui n'est pas forcément le cas sur un CV papier.

Pour le reste de tes remarques, j'applaudis des 2 mains !
Modifié par spongebrain (13 Oct 2014 - 15:00)

@spongebrain L'argument de l'âge ne me convainc pas : imagine une personne qui a 40 ans et qui a décidé de se reconvertir.

Pour le reste, j'aurais dû nuancer mes propos sur la photo, en disant que cette dernière est parfaitement acceptable, voire recommandée, sur LinkedIn et Viadeo, nous sommes d'accord.

Bonjour,

Je trouve que c'est un très beau travail pour un novice ! Ce qui me gêne cependant et comme l'on relevé également mes compères, c'est votre barème de niveau de compétence. Sur quoi vous vous basez, quelle échelle ?

Si j'étais une personne encore en apprentissage, je tournerai plutôt ces barèmes comme des affinités avec une forme plus en diagramme circulaire (comme un top 5 de vos compétences en langages du web ?).

Je ne suis pas tellement d'accord avec les autres concernant votre photo ; je trouve que çà ajoute un côté social à votre CV et on engage déjà la découverte de la personne.

En tout cas, çà me rassure par rapport à la relève. Car c'est dernier temps je tombe que sur des cas où on se demande ce qu'ils apprennent à l'école ; mais ceci est une autre conversation ^^.

Bonne continuation.
Modifié par mini-truc (14 Oct 2014 - 17:03)

Merci beaucoup ce message qui fait très plaisir et qui motive!
Au niveau des curseurs pour les compétences, je suis bien d'accord que c'est complètement flou sachant qu'il n'y a pas de référence. L'idée d'affinité me plaît beaucoup en effet ! Je vais y réfléchir !

En ce qui concerne votre peur pour la relève, je dois vous avouer que je me pose aussi des questions, quand je vois des gens de ma promotion (filière axé sur les métiers du web) présenter un site créé avec Wix, Portfoliobox ou tout autre site permettant de ne pas toucher à la moindre ligne de code, sur lesquels on ne peut vraiment y ajouter sa touche. Je rigole aussi quand je vois des étudiants de ma promotion faire leur C.V sous Word et affirmer dans leurs compétences qu'ils "4 étoiles sur 5 sur Photoshop"...

Bonjour, Je déterre un peu le sujet,

as-tu pu trouver un stage ?

Beau travail en tout cas, simple et efficace, tes nombreuses réalisations habillent à elles seules la page