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

Le projet VoxPop

Bonjour à vous tous très cher lecteurs.

Dans le cadre du cours de traitement des média III et IV (Vidéo et son respectivement), nous devions réaliser un VoxPop sur un sujet de notre choix.

Notre équipe a décidé de couvrir l'événement "La Marche Bleu".

Cet événement se voulais un rassemblement de la population de la ville de Québec pour réclamer le retour de l'équipe de hockey "Les Nordiques", au sein de cette même ville.

Les efforts d'un seul homme, monsieur Mario Roy, ont réussi à rassemblé les médias de la capitale ainsi que des gens de partout dans la province de Québec.

Cette trainé de poudre médiatique englobe plusieurs sujet en plus du retour d'un équipe de la LNH. On parle aussi de la construction d'un nouvel amphithéâtre multi-fonctionnel ainsi que la candidature future pour les Jeux olympique. Tout ces événements sont reliés ensemble et popularisent le sujet.

Pour revenir au Vox Pop, l'événement a été couvert par notre équipe, mais tous étaient chargé de faire le montage individuellement.
Voici le travail réalisé :

Vox Pop sur la Marche Bleue from Charles Fortier-Chabot on Vimeo.

Projet de montage vidéo, les clones.

Bonjour ou bonsoir.
Ce projet avait pour but de créé un court vidéo dans lequel 2 clones se partagent un objet.
Bon visionnement!

Les clones aiment les barres tendres from Charles Fortier-Chabot on Vimeo.

Exercice d'analyse pour le cours traitement de media, le son.

L'exercice suivant est fait pour le cours de traitement des médias 4, le son. J'ai choisi le vidéo suivant sur le site Vimeo.
Pour ce qui est de l'analyse qui suit, elle est basée sur les 13 premières minutes du vidéo.

The Old Man and the Seymour from Wiseguy Pictures on Vimeo.

Premièrement, il est bien d'indiquer que le vidéo a une thématique qui se veut humoristique. La musique est surtout présente lorsqu'il n'y a pas de communication directe. La communication directe est soit faite par l'interaction entre les différents personnages, soit par le narrateur. Par contre, à quelques reprises, le narrateur est accompagné par la musique qui est en arrière plan. Je crois que le mélange est bien fait, mais la musique reste très présente pour un élément d'arrière plan. J'ajouterais même qu'elle a un rôle émotionnel puisque lorsqu'elle est en avant plan, son côté sympathique, simple et énergique nous met dans un contexte de bonne humeur et nous prépare à rire aux blagues.

Les différentes manipulations d'objets sont souvent accompagnées de son ayant le rôle d'accentuer la présente de l'objet en question. Dans ce vidéo, il est utilisé de façon subtile sans être exagéré. Cela rend les interactions avec les objets très réels.

Au final, je crois que le son dans ce video est bien utilisé.

Animation, Projet Final, Les Grizzlis

Bonjour à vous lecteurs de mon blog.

La fin de la session est arrivée et les projets sont remis entre les mains de nos enseignants.

Dans le cadre du cours d'animation, le projet final consistais à créé une animation pour laquelle nous avions préalablement créé le scénarimage ("storyboard" pour les habitués). Ce scénarimage était créé à partir d'un strip de BD.

Voici l'animation créé, je continuerai ensuite avec mes commentaires.

Les Grizzlis from Charles Fortier-Chabot on Vimeo.

Une animation de cette ampleur demande préparation, structure et du temps... beaucoup de temps pour un initié qui est loin d'être expert.

Être rigoureux dans son échéancier est un art, mais maitriser sa planification permet de faire ses choses sans avoir à passé une nuit blanche pour rattraper le temps perdu ou le temps investi sur d'autres projets. Vous pouvez me croire.

Savoir préparer son travail est aussi une façon de sauver beaucoup de temps. Avant de vous lancer dans un projet d'animation, prenez le temps de bien dessiner tout vos éléments. Vous pourrez procédé étape par étape au lieu de revenir sur des dessins à faire en plein milieu d'une séquence d'animation.

Passez un excellent temps des fêtes!

Comment se simplifier la tâche?

Comment se simplifier la tâche?

Un des géants de l'industrie, Disney, a compris comment on pouvait adapter une animation dans une autre avec d'autres personnages.
On peut décrier la méthode, mais on peut s'en servir pour se simplifier la vie aussi.

à voir:

Disney fait de l'auto-plagia
par BSmax

Suite du billet précédent sur Assassins Creed Lineage

J'ai pris mes informations à propos du court-métrage que j'ai présenté dans mon billet précédant.

Assassins Creed Lineage est une suite de 3 courts-métrages qui nous introduisent dans l'histoire du Jeu d'Ubisoft Assassins Creed II.

Je vous partage le lien pour que vous puissiez lire plus d'information vous aussi.

Assassin’s Creed Lineage: Révélations.

Bonne lecture!

Acheter Local

J'ai été agréablement surpris de découvrir ce vidéo.
Je connaissait l'existence du futur jeux d'Ubisoft, mais ce vidéo m'as permis de m'imprégner de l'atmosphère. Un beau mélange d'image créé à l'ordinateur et de jeux d'acteurs.
Assassin's Creed Lineage, à voir! Permettez vous un 15 minutes de visionnement avant de commencer.

Premier projet d'animation

Bonjour, je vous présente le premier projet d'animation que j'ai réalisé.
Nous devions créé un projet avec un personnage de la série d'animation Monsieur Madame. Pour ma part j'ai choisi M. Bruit.

Le travail as été réalisé avec le logiciel Flash cs4.

Si je pouvais faire un commentaire pour aider des personnes se lançant a la découverte de ce logiciel, c'est la structure. Plus ton travail est structuré avec l'utilisation des calques, plus ce sera simple pour faire des modifications tout au long de ton travail.

Pour une animation de style cartoon, on ne peut pas insister suffisamment sur l'exagération des déformations dans l'action des personnages et des objets.

J'ai eu des problèmes pour remettre mon travail puisqu'il "semblais" ne pas avoir enregistrer ma dernière journée de travail.
Autre conseil : enregistrer souvent!!!!
Si possible enregistrer votre fichier en utilisant un chiffre de version différent à chaque fois par exemple : AnimationV1 (V = version)

Bonne écoute.

Technique d'annimation projet1 monsieur bruit from Charles Fortier-Chabot on Vimeo.

Billet : Scénario d'une animation

En équipe de deux nous devions choisir une animation puis en extraire le scénario.

Voici le lien vers le blog de mon équipière :
http://chezmarcotti.blogspot.com/

Voici le vidéo:

kiwi! from 4ncsy on Vimeo.

Introduction :

Le personnage, nommé Kiwi, tire une corde et l'attache à un arbre. Il glisse le long de cette dernière puis d'un pas pressé se déplace vers le mur.

Pivot principal :

Kiwi sort un marteau et des clous de ses plumes.

Développement :

Kiwi cloue un arbre à la falaise. Il retourne au haut de celle-ci puis avant de se lancer dans le vide, met son petit chapeau d'aviateur. Une fois Kiwi lancé dans le vide on se rend compte qu'il y a plusieurs arbres de cloués à la falaise.

Pivot final :

La caméra change d'angle puis Kiwi sort ses petites ailes sans plumes.

Conclusion :

Kiwi a l'impression de voler et verse une larme de bonheur. Kiwi disparait dans la brume au bas de la falaise.


J'ai trouver, entre temps, la version originale sur you tube dans laquelle on peut entendre les effet sonore et aussi voir le copyright de l'auteur principal.


Bonne écoute!

Votre entreprise préférée et pourquoi.

Quelle entreprise conviendrait le mieux à vos aspirations professionnelles et personnelles, suite à la visite des 4 entreprises du quartier Saint-Roch?

À cette question je répond : IXMédia.

Lors de notre journée de visite, j’ai eu un coup de cœur pour l’entreprise IXMédia. Une entreprise à l’échelle humaine qui a une haute estime pour ses employés. Les réalisations de l’entreprise sont hautement diversifiés. Pour ma motivation à travaillé, j’ai besoin d’un travail diversifié pour stimuler mon esprit. L’ambiance de travaille et l’esprit d’équipe est importante pour moi et j’ai eu un bon « fealing » lors de la visite. Contrairement à Wanted technologie qui ont un besoin beaucoup plus grand en programmeurs, IXMédia ont besoin d’intégrateurs. En plus de viser un poste d’intégrateur je désire avoir un poste plus décisionnel comme un chargé de projet. Avec notre formation je suis convaincu d’avoir suffisamment d’outils pour occupé ce genre de postes.

Billet #2 : L’animation

Que l'on parle de films, d'émissions de télévision ou de jeux vidéo, l'animation est devenue omniprésente. La présence de l'animation dans les films permet de créer des univers époustouflants à l'intérieur d'un endroit physique minuscule. C'est impressionnant de voir comment certains films sont créés et à quel point les acteurs doivent être imaginatifs lors des tournages.

Il y a également plusieurs dessins animés qui ont marqué mon enfance. J'ai passé beaucoup de temps devant la télévision à découvrir les univers fantastiques dans lesquels les personnages évoluaient. Des personnages tous plus différents les uns que les autres. De plus, j'ai toujours apprécié l'art japonais des mangas. Que ce soit des ninjas, des créatures et même des robots, on trouve de tout dans cet univers.

Je ne peux passer sous silence que je suis un grand fan des cinématiques de jeux vidéo. Personnellement, j'adore le travail fait par les employés de la compagnie Blizzard. Les cinématiques de leurs jeux me coupent le souffle. Pour suivre la progression de la technologie de l'animation dans les jeux vidéo, rien ne peut battre la nostalgie d'écouter les anciennes vidéos faites par Blizzard.

Bref, pour moi une bonne animation doit combler un des critères suivants :
- être renversé par les effets visuels,
- être trompé par le réalisme,
- me divertir en ne comptant pas les heures.