Lors des premières réunions de conception d’un site internet ou d’une application, il est souvent nécessaire et plus clair de réaliser des schémas des contenus et de la structure attendue des différents écrans du projet. Cette étape de zoning ou de wireframe sert à l’élaboration des premières maquettes graphiques et techniques, ainsi qu’à l’élaboration de cartes d’expériences et de Wireflow en UX design.
Plutôt qu’une feuille blanche, il est préférable d’utiliser des gabarits. Utilisez les planches avec un seul écran à la fois si vous travaillez avec des pos-it, et celles qui regroupent 2 ou 4 écrans si vous griffonnez finement.
Avec ces feuilles, une règle et quelques bons crayons, vous pourrez créer vos wireframes à la vitesse de la pensée.
J’ai tendance à travailler de plus en plus directement avec Adobe XD, mais le papier reste pratique, tout le monde sait s’en servir. Il faut toutefois une bonne capacité d’abstraction pour valider un wireframe griffonné.
De nombreux gabarits aux formats iPhone 5, iPhone6, Galaxy Note 5, Nexus 5x, iPad, navigateurs internet desktop et mobile, smartwatch.
Pratique car utilisables immédiatement, et avec suffisamment de marge pour laisser des commentaires.
UX prototype paper kits
Des kits imprimables d’éléments d’interface standards pour prototyper rapidement sans ordinateur.
De superbes pochoirs avec des éléments d’UI pour crayonner des wireframe réguliers. Un peu cher mais un moyen classieux de gagner le respect en réunion.
À propos du dessin de wireframe
Le dessin n’est pas un talent. C’est une discipline technique. Plus on pratique, meilleur on devient. Je ne suis certainement pas le mieux placé pour en parler mais je peux vous recommander un livre.
101 Things I learned in architecture school de Matthew Frederick
Un livre court bourré de conseils technique pour faire de jolis croquis.
Une très bonne lecture, qui vous aidera aussi avec la perspective et vous donnera des notions de base en architecture.
J’aime Photoshop d’un amour franc et sincère. Je l’utilise à outrance, pour retoucher des photos mais aussi pour créer des maquettes imprimées ou digitales.
C’est un outil tellement abouti qu’on s’aperçoit qu’il y a souvent plusieurs moyen d’arriver à un même résultat.
Une explication bien illustrée de la joie théorique des objets dynamiques dans Photoshop. veerle.duoh.com
Les récents ajouts fonctionnels (objets dynamiques, objets dynamiques liés, plan de travail multiples, exportation simplifiée, styles d’objet et de texte…) dopent considérablement la productivité.
Ces outils sont particulièrement cools. On se dit que comme dans un site Internet, on va pouvoir partager des éléments entre plusieurs documents, et les mettre à jour tous d’un coup en cas de modification d’un élément récurant.
Au premier abord, la magie opère. Les objets dynamiques liés sont une mini révolution qui permet de fractionner une maquette en plusieurs documents, rendant possible le travail collaboratif simultané.
Ça marche nickel pour des petits documents comme des campagnes publicitaires multiformats.
Oui mais…
Lors de projets de maquettes de sites Internet, j’ai été amené à réaliser de nombreuses pages, et notamment des versions de pages de listes d’items.
Un de mes souvenir les plus douloureux est la réalisation de maquettes de pages incluant une liste avec les vrais images et les vrais textes de résultats de recherche de 160 modèles de lave-linge. C’était sexy au diable.
Cette liste m’a prouvé que qu’il y a des limites à ne pas dépasser avec Photoshop. En multipliant calques dynamiques et plans de travail, il est possible de mettre à genoux la plus puissante des stations de travail. On arrive rapidement à des centaines de calques lourds à manipuler, malgré l’apparente flexibilité de ces fonctionnalités.
J’ai du, pour réaliser la maquette, fractionner ma page en plusieurs documents Photoshop, et tout assembler dans un document en copiant-collant des captures aplaties.
Photoshop n’est pas parfait non plus quand il s’agit d’exporter des objets vectoriels, notamment des SVG à la bonne taille. Cela nécessite des aller retour dans Illustrator.
Enfin dans une gestion de projet complète, une page passe par plusieurs étapes : zoning, wireframe, maquette, prototype fonctionnel. Photoshop n’est pas l’outil idéal pour les zonings et wireframes, et il ne peut pas réaliser de prototype interactif.
À la recherche d’une alternative spécialisée
Depuis quelques années, de nombreux logiciels sont apparus permettant de gérer de manière plus fluide le flux de production d’interfaces. Elles permettent de construire zoning et wireframe, d’y inclure un graphisme pixel-perfect, de permettre un test fonctionnel dans une fenêtre émulée ou dans un vrai device, puis finalement d’exporter les assets pour une intégration par une équipe de développement.
SketchApp
Sketch a le vent en poupe. C’est le choix de nombreux concepteurs d’interface. C’est un logiciel très complet et super optimisé. Lancé en 2010, le logiciel est éprouvé, des fonctionnalités ont été ajoutées à la demande des utilisateurs et il dispose de nombreuses extensions très pratiques. En plus la licence de 99$/an est vraiment pas chère.
Idéalement c’est le logiciel qu’il me faudrait, mais je n’ai pas de Mac ultra à jour au niveau de la configuration système.
InvisionApp
Une autre solution validée par l’industrie. C’est une application dans le navigateur, très bien pour le travail collaboratif.
C’est un service sur abonnement, limité dans sa version gratuite à un projet. Je cherche quelque chose de plus pérenne, de plus solide et qui fonctionne hors-ligne.
Figma
Le Google Docs du design. Dans le navigateur, collaboratif, c’est très bien fichu mais je n’ai pas testé en production.
Gravit
Un site qui permet de faire des interfaces. Gratuit mais moins efficace qu’une application.
Adobe XD
En 2015, Adobe a lancé le développement d’XD. Le logiciel est clairement inspiré de Sketch. Il est actuellement inclus à la Suite Créative. D’abord réservé aux utilisateurs de Mac, une version Windows est sortie en 2017 pour ma plus grande joie.
J’ai commencé à l’utiliser pour des projets de sites Internet et d’application mobiles. L’application a de nombreux avantages par rapport à Photoshop. Elle est légère, intuitive et relativement simple. Elle permet de maquetter rapidement de nombreux écrans, sans trop puiser dans les ressources de mémoire de votre ordinateur. Comme dans Illustrator la feuille de travail est énorme. Comme dans Sketch, on peut créer des prototype interactifs, exporter des documents de conception image ou vidéo, et exporter les assets graphiques pour une intégration iOs ou Android en un clic ou presque (ce qui peut s’avérer pénible avec Photoshop, à cause d’une nomenclature et de tailles de document à respecter strictement).
Le logiciel n’est clairement pas fini, il pèche sur certains points : gestion des effets graphiques limités, pas d’export des valeurs stylistiques du texte, pas de plugins, options générales assez primaires… Heureusement il est plus rapide de copier que de créer, donc normalement ils devraient rattraper leur retard rapidement.
N’ayant pas ou peu de concurrence sur PC, cela reste à mon avis le meilleur choix sur cette plateforme. À noter : la version Mac de XD est légèrement en avance sur la version PC.
C’est un logiciel très agréable pour réaliser des maquettes pixel perfect, avec des marges et des espacements réguliers. XD gère très bien les tracés vectoriels, l’intégration d’images pixel par simples cliqué-glissé et surtout il permet d’essayer rapidement et souplement différentes maquettes d’affichage de liste. Il est aussi maniable que de nombreux outils de wireframe mais avec un rendu très proche de la mise en production, ce qui permet une meilleure prise de décision.
C’est aussi un logiciel léger, qui fonctionne très bien avec des machines modestes.
Adobe XD permet par sa souplesse de faire des essais en direct, en même temps que les idées et suggestions sont lancées lors de réunions créatives.
Je vous conseille de l’essayer si vous n’êtes pas déjà habitués à Sketch. Le logiciel a intégré la Creative Suite en version 1.0 en 2017. Il est devenu gratuit en 2018. C’est un must-have.
En avant la zizique est un petit label indépendant. Ils éditent des albums vinyls 25cm d’artistes aux destins souvent injustes : fin de vie clochardisante, reprise par Elvis payée 3 clopinettes, effet Poulidor…
Illustrations originales, gravures sur bois, impression artisanale et re-mastering aux p’tits oignons !
La fine équipe
Au delà de l’engagement musical à la base de la création du label, un intérêt particulier est apporté à l’objet. Pour leurs derniers disques, l’impression des pochettes est un mélange de xylogravure (gravure sur bois des plaques d’impressions) et d’impression typographique en collaboration avec les Éditions du Trainailleur.
Une technique que j’ai découvert par le travail de linogravure de Tanxxx. La linogravure utilise le linoleum mais la technique reste la même : « On creuse les blancs, et on laisse intactes les zones qui seronts imprimées ».
Encore plus brute que la sérigraphie, la gravure du bois est un procédé furieusement organique, on est dans l’impression la plus élémentaire qui soit. C’est très difficile car il faut savoir graver avec retenue et précision, sous peine de produire du « Pierre à Feu ». La gravure de belles polices de caractère est particulièrement délicate.
Je pense que les spécialistes ont déjà du y penser mais y a surement un combo à faire xylogravure / découpeuse laser.
La xylogravure ou gravure sur bois donne des irrégularités d’impression séduisantes
Sister Rosetta Tharpe
La machine d’impression
Les pages de textes sont composées au plomb
Impression typographique pour les textes
Arthur ‘Big Boy’ Crudup An Introduction to… Father of Rock’n’Roll
De biens beaux objets, et des douceurs musicales pour votre platine.
Stéphane Lyver est un développeur français au grand cœur. Il a mis en ligne 3 outils bien pratiques pour le web-design.
Compressor.io
Compressor.io est un outil en ligne d’optimisation des images. Le gain de poids à qualité égale varie entre 30% et 60%.
Seul défaut : on ne peut passer qu’une image à la fois ce qui réduit son intérêt par rapport à d’autres sites similaires.
Les grilles sont des guides définissant les zones d’expressions d’un espace et aidant à sa structuration, à son organisation, à son homogénéisation.
Un peu d’histoire
L’histoire des grilles de mise en page se confond aisément avec celle de la mise en scène typographique depuis l’invention de l’alphabet moderne par les phéniciens quelques 700 ans avant JC.
Les mises en pages traditionnelles reposaient sur une certaine utilisation du nombre d’or. Elles étaient adaptées aux prémices de l’affichage de l’information.
A gauche : les trois règles d’or les plus courantes à l’époque du plomb =3:4 – 1:4 / 2:3 – 1:3 / 5:8 – 3:8 ; à droite : principe de calcul de la régle d’or des 3:8 – 5:8 pour un format traditionnel A4 (une des plus généreuse ou artistique)
Les bases modernes de l’usage des grilles en mise en page ont été posée par Josef Müller Brockmann en 1961. Cela a largement participé à la formalisation du style suisse.
On pose les bases
Le rapport H / V répond idéalement au nombre d’or
Ça fonctionne aussi dans l’espace
Internet et la grille de 960 pixels
Les grilles sont un point de départ indispensable pour le design sur papier comme sur écran.
Dans le design de site Internet, il est courant de faire des maquettes de 960 pixels de large. Ceci est le fruit de la réflexion de designer cherchant la taille la plus proche de 1000 pixels (à cause de la résolution 1024×768 très répandue) offrant le maximum de possibilités graphiques.
On peut diviser 960 par 3, 4, 5, 6, 8, 10, 15 et 16.
Lors de la création d’une maquette, la réalisation de croquis permet de déterminer le nombre de colonnes nécessaires à la maquette. Les zonings, ou de manière encore plus précise les wireframes sont d’excellentes bases de travail.
On peut ainsi dans Photoshop poser les repères de colonnes et réaliser une mise en page aux proportions régulières et agréable.
Quelques conseils
Utilisez juste le nombre de colonnes nécessaires.
N’ayez pas peur de déborder de temps en temps. Les principes mathématiques de proportion (et de colorimétrie) n’exclue pas une dose de feeling.
Dans Photoshop
Une maquette Photoshop rigoureuse au niveau de la grille permet de réaliser facilement une feuille de style CSS. La taille des blocs et les marges étant régulières, la feuille de style est concise et efficace.
Dans votre logiciel de création préféré, l’usage de guides positionnés avec précision est indispensable.
Pour Photoshop, l’extension GuideGuide vous fera gagner un temps considérable.
Les grilles en HTML
Fortement liée à la vogue des contenus « responsifs » et « adaptatifs », la mise en page par grille passe par la débrouille (les styles sur la balise <DIV>).
De nombreux frameworks CSS proposent une gestion responsive des grilles, comme par exemple Bootstrap (voir en détail ici) et Flexible Grid System (plus d’info ici).
Actuellement à l’état de test, une spécification CSS « grid layout » permettra très bientôt une intégration encore plus facile des grilles dans les mises en page HTML, offrant de nouvelles possibilités techniques aux web-designers.
Utilisateur quotidien de Photoshop, j’ai un coup de cœur pour ces deux extensions, testées et approuvées. Je ne suis pas fan des plugins d’effets visuels, qui sont très vite jetables. Ces deux extensions sont des améliorations fonctionnelles.
Guideguide est ce que la fenêtre Guides de Photoshop devrait être (ne la cherchez pas elle n’existe pas).
SpecKing aussi mériterait d’être intégré nativement à l’interface de Photoshop.
It’s like the forward pass in football, the slam dunk in basketball, the technique in hair cutting where you put the hair between two fingers and you cut from the top – It’s a total game changer!
Barney Stinson
Guideguide
Pour faire des grilles via le placement automatique de repères avec un paramétrage simple et efficace.
Guideguide permet de placer des repères simplement sur le plan de travail ou sur une sélection. Sur colonnes, milieux de colonnes, gouttières, milieux de gouttières, rangées, milieux de rangées et bordures.
Cette extension, c’est un gain de temps incroyable, surtout si on est mordus de grilles bien régulières. Vous pouvez même essayer l’extension sur le site.
Avant je faisais tous les calculs avec la calculatrice, placer une grille me prenait facilement 10 minutes et une modification pouvait tourner à la galère. L’inconvénient étant qu’on peut ne pas se rendre compte qu’on fait des colonnes de tailles légèrement différentes (le fameux pixel qui tue à l’intégration).
L’extension est aussi très pratique pour délimiter avec des repères les bords et les milieux d’une sélection.
Idéal pour faire des documents de travail en vue de l’intégration. Annotation de tailles de blocs, de marges et de typo automatique et paramétrable. Des heures de gagnées pour qui maquette des pages internet ou des applications avec Photoshop.
C’est un must quand on travaille comme graphiste en relation avec une équipe de développement ou d’intégration.
Elles ont font un peu trop pour être utilisables, elles bougent dans tous les sens pour interpeller le spectateur qui ne les voit souvent qu’une fraction de seconde à l’écran. On est entre le costume, le décors et le personnage désincarné. C’est un nouveau type d’accessoire.
Leur but n’est pas nécessairement d’être utilisables, toutefois les projections de la science fiction semble avoir une influence certaine sur les concepteurs d’interfaces « de la vraie vie ».
La science fiction, laboratoire pour l’UX
En 1968, dans 2001 l’odyssée de l’espace, un astronaute lit le bulletin d’information de la BBC du futur avec sa tablette. Au calme. Il fait un peu de chat vidéo aussi.
En 1982, le film Blade Runner inspiré de l’œuvre de Philip K. Dick surprend par l’omniprésence des écrans dans futur noir et ultra-technologique.
L’interface des cockpit des voitures avait fait forte impression.
All of my ‘work’ on BLADE RUNNER was based on real theories, twisted a bit to fit the problem solution base, which was the time frame for the film’s story and the dramatic demands from Ridley and Paull.
Syd Mead
Des interfaces très fidèles aux concept art de Syd Mead, avec un tableau de bord en mosaïque d’écrans.
Blade Runner 2049, avec le logo Peugeot au reboot de la voiture.
Le film moderne ayant certainement mis en avant une interface utilisateur originale de la manière la plus flagrante est Minority Report (2002).
Comme le souligne cette vidéo, Minority Report est annonciateur de tendances fortes en terme d’interface utilisateur et d’usage du réseau. Les gestes tels que le swipe et le pinch sont ultra théâtralisés, à tel point que la performance d’acteur ultra physique a nécessité plusieurs pauses de récupération.
Le poncif de la scène de hacking
Ce qu’on voit le plus souvent au cinéma et dans les séries, ce sont des scènes de piratage complètement irréalistes, au graphisme moche.
Une barre de chargement type Windows 3.1 pour schématiser la progression d’un transfert de fichier ou d’un calcul. Rien de génial niveau création graphique.
La mauvaise scène de hack a ses codes : l’opérateur est tout au clavier (des fois à deux sur le clavier pour aller plus vite), l’action est ponctué de jargon informatique approximatif, le codeur travaille toujours sous pression (flingue sur la tempe).
I’ll create a GUI-Interface using visual basic. See if I can track an IP out of this.
CSI New York
L’interface comme personnage à part entière
De nombreux films récents placent toutefois l’informatique et le design d’interface au cœur de l’action.
Dans Jurassic Park (1993), l’île est commandée par un système informatique complexe. La petite fille le reconnaît immédiatement : c’est un système UNIX 🙂
Une interface graphique tellement reloue à utiliser qu’elle participe à l’angoisse de la scène.
Pourtant Lex commence bien en choppant la souris, on a l’espoir d’une solution rapide, mais après c’est le drame.
On se perd dans une hiérarchisation complètement farfelue de l’accès aux commandes : /USR/Park/Zoology/Physical Security/Visitor Center/. Pourquoi Zoology ?!
Et les transitions de 5 secondes avec une animation 3D en 10 FPS, c’est pour mourir en cas d’urgence…
Moralité de l’histoire : quand on dépense sans compter, on peut se payer un audit « ergonomie, accessibilité et sécurité ».
On peut retrouver des reproductions de cet OS culte sur le site jurassicsystems.com.
Dans un registre plus subtil, le film Her de Spike Jonze (2014) nous raconte l’histoire d’amour entre un homme seul et un système d’exploitation à commande vocale désireux de subvenir à tous ses besoins.
Theodore, le mec qui se taperait bien son OS si il le pouvait
There are all these screens in this film: the operating system, then there’s a video editing suite, there’s this program he uses at this office, there’s buttons in the elevator—all these interfaces. But the movie is about design in the sense that design is transparent.
Geoff McFetridge
Les premiers croquis, document de production.
Il dit être fan de flat-design. Plus c’est plat, mieux c’est pour lui. Les actions principales sont placées au centre de l’écran. L’interface doit être transparente.
Mise au point de la charte graphique, document de production.
Dring c’est Scarlett Johansson
Il pense que l’avenir de la technologie et sa vitesse de progression sont devenus totalement imprévisibles à moyen terme. Il est assez branché intelligence artificielle.
Someone’s going to release a new artificial intelligence standard, you plug that in, and there’s an artificial version of me in the future that will create an interface just for you.
“We were thinking about functionality and how technology might operate, not just how it looks,” Popplestone says. “It’s quite tricky because [the digital meltdown] is all we know for this generation’s tech. We had to think about all the wonderful ways technology might work if it was powered by something else, be it cellular or chemical or more organic. We spent a couple weeks coming up with concepts and presented them to Denis. He loved anything that had a human element that created imperfection and tangibility. We started to define our different worlds–whether it’s the LAPD or Wallace Corp.–and constructed styles which visually summed up this film. You have this uber, uber technology [at Wallace] versus the rest of the world, which is living in dystopia and has dilapidated old technology.”
“It all comes down to imagining ‘what if,’” Eszenyi says. “Futurists, directors, and tech companies are all in the business of imagining ‘what if’ and posing those questions and answering them . . . The difference in films versus the real world is films get there quicker.”
La team UI d’Oblivion dans les crédits au générique.
Aparté Star Wars
Fan de Star Wars, j’ai toujours été déçu par les interfaces qu’on peut apercevoir dans les différents films. Dans la trilogie initiale, il n’y a rien de très marquant, à part les hologrammes (de la princesse Leïa, des étoiles de la mort). Les tableaux de bord et écrans des installations ne présentent pas d’intérêt.
Seul parti pris graphique, une police de caractère futuriste, l’Aurebesh. Elle est dans la lignée des hypothèses de polices de caractères visant à être très lisible sur les écrans de l’époque à faible définition.
À l’image différentes choses affichées sur des écrans, on a l’impression que tout est fait pour qu’on n’y comprenne rien.
Aperçue furtivement dans Le Retour du Jedi, elle a été « complétée » par les auteurs du jeu de rôle Star Wars de West End Games.
« The Aurebesh is a lot like Boba Fett—it is a facet of the Star Wars phenomenon that had its origin as a cinematic aside, but which has come to be widely embraced, far out of proportion to its humble origins. »
―Stephen Crane
Dans les épisodes les plus récents, on peut voir de nombreuses interfaces, classiques ou inédites. Pour l’épisode 8, le studio londonien BLIND LTD a créé plus de 200 écrans. Les interfaces sont simples et pragmatiques. Mais toujours semi-abstraites et ne facilitant pas clairement l’usage.
Le tableau de bord d’un Xwing
Le designer Andrew Booth fait part de son expérience sur le projet. Dans le respect de la cohérence avec les premiers épisodes, il s’est inspiré de ce qui se faisait dans les années 80 : TRON, Knightrider…
When we are designing an interface for Star Wars, it’s a combination of many things. It’s about being respectful to what has gone before, questioning the past and adapting and building on the work for the future. It’s about the aesthetic ideals of the production designer and the art department and most importantly understanding the Director’s vision.
HYPERSPACE !!!
Mon vaisseau Star Wars préféré, le A-wing. On comprend que dalle au tableau de bord :-/
Il est indispensable de savoir capturer facilement une page de site Internet quand on fait du web-design.
Les outils de bases de Windows (Imp écr, ou Alt + Imp écr, ou l’application native Outil Capture d’écran), de Mac OS (⌘ + Shift + 3) et leurs équivalents sur smartphone ne sont pas ultra performants pour capturer une longue page web.
Si vous ne voulez pas que l’assemblage de portions de captures d’écran devienne une part trop importante de votre travail, je vous recommande de passer par des outils dédiés.
Capturer une longue page web sur toute sa hauteur
Pour capturer en un clic une page dans son intégralité, le meilleur moyen actuel est de s’aider d’une extension de navigateur. La solution la plus confortable est Awesome Screenshot, disponibles pour les navigateurs Chrome et Safari. Awesome Screenshot vous permet de prendre une capture d’une page dans son intégralité, de l’annoter, de la recadrer et la retoucher.
Pour les utilisateurs de Firefox, l’extension n’est malheureusement plus mise à jour sur ce navigateur. L’extension qui s’en approche le plus est Nimbus Screenshot.
Firefox inclut de toute façon un module de capture d’écran. C’est Firefox Screenshot le bien-nommé.
Capture vidéo de votre site
Il est aussi facile de faire des captures vidéo de votre écran.
Sur PC, je recommande VLC (Média > Convertir/Enregistrer > Périphérique de capture. Dans le menu « Mode de capture », sélectionner « Bureau »).
Sur Mac, utilisez l’application native Quicktime (Fichier > Nouvel enregistrement de l’écran).
Sur Android, le logiciel gratuit AZ Screen Recorder fait très bien le boulot.
Certains outils payants offrent plus de possibilité, mais je ne les utilisent pas personnellement, préférant retoucher ou recadrer les fichiers générées avec un logiciel de retouche vidéo.
À noter, pour tous smartphones ou tablettes, l’application AirServer permet d’afficher un miroir de votre appareil en HD, et de l’enregistrer.
Susan Kare est une créatrice d’icônes et de typographies chez Apple et Microsoft dans les années 80. Elle est à l’origine du symbole ⌘ et de bien des éléments de l’interface de Mac OS. C’est la reine mère des concepteurs d’icônes.
Lors de la conférence filmé Layers en 2015, Susan Kare raconte comment elle a posé les bases de l’iconographie informatique moderne avec simplicité. À l’époque, pas de demi-teinte, que du noir et du blanc pleins. C’est avec une certaine fierté qu’elle constate que certaines de ses icônes ou de ses polices vivent encore. Elle est adorable de décontraction.
Cette conférence dure réellement 30 minutes, en anglais non sous titrée.
Ses conseils :
Soyez culottés et ayez confiance en vous
Préparez et personnalisez-vos entretiens d’embauche
Mon outil préféré pour travailler une gamme de couleurs est Adobe Color.
Anciennement appelé Kuler, ce module permet de composer une gamme de 5 couleurs avec beaucoup de liberté. On peut partir d’une couleur principale et obtenir les déclinaisons selons différentes règles : monochrome, triade, complémentaires, composite… On peut aussi composer sa gamme de couleur à partir d’une image.
Ce module est présent dans les logiciels Adobe CC. Les utilisateurs enregistrés peuvent enregistrer et partager leurs gammes de couleur. Voici les mieux notés. Il y a un moteur de recherche bien utile quand on a une panne d’inspiration.
J’aime Adobe Color car il va droit au but et il est simple d’utilisation. Je crois aussi aux rôle des mathématiques dans le design et les accords de couleurs. Color me permet de partir sur des bases saines, et de les affiner avec ma sensibilité.
Concernant ce qu’il faut faire et ne pas faire dans le choix de sa gamme de couleur pour une charte graphique digitale, je vous conseille cet articletrès complet en anglais. En résumé, n’hésitez pas à modifier vos teintes pour avoir un meilleur contraste, évitez les demi-teintes peu contrastées, donnez du sens à l’usage des couleurs dans l’interface.
Après une invasion d’écrans vidéo, ce sont maintenant les écrans tactiles et l’interactivité qui s’emparent de notre quotidien. Autrefois réservés à l’informatique pure et au bornes interactives, la démocratisation des petits écrans tactiles consécutif à la production de masse de smartphones tactiles depuis 2008 incite les designers à les utiliser à leurs avantages.
De nombreux objets de notre quotidiens subissent ainsi une transformation de leur interface, pour le meilleur et parfois pour le pire.
Voici quelques exemples de remplacement du design, d’un service ou de la chose imprimée par une interactivité sur touch-screen.
Distributeur Mac Donald
C’est le grand succès du genre. Les interfaces interactives tactiles installées dans les Mac Donald ont été la source de nombreux bénéfices pour la firme américaine.
Ces bornes présentent de nombreux avantages pratiques et commerciaux par rapport aux classiques tableaux imprimés et écrans vidéo.
Multilingue
Actualisable facilement
Minimise les erreurs
Idéal pour les produits à forte personnalisation
Proposition d’up sell et / ou cross-sell automatique
fluidifie le workflow commande /cuisine/préparation
Permet une multiplication de postes de vente à moindre frais
Machine à café
selecta.fr
Vous avez peut-être remarqué la nouvelle génération de distributeurs automatiques de cafés qui peuplent nos aires d’autoroute. Les boutons et étiquettes ont été remplacé par des interfaces animées avec les mêmes bénéfices que ceux précédemment cités pour les bornes Mac Donald.
La vidéo « BeMoved Coffee Machine concept » ci-dessous nous montrent une prolongation du concept. Le barista est remplacé par un logiciel oscillant entre interactivité élégante et party game.
Les animations sont en général des carrousels vidéo, et des choix d’options de goût et de dosage. La personnalisation du produit est un objectif facilité par une interface animée sur écran tactile.
Tableau de bord automobile
De nombreuses marques proposent des tableaux de bord / écran. D’abord réservé aux modèles ultra haut de gamme, on trouve maintenant des écrans en lieu et place des aiguilles et voyants dans des modèles de consommation plus courante.
Audi, en partenariat avec Google, est la marque qui a le plus tôt réussi l’intégration de son tableau de bord digital connecté. L’ensemble est entièrement personnalisable, il se commande grâce a des commandes sur le volant. L’écran n’est pas tactile, car ce n’est pas nécessaire : c’est l’écran du conducteur qui a ses mains sur le volant.
Mercedes fait aussi très fort dans le genre.
Le testeur de la vidéo évoque d’éventuelles skins 3rd party. Comme dans WinAmp à l’ancienne, mais dans votre voiture ! Spiderman, Blade Runner, Lord of the Rings, RC Lens, Justin Bieber… C’est le retour du bon goût.
L’équipementier français Faurecia a fait en 2016 une étude de style ambitieuse. Baptisée Wellness, elle bichonne son utilisateur du futur et s’adapte intelligemment à son état mental et physique.
« Là où on va, on n’a pas besoin… de route ! » Doc Brown
On retrouve des similarités troublantes en production sur le Tesla Roadster 2.0.
En 2018, Nissan présentait un prototype assez atypique : Xmotion. Dans les écrans de l’habitacle, un poisson / assistant personnel accompagne les utilisateurs en passant d’un écran à un autre parmi les 7 embarqués.
C’est « Pimp my ride » version zen.
Commandes et affichage dans les vaisseaux spatiaux
Après plus de 10 ans d’évolution, le programme « Glass cockpit » de la NASA arrive a maturité.
À gauche, le tableau de bord de la navette Endeavour, avec 9 écrans LCD et des centaines de boutons. À droite, la prochaine capsule spatiale ORION dispose d’une interface simplifiée autour de 3 écrans.
Les premiers prototypes de tableau de bord pour la navette Orion de la NASA utilisaient 3 écrans tactiles, et un design abstrait inspiré des interfaces de la série télé Star Trek (authentique).
Rapidement il a été admis que les commandes directement sur l’écran tactile n’étaient pas une bonne solution. Un objet en apesanteur auraient pu activer une action indésirée. Les écrans ont donc été bordés de cases / interrupteurs, ce qui permet de les rendre opérationnels avec n’importe quel type de gant et pendant des séquences de fortes vibrations.
Ce passage du « tout interrupteur » aux écrans n’est pas une fantaisie. C’est une amélioration technique.
Un tableau de bord d’engin spatial était composé de 2000 interrupteurs et voyants, en plus d’écrans. 1247 d’entre eux étaient accessibles à l’équipage. Le nouveau tableau de bord est composé de 56 boutons et de 3 x 2 écrans. Toutes les fonctionnalités sont accessibles rapidement et simplement.
C’est feng shui, mais c’est aussi un gain de poids (moins d’interrupteurs, moins de câbles, pas besoin de manuel papier) et plus facile à entretenir ou à actualiser (une mise à jour logiciel contre des centaines d’heures de recâblage).
L’UI stylisé des premiers prototypes a cédé la place à un design d’interface pseudo-réaliste skeumorphique. Surement suite à des tests utilisateur rigoureux… Le résultat est beaucoup moins chic que les premiers prototypes mais ça fonctionne : les ingénieurs garantissent qu’une petite fille de 9 ans peut faire démarrer la navette.
De nombreux objets intelligents se dotent d’écrans et d’interfaces animées. Je n’ai pas cité la domotique, l’électroménager blanc, les pompes à essences, les montres, les vitrines d’agences immobilières… les exemples sont nombreux.
Les écrans permettent une interface-utilisateur plus claire, facilement actualisable, facilement localisable et entièrement contextualisable.
Plus jamais ça !
Il faut aussi noter qu’inclure un écran animé en guise de tableau de bord influe moins sur le prix de gros produits. C’est aussi beaucoup mieux quand on n’a pas de soucis d’autonomie.
Valve est un éditeur de jeu vidéo qu’on ne présente plus. Du jeu à la première personne Half Life à la boutique en ligne Steam, c’est un acteur majeur de la gaming-culture mondiale.
Ils ont sortis une flopée de bons jeux. À titre personnel, j’ai énormément pratiqué Portal, Team Fortress 2 et Left 4 dead.
Au delà de mes heures perdues, l’entreprise est réputée pour la qualité de ses produits, son boss Gabe Newell, l’humanisme des conditions de travail qu’elle offre à ses employés et ses publications sur le game-design.
Depuis 1999, des représentants de Valve participent à des conférences. Ils partagent leurs connaissances, abordant surtout des points très techniques : rendu, textures, modélisation, workflow, optimisation, réglages d’output 3D VR, génération procédurale…
Ce sont des support de conférence, des pdf fixes. Les dernières conférences sont archivées en vidéo.
En ce qui concerne des sujets plus universels comme la conception, le design et le graphisme, plusieurs documents sont remarquables
TF2, finesses graphiques dans un monde de brutes
Team Fortress 2 est un jeu à la première personne. Les bleus et les rouges se tapent dessus dans une ambiance cartoon. Surement un des meilleurs jeux gratuit du genre.
Le parti-pris graphique est choisi. Il se traduit par d’automatisation du rendu graphique entre autre par l’éclairage.
L’équation de la lumière est expliquée dans le détail dans le document
La lisibilité de l’action a été une priorité. Une attention particulière a été porté à la colorimétrie, ainsi qu’à la lisibilité des silhouettes des différents personnages.
Une fois tout ça animé, le rendu cartoon est vraiment sympathique. On s’approche de la lisibilité graphique d’un dessin animé Pixar. Le retour des joueurs a été très positif, et ce jeu un succès financier et esthétique.
L’image est vignettée avec plus ou moins d’intensité en fonction de la situation. Un grain est ajouté en surcouche pour reproduire l’effet des vieilles VHS louées le samedi soir. L’addition de détails dans l’éclairage et la photographie distingue ce jeu d’un jeu ordinaire.
Les joueurs évoluent dans une semi-obscurité. Pour trouver son chemin il faut suivre des éléments d’éclairages judicieusement disposés. Ils prennent diverses formes naturelles dans un environnement réaliste : lampadaires, feux… Le game-designer se sert de l’instinct animal du joueur qui le pousse à quitter l’obscurité pour la lumière.
C’est un exercice de graphisme avec d’énormes contraintes, comme le web-design. J’aime son conseil de faire les maquettes à la taille d’un timbre-poste. Cela permet de reproduire une vision distante du drapeau, et cela réduit le risque de produire un graphisme trop alambiqué.
On constate tristement qu’en France beaucoup de villes et de régions ont des drapeaux pitoyables.
Dernier point : j’aime aussi beaucoup le fait qu’il accompagne sa conférence de musique. C’est très agréable.
Photopea est le nouveau site de type « Photoshop en ligne ».
Là où il fait fort c’est qu’il ouvre les fichiers PSD de Photoshop sans trop les exploser, il conserve les effets de calque, masques, tracés, etc… (ce que ne fait pas Gimp).
C’est moins bien que Photoshop, mais cela peut dépanner.
Google fournit gratuitement de nombreux outils aux graphistes et aux designers
Google est actuellement omniprésent sur internet. Tout le monde utilise leurs services, volontairement ou pas.
Ces services sont nombreux (trèèès nombreux en fait), comme en témoigne la structure d’Alphabet inc.
De nombreux services ont une vie courte : ils ne rencontrent pas l’adhésion des utilisateurs, ils sont donc abandonné. D’autres changent de forme : par exemple Google Maps en passant de l’entière gratuité à une formule payante pour les sites à forte fréquentation intégrant des cartes, ou Picasa qui s’arrête net, ou encore Sketchup qui est revendu. Gardez donc à l’esprit que les outils fournis par Google pour les graphistes ne sont pas forcément très pérennes. Il existe heureusement dans de nombreux cas des alternatives aux produits Google, mais ce n’est pas l’objet de cette liste.
Illustration : Derek Kim pour Google.com/design
Navigateur Internet
Chrome est un navigateur solide, rapide et gratuit. On peut s’y connecter avec son compte Google et sauvegarder sa configuration, pratique quand on utilise plusieurs machines.
Nativement la fonction « Examine l’élément » en clic droit et la possibilité de traduire instantanément le contenu de page se montrent très utiles.
Coté extensions, je recommande :
Awesome screenshot, pour faire tout type de captures d’écran notamment capturer une page très longue d’un seul clic. L’extension inclut un outil de floutage, et un outil de commentaire.
Eye dropper, pour faire des relevés colorimétriques dans une page.
What font, pour savoir rapidement quel police est utilisé dans une page.
Web developper, pour activer/desactiver image, javascript, css, pour surligner la structure de la page, accéder facilement aux médias de la page…
Chrome est aussi une plateforme d’expérimentation WebGL, HTML5, CSS3, Javascript via le site chromeexperiments.com.
Le moteur de recherche par image
La recherche par image, accessible en cliquant dans l’appareil photo à droite du champ de recherche, permet de trouver l’origine d’un visuel, trouver des déclinaisons, vérifier qu’on vous a pas piqué un visuel.
En 2010, Google a changé la donne de la typographie en web-design. Google Fonts propose plus de 600 polices de caractère très bien dessinées en usage libre et gratuit. On peut les utiliser dans un site grâce à un appel aux serveurs Google, ou télécharger la police et en disposer sur un ordinateur.
La police officielle de d’interface d’Android est une Google Font : Roboto.
Google fourni aussi une bibliothèque d’icônes.
Logiciel d’animation HTML5
Il n’est pas parfait (nécessitant une connexion, interface un peu poussive, en beta depuis 2013) mais il est gratuit et mis à jour : Google webdesigner est un logiciel d’animation HTML5 pour faire de l’UX design, ou de la publicité en ligne.
Cette liste Youtube en anglais rassemble les démos des développeurs de l’application.
Alerte rouge sur la pérennité du service, à n’utiliser que pour dépanner, ou réaliser des projets ne s’inscrivant pas dans la durée.
La cartographie
Google Maps est un très bon outil pour obtenir une cartographie rapidement. La résolution est insuffisante pour une bonne qualité d’impression, mais en ce qui concerne le web, c’est très utilisable.
Voici deux outils de personnalisation de carte : Maps Engine de Google permet de créer des cartes avec des repères ou des itinéraires Mapbuildr.com est un site tiers qui propose de personnaliser les couleurs et les informations affichées sur les cartes Google.
Attention, si vous avez en tête un projet de site incluant de la cartographie Google Maps ne sera pas forcément gratuit. Au delà de 25000 carte affichée par jour cela devient payant.
Streetview
L’attirail complet
Petit cousin de Google Maps, Streetview est le résultat du quadrillage de toutes les routes du monde par les voitures Google et leurs caméras.
Le programme Arts et Culture permet de visiter des dizaines de musées du monde entier gratuitement, avec un niveau de zoom sur les œuvres complètement hallucinant.
Le coté business de Streetview c’est qu’on peut passer par un photographe certifié Streetview pour faire la promotion d’un endroit dans l’environnement Maps – Streetview – Places – Search. On peut aussi publier ses streetview relativement facilement avec les nouvelles caméras 360
Un bon nombre des services Google cités précédemment sont utilisables pour la construction et la gestion de site internet. Google Fonts, Google Maps et Google Streetview ont été conçus dans l’optique d’une intégration dans un site internet.
Il faut ajouter :
Google Analytics, l’outil statistique est incontournable. Il y a beaucoup à dire sur le sujet. En ce qui concerne le graphisme et le web-design en particulier, les analyses statistiques sont indispensables à la bonne évaluation d’un design et à la bonne évolution d’un site dans le temps.
Google Optimize est un outil découlant de l’usage de Google Analytics. Il permet la création et la gestion de tests comparatifs très fins, voire de servir un contenu spécifique à un utilisateur spécifique. Le split-test, test comparatif ou A-B testing, c’est le juge de paix du design numérique. Sur un site à forte fréquentation ou peut rapidement voir quelle mise en page est la meilleure, quelle accroche a le meilleur impact ou plus simplement si le bouton vert vend plus que le bouton bleu.
Les tests comparatifs sont un soulagement pour le graphiste et le designer. On peut prouver qu’une couleur, une typo ou une mise en page particulière a de meilleurs résultats. La cohorte des utilisateurs qui défilent sur les pages tels les clients dans le bazar d’Au bonheur des dames est implacable de bon sens. Avant de faire un changement, il est indispensable de le soumettre à un test grandeur nature.
Il faut aussi noter que c’est aussi que ces données sont valables si l’on a un objectif clair et quantifiable (vente, abonnement, clic…).
Google Resizer permet de voir rapidement l’apparence d’un site sur ordinateur, tablette et mobile. Attention ça ne vaut pas un test sur un vrai device.
Ma maçonnerie est responsive !
De nombreux outils plus techniques et moins graphiques sont disponibles sur un portail dédié et sur cette page.
3D
Google s’est séparé de son logiciel d’édition 3D SketchUp. J’avoue ne pas avoir compris la manœuvre.
poly.google.com est une bibliothèque de modèles 3D téléchargeables gratuitement.
Google Earth affiche une modélisation 3D mondiale, avec des détails parfois saisissants
Bureautique
Google Drive est un outil de stockage et de partage de fichier type Cloud gratuit pour le grand public. Vous disposez de 15Go et d’un système de droit d’accès et d’édition assez cool.
Pour les pros, il y a le cloud pro, qui n’est pas connecté à drive. Il fournit espace disque mais aussi temps processeur.
Photos de Google permet de stocker, d’organiser, de retoucher sommairement et de partager facilement vos photos. Le service repose sur Google Drive. Plusieurs personnes peuvent administrer et partager un album.
Google documents est la suite de bureautique maison.
Docs est le traitement de texte, Sheets le tableur et Slides l’outil de présentation.
Si fonctionnellement ils peuvent sembler limités, ils présentent 4 avantages :
Pas d’installation nécessaire, tout se passe dans le navigateur
Gratuit, il faut juste un compte Google
Travail collaboratif, vous pouvez être à plusieurs sur le même document et voir en direct sur quelle zone travaille une autre personne qui a accès au document
Et la faculté étonnante d’ouvrir des .doc ou .docx corrompus que Word ou Open Office ne veulent pas ouvrir.
Et on peut « Embed » des documents dans un site, ou les intégrer à un CMS via des plugin spécialisés comme WordPress.com for Google Docs.
Doctrine graphique, documentation et recommandations
L’entreprise a une approche graphique rationnelle : le material design, qu’elle applique à la charte graphique de tous ses produits, notamment Androïd.
Le material design :
s’appuie sur la métaphore matérielle intentionnelle pour structurer le graphisme en cartes hiérarchisées graphiquement (typographie, couleur, forme, effet d’ombre, proportion…)
utilise un graphisme simple, accessible, vivement coloré, dans la lignée du design suisse.
se sert du mouvement pour attirer l’attention sur un point particulier ou matérialiser la continuité d’une action
Google propose des formations en ligne et de événements sur son portail « Pour les pros » et sur son portail « Digital Active ».
Ces formations gratuites vulgarisent des sujets variés : référencement, Analytics, emailing, e-commerce, m-commerce, stratégie social media… et débouchent sur des certifications.
Les examens de Google sont gratuits et ont entre 12 et 18 mois de validité.
Conclusion
Quoi qu’on puisse penser de l’entreprise supra-nationale, ces outils de Google pour les graphistes sont gratuits. « Si c’est gratuit, c’est toi le produit », et c’est vrai : Google se sert de votre manière d’utiliser ses services pour en affiner la pertinence.
Si cela vous pose des soucis de conscience ou de confidentialité, utilisez plutôt des services équivalents de la concurrence. Si cela ne vous inquiète pas, profitez de ce qui vous est donné.
Pas un seul ordinateur dans l’atelier du graphiste de 1964, visité par l’émission A vous de choisir votre avenir. Mais des planches à dessin, des papiers découpés et des maquettes. Le jeune apprenti passe alors de nombreuses heures à dessiner des lettres et des chiffres, des boîtes et même des mains, qui lui permettront d’acquérir les techniques de base du dessin essentielles à la profession.
Le métier de graphiste, qui consiste à traduire un message par une image, apparaît dans les années 1950. Il est rapidement touché par les évolutions technologiques, tout d’abord avec l’invention du procédé de la photocomposition. Puis arrivent les ordinateurs personnels et la révolution numérique qui imposent les outils du web et de l’infographie.
Une vidéo qui remet les choses en perspectives. Le prochain que j’entends se plaindre de la supposée lenteur d’un ordinateur, je lui donne 24 pages à maquetter avec des films et du scotch repositionnable.
Je vais militer pour le retour du port de la blouse dans les agences #onnelacherien
Un documentaire est parallèlement en réalisation sur le sujet. Graphic means aborte le graphisme entre 1950 et 1990, avec un intérêt particulier pour la foultitude d’outils ingénieux, maintenant disparus car remplacés par l’informatique. On voit aussi que la PAO a fait fondre les équipes de production.
Les ateliers de travail montrés sont vraiment délirants pour qui n’a connu que les outils informatiques modernes.
Lors des premières réunions de conception d’un site internet ou d’une application, il est souvent nécessaire et plus clair de réaliser des schémas des contenus et de la structure attendue des différents écrans du projet. Cette étape de zoning ou de wireframe sert à l’élaboration des premières maquettes graphiques et techniques, ainsi qu’à l’élaboration de cartes d’expériences et de Wireflow en UX design.
À propos du dessin de wireframe
Fortement liée à la vogue des contenus « responsifs » et « adaptatifs », la mise en page par grille passe par la débrouille (les styles sur la balise <DIV>).
Pour faire des grilles via le placement automatique de repères avec un paramétrage simple et efficace.
Fan de Star Wars, j’ai toujours été déçu par les interfaces qu’on peut apercevoir dans les différents films. Dans la trilogie initiale, il n’y a rien de très marquant, à part les hologrammes (de la princesse Leïa, des étoiles de la mort). Les tableaux de bord et écrans des installations ne présentent pas d’intérêt.
le bien-nommé.
Rapidement il a été admis que les commandes directement sur l’écran tactile n’étaient pas une bonne solution. Un objet en apesanteur auraient pu activer une action indésirée. Les écrans ont donc été bordés de cases / interrupteurs, ce qui permet de les rendre opérationnels avec n’importe quel type de gant et pendant des séquences de fortes vibrations.
Le nouveau tableau de bord est composé de 56 boutons et de 3 x 2 écrans. Toutes les fonctionnalités sont accessibles rapidement et simplement.
L’image est vignettée avec plus ou moins d’intensité en fonction de la situation. Un grain est ajouté en surcouche pour reproduire l’effet des vieilles VHS louées le samedi soir. L’addition de détails dans l’éclairage et la photographie distingue ce jeu d’un jeu ordinaire.
En 2010, Google a changé la donne de la typographie en web-design.
