9.2.2012 par Mitch.

…de mes sessions aux techdays, avant de faire le link vers les webcasts (d’ici bientôt):

www.michelrousseau.fr/private/blend4-43.pptx

www.michelrousseau.fr/private/Ne ratez pas le métro(43).pptx

Posté dans Win8, Metro, 2D | Aucun commentaire »

9.2.2012 par Mitch.

Holala, ca y est, les Techdays 2012, c’est fini (pour ma partie, hein, ya encore des sessions aujourd’hui…). Vraiment, des sessions super bien ficelées, des rencontres géniales (merci Romuald pour cette  bien trop courte discussion, merci Florent, merci Mathieu et à tout les autres…), un super couscous avec mes collègues de dans 1 mois que j’ai (rhoo, les anecdotes de Mr. Vernié…), merci à l’organisation qui nous a permis d’avoir des salles bien dimensionnées (toujours pleines, mais pas bourrées – cette phrase me fait vraiment penser à une vieille copine qui..bon, heuu, pardon…). Bref, ce fut une première bien enrichissante.

Enfin, bien sûr, mention spéciale à tout ceux qui se sont pressés à nos sessions, avec une mention “ultra spéciale best award Jean Dujardin” pour les développeurs qui ont assisté aux miennes. See you next year… Techdays 2013 GOGOGOGO….

EDIT : Et en me relisant, je me rends compte que je n’ai pas remercié Audrey, ma co-sessionnaire. Merci donc Audrey pour cette session sur le design. On s’est bien marré. On recommence quand?

Posté dans Win8, Metro, 2D | 2 commentaires »

3.2.2012 par Mitch.

…no see. Ouaip, ça fait un bail que j’avais pas posté ici. La faute à une période pré-microsoftienne chargée, il faut bien finir les dossiers en cours. En plus de la préparation de mes deux petites sessions pour les techdays 2012. Petite piqure de rappel donc: Mes sessions orientées design auront lieu Mardi et Mercredi à 11 heures, dont une avec une future collègue Audrey petit. Ca se trouve Porte Maillot, au Palais des congrès. Une session sur le revamping d’un design des années 90 et une session où je construirai une appli complète avec Blend.

Voilà. En dehors de ça, une super journée qui m’a permis de (re)découvrir Shaka Ponk, ce super groupe français. Du coup, j’ai été à la Fnac me payer le dernier album “Sex, plugs, and Vidiot’ape”  Edit : Là, je me rends compte que le vrai titre, c’est “The Geeks and the Jerkin’ Socks”, mais j’ai acheté la version de l’album qui contient tout l’album en DVD, en plus..Et il porte le nom du DVD…bref. C’est une tuerie, cet album. Super fun, gros son, diversifié, tout les morceaux sont des hits potentiels, mature. C’est assurément LE groupe de l’année.

Du dessin sur guitare aussi, puisque j’ai repris le logo de la gratte à Hetfield et je l’ai posé sur mon Explo à moi. Enfin, presque, puisque j’ai posé le graph sur un feuillard de protection d’Ipad, et lui, je l’ai collé sur la pelle. Du coup, si le dessin ne me plait plus, zou, j’en fais un autre, je décolle le précédent et je recolle…

Allez, ce week-end, on se détend, et on arrive concentré aux Techdays.

Ne pas remettre Shaha ponk, ne pas remet….

Posté dans Win8, Metro, Musique, Tech, 2D | Aucun commentaire »

9.12.2011 par Mitch.

Rhoo, hier soir, j’ai bloqué la télé 2 heures pour pouvoir décortiquer la nouvelle interface “tuile-win8-metro” de ma 360 adorée. Un régal pour les mirettes, un apport indéniable en fluidité et en parcours de l’information. Le mode panorama, c’est tout de même une tuerie. Bref, c’est beau, c’est ergo, c’est smooth. C’est la classe. Juste le fond gris de base, qui, même s’il met bien en valeur les tuiles, est un peu tristoune pour une machine  de gamers (hein, oui, tout de même…).

Allez, pour découvrir ceci, hop, un raccourci…

Posté dans Win8, Metro, Tech | Aucun commentaire »

24.11.2011 par Mitch.

En ce moment, et avec les annonces sans ambigüités qui nous viennent du service Maketing de Microsoft, on me pose de plus en plus de questions concernant l’aspect graphique, la charte et les best practices du style “Metro”. Voilà pourquoi je vous en propose un bref balayage, plus comme un aide mémoire que comme un modèle extensible (puisque celui-ci ne sera vraiment définitif qu’à la sortie de Windows 8, je pense) et basé sur mon expérience personnelle.

Le but du style Metro est de proposer des interfaces claires, intelligibles et adaptables. Les UI Metro seront claires, concises, dynamiques, intelligentes et instructives dans le sens où une partie de leurs emplacements permettent d’obtenir une information évolutive sur le contenu qu’elles renferment.

Les UI seront ainsi pensées pour être non plus multi-formats, mais inter-formats. En effet, plutôt que de proposer une interface déclinable en fonction des écrans ou des devices, c’est le device qui devient le porteur de l’appli : Si l’écran passe en mode portrait, l’appli se reconstruit pour s’inscrire dans cette nouvelle conformation. Fini les applis ou les sites web qui contiennent un “résolution optimum: 1024*768.

Dans le même esprit, les applis sont pensées pour être fullscreen. Les icônes systèmes ou contextuelles sont reléguées sur les bords pour libérer l’espace centrale, favoriser la préhension et l’ergonomie “à base de pouce”, et masquées par défaut. Le template mis en place pour Windows 8 veut que les icônes de l’appli soient dans une barre masquée en bas de l’écran, que la barre système soit à droite…etc.

Bien sûr, l’UI sera intrinsèquement multitouch, puisque l’expérience globale et de nombreux fondements dans la disposition graphique sont hérités de gestures propres au multitouch. Par exemple, avec la pre-beta de Win8, il est incroyablement difficile de faire une multi-sélection avec la souris, alors que la même action est instinctive en MT.

La couleur et la forme: 

Pour obtenir un impact visuel fort sans alourdir la composition et pour faire la part belle au contenu découvrable et dynamique, les couleurs sont volontairement contrastées et disposant d’une saturation (ou vibrance) élevée. On tourne ici autours d’une palette de couleurs proches des primaires. En tout cas, il vaut mieux se cantonner à l’usage de trois/quatre tons différents et trois nuances par tons pour éviter l’effet “sapin de Noël”. La complémentaire, c’est bien, mais avec des nuances. Employée trop systématiquement, cela entraine une impression désagréablement “tape-à-l’œil”.On fera en sorte que les objets contenant des données dynamiques supportent des couleurs directes, alors que l’on pourra  jouer avec des dégradés légers (deux nuances proches dans le même ton) pour les éléments au contenu fixe. Ces couleurs viennent se composer dans des formes rectangulaires sans arrondis. On fera en sorte que la couleur de background reste neutre pour mettre en valeur les éléments graphiques, les textes et les tuiles. Un espace négatif, en somme.  Bien sûr, tout ceci dans le respect de la charte graphique du client.

La tuile: 

C’est l’outil de navigation par excellence. Le format de cette tuile est un multiple parfait: soit un carré, soit un carré doublé dans sa longueur ou sa largeur et en y ajoutant la marge, de manière à pouvoir combiner les tuiles selon une grille régulière (le fameux Tetris syndrom). L’espacement entre les tuiles est de 12 pixels. D’ailleurs, on remarquera qu’une  grille de base basée sur un pas de 12 px est correcte pour une application Metro. Bien sûr, on pourra rassembler des groupes de tuiles en fonction de leur contenus. En ce cas, la marge entre les groupes sera d’environ 7 fois la marge normale. Dans notre exemple, cela donne 84 px (7×12 px).

La police:

Mais que fait la police ? La police est un facteur TRES important en terme de lisibilité et de hiérarchisation de l’information. On privilégiera la Segoe thin (voire ultra thin si la taille de la police le permet)  pour les titres, et  la Segoe regular pour le reste, voire bold pour les éléments sélectionnés. On jouera aussi souvent sur la taille et sur l’opacité de la police pour renforcer la pertinence ou la hiérarchie des blocs de texte. Attention encore une fois à ne pas abuser : 3 tailles de police devrait suffire. Le contenu rédactionnel est organisé en colonnes afin de faciliter la lecture. Fini les blocs de texte où le regard scrolle d’un bord à l’autre de l’écran. La couleur de la police est neutre (noir ou grise sur fond blanc…). De manière générale, le texte doit être incitatif. Par exemple, sur une tuile, le texte doit reprendre en trois quatre mots le contenu de ce qu’il représente. Un raccourci doit expliquer ce vers quoi il envoie.

Bien entendu, on aligne tout et à droite, de préférence.

Les espacements:

Le contenu de l’appli ne devrait pas être à moins de 24 px du bord de l’écran, pour des raisons pragmatiques de faux contacts. Ce qui nous oblige à nous interroger sur la taille des boutons et des espaces entre ceux-ci. En effet, deux boutons trop proches induisent un fort risque de faux contact ou d’erreur. Là encore, il faut penser Multitouch. Et cette réflexion est valable pour tout élément interactif (scrollbars, radiobuttons, checkboxes…). On veillera donc à ce que chaque élément interactif soit séparé par au moins 6 pixels, voire 12. Pensez aussi au style de l’appli. Par défaut, le système Windows Phone propose deux styles (noir ou blanc). Un contrôle valable pour un style ne le sera pas (valable) pour l’autre. On veillera donc à doubler les temps de production de la customisation des contrôles.

Les icônes :

Elles peuvent être sous forme de tuiles, soit singulières. En ce cas, l’icone doit être enchâssée dans un cercle. Cela facilitera sa reconnaissance. l’icône sera simple et mono-couleur. Le concept sera expurgé de toute interprétation et il serait assez bienvenu de choisir un symbole multi-culturel compatible.

Les images :

Le contenu est le roi. Cela veut dire que vos médias images doivent être les princes de l’application. Optez pour de belles images, grandes (au moins 120×120 px) et contrastées. Un bon décadrage est fort utile pour dynamiser encore votre composition. Une image peut être insérée en background, mais celle-ci doit alors être  bien matée en colorimétrie et surtout en contraste afin de ne pas gêner la lecture du contenu. Prévoyez toujours au moins deux images par emplacement, afin de pouvoir alterner le contenu. Prévoyez aussi une résolution assez large (mais pas trop), en cas de redimensionnement (passage du mode landscape au mode portrait). Si votre appli dispose d’un sommaire, utilisez les images comme le font les monteurs dans les revues, c’est à dire comme des accroches visuelles qui décrivent le contenu.

Les transitions et les animations :

Afin de permettre une transition entre les écrans, il faut faire savoir à l’utilisateur qu’une autre page existe. Voilà pourquoi votre page devra induire l’autre page, soit par débordement, soit par apparition partielle. C’est aussi valable avec un élément scrollable. Celui-ci doit montrer que du contenu attends votre venue. Les animations sont un élément essentiel de votre UI. C’est par l’animation que vous pourrez gérer votre contenu dynamique (apparition, slide vertical) ou le défilement de vos pages (fade progressif, scrolling parallaxe). Les états de vos contrôles doivent bien entendu en tirer parti, mais sans abus. Le but n’est pas de faire un “manège enchanté”, mais d’inciter l’utilisateur à cliquer sur telle ou telle partie en priorité. Cela est aussi valable pour les notifications qui doivent être hiérarchisées : un nouveau mail, c’est une animation simple qui dispose d’un time-lag minimal de 5/10 secondes, une alarme critique, c’est une animation implicante (top most par exemple) permanente.

Quelques remarques :

Le plus dur est d’éviter la surabondance de couleurs et d’animations.

Les applis blanches/grises/noires seront légions. Avec une emprise aussi ferme, la créativité va s’exercer sur les détails.

A mon sens , et au vu de ce que je viens de dire, la popup est morte.

Les applis aves 200 icônes sont mortes aussi. Less is more.

Bien entendu, beau c’est bien. Fluide c’est super. Beau et fluide est donc le target.

Petit rappel des guidelines “officielles”, venues de Dieu lui-même (gravé sur tablette, aurais-je pu dire facétieusement) :

Typography. Type is beautiful. Not only is it attractive to the eye, but it can also be functional. The right balance of weight and positioning can create a visual hierarchy. Additionally, well placed type can help lead you to more content.

Motion is what brings the interface to life. Transitions are just as important as graphical design. By developing a consistent set of motions or animations, a system is created that provides context for usability, extra dimension and depth and improves the perceived performance of the whole interface.

Content not Chrome is one of the more unique principles of Metro. By removing all notions of extra chrome in the UI, the content becomes the main focus. This is especially relevant due to the smaller screen size and gesture-based interactions.

Honesty. Design explicitly for the form factor of a hand held device using touch, a high resolution screen and simplified and expedited forms of interaction. In other words, be “authentically digital”.

Posté dans Win8, Metro | 2 commentaires »

14.11.2011 par Mitch.

Donc, demain, à priori, je complète de mon point de vue de graphiste une session donnée par mon poteau David Catuhe, lors des Ms Days de Bordeaux, vers 14h30. Donc, si vous souhaitez en apprendre plus sur Blend, le WPF ou Silverlight, ou encore la 3D, ou encore encore NOVA, ou encore encore encore le graphisme, ou encore encore encore encore le style Metro n’hésitez pas à venir nous rejoindre pour l’évènement MS, à cet endroit:

Palais des Congrès
Av. Jean Gabriel Domergue Bordeaux
33 300 Bordeaux

Voilà, tout est dit, venez nombreux.

Posté dans Win8, Metro, 2D, 3D | Aucun commentaire »

6.10.2011 par Mitch.

Tandis que Blend 5 se montre et démontre son fort aspect “HTML5 oriented”, les ténors du genre n’hésitent pas non plus à montrer les dents. Notamment Adobe, qui ne compte pas laisser le champ libre à Microsoft en ce qui concerne l’authoring de contenus Html. C’est ainsi que l’on apprend que Dreamweaver va se voir doter d’un plugin de conception HTML5, tandis que la preview d’un outil spécifique à, elle-aussi été dévoilée. Il s’agira de Edge, et tout ceci sera Wysiwyg… A suivre, donc, puisque, tout comme SIlverlight ces derniers mois, Flash semble  s’incliner face à l’inertie que prend le HTML5 couplé au CSS3…

PS : en direct de la “Valley”, on me susurre que IBM lance aussi son programme d’authoring HTML 5 (Maqetta). La guerre est donc officiellement ouverte.

Posté dans Win8, Metro, 2D | Aucun commentaire »

5.10.2011 par Mitch.

Pour ceux qui se demandent le pourquoi du comment du nouveau menu Démarrer de Windows Dev Ed (pré-béta de Windows 8, pour les cancres du fond), je leur remet gratuitement ce lien vers le blog de l’acting au sein de l’équipe de dev de cette partie du prochain OS de Redmond. Des réflexions haut perchées sur l’évolution du design des applis, sur l’utilisation des gens, sur l’appropriation des mandats de création par le grand public… Un article intéressant mais qui ne répond toutefois pas aux critiques majeures exprimées à la suite de la Build 2011 concernant la dualité de la pré-béta de WIn 8, à savoir un menu Start et des applis Metro misent à part du tronc commun “WIndows 7”, et comment va s’opérer le mélange des deux, à long terme.

Article ici.

Posté dans Win8, Metro | Aucun commentaire »