Dirección de arte para la web con áreas de plantilla de cuadrícula CSS

( Este artículo está amablemente patrocinado por CoffeeCup Software ). Muy bien, voy a ir directo al grano. CSS Grid es importante, realmente importante, demasiado importante para ser una de esas propiedades "Lo usaré cuando todos los navegadores lo admitan". Esto se debe a que, con CSS Grid, ahora podemos ser tan creativos con el diseño en la web como con la impresión, sin comprometer la accesibilidad, la capacidad de respuesta o la facilidad de uso.

Si te tomas en serio el diseño o el desarrollo web, también debes tomarte en serio el aprendizaje y el uso de CSS Grid. En este artículo, voy a explicar cómo usar un aspecto, las áreas de plantilla de cuadrícula , una forma de organizar elementos que incluso un tonto grande y tonto como yo puede entender, y que no recibe suficiente atención.

Ahora, quieres ver algo de acción y algo de código, lo sé, pero espera un maldito minuto. Antes de que aprenda "cómo", quiero enseñarle "por qué" es importante hacer el tipo de diseños que hemos visto en otros medios durante décadas, pero que en su mayoría han estado ausentes de la web.

Sintiendome frustrado

Supongo que has visto esos "¿cuál de estos dos diseños estás diseñando hoy?" tweets, lamentando el estado actual del diseño en la web. Incluso he hablado de cómo el diseño web ha perdido su "alma". Apuesto a que también has visto a personas usar CSS Grid para recrear carteles o páginas de revistas. Estas demostraciones técnicas son geniales y muestran lo fácil que puede ser implementar diseños complejos con CSS Grid en comparación con otros métodos, pero no llegan al fondo de por qué es importante hacer esto.

Entonces, ¿cuál es la razón? ¿Por qué el diseño es una parte tan importante del diseño? Bueno, todo se reduce a una cosa, y eso es la comunicación.

Durante lo que parece una eternidad, los diseñadores web crearon plantillas y luego las completaron, sin tener en cuenta la relación entre el contenido y el diseño. Supongo que eso es inevitable, dadas las consideraciones sobre los sistemas de administración de contenido, nuestra necesidad de hacer que los diseños respondan y las limitaciones de las propiedades CSS que hemos usado hasta ahora. Claro, hemos hecho diseños que son flexibles, utilizables, pero nos faltaba una pieza clave del rompecabezas, el papel que juega el diseño en la entrega de un mensaje.

Si ha dado la vuelta a la manzana varias veces, sabrá el papel que juega el color a la hora de establecer el tono adecuado para un diseño. No necesito decirte que el tipo también juega su papel. Elija el tipo de letra incorrecto y corre el riesgo de comunicarse de manera ineficaz y hacer que las personas se sientan de manera diferente a como pretendía.

El diseño, estrechamente relacionado con aspectos de la tipografía como la 'medida', juega un papel igualmente importante. Simetría y asimetría, armonía y tensión. Estos principios atraen a las personas a su contenido, las guían y las ayudan a comprenderlo más fácilmente. Es por eso que diseñar el diseño correcto es tan importante como elegir el tipo de letra más apropiado. Los diseñadores de estampados saben esto desde hace años.

Contar historias a través de la dirección de arte

La dirección de arte importa tanto en la web como en otros medios, incluida la impresión, y lo que voy a cubrir se aplica tanto a la promoción de productos digitales como a la narración de historias.

¿Qué piensas cuando escuchas el término 'dirección de arte'? ¿Piensas en imágenes receptivas, presentando cultivos, tamaños u orientaciones alternativas a varios tamaños de pantalla utilizando el elemento <picture> o 'tamaños' en HTML? Se han convertido en útiles herramientas de dirección de arte y diseño receptivo, pero el diseño web es más que herramientas.

¿Piensas en esos diseñadores como Jason Santa Maria y Trent Walton que a veces dirigen su escritura al darle a una entrada su propia imagen, diseño y tipografía distintivos? Esto nos acerca a entender la dirección de arte, pero las imágenes, el diseño y la tipografía son solo el resultado de la dirección de arte, no su significado.

Entonces, si la dirección de arte no es exactamente eso, ¿qué es exactamente? En una oración, es el arte de destilar un significado o propósito esencial y preciso de una pieza de contenido, ya sea ese artículo de revista o una lista de razones por las que usar la aplicación más genial de la empresa emergente más popular, y transmitir ese significado o propósito. mejor mediante el uso de diseño. No escuchamos mucho sobre la dirección de arte en la web, pero está bien establecida en otro medio, quizás el más memorable sea en las revistas y, en cierta medida, en los periódicos.

No tengo la edad suficiente para recordar de primera mano el trabajo de Alexey Brodovitch en la revista Harpers Bazaar desde 1934 hasta 1958.

Sí recuerdo la dirección artística de Neville Brody para la revista Face y todavía me inspira todos los días.

La dirección de arte se discute tan raramente en relación con la web que se te podría perdonar por pensar que no es relevante. ¿Quizás vea la dirección de arte como una actividad más adecuada para el mundo de la impresión que para la web? Algunas personas pueden pensar que la dirección de arte es elitista de alguna manera.

No creo que nada de eso sea cierto. Las historias son historias, sin importar dónde se cuenten oa través de qué medio. Pueden invitar a la reflexión, como los publicados en ProPublica, o pueden ser la historia de su empresa y por qué la gente debería hacer negocios con usted. Está la historia de cómo su organización benéfica apoya una buena causa y por qué la gente debería donar a ella. Luego está la historia de la nueva aplicación de su empresa emergente y por qué alguien debería descargarla. Con todas estas historias, hay un mensaje más profundo que va más allá de simplemente contar los hechos sobre lo que hace o vende.

La dirección de arte se trata de comprender esos mensajes y decidir la mejor manera de comunicarlos a través de la organización y presentación de palabras y elementos visuales. ¿La dirección de arte es relevante para la web? Por supuesto. Los directores de arte utilizan el diseño para ayudar a las personas a comprender mejor la importancia de un contenido, y eso es tan importante en la web como en la versión impresa. De hecho, los principios básicos de la dirección de arte no han cambiado entre lo impreso y lo digital.

Iría más allá y diría que la dirección de arte es esencial para crear experiencias cohesivas a través de múltiples canales, para que el significado de una historia no se pierda en las brechas entre los dispositivos y los tamaños de pantalla.

David Hillman, anteriormente de The Guardian y New Statesman y diseñador de muchas otras publicaciones, dijo:

"En su mejor forma, (dirección de arte) implica que el director de arte tenga una comprensión completa y profunda de lo que dice la revista y, a través del diseño, influya en cómo se dice".

Mi amigo Mark Porter, casualmente el ex director creativo de The Guardian, también dijo:

“El diseño es hacerse cargo de la distribución de los elementos en el espacio”.

CSS Grid hace que estar a cargo de la distribución de elementos sea más posible que nunca.

Dirección de arte de una historia dura

Supongo que ahora es el momento de ponerse manos a la obra, así que les diré cómo poner algo de esto a trabajar en una serie de ejemplos de Hardboiled . Voy a enfocarme en el diseño y cómo ayuda a la narración de historias y luego le explicaré cómo desarrollar uno de estos diseños usando CSS Grid.

Primero, la historia de fondo. En la portada de mi edición 2010 de Hardboiled Web Design (1), una mujer misteriosa con un vestido rojo (siempre hay una mujer con un vestido rojo) apunta con un arma a nuestro pene privado. (Caramba, conozco ese sentimiento). Para la Edición del Quinto Aniversario en 2015 (2), la historia avanza y una sombra se mueve siniestramente a través de la puerta de la oficina de nuestro detective. La puerta se abre, dos villanos irrumpen (3) y se produce una pelea a puñetazos (4). Nuestra mujer misteriosa sabe cómo lanzar un puñetazo y antes de que puedas decir "bésame, letal", un villano está atado a una silla y listo para derramar los frijoles (5).

Capítulo tres

Comenzaré a contar esa historia en el momento explosivo en que esos dos villanos abren la puerta. Ahora, si ha leído el libro de Scott McCloud 'Understanding Comics', sabrá que el tamaño del panel afecta el tiempo que las personas pasan mirando un área, por lo que quiero que la imagen de nuestros malos sea lo más grande posible para maximizar su impacto. (1). Lo que no saben los capos es que nuestra mujer los está esperando. Utilizo el diseño para agregar tensión al conectar sus líneas de visión, (2) al mismo tiempo que atraigo los ojos del lector hacia donde comienza el contenido.

Capítulo cuatro

Cuando el primer villano irrumpe en escena, utilizo el borde izquierdo de la página, sin márgenes, para representar la puerta abierta (1). Como la mayor parte de la acción tiene lugar a la derecha, creo una gran zona espacial utilizando la mayor parte del alto y el ancho de la página (2).

Ahora, cuando los puños vuelan en todas direcciones, nuestro diseño debe hacer lo mismo, por lo que mi contenido proviene de la parte superior, donde los espacios en blanco atraen la atención hacia el párrafo en negrita (3), y de la izquierda con el enorme título (4) . Quizás se pregunte por qué no mencioné esa imagen más pequeña en la parte superior derecha, pero llegaré a eso en un minuto.

Capítulo cinco

La pelea ha terminado y nuestro detective vuelve a tener el control, por lo que en esta página final utilizo un diseño más estructurado para reflejar el orden que se devuelve. Columnas sólidas de texto justificado (1) con mucho espacio en blanco alrededor aumentan la sensación de calma. Al mismo tiempo, la leyenda alineada a la derecha (2) se siente tensa e incómoda, como el interrogatorio a punta de pistola que se está llevando a cabo.

ensuciando mis casquetes

Es hora de una confesión. No voy a enseñarte todo lo que necesitas saber sobre el desarrollo de diseños usando CSS Grid, ya que hay muchas personas más inteligentes que lo han hecho antes:

• Cuadrícula por ejemplo por Rachel Andrew
• Aprende CSS Grid con Wes Bos
• Una guía completa de Grid de Chris House sobre trucos CSS

En cambio, le mostraré la inspiración para una cuadrícula, cómo la traduje a un diseño (de pantalla grande) usando columnas y filas en CSS Grid, y luego coloqué elementos en las zonas espaciales creadas usando la propiedad grid-template areas . Finalmente, deconstruiré y modificaré el diseño para pantallas más pequeñas.

El ritmo perfecto

Mi inspiración para el diseño que utilizo provino de este diseño de 1983 de Neville Brody para The Face Magazine . Me atrajo cómo Brody creó hábilmente tanto el eje horizontal como el vertical y el gran espacio que ocupa la imagen principal.

Hice lo mismo aplicando las siguientes propiedades de CSS Grid al elemento <body> sin márgenes de mi página, donde las columnas de una unidad de fracción de ancho se repiten cinco veces con un espacio de 2vw entre ellas:

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

En CSS Grid, definimos un módulo de cuadrícula dándole un nombre, luego colocamos un elemento en un solo módulo o en varios módulos adyacentes, conocidos como zonas espaciales, con la propiedad grid-template-areas . Suena complicado ¿eh? No en realidad no. Es una de las formas más fáciles y obvias de usar CSS Grid, así que manos a la obra.

Lo primero es lo primero. Tengo cinco elementos para posicionar, y son mi título "Kiss Me, Deadly", la imagen de 'banner' más grande, el contenido principal, el párrafo aparte y dos imágenes, fig-1 y fig-2. Mi HTML se ve así:

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

Escribí ese marcado en el orden que tiene más sentido, tal como lo haría al construir una narración. Se lee como un sueño en pantallas pequeñas y hasta sin estilos. Le doy a cada elemento un valor de área de cuadrícula que en un momento usaré para colocarlo en mi cuadrícula:

 [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; }

No es necesario que los valores del área de la cuadrícula reflejen los tipos de elementos. De hecho, puede usar cualquier valor, incluso letras individuales como a, b, c o d.

Volviendo a la cuadrícula, agrego tres filas a las columnas que creé anteriormente. La altura de cada fila se define automáticamente por la altura del contenido dentro de ella:

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

Aquí es donde ocurre la magia. Literalmente dibujo la grilla en CSS usando la propiedad grid-template-areas, donde cada punto (.) representa un módulo vacío:

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

Ahora es el momento de colocar los elementos en esa cuadrícula utilizando los valores del área de la cuadrícula que creé anteriormente. Coloco el valor de cada elemento en un módulo en la cuadrícula y si repito ese valor en varios módulos adyacentes, ya sea en columnas o filas, ese elemento se expandirá a través de ellos para crear una zona espacial. Dejar un punto (.) creará un espacio vacío:

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

Un pequeño detalle más antes de terminar el diseño CSS. Quiero que el contenido del elemento aparte se sitúe en la parte inferior, cerca del título y dejando un amplio espacio en blanco encima para atraer la atención de alguien, así que utilizo una propiedad de autoalineación que puede resultar familiar al aprender Flexbox, pero con un nuevo valor de 'fin'.

 aside { align-self: end; } 

Todo lo que queda es agregar algunos otros estilos para dar vida al diseño, incluido un llamativo esquema de color inverso y un acento rojo brillante que une la palabra "Deadly" en el título con el color del vestido de nuestra mujer:

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

subiendo en humo

Ahora, sé que te has estado preguntando acerca de esa imagen de pelea más pequeña, y necesito admitir algo. Natalie Smith hizo solo una ilustración terminada de puños voladores para mis portadas de Hardboiled Shot , pero sus bocetos eran demasiado buenos para desperdiciarlos. Usé CSS Grid para colocar una versión invertida de un boceto a lápiz sobre el arma y lo giré con una transformación CSS para formar una nube de humo.

Rompiéndolo

En este artículo, mostré cómo crear un diseño para pantallas grandes, pero en realidad, empiezo con uno pequeño y luego trabajo, usando puntos de interrupción para agregar o cambiar estilos. Con CSS Grid, adaptar un diseño a varios tamaños de pantalla es tan fácil como colocar elementos en diferentes áreas de plantilla de cuadrícula. Hay dos formas en que puedo hacer esto, primero cambiando la cuadrícula en sí:

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

El segundo, colocando elementos en diferentes áreas de plantilla de cuadrícula en la misma cuadrícula:

 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"; } } 

Uso del generador de cuadrículas CSS

Las áreas de plantilla de cuadrícula hacen que el desarrollo de diseños dirigidos por el arte sea tan fácil que incluso un pie plano como yo puede hacerlo, pero si usted es del tipo al que le gustan las herramientas para hacer el trabajo sucio, CSS Grid Builder de CoffeeCup Software podría ser justo lo que necesita. usted. Es posible que hayas usado editores WYSIWYG antes, por lo que quizás estés recordando lo pésimo que era el código que escupieron. Déjame detenerte allí. CSS Grid Builder genera CSS limpio y marcado accesible. Tal vez no tan limpio como usted mismo escribe, pero bastante cerca, y el pequeño equipo que lo desarrolló planea hacerlo aún mejor. Mi HTML escrito a mano se ve así:

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

El elemento <picture> de CSS Grid Builder viene envuelto en una división adicional, con algunos otros elementos agregados por si acaso:

 <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>

Como dije, lo suficientemente cerca, y si no me cree, descargue un conjunto de archivos exportados de mi ejemplo Hardboiled . Quizás eso te convenza.

Las herramientas de desarrollo de los navegadores están mejorando en la inspección de cuadrículas, pero CSS Grid Builder lo ayuda a crearlas. Obviamente. En esencia, CSS Grid Builder es un navegador basado en Chromium envuelto en una interfaz de usuario y se ejecuta en macOS y Windows. Eso significa que si el navegador puede representarlo, las herramientas de la interfaz de usuario pueden escribirlo, con una o dos excepciones notables, incluidas las formas CSS.

De hecho, CSS Grid Builder crea más que cuadrículas y puede usarlo para crear estilos para fondos, incluidos degradados , que es muy útil, bordes y tipografía . Incluso maneja diseños Flexbox y de varias columnas , pero estás aquí porque quieres aprender sobre CSS Grid.

Mirando alrededor de la interfaz

La interfaz en CSS Grid Builder es más o menos como lo esperarías, con un área amplia para el diseño que estás haciendo a la izquierda y controles a la derecha. Esos controles incluyen elementos comunes; texto, imágenes, botones interactivos y controles de formulario, y contenedores de diseño. Si necesita uno de esos elementos, arrástrelo y suéltelo en su área de trabajo.

Presione para revelar la pestaña Estilos, y encontrará controles para nombrar atributos de clase e ID, aplicar estilos en puntos de interrupción específicos y en estados particulares. Todo muy útil, pero es la sección de diseño, algo incómodamente escondida en la parte inferior del panel, lo que es más interesante.

En esta sección puede diseñar una cuadrícula. Configurar columnas y filas para formar un diseño sin representación visual puede ser una de las partes más difíciles de aprender cómo funciona la 'cuadrícula'. La capacidad de la aplicación para definir visualmente la estructura de la cuadrícula es una característica útil, especialmente cuando eres nuevo en CSS Grid. Esta es la sección que voy a explicar.

Usando CSS Grid Builder, agregué una división de contenedores. Al seleccionar eso en el área de trabajo, obtengo acceso al Editor de cuadrícula. Activa eso, y todas las herramientas necesarias para construir visualmente una grilla están ahí:

• Agregar columnas y filas
• Alinee y justifique el contenido y los elementos dentro de cada módulo
• Dimensione columnas y filas usando cada tipo de unidad, incluyendo fr y minmax
• Especificar espacios
• Nombre grid-template-areas
• Especificar puntos de interrupción

Cuando esté satisfecho con esa configuración, haga clic en "Aceptar" los cambios y se aplicarán al diseño en el área de trabajo. Allí, use los controles deslizantes para obtener una vista previa de los resultados en varios puntos de interrupción, y si usted es una de esas personas que está preocupada por el porcentaje cada vez menor de personas que usan navegadores incapaces, CSS Grid Builder también ofrece configuraciones en las que puede calcular las alternativas. Luego simplemente copie y pegue los estilos CSS en otro lugar de su proyecto o exporte todo el kit y caboodle.

Actualmente, CSS Grid Builder es gratuito mientras CoffeeCup lo desarrolla y, si le gusta lo que están haciendo, puede invertir unos cuantos dólares para ayudar a financiar su desarrollo.

Limpiar

Me resulta difícil contener mi entusiasmo por CSS Grid. Sí, sé que debería salir más, pero realmente creo que nos ofrece la mejor oportunidad hasta ahora de aprender lecciones de otros medios para hacer que los sitios web que creamos comuniquen mejor lo que pretendemos transmitir a nuestras audiencias. Ya sea que hagamos sitios web para empresas que quieren vender más, organizaciones benéficas que necesitan recaudar más dinero a través de donaciones a buenas causas o medios de comunicación que quieren contar historias de manera más efectiva, CSS Grid más contenido reflexivo y dirigido por arte hace que todo sea posible.

Ahora que es duro .

Espero que haya disfrutado este artículo, ahora vea los archivos del proyecto en CodePen o descargue los archivos de ejemplo.

'Dirección de arte para la Web' de Andy Clarke, la primera 'toma' de Hardboiled Web Design. Shots es una serie de libros cortos sobre 'Dirección de arte para la web', 'Diseño con un navegador' y 'Venta de ideas creativas' que se publicará a lo largo de 2018.