Portfolio | Étape 2: Persona

Portfolio | Étape 1: Objectifs personnels

Mes objectifs personnels pour ce projet sont simples, et se séparent bien en points:

• Je veux tenter de faire un design avant-gardiste et original; du moins, différent de ce que j'ai fait d'habitude. Je veux aller au-delà de mes zones de comforts et essayer quelque chose de nouveau, mais qui me représente bien tout de même.

• J'aimerais que le design soit épuré, mais pas trop. Ce que j'entends par là? Le design ne doit pas être surchargé, mais pas vide. Il doit y avoir un bel équilibre entre espace blanc et information.

• Je voudrais être capable de le reproduire dans le futur. Ainsi, je souhaite que mon design soit possible à reproduire en HTML5 et en CSS3, et qu'il puisse exploiter les nombreuses possibilités du responsive web design. Comme mon focus principal est l'intégration, je crois que d'être capable de créer soit-même son portfolio avec des technologies nouvelles et du responsive met un bel accent sur ma force.

• J'aimerais, si possible, que mon portfolio soit bilingue. Comme je parle couramment l'anglais et le français, je souhaite que mon portfolio soit accessible à un plus grand nombre de personne pour que je puisses exploiter mon bilinguisme et en faire profiter à un plus grand nombre de personnes. Autrement dit, si mon portfolio est bilingue, je pourrais peut-être me trouver quelques projets en anglais.

• Je souhaite que mon design incorpore quelques éléments qui me définissent bien (mes passions), même si celles-ci ne sont pas tout à fait en lien avec la profession d'intégrateur. Les éléments ne seront pas présents partout, et parmi ceux-ci peuvent se retrouver:
• Les jeux vidéos
• La musique
• L'Asie (le Japon et la Corée du Sud, principalement)
• Le dessin
• et plusieurs autres

• Je veux tenter de me tenir loin des clichés et des éléments qui font très "hipsters". Par exemple, je veux me tenir loin des grosses tendances comme les blogs en noir et blanc, ou encore les one pages. 

• Mes projets présentés devront montrer ma polyvalence: bien que je fasse un focus sur l'intégration, je veux pouvoir présenter des dessins, des animations, des designs, des éléments 3D créés par moi-même, et autres travaux que j'aurais fait. Ceci montrera donc que je ne suis pas capable que de créer des sites internet, mais que j'explore différents domaines et que je n'ai pas peur d'expérimenter.

Exercice de révision

J'ai fait mon exercice de révision sur le site de "T'as juste une vie" du gouvernement du Québec.

Le site internet est dédié aux jeunes (de l'adolescence à jeune adulte, par exemple 13-24) qui ont des problèmes liés à l'alcool, la drogue ou les jeux de hasard. Sa vocation est de sensibiliser son public cible aux dangers et solutions de leur problèmes de dépendance.

Le site n'est pas fait d'une manière conventionelle, comme il faut défiler vers le bas pour voir les différentes capsules qui apparaissent par le côté droit (ou vers le haut pour voir l'information précédente). Toutefois, il est écrit dans le bas du site internet comment l'utiliser, ce qui rend l'application plus facile d'utilisation. De plus, certains contenus de la page d'accueil qui semblent cliquable (le texte jaune sur le côté ainsi que le titre "Intense au naturel" en haut à droite en orange) ne le sont pas, ce qui est très peu affordant.


Le formulaire de la première section est clair, mais la case "J'accepte le règlement du concours" est trop séparée du reste du formulaire. J'ai du la chercher dans l'interface. Les messages d'erreurs sont également clairs, ils s'affichent en rouge et le contour des champs de formulaire deviennent également rouge.

Hormis ces quelques erreurs, le site internet n'est pas à conseiller pour un utilisateur avec une migraine ou un mal de coeur. Il peut facilement empirer la situation, puisqu'il est relativement rapide. Pour ces quelques cas isolés, le concepteur a pensé à une version "accessible", sans le défilement étrange et les couleurs qui flashent. C'est un site qui est (un peu trop?) facile d'utilisation. Je dis un peu trop, puisque la facilité peut désaxer l'utilisateur qui s'était habitué à l'utilisation du site enrichi.

En bref, le site est relativement ergonomique et affordant, hormis quelques erreurs à corriger que j'ai cité si-haut. J'ai apprécié mon expérience (un peu hors du commun) malgré mon léger mal de coeur :P

Maquettes finales

Maquette préliminaire V2 | Projet e-learning

Voici une deuxième version de maquette préliminaire pour le projet e-learning.

L'idée est la suivante: Essayer une interface qui utilise des formes non conventionnelles comme des trapèzes et des triangles (au lieu de carrés et cercles) pour ajouter au projet une touche d'originalité et tenter de chercher un "wow". Le concept précédent de colonnes a été reprit, comme il gère bien l'information et regroupe bien les éléments qui sont connexes.

Cette fois-ci, au lieu de devoir cliquer sur le contenu de la capsule pour y accéder, nous avons accès à un lien "Débuter!" d'une couleur différente du reste pour que l'utilisateur comprenne que cette zone est cliquable. La couleur actuelle est jaune, et le texte sera probablement gris foncé comme pour la première capsule. J'ai également tenté de voir ce que cela donnerait avec un texte de couleur bleue.

Maquette préliminaire | Projet e-learning

Voici une première idée de maquette pour le projet e-learning. 

Le concept pour cette version est simple, et peut-être même un peu trop. Ma première idée fut d'utiliser des boutons en forme de demi-lune pour chaque capsule, et les classer par colonne. Chaque colonne regroupe les capsules d'un personnage, et c'est pour cela que le nom du personnage ne se retrouve qu'au dessus de la colonne. Ainsi, on libère de l'espace et enlève le surplus d'information inutile.

La surface bleue de la capsule est entièrement cliquable, comme la présentation de la capsule est un bouton à part entière. J'ai utilisé un traitement légèrement différent du reste, ainsi qu'une bordure autour du bouton pour tenter de rendre le bouton plus intuitif.

Les icônes représentant chaque capsule se trouvent en haut à gauche de chaque capsule. Dans cette maquette préliminaire, les icônes sont identiques; toutefois dans une potentielle version finale chaque icône sera unique et dépourvu de fond blanc ou bordures. 

Cette maquette préliminaire montre un début de mon cheminement artistique pour le design de la formation, et d'importantes modifications pourraient avoir lieu.