Una introducción simple al diseño web intrínseco
Cada industria tiene su jerga, y casi su propio idioma, en algunos casos. Dios sabe que el diseño web tiene mucha jerga, incluso si la mitad de nuestras frases inventadas son títulos de trabajo elegantes y sin sentido. Pero a pesar de todas las tonterías que conlleva tener que inventar nuestras propias palabras y siglas para las cosas, la jerga juega un papel importante: nos permite comunicarnos de manera más eficiente con otros diseñadores y desarrolladores.
A veces, la persona que (más o menos) crea un concepto puede nombrarlo, como sucedía con el diseño web adaptable. [Here I shake my fist at Ethan Marcotte out of long-standing habit. RWD is a good thing, but it gave me headaches for a while.] Y a veces aparece alguien e inventa una palabra o frase para algo que ya hemos estado haciendo durante un tiempo, que es lo que (estoy razonablemente seguro) sucedió con la Web 2.0.
Diseño web intrínseco (puedes agradecer Jen Simmons para este poco de jerga) pertenece a la última categoría. Ya empezamos a hacerlo, pero ahora tenemos un nombre para ello. Pensamos que sería una buena idea escribir una introducción rápida al concepto, porque se convertirá en una parte importante de la conversación sobre diseño web en el futuro.
¿Qué es el diseño web intrínseco?
Comienza con los módulos Flexbox y CSS Grid. Desde que decidimos que usar tablas para el diseño no era práctico, hemos estado usando la flotador propiedad, junto con una buena dosis de posicionamiento absoluto y fijo, para poner las cosas donde queramos en una página. Esto nos ha funcionado bien, pero fue, esencialmente, un truco.
Casi toda la web se basa en código de front-end hacky
En realidad, fue una serie de trucos. Luego comenzamos a armar marcos CSS llenos de trucos. Luego, algunas personas muy equivocadas comenzaron a usar JavaScript para escribir su CSS lleno de hacks. Casi toda la web se basa en un código de front-end hacky, y se ha vuelto complicado.
No se trata de criticar el trabajo de los que vinieron antes. Usar métodos de diseño hacky era la única forma de hacer algo. No teníamos otras opciones. Ahora lo hacemos: Flexbox y CSS Grid son métodos de diseño integrados en el propio CSS. Se podría decir que son intrínsecos al medio.
¿Consíguelo? Ves lo que yo … sí. De todas formas. Los módulos CSS mencionados anteriormente son solo el comienzo. CSS está progresando hasta el punto de que tenemos las herramientas para diseñar correctamente nuestros diseños exactamente como queremos que se presenten, sin trucos y, ciertamente, sin la ayuda de JavaScript. Ser capaces de crear lo que queremos con una dependencia mínima de hacks, trucos y bibliotecas externas es parte de lo que trata el diseño web intrínseco.
O escuchar cómo lo expresa la propia creadora del término:
Solo estoy hablando de diseño, ese diseño en sí y el diseño gráfico en sí había cambiado lo suficiente como para querer una nueva palabra para poder decir: «Oh, sí, esa cosa nueva», e incluye CSS Grid, pero no se trata solo de CSS Grid. También se trata de usar Flexbox y redescubrir para qué está destinado realmente Flexbox.
Además, se trata de usar algunos flotadores a veces, usar cosas como formas CSS o ajuste de objetos, usar un contenido de flujo, usar varias columnas. Algunas de estas cosas son viejas y han existido durante mucho tiempo, pero se trata de pensar en todo el sistema de diseño y en cómo encajan todas estas piezas de una manera completamente nueva.
Para decirlo de otra manera, creo que el diseño web intrínseco se trata del cambio de estar limitado por las capacidades de CSS a estar empoderado por ellas. Abre un montón de nuevas e interesantes posibilidades.
¿A quién se le ocurrió esto?
Jen Simmons. Es diseñadora web y desarrolladora front-end que ha trabajado con / para: CERN: el W3C, Google y Drupal, y otras pequeñas empresas. Actualmente pasa su tiempo como defensora de diseñadores en Mozilla, dando charlas en conferencias, así como presentando y produciendo La web por delante, un fantástico podcast sobre el futuro de Internet.
Ella también alberga el Tierra de diseño canal en YouTube. Si desea aprender sobre Flexbox, CSS Grid y los otros componentes básicos del diseño web intrínseco, estos videos son un lugar maravilloso e informativo para comenzar. También deberías echarle un vistazo a ella entrevista que cité anteriormente, donde ella y Jeffrey Zeldman discuten extensamente sobre el DIM y una gran cantidad de otros temas.
Entrar en una nueva era
Las cosas se pondrán locas a medida que los diseñadores se aferren a estas ideas y comiencen a descubrir qué pueden construir con Flexbox y CSS Grid junto con todos los métodos de diseño que ya tenemos. No tengo ninguna duda de que veremos una explosión de ideas de diseño nuevas, o al menos refinadas. Entonces los locos de JavaScript se van a involucrar, y eso se va a poner realmente interesante.
Los no codificadores, especialmente, deben prestar atención a lo que está sucediendo con el diseño web intrínseco, precisamente porque cambiará y ya está cambiando lo que es posible en la web. Ya sea que sea estrictamente un diseñador de interfaz de usuario en el editor de imágenes o un director de arte, debería estar investigando qué pueden hacer estas tecnologías. Saber lo que pueden hacer sus colegas de front-end ahora facilitará su trabajo.
Codificadores, están a punto de empezar a pedir algunas locuras. También deberías investigarlo, si aún no lo has hecho.
