Direction artistique pour le Web avec des zones de modèle de grille CSS

( Cet article est gracieusement sponsorisé par CoffeeCup Software .) Très bien, je vais aller droit au but. CSS Grid est important, vraiment important, trop important pour être l'une de ces propriétés "Je l'utiliserai quand tous les navigateurs le prendront en charge". En effet, avec CSS Grid, nous pouvons désormais être aussi créatifs avec la mise en page sur le Web que nous le pouvons sur papier, sans compromettre l'accessibilité, la réactivité ou la convivialité.

Si vous êtes sérieux au sujet de la conception ou du développement Web, vous devez également être sérieux dans l'apprentissage et l'utilisation de CSS Grid. Dans cet article, je vais expliquer comment utiliser un aspect, les zones de modèle de grille , une façon d'organiser les éléments que même une grande tasse stupide comme moi peut comprendre, et qui n'attire pas assez l'attention.

Maintenant, vous voulez voir de l'action et du code, je le sais, mais attendez une putain de minute. Avant d'apprendre "comment", je veux vous apprendre "pourquoi" il est important de faire le genre de mises en page que nous avons vues dans d'autres médias pendant des décennies, mais qui ont pour la plupart été absentes du Web.

Se sentir frustré

Je suppose que vous avez vu ces "laquelle de ces deux mises en page concevez-vous aujourd'hui ?" tweets, déplorant l'état actuel du design sur le web. Même moi, j'ai parlé de la façon dont la conception Web a perdu son "âme". Je parie que vous avez également vu des gens utiliser CSS Grid pour recréer des affiches ou des pages de magazines. Ces démonstrations techniques sont intéressantes et montrent à quel point il est facile d'implémenter des mises en page complexes avec CSS Grid par rapport à d'autres méthodes, mais elles ne permettent pas de comprendre pourquoi cela est important.

Alors quelle est la raison ? Pourquoi la mise en page est-elle une partie si importante du design ? Eh bien, tout se résume à une chose, et c'est la communication.

Pendant ce qui semble être une éternité, les concepteurs de sites Web ont créé des modèles, puis les ont remplis, sans tenir compte de la relation entre le contenu et la mise en page. Je suppose que c'est inévitable, compte tenu des considérations relatives aux systèmes de gestion de contenu, de notre besoin de rendre les conceptions réactives et des limites des propriétés CSS que nous avons utilisées jusqu'à présent. Bien sûr, nous avons créé des conceptions flexibles et utilisables, mais il nous manquait une pièce clé du puzzle, le rôle que joue la mise en page dans la transmission d'un message.

Si vous avez fait plusieurs fois le tour du pâté de maisons, vous saurez que la couleur joue un rôle dans la définition du bon ton pour un design. Je n'ai pas besoin de vous dire que le type joue aussi son rôle. Choisissez la mauvaise police de caractères et vous courez le risque de communiquer de manière inefficace et de laisser les gens se sentir différemment de ce que vous vouliez.

La mise en page — étroitement liée à des aspects typographiques comme la « mesure » — joue un rôle tout aussi important. Symétrie et asymétrie, harmonie et tension. Ces principes attirent les gens vers votre contenu, les guident et les aident à le comprendre plus facilement. C'est pourquoi il est aussi important de créer la bonne mise en page que de choisir la police de caractères la plus appropriée. Les concepteurs d'impression le savent depuis des années.

Raconter des histoires à travers la direction artistique

La direction artistique compte autant sur le Web que dans d'autres médias, y compris la presse écrite, et ce que je vais couvrir s'applique autant à la promotion de produits numériques qu'à la narration d'histoires.

À quoi pensez-vous lorsque vous entendez le terme « direction artistique » ? Pensez-vous à des images responsives, présentant des recadrages, des tailles ou des orientations alternatives à plusieurs tailles d'écran en utilisant l'élément <picture> ou 'sizes' en HTML ? Ils sont devenus des outils utiles de conception réactive et de direction artistique, mais la conception Web ne se résume pas à des outils.

Pensez-vous à ces designers comme Jason Santa Maria et Trent Walton qui dirigent parfois leur écriture en donnant à une entrée sa propre image, sa mise en page et sa typographie distinctives. Cela nous rapproche de la compréhension de la direction artistique, mais les images, la mise en page et la typographie ne sont que le résultat de la direction artistique, pas sa signification.

Donc, si la direction artistique n'est pas exactement ces choses, qu'est-ce que c'est exactement ? En une phrase, c'est l'art de distiller une signification ou un objectif essentiel et précis à partir d'un contenu - que ce soit cet article de magazine ou une liste de raisons pour lesquelles utiliser l'application la plus cool de la start-up la plus en vogue - et de transmettre cette signification ou cet objectif mieux en utilisant le design. Nous n'entendons pas beaucoup parler de direction artistique sur le Web, mais elle est bien établie dans un autre médium, peut-être le plus mémorable étant les magazines et, dans une certaine mesure, les journaux.

Je ne suis pas assez vieux pour me souvenir du travail d'Alexey Brodovitch sur le magazine Harpers Bazaar de 1934 à 1958.

Je me souviens de la direction artistique de Neville Brody pour le magazine Face et je m'en inspire encore tous les jours.

La direction artistique est si rarement abordée en relation avec le web qu'on pourrait penser qu'elle n'est pas pertinente. Peut-être voyez-vous la direction artistique comme une activité plus adaptée au monde de l'imprimé qu'au web ? Certaines personnes pourraient penser que la direction artistique est élitiste d'une certaine manière.

Je ne pense pas que tout cela soit vrai. Les histoires sont des histoires, peu importe où elles sont racontées ou par quel moyen. Ils peuvent susciter la réflexion comme ceux publiés sur ProPublica, ou ils peuvent être l'histoire de votre entreprise et pourquoi les gens devraient faire affaire avec vous. Il y a l'histoire de la façon dont votre organisme de bienfaisance soutient une bonne cause et pourquoi les gens devraient faire un don. Ensuite, il y a l'histoire de la nouvelle application de votre start-up et pourquoi quelqu'un devrait la télécharger. Avec toutes ces histoires, il y a un message plus profond au-delà de simplement raconter les faits sur ce que vous faites ou vendez.

La direction artistique consiste à comprendre ces messages et à décider de la meilleure façon de les communiquer à travers l'organisation et la présentation de mots et de visuels. La direction artistique est-elle pertinente pour le web ? Bien sûr. Les directeurs artistiques utilisent le design pour aider les gens à mieux comprendre l'importance d'un contenu, et c'est aussi important sur le Web que sur papier. En fait, les principes de base de la direction artistique n'ont pas changé entre l'imprimé et le numérique.

J'irais plus loin en disant que la direction artistique est essentielle pour créer des expériences cohérentes sur plusieurs canaux, afin que le sens d'une histoire ne se perde pas dans les écarts entre les appareils et les tailles d'écran.

David Hillman, ancien de The Guardian et New Statesman et concepteur de nombreuses autres publications a déclaré :

"Dans sa meilleure forme, (la direction artistique) implique que le directeur artistique ait une compréhension complète et approfondie de ce que dit le magazine et, par le biais du design, influence la façon dont il est dit."

Mon ami Mark Porter, par coïncidence l'ancien directeur créatif de The Guardian, a également déclaré :

"Le design, c'est être en charge de la répartition des éléments dans l'espace."

CSS Grid rend la gestion de la distribution des éléments plus possible que jamais.

Direction artistique Une histoire dure

Je suppose qu'il est maintenant temps de s'y mettre, alors je vais vous dire comment mettre cela en pratique dans une série d'exemples Hardboiled . Je vais éclairer une lampe de poche sur la mise en page et comment cela aide à la narration, puis je vous expliquerai comment développer l'une de ces conceptions à l'aide de CSS Grid.

Tout d'abord, la trame de fond. Sur la couverture de mon édition 2010 de Hardboiled Web Design (1), une femme mystérieuse en robe rouge (il y a toujours une femme en robe rouge) pointe une arme sur notre bite privée. (Sheesh, je connais ce sentiment.) Par l'édition du cinquième anniversaire en 2015 (2), l'histoire est passée et une ombre se déplace de manière inquiétante à travers la porte du bureau de notre détective. La porte s'ouvre à la volée, deux méchants font irruption (3) et une bagarre s'ensuit (4). Notre femme mystérieuse sait comment lancer un coup de poing et avant que vous ne puissiez dire "embrasse-moi, mortel", un méchant est attaché à une chaise et prêt à renverser les haricots (5).

Chapitre trois

Je commencerai à raconter cette histoire au moment explosif où ces deux méchants ouvrent la porte. Maintenant, si vous avez lu le livre de Scott McCloud 'Understanding Comics', vous saurez que la taille du panneau affecte le temps que les gens passent à regarder une zone, donc je veux rendre l'image de nos méchants aussi grande que possible pour maximiser son impact (1). Ce que les hottes ne savent pas, c'est que notre femme les attend. J'utilise la mise en page pour ajouter de la tension en reliant leurs lignes oculaires, (2) en attirant en même temps les yeux d'un lecteur là où le contenu commence.

Chapitre quatre

Alors que le premier méchant fait irruption sur la scène, j'utilise le bord gauche de la page, sans marges, pour représenter la porte ouverte (1). Comme la majeure partie de l'action se déroule à droite, je crée une grande zone spatiale en utilisant la majorité de la hauteur et de la largeur de la page (2).

Maintenant, lorsque les poings volent dans toutes les directions, notre mise en page doit faire de même, donc mon contenu vient du haut - où les espaces attirent l'œil vers le paragraphe en gras (3) - et de la gauche avec l'énorme titre (4) . Vous vous demandez peut-être pourquoi je n'ai pas mentionné cette image plus petite en haut à droite, mais j'y reviendrai dans une minute.

Chapitre cinq

Le combat est terminé et notre détective a repris le contrôle, donc sur cette dernière page, j'utilise une mise en page plus structurée pour refléter l'ordre qui est renvoyé. Des colonnes pleines de texte justifié (1) avec beaucoup d'espaces autour d'elles ajoutent à la sensation de calme. Dans le même temps, la légende alignée à droite (2) semble énervée et inconfortable, comme l'interrogatoire à main armée qui a lieu.

Se salir les mains

C'est l'heure des aveux. Je ne vais pas vous apprendre tout ce que vous devez savoir sur le développement de mises en page à l'aide de CSS Grid, car de nombreuses personnes plus intelligentes l'ont déjà fait :

• Grille par exemple par Rachel Andrew
• Apprendre CSS Grid avec Wes Bos
• Un guide complet de Grid par Chris House sur CSS Tricks

Au lieu de cela, je vais vous montrer l'inspiration pour une grille, comment je l'ai traduite en une mise en page (grand écran) en utilisant des colonnes et des lignes dans CSS Grid, puis j'ai placé des éléments dans les zones spatiales créées à l'aide de la propriété grid-template areas . Enfin, je déconstruirai et modifierai la conception pour des tailles d'écran plus petites.

Le rythme parfait

Mon inspiration pour la mise en page que j'utilise est venue de ce dessin de 1983 de Neville Brody pour The Face Magazine . J'ai été attiré par la façon dont Brody a intelligemment créé les axes horizontal et vertical et le grand espace occupé par l'image principale.

J'ai fait de même en appliquant les propriétés CSS Grid suivantes à l'élément <body> sans marge de ma page, où les colonnes d'une fraction de large se répètent cinq fois avec un écart de 2vw entre elles :

 body { margin: 0; padding : 0; display: grid; grid-column-gap : 2vw; grid-template-columns: repeat(5, 1fr); } 

Dans CSS Grid, nous définissons un module de grille en lui donnant un nom, puis nous plaçons un élément dans un seul module ou dans plusieurs modules adjacents - appelés zones spatiales - avec la propriété grid-template-areas . Cela semble compliqué, hein ? Non, pas vraiment. C'est l'un des moyens les plus simples et les plus évidents d'utiliser CSS Grid, alors mettons-nous au travail.

Tout d'abord. J'ai cinq éléments à positionner, et ce sont mon titre "Kiss Me, Deadly", la plus grande image "bannière", le contenu principal, le paragraphe de côté et deux images, fig-1 et fig-2. Mon HTML ressemble à ceci :

 <body> <picture role="banner">…</picture> <h1 class="title">…</h1> <main>…</main> <aside>…</aside> <img class="fig-1"> <img class="fig-2"> </body>

J'ai écrit ce balisage dans l'ordre qui a le plus de sens, comme je le ferais lors de la construction d'un récit. Il se lit comme un rêve sur de petits écrans et même sans styles. Je donne à chaque élément une valeur d'aire de grille que j'utiliserai dans un instant pour le placer sur ma grille :

 [role="banner"] { grid-area: banner; } .title { grid-area: title; } main { grid-area: main; } aside { grid-area: aside; } .fig-1 { grid-area: fig-1; } .fig-2 { grid-area: fig-2; }

Vos valeurs de zone de grille ne doivent pas nécessairement refléter vos types d'éléments. En fait, vous pouvez utiliser n'importe quelle valeur, même des lettres simples comme a, b, c ou d.

De retour avec la grille, j'ajoute trois lignes aux colonnes que j'ai créées précédemment. La hauteur de chaque ligne est automatiquement définie par la hauteur du contenu qu'elle contient :

 body { grid-template-rows: repeat(3, auto); }

C'est là que la magie opère. Je dessine littéralement la grille en CSS en utilisant la propriété grid-template-areas, où chaque point (.) représente un module vide :

 body { grid-template-areas: ". . . . ." ". . . . ." ". . . . ."; }

Il est maintenant temps de positionner les éléments sur cette grille en utilisant les valeurs de zone de grille que j'ai créées précédemment. Je place la valeur de chaque élément dans un module sur la grille et si je répète cette valeur sur plusieurs modules adjacents - que ce soit sur des colonnes ou des lignes, cet élément s'étendra sur eux pour créer une zone spatiale. Laisser un point (.) créera un espace vide :

 body { grid-template-areas: ". aside . fig-2 fig-2" "title title banner banner banner" "fig-2 main banner banner banner"; }

Encore un petit détail avant de terminer la mise en page CSS. Je veux que le contenu de l'élément de côté se trouve en bas - près du titre et en laissant suffisamment d'espace blanc au-dessus pour attirer l'attention de quelqu'un - j'utilise donc une propriété align-self qui pourrait être familière depuis l'apprentissage de Flexbox, mais avec un nouvelle valeur de 'end.'

 aside { align-self: end; } 

Il ne reste plus qu'à ajouter quelques autres styles pour donner vie au design, y compris une palette de couleurs inversées frappante et un accent rouge vif qui lie le mot "Deadly" dans le titre à la couleur de la robe de notre femme :

 <h1 class="title">Kiss Me, <em>Deadly</em></h1> .title em { font-style: normal; color : #fe3d6b; }

Partir en fumée

Maintenant, je sais que vous vous posez des questions sur cette image de combat plus petite, et je dois admettre quelque chose. Natalie Smith n'a fait qu'une seule illustration finie de poings volants pour mes couvertures de Hardboiled Shot , mais ses croquis étaient trop beaux pour être gaspillés. J'ai utilisé CSS Grid pour positionner une version inversée d'un croquis au crayon au-dessus du pistolet et l'ai fait pivoter avec une transformation CSS pour former un nuage de fumée.

Décomposer

Dans cet article, j'ai montré comment créer une mise en page pour les grands écrans, mais en réalité, je commence par une petite, puis je progresse en utilisant des points d'arrêt pour ajouter ou modifier des styles. Avec CSS Grid, adapter une mise en page à différentes tailles d'écran est aussi simple que de positionner des éléments dans différentes zones de modèle de grille. Je peux le faire de deux manières, d'abord en modifiant la grille elle-même :

 body { grid-template-columns: 50px repeat(2, 1fr); } @media screen and (min-width : 48em) { body { grid-template-columns: repeat(5, 1fr); } }

La seconde, en positionnant les éléments dans différentes zones de modèle de grille sur la même grille :

 body { grid-template-areas: "fig-1 aside aside aside aside" "fig-1 title title title title" "banner banner banner banner banner" ".... main main main main"; } @media screen and (min-width : 64em) { body { grid-template-areas: ".... aside .... fig-2 fig-2" "title title banner banner banner" "fig-1 main banner banner banner"; } } 

Utilisation du générateur de grille CSS

Les zones de modèles de grille rendent le développement de mises en page dirigées par l'art si facile que même un pied plat comme moi peut le faire, mais si vous êtes du genre à aimer les outils pour faire le sale boulot, CSS Grid Builder de CoffeeCup Software pourrait être exactement ce qu'il vous faut. toi. Vous avez peut-être déjà utilisé des éditeurs WYSIWYG, vous vous souvenez peut-être à quel point le code qu'ils ont craché était moche. Laissez-moi vous arrêter là. CSS Grid Builder génère un CSS propre et un balisage accessible. Peut-être pas aussi propre que vous l'écrivez vous-même, mais sacrément proche, et la petite équipe qui l'a développé prévoit de le rendre encore meilleur. Mon code HTML manuscrit ressemble à ceci :

 <picture role="banner"> <source media="(min-width: 64em)"> <img src="banner-small.png" alt="Kiss Me, Deadly"> </picture>

L'élément CSS Grid Builder <picture> est enveloppé dans une division supplémentaire, avec quelques autres éléments ajoutés pour faire bonne mesure :

 <div class="responsive-picture banner" role="banner"> <picture> <!--[if IE 9]><video><![endif]--> <source media="(min-width: 64em)"> <!--[if IE 9]></video><![endif]--> <img alt="Kiss Me, Deadly" src="banner-small.png"> </picture> </div>

Comme je l'ai dit, assez près, et si vous ne me croyez pas, téléchargez un ensemble de fichiers exportés à partir de mon exemple Hardboiled . Cela vous convaincra peut-être.

Les outils de développement des navigateurs s'améliorent dans l'inspection des grilles, mais CSS Grid Builder vous aide à les créer. De toute évidence. À la base, CSS Grid Builder est un navigateur basé sur Chromium enveloppé dans une interface utilisateur, et il fonctionne sur macOS et Windows. Cela signifie que si le navigateur peut le restituer, les outils de l'interface utilisateur peuvent l'écrire, à une ou deux exceptions près, notamment CSS Shapes.

En fait, CSS Grid Builder construit plus que des grilles, et vous pouvez l'utiliser pour créer des styles pour les arrière-plans - y compris les dégradés , ce qui est très pratique - les bordures et la typographie . Il gère même les mises en page Flexbox et multi-colonnes , mais vous êtes ici parce que vous voulez en savoir plus sur CSS Grid.

Regarder autour de l'interface

L'interface de CSS Grid Builder correspond à peu près à ce à quoi vous vous attendiez, avec une large zone pour la conception que vous créez à gauche et des contrôles à droite. Ces contrôles comprennent des éléments communs ; du texte, des images, des boutons interactifs et des contrôles de formulaire, ainsi que des conteneurs de mise en page. Si vous avez besoin de l'un de ces éléments, faites-le glisser et déposez-le dans votre espace de travail.

Appuyez sur pour révéler l'onglet Styles, et vous trouverez des commandes pour nommer les attributs de classe et d'ID, appliquer des styles à des points d'arrêt spécifiques et dans des états particuliers. Tout cela est très utile, mais c'est la section de mise en page - un peu mal placée au bas du volet - qui est la plus intéressante.

Dans cette section, vous pouvez concevoir une grille. La configuration de colonnes et de lignes pour former une mise en page sans représentation visuelle peut être l'une des parties les plus difficiles de l'apprentissage du fonctionnement de la "grille". La capacité de l'application à définir visuellement la structure de la grille est une fonctionnalité pratique, en particulier lorsque vous débutez avec CSS Grid. C'est la section que je vais expliquer.

À l'aide de CSS Grid Builder, j'ai ajouté une division de conteneur. Lorsque je le sélectionne dans la zone de travail, j'ai accès à l'éditeur de grille. Activez cela, et tous les outils nécessaires pour créer visuellement une grille sont là :

• Ajouter des colonnes et des lignes
• Aligner et justifier le contenu et les éléments dans chaque module
• Dimensionnez les colonnes et les lignes en utilisant chaque type d'unité, y compris fr et minmax
• Spécifiez les écarts
• Nommez les zones de modèle de grille
• Spécifier des points d'arrêt

Lorsque je suis satisfait de ces paramètres, "OK" les modifications et elles sont appliquées à la conception dans la zone de travail. Là-bas, utilisez des curseurs pour prévisualiser les résultats à différents points d'arrêt, et si vous faites partie de ceux qui s'inquiètent de la diminution du pourcentage de personnes utilisant des navigateurs incapables, CSS Grid Builder propose également des paramètres où vous pouvez trouver des solutions de secours. Ensuite, copiez et collez simplement les styles CSS ailleurs dans votre projet ou exportez l'ensemble du kit et du caboodle.

CSS Grid Builder est actuellement gratuit pendant que CoffeeCup le développe et si vous aimez ce qu'ils font, vous pouvez leur donner quelques dollars pour aider à financer son développement.

Nettoyer

J'ai du mal à contenir mon enthousiasme à propos de CSS Grid. Oui, je sais que je devrais sortir plus, mais je pense vraiment que cela nous offre la meilleure chance de tirer des leçons d'autres médias pour que les sites Web que nous créons communiquent mieux ce que nous visons à transmettre à notre public. Que nous créions des sites Web pour les entreprises qui souhaitent vendre plus, les organismes de bienfaisance qui ont besoin de collecter plus d'argent grâce à des dons à de bonnes causes, ou les médias qui veulent raconter des histoires plus efficacement, CSS Grid plus un contenu réfléchi et dirigé par l'art rend tout cela possible.

Maintenant, c'est Hardboiled .

J'espère que vous avez apprécié cet article, consultez maintenant les fichiers de projet sur CodePen ou téléchargez les fichiers d'exemple.

"Direction artistique pour le Web" par Andy Clarke, le premier "shot" de Hardboiled Web Design. Shots est une série de courts livres sur la « Direction artistique pour le Web », « La conception avec un navigateur » et « La vente d'idées créatives » qui seront publiés tout au long de 2018.