Mini-PortFolio

Mon bilan personnel de fin de session

Finallement, la fin de session est à quelques jours d'ici. C'est le gros rush pour finir les travaux et nous somme tous occupés à completer ce qui nous restes à faire pour bien passer la session. Mais je crois qu'il serait bien de finir mes blogues, de session, par un petit bilan personnel du cours de design d'interfaces. Au cours de l'année scolaire, le cours c'est divisé en 2 parties car nous avons eu 2 professeurs pour ce cours. Le premier a du partir pour tenter un avenir dans une nouvelle boîte. Chaque partie du cours a été très différente de l'une de l'autre car 2 profs n'enseigneront évidamment pas de la même façon. Philippe Bonneau était beaucoup plus technique et exigeant sur les procédures à faire dans l'industrie car il a une grande expérience en la matière. Il avait autrefois sa propre compagnie de design et il sais plus que n'importe qui comment ça marche. Ses cours était beaucoup plus axé sur la théorie et nos exercises se faisait à la maison. Il manquait peut-être un peu d'ouverture et très "by the book" mais c'est la personne idéal pour bien préparer un éleve à son travail futur. Mon deuxième prof, Dominique Girard, est très différent. Lui-même possède sa propre expérience dans l'industrie, tellement qu'on lui a même demandé d'enseigner au collège. Il est beaucoup plus jeune que Phillipe et moins expérimenté mais c'est ce qui le rends plus ouvert et plus près de nous que Philippe. J'apprécie aussi sa technique d'enseignement avec une première partie avec de la théorie et la seconde pour faire des exercises de création. C'est une superbe façon pour nous de pouvoir enfin le pratiquer explicitement et d'avoir un feedback immédiat du prof. Les power points qu'il prépare pour les présentations sont super et a énormément de temps et de travail à l'intérieur de ses PP. Je les gardes pour des consultations futures. Pour bien apprendre des bonnes techniques de créations, Dominique est le prof idéal pour ça. Pour conclure, vu que le cours de design ne possède aucune programmation, c'est un des cours que j'ai apprécié le plus et j'espère fortement que le prochain cours de design sera tout aussi divertissant et inspirant.

Mes styles de Design les plus inspirants

Il n'y a pas si longtemps, nous avions eu un cours de design qui portait sur des techniques pour décarrer un design d'une interface. Personnellement, j'ai trouvé que la présentation dans le cours fut la plus inspirante, pour des travaux, de toute ma formation TIM à ce jour. Nous avons survolé 25 trucs efficaces pour bien designer une interface web et j'en remercie mon professeur d'avoir pris le temps de créer un power point si pratique et utile. Cependant, pas tous les 25 ont retenu mon attention mais j'aimerais cité ceux qui mon le plus inspirés pour mon dernier projet de page web.

1) Faire déborder une image au delà du cadre.
2) Laisser un cadre ouvert.
3) Utilisation d'un dégradé de couleur.
4) Réutiliser les couleurs d'arrière-plan dans les images.
5) Désaligner les éléments.
6) Traiter les coins des cadres.
7) Juxtaposition d'images

Voici en gros ce que le résultat donne sur la page index de mon projet web.

Le style retro de Fallout

Connaissez-vous Fallout ?? Ce jeu de rôle qui a maintenant 10 ans est l'un des meilleurs jeux de rôle pour pc. Pour vous résumer l'histoire, c'est un univers poste-apocalyptique où le monde est presque mort et quelques villes essaient de reprendre le cours de la vie avec le peu de technologie qui leur reste. Mais je ne veux pas parler de ce jeu pour son histoire. Ce qui est vraiment extrordinaire de ce jeu est que même si le jeu se passe dans les années 2200, le monde est presque détruit et le temps c'est bizarrement arreter dans les années 50 mais en ayant une technologie franchement supérieure. Le style du jeu est ce qui le rends si amusant à jouer, sa rétroactivité. Vous irez voir sur un de leur site officiel et vous comprendrez la signification de l'image de mon premier blogue.

http://fallout.bethsoft.com/index.html

J'ai toujours recherché à recopier le style retro de Fallout dans certaine de mes oeuvres en multimedia mais en vain. Je trouve que que ça donne du punch au jeu et le rends visuellement plus agréable à jouer. Mais j'image que vous devez jouer pour vraiment comprendre ce que je veux dire. Le style futuriste avec un genre retro, est un mélange qui en vaut la peine.

Le site pourris de mon prog d'anglais

Ahhh ma merveilleuse prof d'anglais qu'on dois si chaleureusement nommer par le titre de docteur. Je ne sais pas si elle est au courant, mais au Québec, seulement les médecins pratiquants ont le droit de se faire appeler par le titre docteur. Mais de toute façon, ce n'est pas pour ça que je vous parle d'elle. C'est au sujet de son site web pour les étudiants. Son site est affreux et je voulais avoir le plaisir de vous présenter à quel point son site a des lacunes graphiques et des erreurs CSS. Juste son font d'écran nous empêche de lire correctement ce qu'elle veut de nous faire lire lors des devoirs. Nous devons "hiliter" le texte pour être capable de lire correctement.

Je ne sais pas si quelqu'un lui a dis, mais son code CSS ne devrait pas répéter l'image de son fond d'écran. Mais les américains, ils sont si parfait n'est-ce pas ? Alors je n'oserai même pas lui dire que son site est vraiment pourris. Il me reste que 2 semaines de cours avec elle alors corriger son site en vaux même pas la peine. J'espère juste qu'elle ne tombe pas sur mon blogue avant la fin de la session hehehe.
Oh et puis ne cliquer jamais sur le lien pour lui envoyer des emails cars vous aller créer une boucle d'ouverture de page. Essayer vous verrez.
Mais bon vous irez voir par vous-même

http://langues.cmaisonneuve.qc.ca/sbeller/

Compétitions de Design

Resalut tout le monde. La fin de la session arrive à grands pas et c'est le temps ou jamais d'écrire des blogues. Évidamment, comme je suis jamais inspiré, je googlais le web quand je suis tombé sur un site de compétition de design. Si vous avez envie de mesurer vos telents de designer contre des adversaires de nimporte où dans le monde vous n'avez qu'a vous inscrire et de lire les réglements de la competition en cours. Il y a toute sorte de disciplines différentes comme de la photographie ou de la conception de page web. Des pris de 10000$ et plus sont remit aux trois premières positions. Alors si vous croyez avoir ce qu'il faut, aller jetter un coup d'oeil et si cela vous intéresse, inscrivez-vous et bonne chance !!!

http://imaginecup.com/default.aspx

Trucs, astuces et tutoriaux photoshop

PhotoshopCAFE

Vous êtes pourris en photoshop ou bien à cours de trucs et d'astuces ? Vous êtes gènés pour aller demander des conseils au près des autres ? Bienvenue à photoshop CAFE. Ce site est le meilleur outil de référence photoshop pour des conseils, trucs et remplis de tutoriaux. Si vous êtes en manque d'inspiration, il a une panoplie de lien vers des images crée entièrement avec photoshop. Vous n'avez qu'à vous inscrire gratuitement pour recevoir les dernières nouvelles et avoir accès à une banque d'information pour vous aider à développer vos talents photoshop. Le plus extrordinaire la dedans sont les tutoriaux pour créer toute sorte de choses comme une balle en vitre réaliste ou bien comment faire des bons effets avec des filtres et aussi des trucs pour créer des photomontages extraordinaires. Ils sont expliqués à l'aide de texte avec images étape pa étape et vous avez même des tutoriaux en video et tout ça évidamment gratuitement. Mais ce n'est pas tout! Ce site contient un magasin en ligne pour toute sorte de documents audio/video et des livres pour commander. Vous voulez connaitre les meilleurs secrets photoshop? Allors achetez-vous un des dvd et éclater-vous. Une fois rendu maître en photoshop, vous avez l'option de faire des recherche pour un emploi directement à partir de PhotoshopCafe. Un outil de recherche est accessible avec une banque d'emploi disponible mais principalement au États-Unis malheureusement. Ou préfèrez-vous montrer ce que vous savez faire aux autres ? Chaque mois, des événements photoshop sont parfois organiser pour discuter des dernières versions et amélioration. C'est comme des grosses expositions photoshop, et oui cela existe vraiment. Allez faire un tour et explorer ce site si vous êtes un amateur ou même un professionnel de photoshop. N'importe qui peut y trouver quelque chose de super interressant pour lui.

À la demande de mon nouveau prof de design

En classe, nous avions fait un exercise de remise à l'ordre des éléments de pages internet particulièrement mauvaises. Notre professeur nous a demander de publier notre oeuvre dans notre blogue et c'est ce que je vais faire. J'ai choisi le site de la pizza Donini qui semble en construction depuis des lustres. Comme le site comme tel était inaccessible, je n'avait pas de modèle graphique comme tel et j'ai dû improviser pour designer quelque chose de concret.
J'ai commencé par me servir du logo officiel de Donini avec une partie du fond pour avoir des vrais éléments de la pizzeria. Avec ça, j'ai créé la banière de l'interface en copiant et en fusionnant une nouvelle partie qui s'étire jusqu'au bout de la page. J'ai mis un beau petit texte bien contrasté avec l'arrière-plan qui spécifie ce que Donini offre avec une belle image d'une pizza qui a lair bonne. La forme ronde de l'image était pour imiter la forme de la pizza, une image triangle ici n'aurait pas bien eu sa place. Le petit espace en noir que j'ai laissé en haut était pour metre des liens rapides que les utilisateurs pourront accéder rapidement. Vers la gauche j'ai mis le menu assez visiblement car 75% des utilisateurs viendront s'informer justement du menu. Les plats les plus importants et les plus populaire de Donini sont là accompagné d'un point en forme de pizza parce que c'est la pizza leur spécialité. Dans le coin inférieur droit, j'ai rajouter une image de belle tomates avec une opacité a 50% pour ne pas trop quelle soit visible pour déranger l'oeil. C'est un ajout d'arriere-plan utile pour montrer les belles tomates que le restaurant utilise. Pour finir, le centre est réservé pour le texte et les éléments dynamiques.

À ne pas faire

NON MAIS C'EST QUOI ÇA ?? Note à tout le monde. Lors de design de logos (parce que justement nous sommes dans ce genre de création) c'est assez important de faire attention à ce que notre oeuvre représente. Comme ce logo là à gauche justement. Le designer a bien choisi son idée en introduisant un adulte et un enfant avec un bon contraste avec le fond. La couleur du fond est pas agressante etla police est super bien lisible. Mais il faut faire gaffe à la façon dont notre design est perçu. C'est riduculement drôle d'avoir vraiment rendu ce logo officiel car je crois qu'il fait penser à tout le monde la même affaire n'est-ce pas ?? Je suis tombé sur ce truc en faisant une recherche d'images de "Bad logos" sur google. Vous essayerai, ce n'est pas le seul à être ridicule.






En voilà un autre exemple. Je n'ai pas trop compris le but de cette compagnie, mais c'est japonais. Il est vrai que les japonais sont bizares et quand ils regardent ça, peut-être qu'ils voient des lettres bien normales. Mais pour nous, les gens normaux, ce n'est pas le meilleur truc à aller afficher au centre ville de montréal. La simplicité des logos peuvent parfois être une mauvais idée. Même si ce n'est pas le cas, on voit 2 personnages. On aurait pu simplement changer les petits ronds pour quelque chose d'autre et probablement que le représentation aurait été différente. Mais bref, tout ça pour dire que même si tous les éléments sont en places et bien visibles, le message à des petites chances d'être perçu d'une mauvaise façon.

L'interface de mon site de MegaMan

Projet final du cours en HTML et crée entièrement à l'aide de codes CSS, cette page MegaMan à été réalisée par pur plaisir. Au début, je n'avais pas d'idée générale pour le design alors j'ai un peu improvisé. J'ai tout de même rendu le site très simple et facilement navigable avec des couleurs digne du sujet. J'ai voulu rendre la navigation la plus simple et primitive possible, boutons à gauche avec contenu au millieu, titre en haut et informations en bas. Le site comme tel a quand même beaucoup de contenu images car j'ai crée des états différents sur les boutons pour chaques pages du site avec des couleurs sujet au titre de la page. Cependant, le design du contenu des informations est pratiquement le même de page en page tout simplement pour rendre la navigation entre les pages beaucoup plus facile pour les yeux. Cela évite d'avoir trop de changements brusques qui pourrait perdre l'attention de l'internaute.

Le contenu comme tel est inséré dans une boîte de texte défilable pour créer un espèce de design futuriste qui se marie bien avec le jeu MegaMan. La police, elle, est simple et typique, pourquoi? Tout simplement parce que les polices simples et typiques sont les plus faciles à lire. Je ne voulais pas que le lecteur aie mal à la tête après 2 minutes. J'ai également choisis une couleur de texte qui avait un excellent contraste avec la couleur du fond. Par contre, la police des boutons est différente et a plus de style tout simplement parce que le lecteur n'a pas à y lire un texte. Le reste des informations moins pertinantes est dans le bas de la page pour ne pas trop déranger l'internaute.

http://eleves_tim.cmaisonneuve.qc.ca/e0000382/pageMegaman/index.html

L'interface du site de StarCraft 2

Ahhh Blizzard ! Ces types sont vraiment les rois et maîtres dans leur domaine et ont toujours su se démarquer parmis les meilleures compagnies de jeux par leur savoir-faire sur les interfaces graphiques de leurs jeux. Alors, imaginez que les meilleurs graphistes multimédia au monde travaillent pour cette compagnie et qui présentent leur produits sur une page web, son interface devra nécessairement être de toute beauté. C'est tout partuculierement le cas pour leur page de StarCraft 2.

http://starcraft2.com/

Le design est tout particulierement bien fait, car il a des rollovers avec animations un peu partout accompagné d'un petit son qui donne l'envie de tout simplement s'amuser à se promener avec le pointeur de la souris. La barre de menu est simple mais captivante. On sait où on se dirige sans probleme.Même les images interactives pour accèder aux différentes informations sur les races, possèdent également des rollovers avec un genre de FadeIn / FadeOut vraiment trippant. C'est très inspirant pour des idées futurs. La police est suffisament grosse et le contraste avec le fond est facile pour la lecture. Même si du texte se retrouve par dessus un image, un fond avec un différent contraste est placé sous l'espace texte pour non seulement nous rendre la lecture lisible mais aussi de garder un bon détail sur l'image.

On peut aisément fureter le site sans se perdre et en sachant toujours où nous sommes par un gros rappel en haut de chaque page. Explorer entre les races et leurs unités est un concept super bien fait avec un menu de thumbnails de chaque éléments. On y montre ensuite une page interactive avec le choix de visualiser les éléments en pleine action et meme de pouvoir entendre son bruit.

Mais le mieu dans tout ça est qu'il n'a pas de pub désagréables qui nous achalent tout le temps. Elle est enfoui dans le bas de la page bien à l'abri de nos yeux qui s'en contre-foutre. Son design est presque parfait.

*** Ne mangez pas la neige jaune. ***

Flash et le Design d'interface

Bienvenue dans la nouvelle ère post-HTML. Depuis peu de temps, l'interface en html de plusieurs navigateurs et de développeurs est devenu très primitive et peu attrayante. Quoi de plus monotone que de remplir un merveilleux formulaire à travers un long texte sans aucune interactivité.

Mais l'amélioration de la technologie des logiciels interactifs comme Flash, permet de créer des interfaces dynamiques et beaucoup plus plaisantes qu'une simple page html. Ce lien http://www.veblog.com/fr/2002/0422-flash-bonne-ui.html vous amenera sur un article qui présente justement ce nouveau concept d'interactivité crée avec Flash. On y démontre un exemple de système de réservation hôtelière en version html et en version Flash pour faire une comparaison avec les 2. D'ici quelques années, le html deviendra une interface rare.

*** Soyez bon avec vous-même. ***

Qu'est-ce que le "Design d'interfaces" ?

Non, mais c'est vrai !

De quoi parle-t-on exactement quand on pronnonce cette phrase qui doit être terriblement payante au Scrabble ? On sait que cela peut servir à nous aider à créer une interface esthétiquement plus belle, mais comment procède-t-on ? Plus facile à dire qu'à faire. Le design est beaucoup plus complexe qu'il en a réellement l'air, car l'art n'a pas sa place ici et tout doit avoir une raison d'être.

http://www.use-design.com/datas/designInterfaces.htm

Ce site possède quelques définitions et répond à des questions plus techniques. Il y a aussi une panoplie de liens sur le sujet.
Peut-être que dans quelques semaines, mon groupe et moi allons être des designers de premiere.

*** Paix et prospérité. ***

Blogue d'Eric Jacob groupe 02

Bonjour et bienvenue sur mon blog sur les aspects du design d'interfaces (que je fais avec la plus grande motivation pour mon merveilleux cours de Design d'interfaces).

Chaque semaine, je discuterai d'un aspect différent du design et je rajouterai mes opinions personnelles (et je dis bien personnelle alors libre à l'expression).

J'essayerai de tout mon possible d'amener des sujets intéressants alors si après 2 ou 3 semaines je n'ai toujours pas capter votre attention, ne perdez pas espoir, du moins je suppose, j'arriverai bien avec un sujet de discution que vous aimerez bien. Alors en attendant ne conduisez pas si vous êtes trop partit.

*** Dieu vous aimes. ***