29.11.2011 par Mitch.

Si vous voulez savoir comment ce petit filou de Carmack à fait pour obtenir de belles ombres  real-time, tout au stencil, si vous voulez pénétrer les arcanes obscures du calcul mathématique et de la projection du viewport, DOOM3 est officiellement passé en GPL. Alors, hop, on download et on se retrousse les manches !

https://github.com/TTimo/doom3.gpl

Posté dans Jeux, Tech, 3D | 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 »

23.11.2011 par Mitch.

NON. Générateur de soie. C’est là. C’est beaucoup de javascript. C’est beau. Appuyez sur “New” pour voir les options possibles.

Posté dans 2D | Aucun commentaire »

22.11.2011 par Mitch.

…de mourir, avec aujourd’hui YOUtube qui annonce (via des blogs disséminés – dit, c’est miné?) son support de HTML5 en 1080p. Oui, je serai Adobe, j’aurais peur, tout de même un peu.

Posté dans 2D | Aucun commentaire »

21.11.2011 par Mitch.

…et les rêves qui fondent au soleil de la réalité. Oui, aujourd’hui, le jeu vidéo ne recrute pas en France. Donc, si vous faites une école en Infographie 3D, vous pouvez tout de suite oublier votre ambition de devenir Lead Artist 3D en France chez un “gros”. C’est mort. La French Touch, si elle existe encore (si elle a jamais existé, d’ailleurs…), c’est à l’étranger qu’on la demande. En même temps, ça m’a toujours un peu forcé le sourire, tout ces jeunes un peu idéalistes-rêveurs (mais souvent également très doués et volontaires) qui veulent faire du jeu vidéo, ou du cinéma dans des prods internationales. Imaginez si tous ceux qui font  un bac scientifique voulaient devenir spationautes, ou pilotes de chasse…

Bref, c’est triste, mais en même temps, c’est normal. Parce qu’une fois que ces jeunes seront devenus des séniors (et on vieillit vite, dans le milieu), ben, ils voudront pas laisser une place si difficilement acquise…

Et puis, depuis une dizaine d’année, on voit apparaitre un nombre d’écoles, de groupes de formations, de diplômes absolument hallucinants en regard de la demande. Et comme le jeu vidéo, ça fait rêver son Kevin, il tombe dans le panneau. Mais, comme tout secteur d’exception, il faut faire partie de la crème  écrémée pour trouver une petite place et grandir dans ce monde. Bref, on fait miroiter beaucoup, mais moins de 20 % des jeunes issus de ces filières trouvent du boulot (d’après mes propres sources). Et le garde,la première prod passée.

Du coup, on retrouve les CVs dans les petites boites qui font de la simu, du realT, Bref, dans des structures liées à l’industrie, qui embauchent elles aussi des profils plus matures… Pas facile pour les jeunes infos, aujourd’hui.

Posté dans Jeux, 3D | Aucun commentaire »

14.11.2011 par Mitch.

…Dans la guéguerre HTML5 vs le reste du monde, Adobe Flash Reader Mobile est officiellement décédé.

http://www.engadget.com/2011/11/09/adobe-confirms-flash-player-is-dead-for-mobile-devices/

Et de un. Je tremble pour l’annonce du second (suivez mon regard…).

Posté dans 2D | Aucun commentaire »

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 »

8.11.2011 par Mitch.

…avec ses pratiques de merde qui tendent à se généraliser :  Aujourd’hui, je vais chez mon jeuvidéoteur favori (non, pas Steam, l’autre…), afin d’y acquérir pour la modique somme de 59 euros (oui, tout de même) Sonic Generations, pour pouvoir jouer en famille sur la Xbrique. Bon. En tentant de me frayer un passage au milieu des mamies faisant leurs emplettes de Noël, , je jette un œil sur le rayon “Occasions”, parce que, bon, on ne sait jamais, la bonne erreur de rayonnage, la perle rare… Ha, Batman Arkham City… voyons, humhum, 10 euros de moins que le neuf (soit 60 euros)? Allez, je le prends, excusez moi , madame, Ha tiens, les caniches s’est toléré dans les grandes surfaces?

Arrivé au comptoir, le préposé à la vente de contenu ludique m’informe que si je prends le jeu Batman Arkham City en occase (soit 10 euros de moins, je me répète…), le jeu sera amputé d’un bon tiers, parce que DLC, code d’activation, patatitroulère. Donc, si je comprends bien, 1/3 du jeu=10 euros. Donc, ça nous fait le jeu complet à 30 euros, ça, et pas à 70! Je m’ouvre de cette considération philosophico-commerciale à l’autre abruti de caissier (hou, le ton se dégrade, il doit être en colère…), mais j’ai bien senti que :

1- Ca le gonflait grave que j’argumente. Genre, tu le prends, tu le prends pas, je m’en contre-cogne. Si t’as pas les moyens de foutre 10 euros de plus dans un jeu, retourne en Grèce, hé, fils de pauvre.

2- Les mamies commençaient à piétiner sous la double contrainte de leur vessie et de leur emploi du temps de ministre (WC - Toys-r-us- WC - Maxytoys-…). Les caniches commençaient même à montrer les crocs. j’ai eu peur.

3- Je me suis senti con de mégoter sur un jeu d’occasion alors qu’il y a 5 ans, j’achetais tout mes jeux neufs, en me foutant quasiment du prix.

4- Tout le monde s’en branle royalement et avec des gants que les éditeurs du monde vidéo ludique tentent de se remplir les fouilles avec des pratiques commerciales puériles bien qu’innovantes (oui, faire passer un jeu qui vaut 30 euros pour un objet unique d’une valeur de 70 euros, bien que ça fasse un peu mal au cul, c’est innovant…).

Donc, pour résumer, j’en ai marre qu’on prenne ma tirelire pour un plat de cerises. Donc, ton Arkham, aussi bon soit-il, tu te le gardes au chaud (je ne m’égarerai pas à spécifier d’avantage la localisation anatomique de l’endroit chaud) et je l’achèterai sur Steam en Janvier/Février, le temps que l’éditeur ne trouve plus du tout rentable pour un “vieux” jeu de conserver un serveur de licences actif en 24/7/365. D’ici, là, même, avec un peu de chances, les DLC seront inclus. Ou un patch pour déplomber sera disponible, parce que, oui, quand je paye, c’est pas pour jouer à la moitié, au tiers, ou au 3/4 d’un jeu.

Du coup, et comme sur Sonic Generations, j’ai économisé 10 euros (tiens, tiens, encore, 10 euros…), je retournerai m’acheter éventuellement Modern Warfare….

Posté dans Jeux | 1 commentaire »

3.11.2011 par Mitch.

Déjà, la vision de Microsoft sur les OS en 2019, m’a bien planté sur place la semaine dernière. Pour mémoire, cela se trouve là.

Bon. Mais quand Papa Mic décide de se lancer dans la réalité augmentée, voilà ce que cela donne :

http://cgeverything.co.uk/2011/11/02/microsoft-holodesk/

Hallucinant, non?

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

3.11.2011 par Mitch.

Zou, entre deux slides, une image qui me semble particulièrement représentative de l’époque dans laquelle nous vivons. Non seulement, on triche sur son âge à cause du jeunisme empirique que la société nous impose (à grand renfort de biotox, crèmes aux extraits de cul de baleine, chirurgie et tronçonnage  en tout genre), mais lorsque cela ne suffit plus, on triche encore via Photoshop. Déplorable? Je sais pas, en tout cas, ça fait toujours du boulot aux graphistes

Faut-il obligatoirement vivre avec son temps? A quoi ca sert, puisque, par dessus le marché, tout le monde est au courant…

Posté dans 2D | Aucun commentaire »