Portfolio interactif

1) Introduction : rappel des métiers et agences : qui fait quoi

Les métiers de la communication visuelle
Les postes, missions, salaires, carrières
Offre et demande

VISER AVANT DE TIRER

2) Pourquoi un Portfolio

Savoir faire et faire savoir
Le portfolio est la data représentation textuelle et visuelle de votre savoir faire, de votre expérience et de votre identité.
Donner envie, susciter du désir (implicite et explicite)… Les bons leviers
Benchmark de différents folios de graphistes, designers, illustrateurs juniors ou séniors

Anciens de l’École Multimedia

Autres

Un portfolio est un outil de communication qui donne un aperçu du savoir faire, il doit faire l’objet d’une attention toute particulière. Il doit activer les bons leviers afin de susciter de la curiosité, de l’envie. Il est évident qui le plaisir qu’on investi dans sa réalisation se communique.

3) Comment

Lisibilité et visibilité
Draft, rough, esquisse… la maquette papier, l’étape indispensable.
Déterminer la hiérarchie visuelle des informations en élaborant une maquette papier qui positionne les contenus selon l’importance et la pertinence de l’information, c’est :

Le zoning

Billets à lire attentivement.

Architecture des contenus

C’est la manière dont les information s’articulent et se connectent par les hyperliens et se rangent dans des rubriques ou catégories selon leurs points communs.

Les informations classées par similitude sont accessibles par les menus (intitulé des rubriques), le principe est semblable à celui de la généalogie, on parle de liens parent > enfant.

C’est l’arborescence.

: Arbre

: Escalier

: Palier

Ergonomie

L’ergonomie est « l’étude scientifique de la relation entre l’homme et ses moyens, méthodes et milieux de travail1 » et l’application de ces connaissances à la conception de systèmes « qui puissent être utilisés avec le maximum de confort, de sécurité et d’efficacité par le plus grand nombre »

L’ergonomie repose sur des principes de bon sens adaptés et optimisés pour un confort de lecture, une facilité de prise en main de l’interactivité et un accès simple et rapide à l’information.
Le « fold » (voir document zoning) est la zone d’affichage d’un écran sans que l’on ait à se déplacer vers le bas (scroll, ascenseur, slide…) Il doit contenir les infos importantes.
Logo, contact, mail, recherche, connexion membre, tête de gondole, dernière news, produit phare, opération marketing, promotion etc…

Dans le cas d’un portfolio on y trouvera l’identité graphique, le logo, le nom, la fonction, le contact mail, le contact téléphone, le CV à télécharger, éventuellement un flash code, un lien facebook (sous réserve des contenus des photos et messages) et une version FR/UK

La qualité de lecture

La qualité de lecture passe par la qualité de la syntaxe, le choix précis du vocabulaire.

L’équilibre du gris typographiques des blocs textes en regard des masses de blanc, des contenus visuels fixes ou animés. Privilégier les textes concis, précis et courts.

Conjuguer au présent.

Relire et se faire relire. Une faute d’orthographe évoquera davantage de la négligence et du manque de rigueur que les imperfections dans la maîtrise de la langue.

Hiérarchie de l’information descendante : titre, sous titre, (amorce ou lettrine éventuellement), paragraphe, annexe, citations, sources etc…

Eviter des paragraphes dont les lignes exèdent une quinzaine de mots.

Pas de textes fuides qui s’étirent sur toute la largeur de l’écran.

Scinder en colonnes les blocs textes importants en nombre de mots.

Privilégier les caractères à empattement qui dessinent une ligne horizontale à la base des caractères et facilitent la lecture.

L’effet papier-peint, eviter que l’interface du folio soit trop envahissante. Imaginez une expo de peinture ou de photo sur des murs couverts de papier-peints.

Pas de contour sur du texte de paragraphe.

Diminuer les contrastes noir / blanc pour privilégier des contrastes de gris.

Pas de veuves et d’orphelines dans les paragraphes.

Organiser par des thèmes colorimétriques facilite la mise en relation des contenus.

Fil d’ariane, ou chemin de fer.

Envisager le placement des contenus selon le device, écran large, écran 4/3, tablette, fablette, téléphone en utilisant les règles d’usage : Responsibe Web Design, règles des tranches 960(gs), compatibilité des formats.

Optimisation

Les données stockées doivent remonter de manière fluide et rapide, ainsi il est primordial d’alléger au maximum des poids des contenus. Cela passe par l’optimisation des fichiers images, animés ou textes en choisissant le format adapté. Un compromis entre vitesse d’affichage et qualité d’image fixe ou animée.

Les formats communéments utilisés en image : jpg, jpeg, gif, png8, png24, pdf, svg
Les formats communéments utilisés en vidéo : mov, h264, h265, mpg, m4v, mpeg, wmv
Les formats communéments utilisés en son : mp3, mp4, midi, aiff, m4r

Une page qui excède 10 secondes à s’afficher peut ne pas être regardée.

Interactivité

C’est la mise en avant et en relation des contenus d’une interface.
Elle passe par les liens et des comportements, roll over, popup, surgissement, glissements, spry, menus déroulants, slides, hotbox etc

L’interactivité se cale sur des principes d’expérience utilisateur.

Une interactivité réussie est un équilibre entre l’accès à l’information et la facilité et le plaisir par la navigation. Il faut mettre un point d’honneur à l’efficacité. Une interactivité bien conçue permet d’oublier la technologie mise en place.

Faites tester vos interface par un public varié et recueillez les remarques.

Identité

C’est la marque visuelle de votre personnalité graphique.
Elle est souvent déclinée du logo, de la colorimétrie et des choix typographiques.
Elle fait l’objet d’un soin tout particulier et appliqué, elle vous raconte.
Le logo peut être un accronyme, un assemblage des initiales, une forme figurative ou non figurative qui évoque le contexte.

Faute d’être inspiré, on peut démarrer la recherche de logo autour des initiales de son nom / prénom

Le choix typographique est primordial, il doit mixer la qualité de lecture à la sobriété et l’élégance.

« La simplicité est l’ultime difficulté »

Contenus

Inutile de surcharger la quantité de contenus, préférer un nombre limité de visuels au contenu riche et évocateur du savoir faire.

Ils sont classés par rubriques, par exemple WEB DESIGN, PRINT, ILLUSTRATIONS, IDENTITÉ, ROUGHS par exemple

Le CV et le folio ont une cohérence graphique.

Lisibilité et visibilité

La pertinence et les choix syntaxiques sont autant d’outils permettant aux spiders des moteurs de recherche d’indexer votre portfolio grâce à des mots explicites. Il ne faut pas oublier aussi d’enrichir la nomenclatures des images, des noms des pages, des titres des pages et des balises metakeys et keywords, robots etc
Plus vous pointez vos choix de nomenclature vers les mots clefs de votre folio, plus vous augmentes vos capacité à vous positionner.

Préférer un nom de domaine plutôt qu’une page perso gratuite à l’URL parfois fantaisie.
Eviter les mails façon Cibiste, « jojo92@hotmail.com, ou franc0832@live.fr

4) Pour qui ?

Où et comment prospecter

Viser avant de tirer

Le book ou dos ou encore folio en ligne permet de donner une idée de votre savoir faire dans un contexte donné et grace à un support dématérialisé visible et accessible de partout.. Il est important de viser avant de tirer à savoir que l’envoi d’une folio pour une candidature ne se fait pas sans la connaissance et la compréhension de l’activité du destinataire.

L’envoi d’une lettre de motivation est toujours ciblée vers la bonne personne.

On peut répondre à des offres publiées comme en candidat spontané.

Ne jamais décliner un rendez-vous pour une raison moins prioritaire (piscine, dentiste, cours de danse…)

RESPONSIVE, CANVAS ET PARALLAXE

http://webdesy.com/parallax-scrolling-builder/

L’effet parallaxe

EXEMPLES

PORTAIL

http://five3.me

http://everylastdrop.co.uk

http://nasaprospect.com

http://www.bagigia.com