Étape 7 - Maquettes finales

Site web pour la compagnie EnviroGaz, une compagnie spécialisée en biométhanisation. Pour se faire connaître, pour faire connaître la biométhanisation(encore peu connue/utilisée au Québec), pour trouver des partenaires intéressés.

Le type d'utilisateur ciblé (voir Étape 2 - Persona)

L'ambiance que j'ai essayé d'exprimer est dynamique et vif, mais sans oublier l'importance du sérieux et du travail. J'ai choisi d'utilisé des couleurs plus claires et vives qui démontraient plus le côté énergique de l'entreprise. Le bleu et le vert étant les couleurs utilisées dans le logo, j'ai tenté de les réutiliser dans les maquettes. L'ajout de blanc et de gris pour ne pas trop créer trop de contrastes, donne un message d'ouverture et de grandeur.
Le logo est utilisé de manière intégrale, suivit d'un sous-titre descriptif qui donne une direction au site (qui introduit le sujet de l'environnement)(ainsi, c'est plus facile de comprendre en quoi consiste EnviroGaz).
Finalement, dans le pied de page, on retrouve les liens vers les réseaux sociaux pour permettre à l'utilisateur de "suivre" la compagnie dans ses activités.


Maquette numéro 1 : EnviroGaz > Qui sommes-nous? > Historique
Les deux premières maquettes sont similaires. Le sous-menu s'affiche à gauche. Au clic, le contenu se déroule vers la droite. On utilise les flèches pour lire chacun des paragraphes. J'utilise cette méthode afin de minimiser la charge de texte. Ainsi, chaque aspect est divisé, et chacun a sa page, et c'est donc interactif et ça stimule la lecture. Les numéros au bas montrent notre position et le nombre de pages au total.


Maquette numéro 2 : EnviroGaz > Qui sommes-nous? > Mission
Même technique que pour la première maquette.


Maquette numéro 3 : EnviroGaz > FAQ
Sur cette page, je me suis inspiré du design pattern de menu rétractable. Ainsi, lorsqu'on clique sur une question, le contenu s'affiche en déroulant vers le bas. Lorsqu'on clique sur une deuxième question, la première se "retracte" et l'autre se déroule.

Étape 5 - Exploration

Voici la planche d'orientation visuelle de mon concept qui contient le résultat de votre recherche:

* d'harmonie de couleurs
* typographique: Helvetica
* d'ambiance visuelle : Vive, mais sérieuse, ambiance de travail
* de style graphique

Étape 2 - Fiche de votre « persona » (numéro 2)

Identification

Nom : Monsieur Simon Jacob
Genre : Masculin
Âge : 45 ans

Profession :

Président d’une compagnie dans le domaine de l’environnement
Père de famille

Intérêts :

Monsieur Jacob est un homme qui a de l’influence dans le monde des affaires. Il un intérêt particulier pour l’argent, l’environnement et a des idées de grandeur pour sauver la planète. Il est le président d’une compagnie présente dans l’environnement assez influente dans sa région. Il prend des décisions importantes pour sa compagnie pour qu’elle croisse toujours davantage. De plus, Monsieur Jacob voyage à l’international afin de visiter des technologies nouvelles en environnement. En plus d’être un président apprécié par les employés de sa compagnie, Simon est un bon mari et un bon père de famille; il essaie d’être présent dans la vie de ses enfants. Il joue au hockey un soir par semaine avec ses chums pour se divertir et il est fan du Canadien.


Objectifs

Besoins :

Les idées de grandeur de Monsieur Jacob le pousse au désir de s’associer avec une autre compagnie. Il a donc besoin de s’informer sur les différentes compagnies qui travaillent dans le domaine de l’environnement. Il veut savoir qui dirigent l’entreprise, leur mission, et les projets envisagés par ceux-ci. Il veut pouvoir voir brièvement quels sont les objectifs et si ceux-ci ressemblent aux objectifs de sa propre compagnie, il veut pouvoir contacter le président de la compagnie pour discuter d’association.

Utilisation de l’application :

S’informer sur les objectifs et projets de la compagnie, être en mesure de comparer et de contacter la compagnie.

Profil utilisateur :

Assez a l’aise avec l’utilisation d’un ordinateur. Il est capable de cibler rapidement l’information qu’il recherche, faire des recherches, envoyer des courriels et faire du traitement de texte. Il est aussi capable de jouer au poker en ligne et de mettre à jour ses réseau sociaux (Jumo, Facebook, Myspace, etc.).

Étape 6 - Maquette préliminaire

Je me reprend. Je comprend maintenant que «maquette préliminaire» n'est pas la même chose que «esquisse fonctionnel»...

Alors voila. Je travaille sur un projet pour mon beau père. Ce projet consiste à refaire le site web de sa compagnie, EnviroGaz. Voici le site qui existe déjà : http://www.enviroval.ca/envirogaz/

Je crois que le point fort est de garder l'entête simple et le contour «feuille de papier / trait de crayon» qui rappelle le thème de l'environnement.

Le point faible est qu'il y a beaucoup de texte, et j'ai de la difficulté à bien l'organiser. Je pense aussi qu'il manque d'image (la flame du logo serait répétée sur toutes les pages, mais ce n'est pas ce que je voudrais)

Finalement, il reste encore beaucoup de travail à faire. Et le texte reste à être retravaillé.

Étape 4 - Concevoir l'interactivité de la page-écran

Wired Frame

Voici l'esquisse fonctionnel de la première page.

Design Pattern

J'ai choisi d'utiliser le «repeated menu» qui consiste à répéter la navigation principale en pied de page. Ainsi, les utilisateurs sont en mesure de se retrouver plus facilement.

http://www.welie.com/patterns/showPattern.php?patternID=repeated-men

De plus, pour la page de FAQ, qui sera ma deuxième maquette, j'ai choisi l'idée du retractable menu.

http://www.welie.com/patterns/showPattern.php?patternID=retractable-menu

Étape 3 - Le contenu de votre site

Définir le contenu
Énumérer - Catégoriser – Structurer
Pages : Accueil, Historique, Mission, Services, Salle de presse, FAQ, Contacts
Images : logo, image d’entête, photos des membres de l’équipe, diagramme
Type de texte : professionnel, vous, vocabulaire spécifique au domaine (scientifique)

Je propose de garder l’accueil (en mettant le lien sur le logo en haut de page, ne pas garder du texte « Accueil » c’est inutile), Qui sommes-nous (historique/ mission/ équipe) qui raconte l’histoire, les détails sur la formation du groupe, garder communiqués qui contiendra salle de presse pour indiquer les conférences que le groupe donne ou auxquelles il assiste et les articles de journaux et les événements. Bien séparer en paragraphe. Ensuite, je propose de garder le FAQ pour les questions, peut-être ajouter une ou deux autres questions. Enfin, réalisation qui inclura les sections projets et étude de faisabilité. Finalement, la page nous joindre se séparera en 2, soit contacts et la possibilité d’envoyer un e-mail. Je propose d’ajouter des réseaux sociaux pour pouvoir se tenir au courant des actualités, soit Twitter, Facebook, Jumo, etc.
Structurer le contenu
Accueil
Qui sommes-nous : historique et mission, équipe
Communiqués : revues de presse (journal), événement
Faq
Réalisation : Projet/ études de faisabilité
Nous joindre : contact, envoyer e-mail, liens Facebook etc

Étape 1 - Définir la problématique et se fixer des objectifs

Définir la problématique
Thème choisi : EnviroGaz, un site sur une compagnie qui fait de la biométhanisation
Les objectifs du site : renseigner l’utilisateur sur l’entreprise d’EnviroGaz, ses réalisations et pouvoir la contacter.
Besoins des usagers : connaître ce qu’est la biométhanisation et comprendre les buts et réalisations de l’entreprise.
Enjeux ergonomiques : il n’y a pas vraiment d’éléments particuliers ou de contraintes à part le fait de garder l’information simple et facile à trouver, et rapidement.
Se fixer des objectifs
Objectifs personnels : je veux que les maquettes rencontrent les besoins de mon client et qu’il sera pertinent pour les utilisateurs. Je veux que le site soit pertinent et bien réalisé.
Paramètres techniques : le site doit être facile à consulter. L’information doit être courte et explicative, on doit y retrouver ce que l’on cherche. Et particulièrement être capable de rejoindre les responsables (contacter).

Design - Persona

Voici le persona pour le projet final de Design.
Je vous présente Monsieur Simon Jacob, investisseur.

Design - Interface Mobile

Dans le cadre du cours de Design, j'ai créé un interface mobile pour le site de Presse Café, où je passe beaucoup de temps ces derniers jours !
Voici le résultat

Design - Maquette

Et voici la maquette pour le projet d'apprentissage en ligne !
Ce projet est réaliser dans les cours de design et de production particulièrement.
On est encore en forme !

Design - Esquisses fonctionnels

Voici l'esquisse fonctionnel que j'ai plus/moins retenu.
La maquette en cours de réalisation.... :)