É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.