Fermer

avril 9, 2018

Art dirigeant pour le Web avec des zones de modèle de grille CSS


( Cet article est aimablement sponsorisé par CoffeeCup Software .) D'accord, je vais aller droit au but. CSS Grid est important, vraiment important, trop important pour être l'un de ces "je l'utiliserai quand tous les navigateurs le supporteront". En effet, avec CSS Grid, nous pouvons désormais être aussi créatifs avec la mise en page sur le Web que possible, sans compromettre l'accessibilité, la réactivité ou la convivialité.

Si vous êtes sérieux au sujet de la conception Web ou du développement, besoin d'être sérieux au sujet de l'apprentissage et de l'utilisation de CSS Grid aussi. Dans cet article, je vais vous expliquer comment utiliser un aspect, zones de modèle de grille une façon d'organiser des éléments que même une grosse tasse muette comme moi peut comprendre, et une qui ne reçoit pas

Maintenant, vous voulez voir de l'action et du code, je le sais, mais attendez une minute. Avant d'apprendre "comment", je veux vous apprendre "pourquoi" il est important de faire le genre de mise en page que nous avons vu dans d'autres médias pendant des décennies, mais qui ont surtout été absents du web.

vu ceux "dont l'une de ces deux mises en page concevez-vous aujourd'hui?" tweets, déplorant l'état actuel du design sur le web. Même j'ai parlé de la façon dont le design 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 cool, et elles montrent à quel point il est facile de mettre en œuvre des mises en page complexes avec CSS Grid par rapport à d'autres méthodes, mais elles ne comprennent pas pourquoi cela est important.

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.

Pour ce qui semble être pour toujours, les concepteurs de sites Web ont créé des modèles, puis les ont remplis, sans trop tenir compte de la relation entre contenu et mise en page. Je suppose que c'est inévitable, étant donné les considérations relatives aux systèmes de gestion de contenu, notre besoin de rendre les conceptions sensibles, et les limitations des propriétés CSS que nous avons utilisées jusqu'à maintenant. Bien sûr, nous avons fait des designs flexibles, utilisables, mais nous avons manqué une pièce clé du puzzle, le rôle que joue la mise en page pour délivrer un message.

Si vous avez fait le tour du quartier plusieurs fois , vous saurez quel rôle joue la couleur pour définir le bon ton pour un motif. Je n'ai pas besoin de vous dire que ce type joue aussi son rôle. Choisissez la mauvaise police, 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 aux 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 l'élaboration de la bonne mise en page est aussi importante que le choix de la police de caractères la plus appropriée.

Raconter des histoires à travers la direction artistique

La direction artistique compte autant sur le web que sur d'autres supports, y compris l'imprimé, et ce que je vais couvrir s'applique autant à la promotion

Que pensez-vous lorsque vous entendez le terme «direction artistique»? Pensez-vous à des images sensibles, présentant des cultures alternatives, des tailles ou des orientations à plusieurs tailles d'écran en utilisant le élément ou «tailles» en HTML? Ils sont devenus utiles outils de conception et de direction artistique, mais il y a plus de design web que d'outils.

Pensez-vous à ces concepteurs comme Jason Santa Maria et Trent Walton qui parfois art diriger leur écriture en donnant une entrée son propre, l'image distinctive, la mise en page et la typographie. 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 et non la signification de celle-ci

. Dans une phrase, c'est l'art de distiller une signification ou un but essentiel et précis d'un contenu – que ce soit un article de magazine ou une liste de raisons pour utiliser l'application la plus cool de la start-up la plus chaude – et de transmettre ce sens. mieux en utilisant le design. Nous n'entendons pas beaucoup parler de la direction artistique sur le web, mais c'est bien établi dans un autre milieu, peut-être le plus mémorable étant les magazines et dans une certaine mesure les journaux

Je ne suis pas assez vieux pour m'en souvenir. Le travail de Brodovitch sur le magazine Harpers Bazaar de 1934 à 1958.


 dessins de Brodovitch
Fig.1. Ce que j'aime de ces créations – en particulier de ses croquis au crayon – c'est que Brodovitch a placé son contenu pour refléter parfaitement l'image qui l'accompagne.

Je me souviens de la direction artistique artistique de Neville Brody pour le magazine Face et j'en suis toujours inspiré tous les jours.


 Les pages de Brody du magazine The Face
Fig.2. Même vingt-cinq ans après leur création, les pages de Brody du magazine The Face sont encore des dessins remarquables.

La ​​direction artistique est si rarement discutée en relation avec le web que vous pourriez être pardonné de penser que ce n'est pas pertinent. Peut-être voyez-vous la direction artistique comme une activité plus adaptée au monde de l'imprimé qu'à la toile? Certaines personnes pourraient penser que la direction artistique est élitiste d'une façon ou d'une autre.

Je ne pense pas que ce soit vrai. Les histoires sont des histoires, peu importe où elles sont dites ou par quel moyen. Ils peuvent être provocateurs comme ceux publiés sur ProPublica ou ils pourraient être l'histoire de votre entreprise et pourquoi les gens devraient faire des affaires 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 le télécharger. Avec toutes ces histoires, il y a un message plus profond que de simplement dire les faits sur ce que vous faites ou vendez.

La ​​direction artistique consiste à comprendre ces messages et à décider comment les communiquer par l'organisation et la présentation des mots et des visuels. La direction artistique est-elle pertinente pour le Web? Bien sûr. Les directeurs artistiques utilisent la conception 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ésives à travers de multiples canaux, de sorte que le sens d'une histoire David Hillman, anciennement de The Guardian et New Statesman et concepteur de nombreuses autres publications, a déclaré:

"Dans sa meilleure forme, (art direction) implique le directeur artistique avoir une compréhension complète et approfondie de ce que le magazine dit, et à travers le design, influencer la façon dont il est dit. "

Mon ami Mark Porter coïncidentement, l'ancien directeur créatif du Guardian a également déclaré:

"Le design est en charge de la distribution des éléments dans l'espace."

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

L'art dirigeant une histoire hardboiled

I suppose maintenant est le temps de faire Alors, je vais vous dire comment mettre cela en œuvre dans une série d'exemples Hardboiled . Je vais faire briller une lampe de poche sur la mise en page et comment cela aide la narration, puis vous expliquer comment développer un de ces dessins en utilisant CSS Grid.


 plusieurs 'plans' d'une histoire dans un livre Hardboiled
Fig .3. Quand j'ai conçu les couvertures pour mes livres Hardboiled, je voulais que l'histoire continue à travers plusieurs «coups de feu». (À gauche: Couvrir les illustrations de Kevin Cornell À droite: Illustrations de couverture par Natalie Smith .) (Copyright: Stuff & Nonsense )

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.) En 2015 [2] Fifth Anniversary Edition l'histoire est passée et une ombre se déplace sinistrement à travers la porte du bureau de notre détective. La porte s'ouvre, deux méchants font irruption (3) et un combat de poing s'ensuit (4). Notre mystérieuse femme sait comment lancer un coup de poing et avant que vous puissiez dire «embrasse-moi, mortel», un méchant est attaché à une chaise et prêt à renverser les haricots (5).

Chapitre trois

Je vais commencer à dire cette histoire au moment explosif où ces deux méchants ouvrent la porte. Maintenant, si vous avez lu le livre de Scott McCloud ' Comprendre les bandes dessinées ', vous savez que la taille des panneaux affecte le temps que les gens passent à regarder une zone, alors je veux que l'image de nos méchants soit aussi grande possible de maximiser son impact (1). Ce que les cagoules ne savent pas, c'est que notre femme les attend. J'utilise la disposition pour ajouter de la tension en reliant leurs lignes oculaires, (2) en même temps dessiner les yeux d'un lecteur à l'endroit où le contenu commence.


 Ajouter la tension en reliant les lignes oculaires et maximiser l'impact. 4. Ajoutez de la tension en reliant les lignes des yeux et maximisez l'impact à travers de grandes images. (Voir <a href= projets sur CodePen
) (Copyright: Stuff & Nonsense )

Chapitre Quatre

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

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


 Quand les poings volent, une disposition doit faire la même chose.
Fig. 5 Lorsque les poings volent, une mise en page doit faire la même chose. (Voir projets sur CodePen ) (Copyright: Stuff & Nonsense )

Chapitre Cinq

Le combat est terminé, et notre détective reprend le contrôle, donc sur cette dernière page j'utilise une disposition plus structurée pour refléter l'ordre qui est retourné. Des colonnes solides de texte justifié (1) avec beaucoup d'espaces autour d'eux ajoutent à la sensation de calme. En même temps, la légende alignée à droite (2) semble nerveuse et inconfortable, comme l'interrogation à l'arme à feu qui a lieu


 en utilisant la mise en page pour créer de l'ordre et du désordre
Fig.6. Nous pouvons utiliser la mise en page pour créer l'ordre ainsi que le désordre. (Voir projets sur CodePen ) (Copyright: Stuff & Nonsense )

Getting My Dands Dirty

Il est temps de faire une confession. Je ne vais pas vous apprendre tout ce que vous devez savoir sur le développement de mises en page en utilisant CSS Grid car il y a beaucoup de gens plus intelligents qui l'ont déjà fait:

Au lieu de cela, je vais vous montrer l'inspiration pour une grille. Je l'ai traduit 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 en utilisant la propriété . Enfin, je vais déconstruire et modifier le design pour des tailles d'écran plus petites

The Perfect Beat

Mon inspiration pour la mise en page que j'utilise provient de cette conception de Neville Brody pour The Face Magazine . J'ai été attiré par la façon dont Brody a créé intelligemment à la fois l'axe horizontal et vertical et le grand espace occupé par l'image principale.


 mise en page de Neville Brody pour The Face Magazine
Fig.7. Cette mise en page de Neville Brody pour The Face Magazine m'a semblé être le point de départ parfait pour mon design. Regardez de près la grille de Brody, et vous remarquerez qu'il a utilisé cinq colonnes de largeur égale.

J'ai fait de même en appliquant les propriétés CSS Grid suivantes à l'élément margin-less

de ma page, où les colonnes d'une unité de largeur répètent cinq fois avec un écart de 2vw entre elles: body

marge: 0;
rembourrage: 0;
affichage: grille;
grille-colonne-écart: 2vw;
grid-template-columns: répète (5, 1fr); }

 combinant cinq colonnes de largeur égale
Fig.8. Je combine cinq colonnes de même largeur de différentes façons pour créer des zones spatiales.

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 plusieurs modules adjacents – appelés zones spatiales – avec les grid-template-areas propriété. Ça a l'air compliqué hein? Non, pas vraiment. C'est l'une des façons les plus faciles et les plus évidentes d'utiliser CSS Grid, alors commençons à travailler.

D'abord, d'abord. J'ai cinq éléments à positionner, et ils 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:


 ... 

...

...

J'ai écrit ce balisage dans l'ordre qui a le plus de sens, tout comme je le ferais en construisant 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 de grid-area que je vais utiliser dans un instant pour la placer sur ma grille:

 [role="banner"] {grid-area: banner; }
.title {grid-area: titre; }
main {grid-area: principale; }
de côté {grid-area: de côté; }
.fig-1 {zone de grille: fig-1; }
.fig-2 {zone de grille: 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 à l'intérieur:

 body {
grid-template-rows: répète (3, auto); }

Voici où la magie se produit. 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 {
zones de gabarit de grille:
"..."
"..."
"..." }

Il est maintenant temps de positionner les éléments sur cette grille en utilisant les valeurs de la 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 – soit à travers les colonnes ou la ligne, cet élément se développera à travers eux pour créer une zone spatiale. Laisser un point (.) Va créer un espace vide:

 body {
zones de gabarit de grille:
".de côté fig-2 fig-2"
"bannière de bannière de titre de titre"
"bannière principale de bannière de bannière de fig-2"; }

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

 aside {
align-self: fin; }

 Mise en page CSS pour les écrans plus grands
Fig.9. Voilà, ma mise en page CSS Grid pour les grands écrans est terminée. (Copyright: Stuff & Nonsense )

Tout ce qui reste est d'ajouter quelques autres styles pour donner vie au design, y compris un schéma de couleurs renversantes frappantes et un accent rouge vif qui lie le mot "Deadly" dans le titre à la couleur de la robe de notre femme:

 

Embrasse-moi, Mortel

.title em { style de police: normal; couleur: # fe3d6b; }

Monter dans la fumée

Maintenant, je sais que vous vous posez des questions sur cette petite image de combat, et je dois avouer quelque chose. Natalie Smith n'a fait qu'un seul poing fini pour illustrer mes couvertures Hardboiled Shot mais ses esquisses étaient trop bonnes à perdre. J'ai utilisé CSS Grid pour positionner une version inversée d'un croquis au-dessus du pistolet et l'ai fait pivoter avec une transformation CSS pour former un nuage de fumée


 CSS Grid et transforme ce croquis en un nuage de fumée
Fig .dix. CSS Grid et transforme transforme cette esquisse en un nuage de fumée. (Copyright: Stuff & Nonsense )

Breaking It Down

Dans cet article, j'ai montré comment créer une mise en page pour les grands écrans, mais en réalité, je commence par un petit puis je travaille 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 grille. Il y a deux façons de le faire, d'abord en changeant la grille elle-même:

 body {
grid-template-columns: répétition 50px (2, 1fr); }

Écran @media et (min-width: 48em) {
corps {
grid-template-columns: répète (5, 1fr); }
}

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

 body {
zones de gabarit de grille:
"fig-1 côté de côté côté de côté"
"fig-1 titre titre titre titre"
"bannière bannière bannière bannière"
".... principale main principale principale"; }

Écran @media et (min-width: 64em) {
corps {
zones de gabarit de grille:
".... de côté .... fig-2 fig-2"
"bannière de bannière de titre de titre"
"fig-1 bannière bannière bannière principale"; }
}

 adaptation de la disposition à différentes tailles d'écran
Fig.11. Adapter ma disposition à différentes tailles d'écran est aussi simple que de positionner des éléments dans différentes zones de gabarits. Petit écran (gauche) Moyen écran (droite). (Copyright: Stuff & Nonsense )

Utilisation de CSS Grid Builder

Les zones de modèles de grille facilitent le développement de mises en page orientées art que même un pied plat comme moi peut le faire, mais si vous êtes un type qui aime les outils, [19459062CSSGridBuilder de CoffeeCup Software est peut-être ce qu'il vous faut. Vous avez peut-être déjà utilisé des éditeurs WYSIWYG, vous vous rappelez peut-être à quel point le code qu'ils recrachaient était moche. Laissez-moi vous arrêter là. CSS Grid Builder génère des feuilles CSS et des balises accessibles. Peut-être pas aussi propre que vous l'écrivez, mais sacrément proche, et la petite équipe qui l'a développé a l'intention de le rendre encore meilleur. Mon HTML manuscrit ressemble à ceci:

 
    
     Embrasse-moi, mortel 

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

 

Comme je l'ai dit, assez proche, et si vous ne me croyez pas, téléchargez un ensemble de fichiers exportés de mon exemple Hardboiled . Peut-être que cela vous convaincra.

Les outils de développement des navigateurs sont de mieux en mieux inspectés, mais CSS Grid Builder vous aide à les construire. Évidemment. À 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 rendre, les outils de l'interface utilisateur peuvent l'écrire, avec une ou deux exceptions notables, y compris CSS Shapes.

En fait, CSS Grid Builder génère plus de grilles et vous pouvez l'utiliser pour créer des styles. milieux – y compris gradients ce qui est très pratique – frontières, et typographie . Il gère même les configurations 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 comme vous l'attendez, avec une large zone pour le design que vous faites sur la gauche et les contrôles sur la droite. Ces contrôles comprennent des éléments communs; du texte, des images, des boutons interactifs et des contrôles de formulaire, et des conteneurs de mise en page. Si vous avez besoin de l'un de ces éléments, faites-le glisser dans votre zone de travail.


 Glissez et déposez les éléments communs, y compris le texte, les images et les conteneurs de mise en page. .
</figcaption></figure>
<p> Appuyez sur pour afficher l'onglet Styles, et vous trouverez des commandes pour nommer les attributs de classe et d'ID, en appliquant des styles à des points d'arrêt spécifiques et dans des états particuliers. Tout est très utile, mais c'est la section mise en page – quelque peu gênément cachée en bas du volet – qui est la plus intéressante </p>
<figure class=

 La section de mise en page Styles contient des contrôles de grille.
La section de mise en page des styles contient des contrôles de grille.

Dans cette section, vous pouvez concevoir une grille. Configurer des colonnes et des 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 êtes nouveau sur CSS Grid. C'est la section que je vais expliquer.


 L'éditeur de grille contient des outils pour construire une grille visuellement.
L'éditeur de grille contient des outils pour construire une grille visuellement.

En utilisant CSS Grid Builder j'ai ajouté une division de conteneur. En sélectionnant cela dans la zone de travail, j'ai accès à l'éditeur de grille. Activer cela, et tous les outils nécessaires pour construire visuellement une grille sont là:

  • Ajouter des colonnes et des lignes
  • Aligner et justifier le contenu et les éléments dans chaque module
  • Taille des colonnes et des rangées en utilisant chaque type d'unité minmax
  • Spécifier des espaces
  • Nom grid-template-areas
  • Spécifier des points d'arrêt

Lorsque je suis satisfait de ces paramètres, "OK" les modifications sont appliquées au motif dans la zone de travail. Là-bas, utilisez les curseurs pour prévisualiser les résultats à différents points d'arrêt, et si vous êtes une de ces personnes qui s'inquiètent du pourcentage de plus en plus faible de personnes utilisant des navigateurs incapables, CSS Grid Builder propose également des paramètres permettant de calculer les replis. Il suffit ensuite de copier et coller des styles CSS ailleurs dans votre projet ou d'exporter le kit entier et caboodle.


 afficher les résultats à différents points d'arrêt
Prévisualiser les résultats à différents points d'arrêt, enregistrer le projet pour l'éditer ou exporter les fichiers.

CSS Grid Builder est actuellement gratuit pendant que CoffeeCup le développe et si vous aimez ce qu'il fait, vous pouvez lui donner quelques dollars pour financer son développement. [19659009] Nettoyage

J'ai du mal à contenir mon enthousiasme pour CSS Grid. Oui, je sais que je devrais sortir plus, mais je pense vraiment que cela nous offre la meilleure chance d'apprendre des leçons d'autres médias pour rendre les sites Web que nous créons mieux pour communiquer ce que nous voulons transmettre à nos auditoires. Que nous fassions des sites Web pour les entreprises qui veulent vendre plus, des organismes de bienfaisance qui ont besoin de recueillir plus d'argent grâce à des dons à de bonnes causes ou des médias qui veulent raconter des histoires plus efficacement, CSS Grid et le contenu artistique réfléchi rendent tout cela possible. 19659007] Maintenant c'est Hardboiled .

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

 Direction artistique du Web «La direction artistique pour le Web» d'Andy Clarke, le premier «Shot» de Hardboiled Web Design, est une série de courts livres sur «Art Directioning for the Web». web, '' Concevoir avec un navigateur '' et 'Vendre des idées créatives' sera publié tout au long de l'année 2018.

 Éditorial brisant (ms, ra, il)




Source link