Sports Experts: Maquette

Pour la maquette, j'ai essayé de faire quelque chose qui s'approchait un peu des couleurs du site ainsi que des couleurs du magasin en tant que tel: beaucoup de bleu et du blanc. J'ai voulu faire en sorte que les couleurs, étant sensiblement les mêmes que dans le magasin, aident à véhiculer mon axe de communication qui est de promouvoir des produits de sports aux familles actives ainsi qu'aux adeptes de sports.

J'ai utilisé la police Open Sans, puisqu'elle est lisible, propre, et utilisée presque partout dans le site internet de Sports Experts. On peut ainsi voir une continuité. 

J'ai eu un peu de difficulté à choisir les couleurs et la police. Je voulais au début faire comme je fais souvent et prendre Futura, comme je trouve qu'elle fait propre et moderne. J'ai aussi trouvé une police sur mon ordinateur qui s'appelle Avenir, qui est la dernière police sur le moodboard. Je l'aimais bien aussi, mais mon choix s'est arrêté sur l'évident Open Sans, puisqu'elle me semble être la police "officielle" de Sports Experts. 

Je pensais également avoir un thème principalement blanc pour ma maquette, mais j'ai immédiatement changé pour quelque chose d'un peu plus bleu quand j'ai regardé l'image de fond du site. Je l'ai réutilisée pour ma maquette comme j'aimais beaucoup le style, et qu'ainsi une continuité plus poussée se faisait. 

J'ai donc fait des choix de couleur en conséquence de ma police et du fond du site internet: beaucoup de bleu, un peu de gris, et du noir et blanc pour la police. J'ai également mis deux publicités sur mon moodboard, parce que j'hésitais sur laquelle utiliser. Mon choix s'est arrêté sur la dernière non pas pour la couleur, mais pour son contenu. Je trouvais le contenu plus pertinent qu'un voyage à Cuba pour une page de chaussure. 

Sports Experts : Esquisses

Menu: Le menu est un menu qui s'ouvre sur le côté en appuyant sur un bouton en haut à gauche. Chaque menu est un menu déroulant qui s'ouvre pour laisser s'afficher les différentes catégories. Il faut appuyer sur les catégories pour y accéder.

Il y a un système similaire dans la page produit, ou nous devons appuyer sur des menus pour voir les détails et les autres produits. Cela permet de sauver de l'espace et de donner un choix à l'utilisateur.

Il faut également appuyer sur l'icône d'une chaussure dans la liste des produits pour arriver à la fiche produit, ainsi qu'appuyer sur les publicités pour y accéder. 

Étape 8: Conclusion

• Avez-vous atteint vos objectifs personnels, si oui pourquoi, si non pourquoi?

Tout en essayant de faire quelque chose de différent, j'ai quand même été un peu dans ma zone de confort au niveau design. Mon objectif personnel principal était de sortir de cette zone de confort, ce que je n'ai pas fait à 100%. 

• Quelles sont les forces de votre concept visuel?

Le concept est très intuitif et coloré. Les différentes couleurs des pages permettent à l'utilisateur de bien se repérer. Il n'y a aucune couleur qui ne correspond pas à son utilité. Exemple, la couleur bleue représente mon profil personnel. On ne retrouve pas une couleur bleue qui représente autre chose que moi et mon profil. 

• Quelles sont les faiblesses de votre concept visuel?

Le concept est un peu vide. Selon moi, il manque l'effet "wow" qui fait en sorte que le concept visuel est attrayant et incite les gens à revenir sur le site internet. Il est simple, mais peut-être un peu trop. 

• Quel est votre degré de satisfaction par rapport à votre site portfolio professionnel?

Sur une échelle de 1 à 10, je me donnerais la note de passage de 6/10. J'aimerais pouvoir le continuer à l'extérieur du cours et l'améliorer au mieux de mes connaissances pour qu'il soit parfait, et pour que je sois fière de le publier.

• Commentaires constructifs sur le déroulement du projet.

Comme tous les projets de design, le plus dur pour moi a été de trouver mon concept. J'ai perdu beaucoup de temps dans la recherche, du temps que j'aurais pu utiliser pour peaufiner mon concept visuel et être beaucoup plus satisfaite de mon travail. J'aurais aimé que l'on aille des trucs pour brainstormer un concept de portfolio. C'était un peu plus difficile puisque l'approche utilisateur était différente qu'un site internet "normal" comme nous avions fait auparavant dans la technique.

Maquettes finales

Maquettes préliminaires

Porfolio | Étape 4: Esquisses fonctionnelles

Accueil

À propos

Travaux

Contact

Portfolio | Étape 3: Schéma de navigation

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.