Le gabarit de mise en page

Il n’existe qu’un seul secret de fabrication pour faire une belle mise en page. Qu’elle soit numérique ou pas. Quelle soit responsive ou statique. Ce secret (qui n’en est pas un) a maintenant un site dédié…

En design, on doit le fameux gabarit de mise page au Style Typographique International (également appelé le Style International). Ce mouvement graphique né dans les années 50 (notamment en Suisse) mettait l’accent sur la clarté, la lisibilité… Bref une certaine objectivité qui passait également par des choix typographiques orientés sans-serifs et des choix iconographiques excluant définitivement l’illustration. L’Helvetica designé par Max Miedinger, en 1957, est un héritage de ce courant.

Afin de structurer leur démarche, ces graphistes suisses ont formalisé ce qui jusque-là ne l’était pas : le gabarit de mise en page. Je pense plus particulièrement à Josef Müller-Brockmann et son ouvrage de référence : The Grid System (d’où le nom du site cité plus loin dans cet article). Il me faut cependant préciser que le gabarit existe depuis la création de l’imprimerie et est déjà présent dans la Bible à 42 lignes, premier livre imprimé par Gutenberg en 1455.

Celui qui contrôle cette « maudite » grille, contrôle l’art du lay-out quelque soit le format, la pagination, le support et le message à faire passer. Pour être plus précis, n’importe quelle publication digne de ce nom commence par un gabarit spécialement étudié pour en optimiser la lecture et le look and feel. Le framework « Bootstrap » l’a bien compris et l’utilise comme concept de base pour rendre « responsive » un site web. Le fait de re-dispatcher des contenus de 12 colonnes à un minimum de 2 permet de s’adapter à n’importe quel format d’écran. Le gabarit permet d’optimiser le rapport du contenu à l’espace qui lui est dédié. Simple mais efficace.

Bref, c’est Ze secret de beauté des designers. Il existe quelques livres plus ou moins précis sur le sujet (dont un plutôt technique chez Pyramyd)… Voilà, enfin, un site qui regroupe (en anglais) un certain nombre d’infos et de ressources gratuites : The Grid System. Un outil précieux pour les UX designers et les graphistes qu’il faudra bookmarker et consulter quotidiennement !

Un jour prochain, j’aborderai également la grille modulaire de mise en page qui sert à la même chose mais qui ne fonctionne pas exactement de la même façon. Mais ça, c’est une autre histoire.

Le Web design par le détail

MephoBox est un projet en ligne, né de la passion d’un designer pour les « beaux » sites bien faits. À l’origine, cette ressource devait juste être un outil pour faire de la veille. Mais très vite, Justin (un graphiste anglais) a eu envi de partager cette source d’inspiration avec sa communauté. Aujourd’hui, plus de 8000 membres suivent MephoBox. Bien sûr, cette « communauté » s’appuie sur un site divisé en plusieurs galeries. Galeries qui font un focus sur certaines micro-pratiques du Web design. Ainsi et par exemple, on pourra parcourir des « best of » visuels dans les domaines du « account login’ », du « call to action », du « navigation menu », des « submit forms » ou  des « pimpin’ forums »…Etc. Autant de « spécialités » auxquelles un Web designer doit s’attaquer quotidiennement.  Si la globalité d’un bon design web « fonctionne », s’est parce chacune de ses composantes graphiques a été pensée avec précision, réalisée avec goût et talent. Il s’agit, ici, du fameux design « par composants » dont il est question qui est la particularité du design d’interfaces. Chaque bout de « fonctionnel » doit être visualisé et son utilisation doit être facilitée puis doit faire partie d’un tout à son tour « utilisable » et graphiquement beau et cohérent.

Pour en revenir à MephoBox… On y découvrira un paquet de rubriques correspondant à la plupart des « spécialités » auxquelles un Web designer doit s’attaquer quotidiennement dans son travail.  Ce portail est donc véritablement une ressource ciblée avant tout pour les Web designers ou pour tous ceux qui travaillent dans l’UX et l’UI. Toutes les galeries proposées permettent un « voyage » visuel qui ne manquera pas de réveiller notre créativité endormi par le froid hivernal. On peut bien sûr, s’inscrire et soumettre au groupe son travail et ses tatonnements ergonomiques. Enfin, la création « globale » est elle aussi abordée via le meilleur des sites Web (façon fwa) et ce à travers l’onglet « websites ». À noter, enfin, le design plutôt sympathique et très dans l’air du temps de MephoBox (qu’on ne manquera pas de consulter régulièrement).

Design is history

L’Histoire du design graphique est pavée d’individus plus que de grands mouvements structurants (comme dans l’art avec un grand A). Pourtant le Design a accompagné chaque grand mouvement artistique du XXe siècle (du Constructivisme, aux Dada en passant par le Futurisme) que ce soit via les Arts appliqués ou que ce soit via la création typographique.

Mais quand on aborde l’histoire du Graphisme, on en revient toujours aux individus. Des egos, souvent mégalos, parfois rigolos ! Du coup, il est parfois difficile d’avoir une vision globale quant à son évolution au fil des décennies. Quelques fois, certains designers « couvrent » plusieurs mouvements artistiques. (C’est le cas, par exemple, de Marcel Jacno). Ce qui rend une vision globale encore plus difficile à exister.

Le site Design is History est précieux car il permet cette synthèse visuelle. Initié par Dominic Flask de DangerDom studios, Design is History est une plongée dans cette histoire qui débute avec le père spirituel de tous les graphistes/UI, Gutenberg et qui s’achève  par un catalogue des pratiques actuelles. Entre ces deux repères temporels, c’est un véritable voyage dans le temps qui nous est proposé.

Né professionnellement dans les eighties, je me suis bien sûr plongé, la tête la première, dans cette furieuse décennie… Emigre, le Macintosh, Designers Republic, Neville Brody et tous les autres ! Tout (ou presque) y est mentionné, abordé. Parfois juste survolé, ce qui peut être un brin frustrant. Autre richesse de ce site, sa sélection de liens, sorte de best of des meilleures ressources graphiques en ligne (côté culture métier). Un des derniers articles publié concerne une de mes récentes révélations (un must visuel) : Erik Nitsche. Allons, de ce pas, parfaire notre culture visuelle en cliquant ici.

Les pieds de pages dans les sites de communication Modern UX

Les pieds de page sont une fonctionnalité personnalisée très utilisée pour faciliter la navigation dans les sites Web et les portails. Les sites de Communication SharePoint auront bientôt un contrôle de pied de page prêt à être inséré. Ce contrôle prend en charge soit un logo, soit une étiquette ou un ensemble de liens (jusqu’au huit liens).

En cliquant sur « Modification de l’apparence », on trouve le lien pour modifier le pied de la page.

blog ai3 image-8 Les pieds de pages dans      les sites de communication Modern UX

Dans le contrôle de pied de page, on a la possibilité d’activer/désactiver cette fonctionnalité d’une façon directe et simple. On peut aussi ajouter un logo et des liens (maximum 8).

blog ai3 image-9 Les pieds de pages dans      les sites de communication Modern UX

Ajout d’un lien:

blog ai3 image-7 Les pieds de pages dans      les sites de communication Modern UX

Apparence du pied de la page de l’exemple:

blog ai3 image-10-1024x233 Les pieds de pages dans      les sites de communication Modern UX

Little Big Details, les détails qui font la différence

Le design d’interface (Web, applications diverses, intranet…), on le sait, est constitué de micro détails qui doivent former un tout cohérent. Ces détails font un bon design…

À l’initiative de Toni Romero, un jeune graphiste américain de 22 ans, voici un blog visuel qui parlera tout particulièrement à tous les UI designers : Little Big Details. On le sait, le design d’interfaces d’application est peu considéré dans la grande famille du Web design. Bien que cela évolue (un peu). Les web agencies qui en constituent le noyau dur, sont souvent nées d’anciennes anciennes agences de com voir de publicité, conservant au passage le pire de l’ancien monde : jeunes stagiaires au physique intelligent, directeur artistique senior d’au moins 22 ans, attitude, mépris et frime derrière des Ray-Ban Wayfarer II, total look noir. Octave, héro dandy de 99 francs, à la peau dure. Seuls les sites grands publics, façon communication de masse, trouvent grâce aux yeux de ces nouveaux créatifs de l’âge numérique. Laissant de côté les travaux ressentis de « labeur » aux laborieux de la création. 99% du design numérique implique pourtant une vraie connexion avec l’ergonomie, les usages et la technique. Tout ça pour dire que créer une interface « usable » n’est pas donnée à n’importe quel graphiste sorti d’école spécialisée. Il est aussi question de technicité, créativité et maturité. Le design d’interface d’applications, enfin, est affaire de détails. Et pour reboucler sur Little Big Details, ce blog américain met le focus sur une multitude de détails qui font la différence et –  tout en subtilité – amène de la plus-value aux interfaces qui nous entourent. En une image et un (petit) commentaire, tout est dit et l’on peut s’y approvisionner en bonnes idées pour ses futurs designs.

Logos adaptatifs

Les graphistes et développeurs ont depuis des années l’habitude d’adapter leurs productions aux dimensions variés des appareils. De plus, les sites non responsive (c’est à dire non compatibles avec les mobiles, smartphone ou tablette), sont pénalisés par Google depuis le 21 avril 2015.  Tout ce travail a permis de développer les fondamentaux du « design adaptatif » (responsive design en anglais).

Avec les sites web responsives, la charte graphique (comprenant le logo) doit évoluer. Un logo doit pouvoir conserver sa personnalité et transmettre l’identité de marque, dans différentes tailles.

blog ai3 responsive-logo Logos adaptatifs
Logo responsive

Joe Harrison, spécialiste en design digital et interactif nous explique dans son étude que des marques comme Coca Cola, Chanel ou Disney ont déjà des variantes de leur logo, qui s’adaptent et se modifient en fonction de l’utilisation.

Pour arriver à la plus petite forme d’un logo adaptatif, il faut :

  • Supprimer les détails
  • Supprimer les couleurs
  • Simplifier les formes
  • Empiler les éléments pour un rendu carré

En appliquant ces principes de conception, un logo plus lisible et approprié peut être affiché. Le concept vise à passer d’une image de marque de lignes directrices fixes et rigides à un système plus souple et plus contextuel.

blog ai3 logos-adaptatifs Logos adaptatifs
Logos adaptatifs de Coca-Cola, Chanel, Walt Disney et Heineken

Disney par exemple a simplifié progressivement son logo, faisant disparaître le château, jusqu’à ce qu’il ne reste plus que la première lettre du nom de la marque. Au contraire, Heineken ou Chanel suppriment le nom de la marque pour ne laisser qu’un pictogramme. Pour Coca Cola, le changement va jusqu’à changer le nom de la marque pour passer de Coca Cola à la version minimale « Coke ». Vous pouvez voir le résultat de cette étude en action : ResponsiveLogos.co.uk .

Aujourd’hui, il ne suffit donc plus de créer un simple logo mais de penser une gamme de logo avec des variantes de compositions pour s’adapter à différentes tailles ou résolutions d’écran.

La couleur Pantone 2019 : PANTONE 16-1546 Living Coral

Après l’Ultra-Violet, le Pantone Color of the Year de 2018, Pantone a annoncé mercredi 5 décembre que Living Coral est la couleur de l’année 2019.

Chaque année depuis 20 ans, Pantone décerne le titre honorable de couleur de l’année, en tenant compte de la mode, de la décoration, du design et des tendances culturelles, ainsi que de « comment les couleurs peuvent incarner notre expérience collective et refléter ce qui se passe dans notre culture mondiale à un moment donné », selon le communiqué de presse de Pantone. Le processus de sélection de la couleur de l’année exige un examen approfondi et une analyse des tendances.

Le PANTONE 16-1546 Living Coral, est une nuance d’orange avec une nuance dorée. Cette couleur chaude nous transmet un sentiment de confort. Pantone note que la sélection de cette année symbolise un « besoin inné d’optimisme et d’activités joyeuses » et « des expériences authentiques et immersives qui permettent la connexion et l’intimité », ces dernières étant particulièrement émouvantes dans un paysage culturel qui est de plus en plus dominé par la technologie numérique et les médias sociaux.

Cette couleur vivifiante rappelle la nature sous-marine. Situé au centre de notre écosystème naturellement vivant et chromatique, PANTONE Living Coral évoque la façon dont les récifs coralliens abritent un kaléidoscope de couleurs diverses. La sélection de cette année met en avant l’urgence de 2019 : respecter et de préserver la nature et les ressources naturelles.

Les récifs coralliens sont un élément important de l’environnement mondial, à la fois pour protéger et entretenir les écosystèmes marins et aider à la filtration de l’eau et à la reproduction de la vie marine, entre autres choses. Avec le changement climatique, cette couleur (et son lien avec la nature) semble particulièrement pertinente, surtout si l’on considère que certaines espèces de corail sont inscrites comme « menacées » dans la Loi sur les espèces menacées d’extinction.

Expérience utilisateur : animation SVG d’un formulaire

Darin Senneff, un développeur qui habite à Washington DC, nous propose un formulaire animé très intéressant qui peut considérablement améliorer l’expérience utilisateur. Vous pourrez trouver son site ici. Cet élément UX a d’abord été partagé sur codepen.io le 16 décembre 2017 puis a été partagé en Inde et fait aujourd’hui le tour du monde.

L’animation réalisée en SVG met en scène un Yeti au-dessus d’un formulaire. Quand vous tapez vos informations, email et mot de passe, il suit la progression du remplissage. Par exemple, lorsque vous complétez le mot de passe, le Yéti réagit en se cache les yeux.

Plus précisément un jeu subtil entre le dessin SVG du yéti et la captation des actions de l’utilisateur en javascript. Le Yéti est réalisé avec de multiples vecteurs qui réagissent en interaction avec l’utilisateur. C’est le code javascript qui permet de l’animer selon l’action de l’utilisateur (détection du type de champ du formulaire) de façon fluide et naturelle et embellit l’expérience utilisateur.

Améliorer l’expérience utilisateur de son formulaire

De nos jours, même si l’on veut améliorer l’expérience utilisateur sur un site (qualité des visuels, travail éditorial, univers de marque…), l’étape du formulaire reste ennuyeuse.

Pour réaliser un formulaire qui fonctionne, vous pouvez à votre niveau, respecter certaines bonnes pratiques :

  • Ne collecter que les infos essentielles pour le client
  • Humaniser les messages d’erreurs
  • Créer une animation progressive qui signifie les étapes qui restent à accomplir et qui incite à passer à la suivante
  • Collecter les informations de manière détournée et séquencée sur le site

Cette animation ludique permet d’apporter de l’originalité lors de l’action récurrente de la connexion à un compte. Le yéti amuse l’utilisateur et détourne donc le sentiment négatif lorsque l’on complète un formulaire standard.

De plus, la curiosité incite l’utilisateur à terminer de remplir le formulaire. Sur des sites e-commerce, cela peut permettre d’augmenter le taux de conversion.

La typographie peut vous sauver la vie !

La typographie a plusieurs vertus : elle nous informe, nous met dans l’ambiance, nous donnes des indices temporels et nous donne (aussi) du plaisir. Mais la typographie peut aussi nous sauver la vie. Notamment quand elle peut réduire les risques de distraction des automobilistes.

C’est du moins le pari fait par le MIT qui, d’une façon très scientifique, a testé des typographies qui réduisent l’inattention des conducteurs. Tant au niveau des interfaces embarquées… qu’au niveau de la signalétique extérieure. Voici un petit film qui synthétise ce projet passionnant. Cette étude pourrait également « aider » le design d’application « critique » (dans le domaine militaire, médical… Etc.)

Petites « nouveautés » SharePoint Online

J’espère que vos vacances ont été ensoleillé et des plus reposante, alors un petit post de nouveautés sur SharePoint Online pour bien commencer sa rentrée ?

Personnalisation de l’entête de site #branding en 4 options

None – Affiche l’en-tête avec la couleur blanche par défaut
Neutral – Affiche l’en-tête avec un fond gris clair
Soft – Affiche l’en-tête avec une version claire de la couleur principale en arrière-plan
Strong – Affiche l’en-tête avec la couleur principale comme arrière-plan

blog ai3 Modern-header-Change-look-header-choice-300x191 Petites "nouveautés" SharePoint Online

Menu de navigation #MegaMenu #MegaMenuEnabled

Cette navigation permet de diviser en blocs (Menu A, Menu B, …) les liens de navigation.

blog ai3 Modern-site-MegaMenuEnable-300x105 Petites "nouveautés" SharePoint Online

 

Vous pouvez l’activer via un script standard Microsoft :

Ou via les librairies PnP

On peut créer des sous-sites « Modern UI »

Certes, il n’est pas conseillé de créer des sous-sites. On le sait tous, mais n’empêche que c’est plus simple à gérer quand on en a des centaines, voir des milliers, avec des templates de sites et / ou une architecture de groupes d’accès particuliers identiques à appliquer.

blog ai3 Modern-subsites-300x237 Petites "nouveautés" SharePoint Online