Publié le par benoit

Cet article s’adresse plus particulièrement à mes étudiants pour réaliser leur premier site, leur portfolio.

Contexte

Nous sommes actuellement au 8e cours de l’année et nous attaquons un sujet difficile, personnel et important. Les bases techniques ont été abordées, vous avez le choix d’approfondir celle-ci ou de faire avec vos moyens. Pour être plus précis, sachez qu’il sera possible de corriger et d’améliorer ce projet sur le reste de l’année ou de votre vie.

L’objectif de ce cours est d’apprendre à coder. Néanmoins, il existe des plateformes à forte connotation pour publier vos travaux (Behance, Dribble…) ou des réseaux sociaux appropriés (tumblr, instagram, myspace…). Ces canaux alternatifs sont exploitables, mais sont beaucoup moins personnels.

Le contenu du portfolio

Avant de commencer vos maquettes ou prototypes, il faut créer votre contenu. Celui-ci devra avoir exclusivement des ingrédients de qualité, ils refléteront votre travail et l’énergie que vous y accordez.
Voici une liste d’étapes essentielles :

  • Rassemblez vos projets les plus pertinents ;
  • Réalisez des photos de qualité (calibrages et petites retouches possibles) ;
  • Préparez vos textes sans fautes d’orthographe, grammaire et typographie, faites-vous relire ;
  • Définissez l’objectif du site pour mieux ordonner et hiérarchiser vos projets ;
  • Marquez clairement si vous êtes dans l’illustration, le graphisme ou la photographie.

Qui, quoi, où, comment, pourquoi, combien…

Les personnes qui visitent votre site veulent voir vos travaux, mais aussi mieux vous connaitre. Attention, veuillez à cloisonner vie personnelle et professionnelle !
Présentez-vous en une phrase ou deux (inutile de dire votre âge), ajoutez votre école (et un lien), votre ville (mais pas votre adresse personnelle), votre email « pro », vos réseaux sociaux si « pros », le contexte des projets (année, personnels, scolaires…).
Si vous cherchez un stage, préciser la zone géographique et pour combien de temps.

Si votre email est affiché en clair, il sera probablement ajouté dans les bases de données de spammeurs sans éthique. Quelques techniques Javascript existent pour brouiller votre mail pour les robots. Je déconseille les liens avec href='mailto:name@gmail.fr', selon le paramétrage de la machine, il lance une fois sur deux le client mail (Mail.app sur Mac) ; à bannir si le mail n’est pas lisible dans le lien contactez-moi.

Le C.V.

Indispensable pour la recherche d’un stage, idéalement lisible dans une page HTML car certains appareils n’ouvrent pas les pdf correctement et un lien vers sa version pdf à télécharger.
Pour le contenu du curriculum vitæ, ne remontez pas jusqu’au brevet, aucune faute et soignez la maquette.

Vos relations sont vos atouts, une plateforme comme LinkedIn est fort utile pour afficher son CV.

La photo

Vraiment pas obligatoire, mais si vous souhaitez la mettre, celle-ci doit être pertinente et bien intégrée dans votre maquette.

La simplicité

Si le web des années 90 était moins élégant qu’aujourd’hui, il était pour autant assez fonctionnel.
Pour rappel simpliste, Le HTML sert à aller de page en page, le CSS lui ajoute un peu plus d’élégance. Les nouveautés du HTML5 et CSS3 permettent d’aller beaucoup plus loin, mais pour quels objectifs, quel coût et quelle cible ?

L’image ci-dessous illustre la difficulté à dompter le CSS, même chez les développeurs.

CSS fear
le CSS langage ingrat (lien vers le tweet)

Pour disculper le CSS, on peut rejeter la faute à la maquette trop complexe pour :

  • se décliner sur mobile ;
  • prendre en charge le tactile ;
  • réussir à s’adapter aux multiples navigateurs.
Pendant longtemps (jusqu’en 2014) position:fixed; ne marchait pas sous iOS. Est-ce indispensable ?

Chez les graphistes amateurs, je préfère une affiche sans effet, sans caractères excentriques, sans prouesses techniques, mais malheureusement ça n’existe pas.
Pour un portfolio de graphiste, je m’attends à quelque chose de simple qui me montre de bons projets plutôt qu’un site complexe avec des maladresses de débutant et une navigation trop ambiguë. Certains portfolios de graphistes me donnent plus envie de recruter le développeur que le graphiste.

Le mot de la fin

Ce sujet pose beaucoup de questions, sans parler de votre identité visuelle à produire pour le site. Si vous avez un doute sur un choix non technique, pensez à l’efficacité et regardez si la problématique existe sur d’autres portfolios. Vous devez osciller entre les contraintes techniques et le rendu visuel. Dans les prochains cours, nous aborderons le JavaScript, on pourra aborder des choses plus expérimentales ou ludiques et voir les applications possibles.

portfolio bonus : http://andrevv.com/