Étape 8 - Conclusion

Je crois avoir atteint mes objectifs personnel. Voici un rappel de mes objectifs personnels :
"Se fixer des objectifs
Objectifs personnels : Pousser le visuel un peu plus loin qu'à l'habitude. Garder une simplicité de design et trouver un moyen de bien mettre en valeur les réalisations lors des projets exposés sur le site.

Paramètres techniques : Le visuel est la cible principale, mais l'utilisation du site doit être facile, ergonomique et bien structuré. L'utilisateur regardera le visuel, mais l'utilisation demeure un facteur important lorsque l'on doit faire un choix. Le paramètre principalement visé, sera la navigation intuitive."


Forces du concept présenté :
La simplicité du visuel aide l'oeil à comprendre les éléments présent.

Faiblesses du concept présenté :
Pour avoir accès à un projet ouvert, il y a plusieurs clics à faire. Ce qui pourrait faire perdre l'attention ou l'intérêt du visiteur.

Commentaires sur le déroulement du projet :
Pour conclure je dirais que ce projet a été très interessant pour connaitre et expérimenter les méthodes de conception. De plus, travailler sur un portfolio personnel est un défi puisqu'il exige de savoir comment bien se vendre. C'est un projet que j'ai trouvé simple à réalisé lorsqu'on respecte les délais proposé.

Étape 7, Maquette Finale

Pour ma maquette finale, j'ai écouté les commentaires qui m'on été fait et j'ai décidé de changé quelques aspects.

Premièrement, l'entête et la navigation seront des éléments toujours présent dans le haut de la page. Le contenu glissera dessous et ainsi le menu sera accessible à tout moment. Au clic sur la navigation, le contenu se dirigera au bon endroit dans la page. Voir la deuxième image pour un exemple.

Dans ma section projets, j'ai changé l'aspect du menu en accordéon pour pouvoir bien dissocier la zone de contenu, de son titre de sous-section.

La dernière image représente la deuxième page à concevoir. Lors d'un clic sur une image de projet dans la section projet, une visionneuse apparait par dessus le site. Cette visionneuse explique et expose le projet. Si le projet est un vidéo, il le rendra disponible è la lecture, si ce sont des images, les grandes images seront affichés.

Étape 6, Maquette préliminaire

Je vous présente mon portfolio qui sera un outil de promotion personel auprès des futurs employeurs du domaine du multimédia.

Ma principale stratégie de communication est basé sur une navigation facile, ergonomique et bien structuré. L'utilisateur regardera le visuel, mais l'utilisation demeure le facteur important. Le paramètre principalement visé est une navigation intuitive.

Le site s'adresse à des utilisateurs déjà expérimenté qui cherche à trouver des informations rapidement et elles devront être percutantes pour qu’il s’en souvienne longtemps, puisque cet utilisateur est probablement un futur employeur.

Les points forts à regarder sur ma maquette :
Regardez les contrastes entre les couleurs qui détermine bien les divers éléments.
L'harmonie des couleurs dans l'ensemble qui aide à garder l'intérêt d'exploration.
Remarquez les différents états de survols, les liens, les boutons, les images.

Étape 5, exploration

Pour le visuel de mon portfolio, j'ai choisi les harmonies de couleur suivante:

L'inspiration est tiré du site : http://kuler.adobe.com/#themeID/1322936

J'ai décidé d'utiliser la couleur gris-noir comme couleur principale au lieu du beige plus claire.

Mon choix typographique c'est tourné vers : Helvetica. C'est une typo très utilisé sur le web et j'aime sa simplicité.

Pour le style utiliser, j'ai choisi de garder le tout plutôt simple pour mettre l'emphase sur les projets présentés ainsi que le contenu.

Je vais faire une tentative d'utiliser le "pixel pop" pour délimité certains éléments. Cette technique est simple mais donne un beau résultat. Il s'agit de juxtaposé une ligne de 1 pixel claire, suivi d'une ligne de pixel foncé pour créé une séparation imitant un relief.

Étape 4, Modèle de conception et esquisse fonctionnelle

Modèle de conception

La plus grande problématique rencontré est au niveau de l'affichage des différents projets.

J'ai décidé d'utiliser un carrousel pour diminuer le nombre d'éléments affiché dans la page. Ce modèle sera utilisé pour chaque sous_section.

Au survol sur une image de projet, un champ d'information apparait au dessus de l'image et affiche un résumé de la description du projet.

Lorsqu'une image de sous_section (un projet) est cliqué, il affiche un panneau d'information (Slim box) au dessus. Ce paneau affiche plus d'images du projet ainsi qu'une description.

Esquisse fonctionnelle

Étape3, Définir le contenu

Énumérer - Catégoriser - Structurer

· La table des matières : (le site se situera sur une seule page et il changera de style, selon la section)

- Accueil (des liens nous permettent une navigation simple vers les sections)

Citation : « Le monde devrait être bien organisé et beau »

- Biographie (rappel des liens de navigation)

Étudiant en intégration multimédia

À tous les jours, une créativité bouillonnante et un sens de l’organisation se font un combat glorieux en moi. Vous découvrirez le portfolio d’un homme curieux, ambitieux et honnête. Il existe une tonne de nouveautés à découvrir et à partager. J’ai les yeux grands ouverts! Et vous?

- Projets (rappel des liens de navigation)

Légende : « TIM » est l’acronyme de : Technique d’intégration multimédia

Montage vidéo et animation

o Les clones (2 images + Projet utilisant After Effect, TIM session 3)

o Le VoxPop (3 images + Projet utilisant Première, TIM session 3)

o L’Appât du Gain (3 images + Projet utilisant Première, TIM session 3. Description : Projet d’équipe de fin de session. La commande : Créer un scénario, filmer et concevoir un DVD pour la distribution du produit fini)

o L’écoute du cœur (3 images + Projet utilisant After Effect, TIM session 2. Description : Projet d’animation d’images fixes synchronisé avec une pièce musicale. La commande : Respecter la thématique choisie)

o Publicité Toyota (2 images + Projet utilisant Flash, TIM session 4. La commande : Prendre un bandeau publicitaire sur un site web et l’améliorer par l’animation)

o Publicité technopole (2 images + Projet utilisant Flash, TIM session 4. La commande : Prendre un bandeau publicitaire sur un site web et l’améliorer par l’animation)

Maquettes

o Boréal Design (2 images + Projet utilisant Photoshop, TIM session 3. Description : Maquettes préliminaires pour un projet d’intégration)

o I.No (3 images + Projet utilisant Photoshop, TIM session 3. Description : Maquettes réalisées suite à une rencontre client. Un exercice de conception et de créativité)

o Site Mobile de Vidéotron (4 images + Projet utilisant Photoshop, TIM session 4. La commande : Choisir un site Internet existant puis concevoir une version mobile).

Projets intégrés

o André-Philipe Côté (2 images + Projet utilisant Photoshop et Dreamweaver, TIM session 2. Description : Concevoir et intégrer un site Internet, en équipe de 3 personnes, pour un client, selon un scénario fourni par les professeurs. La commande : Créer une maquette, intégrer le contenu et programmer l’interactivité)

o Le Cryptex (2 images + Projet utilisant Flash et Photoshop, TIM session 1. Description : Jeu interactif. La commande : Selon un scénario fourni par les professeurs, créer un univers à partir de photographies et y programmer l’interactivité)

o E-Learning, SAAQ (2 images + Projet utilisant Illustrator et Flash, TIM session 4. Description : Projet d’équipe. Création d’une plateforme interactive permettant à l’utilisateur d’apprendre différentes notions de conduite automobile. Les commandes : Concevoir une maquette permettant une navigation intuitive. Permettre à l’utilisateur de visionner différentes leçons puis de tester ses connaissances avec une évaluation. Le tout selon un scénario fourni par les professeurs)

Exploration en design

o Exploration Typographique (2 images + Projet utilisant Illustrator, TIM session 3. La commande : Avec l’utilisation de typo simple, créer une illustration qui transmet le sens du mot choisi)

o Exploration d’icônes (3 images + Projet utilisant Illustrator, TIM session 3. La commande : Choisir un site Internet puis concevoir des icônes respectant le thème déjà utilisé par le site Internet)

- Contact : (adresse courriel : fortier.c.charles@gmail.com)

· Quel type de texte sera utilisé? Ce sera un type de texte pour décrire les projets et vendre les points forts.

· Quel sera le ton du site? Il sera professionnel, le « vous » sera utilisé, au besoin. Les textes seront composés afin d’être neutres et descriptifs, la plupart du temps.

Structurer le contenu

La fiche du « Persona ».

Description écrite

Une fiche « Persona » se répartit en plusieurs sections :

L’identité

Nom : François Tremblay

Genre : Masculin

Âge : 35 ans

Profession :

Il est gestionnaire de projets pour une PME en conception informatique. Lorsqu’un besoin en personnel se fait sentir, il est de ceux qui doivent rencontrer les gens à embaucher. Père de famille, il passe tout son temps avec sa famille, la fin de semaine. La gestion de temps, c’est son affaire.

Intérêts :

Il se rend à vélo au travail pour éviter la circulation et pour garder la forme. Dans ses temps libres, il s’amuse avec ses enfants, regarde des films avec sa famille et en soirée, il se permet de sortir en ville pour garder la flamme avec sa douce. Parfois, des connaissances passent leur rendre visite. Il ne faut pas oublier qu’à temps perdu, il prend ses courriels sur l’ordinateur ou sur son cellulaire. Il doit demeurer connecter en tout temps avec le web.

Le comportement (Web)

Profil utilisateur :

Lorsque l’on parle d’ordinateur et d’interfaces utilisateurs, François est un utilisateur avancé. Il utilise des logiciels de traitement de texte pour concevoir des documents de gestion, il sait se démêler dans une nomenclature de dossiers et de fichiers complexes, il utilise des logiciels de gestion du temps et des échéances ainsi que plusieurs types d’interfaces pour l’envoi de courriels. Vers la fin d’un projet, il aime bien tester le produit avant d’en faire la remise au client.

Besoins et habitudes :

François consulte plusieurs sites web pour son plaisir et pour garder ses connaissances à jour. Souvent, il consulte les sites web d’offres d’emplois pour trouver de nouveaux employés.

Le scénario d’utilisation

Utilisation :

Comme dans un CV, François doit trouver ses informations rapidement et elles devront être percutantes pour qu’il s’en souvienne longtemps. C’est une compétition avec toutes autres personnes voulant le même emploi. La structure de l’information et la mise en valeur du contenu seront les éléments à exploiter.

Description visuelle :

Début du projet 3 en Design multimédia II

Définir la problématique

• Thème choisi : Portfolio personnel

• Les objectifs du site : communiquer à l'utilisateur les capacités et compétences en conception graphique ainsi qu'exposer les réalisations faites au sein de la formation collégiale (technique d'intégration multimédia) et exposer des projets personnels.

• Besoins des usagers : Découvrir rapidement les projets réalisés dans le passé et comprendre le potentiel en conception graphique par le design du site lui même.
  

• Enjeux ergonomiques : Les futurs employeurs, les futurs clients et les collègues de travail feront partie de la clientèle visée. La clientèle sera des gens habitués dans l'utilisation de pages web et d'interfaces de tous genres. Ceci dit, l'expérience des utilisateurs au point de vue graphique demandera un certain défi créatif pour avoir un style original et personnalisé. Au niveau de la navigation, elle sera simple. Une navigation dans une page différente ou une navigation à l'intérieure d'une grande page.

Se fixer des objectifs

• Objectifs personnels : Pousser le visuel un peu plus loin qu'à l'habitude. Garder une simplicité de design et trouver un moyen de bien mettre en valeur les réalisations lors des projets exposés sur le site.

• Paramètres techniques : Le visuel est la cible principale, mais l'utilisation du site doit être facile, ergonomique et bien structuré. L'utilisateur regardera le visuel, mais l'utilisation demeure un facteur important lorsque l'on doit faire un choix. Le paramètre principalement visé, sera la navigation intuitive.
  

Projet de Sécurité routière

Sur les images suivantes vous trouverez les maquettes d'un projet d'école.
Sur la première vous trouverez tout les éléments activé avec un effet de survol.
Sur la dernière vous pourrez voir l'interface inactive avec la table des matière caché.
Bonne évaluation!