Trouvaille - Catfish

Un bon moyen de faire de la publicité pour un site web est de lui faire un site web intéressant et original. La plupart se contenteront de faire une belle page web en flash avec les bandes-annonces, la synopsis, une liste des personnages et peut-être des petites vidéos bonus. Dans quelques cas toutefois, et récemment cela se voit de plus en plus, certains iront plus loin. Certains sortiront du lot afin de non pas seulement exposer le film, mais aussi de faire entrer l'utilisateur dans le monde du film.

Le site du film Catfish est un excellent exemple d'une telle manière de procéder.

Trouvaille - Life, Below 600px

Au cours de la session dernière, nous avons fait une "chasse-ô-typos", un projet ou nous devions trouver de bons exemples (et un mauvais exemple) de typographie pour plusieurs catégories. J'avais choisi pour la catégorie "Typographie vs Mise en Page" l'article Life, Below 600px du designer web Paddy Donnelly. Je l'avais choisi non pas seulement parce qu'il est un très bon exemple visuel de mise en page mais aussi parce qu'il s'agit d'un article très éloquent sur la théorie de la mise en page.

Plus précisément, il aborde la notion du pli (fold) dans un design. Cette notion affirme que les éléments les plus importants d'un article de journal ou de site web devraient tous se situer au-dessus d'une ligne invisible. Donnelly explique pourquoi d'après lui ce concept est vieillot et ne s'applique plus très bien au web.

Je suis dans l'ensemble d'accord avec lui. Le pli n'est pas entièrement mauvais, c'est important pour un apprenti designer d'apprendre certaines notions d'organisation. Toutefois, au cours de son apprentissage, un designer doit aussi apprendre à sortir de sa boîte et explorer de nouvelles manières de faire les choses. Les utilisateurs ont peut-être aussi moins peur de "scroller" que l'on puisse le croire.

Je crois que tout le monde du cercle Zooland devrait au moins y jetter un petit coup d'oeil. Pour ma part, je crois que la seule chose qui manquerait serait un monstre marin dans le bas de la page.

Prove yourself! Les Formats d'Épreuve en Photoshop

Vous avez une vision. Vous savez exactement ce à quoi votre design de site web devrait ressembler. Vous réalisez votre maquette sur Photoshop et tout est exactement comme vous l'imaginiez. Vous la tranchez en différents fichiers image, vous commencez à construire votre HTML et votre CSS, vous le testez progressivement dans le navigateur de votre choix et tout semble bien aller. Tout, sauf un petit détail. Vous remarquez peu à peu que les couleurs de votre site dans un navigateur ne sont pas exactement les mêmes que sur votre maquête. Comble de malheur!

La gestion des couleurs sur Photoshop - voire sur un ordinateur en général - se trouve à être quelque chose de très technique que je ne maîtrise pas du tout. Mais je connais tout de même une petite fonction qui peut vous permettre de voir une image dans Photoshop exactement comme elle serait dans un navigateur. Il faut changer votre format d'épreuve.

Tout en haut de l'onglet Afficher, caché sous le fameux "montrer tous les menus", se trouve l'option Format d'Épreuve. Mettez-moi ça en RVB Moniteur! Vous verrez les couleurs de votre image changer légèrement, la montrant telle que destinée pour être vue dans un moniteur.

Mais ce n'est pas fini. Après la sauvegarde, il se peut que votre image soit comme elle était avant que vous ne faisiez les réglages si-dessus. Lorsque vous sauvegardez votre image, que ce soit en format natif .psd ou directement en .png ou .jpg, prenez garde de ne pas laisser cochée l'option Profil ICC. Elle est normalement cochée par défaut et elle l'est aussi en sauvegarde "pour le web et les périphériques". Laisser cette option cochée inscrit le profil sur l'image et tout navigateur capable d'interpréter les profils de couleurs (la majorité des navigateurs modernes) interprétera votre image avec ce profil, ce que vous ne voulez pas. Du moins, pas maintenant.

Réglez vos formats d'épreuve et prenez garde au profil ICC et tout devrais marcher comme sur des roulettes, les images étant exactement semblables de Photoshop au navigateur.

Sources:
http://www.usabilitypost.com/2008/07/30/photoshop-color-profiles-for-web-images/
http://www.viget.com/inspire/save-for-web-simply
Ainsi que quelques tests personnels.

Esthétisme vs Organisation - Une Petite Parenthèse

Il y a un point qui a été soulevé au tout premier cours de Design d'Interface que j'avais envie de ramener. Je n'ai pas l'intention de m'y éterniser ou d'en rédiger une thèse de doctorat (Alexis Daoust, Ph.D!), je ne veux qu'ajouter une petite parenthèse au sujet.

La question portait sur l'importance comparative de l'esthétisme et de l'organisation d'un site web. Lequel est le plus important? Quel est celui qui accrochera l'utilisateur, celui qui l'incitera à revenir? Quel est celui qui le fera dire "wow, ça c'est un bon site"? Plusieurs points de vue ont été brièvement explorés et tous semblaient d'accord que les deux ont leur importance.

Trucs de Blogger: Les Libellés et les Sauts

Je viens de recevoir quelques petites questions d'Olivier Beaudry concernant certaines fonctionnalités de Blogger. Plutôt que de lui répondre directement, je me suis dis que je pouvais en faire une entrée de blog. Ha ha! Merci Oli!

Les libellés: Il est possible d'ajouter des tags - ou des libellés, comme ils les appellent - sur nos messages dans Blogger. Il ne suffit que de les entrer dans la petite zone de texte sous la grande zone de texte lorsque vous faites un nouveau message.

 

Omnivox 2.0

Ouache.

Ah, Omnivox. Certains d'entre nous au collège Maisonneuve y vont très souvent, moi notamment. Parfois jusqu'à une fois par heure durant la période de la remise des notes de fin de session. À force de le voir, on s'y habitue, mais il y a vraiment place à amélioration!

Conception Centrée Utilisateur

**C'est un travail pour le cours! Circulez, il n'y a rien à voir!**

Le processus de création: maintenant avec du bleu!

Bon, d'accord, ça peut quand même être d'un certain intêret. On nous a demandé d'illustrer le processus de création d'un projet qui serait centré sur l'utilisateur. Nous avions appris lors d'un cours précédent les cinq étapes principales d'un processus de production pour un projet multimédia, ici illustrées en vert. Ces étapes et leurs sous-étapes sont plutôt instinctives et faciles à appliquer.

Tenter d'y intégrer l'utilisateur en rendant l'expérience la plus conviviale possible pour celui-ci relève du gros bon sens. Le site web serait ergonomique, l'affiche serait facile à lire, le menu du jeu serait clair. Mais il y a des moyens et des trucs qui peuvent aider à intégrer l'utilisateur dans le projet encore davantage, d'où les ellipses bleues. Pour un site web par exemple, lors de l'analyse, on peut se demander ce que voudrait voir l'utilisateur sur le site, ou plutôt ce qui le motive à le visiter. Par la suite, on peut créer des personas, de faux profils d'utilisateurs potentiels du site. D'imaginer plusieurs points de vue différents peut aider le créateur à sortir de sa propre boîte pour rejoindre le plus grand nombre de personnes possible.

Les "focus groups" peuvent venir par la suite, pour les projets de plus grande envergure. Pour les projets plus petits, le truc des personas peut être d'une grande utilité.

Indésigné, semblerait-t-il.

Je vous souhaite à tous la bienvenue sur mon blog, Indésigné. Je me présente: Alexis, étudiant en Techniques d'Intégration Multimédia. Je crée ce blog notamment en tant que travail pratique pour l'un de mes cours... mais regardez-moi ce nom de domaine! Wow! Je vais être obligé de le garder, autrement ce serait du gaspillage. On ne délaisse pas ça comme un petit site Geocities, un beau nom de domaine comme ça.

Ce blog portera comme sujet central le design. Mes impressions en général sur le sujet, quelques idées pour d'autres projets, des petits trucs par-ci par-là que j'aurai trouvés sur Internet.

Également, bien évidemment, des travaux que je serai obligé d'ajouter pour répondre aux critères du cours. Ne vous inquiétez pas, je vous avertirez lorsque ce sera le cas!

Donc, je le réitère, bienvenue! Il s'agit peut-être du début d'une grande aventure.




Ou je vais tout laisser tomber une fois le cours terminé. Mais ce serait dommage!