Una noche de noviembre, sobrevolé mi ciudad natal de Tucson, Arizona. Me llamó la atención el diseño en forma de cuadrícula de esta ciudad. Tucson es una de las ciudades construidas mediante planificación en los Estados Unidos. Parece una cuadrícula. Fue cuidadosamente diseñado por el diseñador (Figura 1). Acabo de regresar de Londres. Londres es todo lo contrario (Figura 2) tiene giros y vueltas y se parece más a lo que vino. fuera de la naturaleza.
Figura 1: Tucson, Arizona
Figura 2: Londres
He estado pensando en este artículo durante mucho tiempo. La vista aérea de estas dos ciudades me recuerda al diseño web. La tecnología actual nos permite implementar libremente diseños basados en cuadrículas o saltar completamente de la cuadrícula. Impacto en los diseñadores web No hay duda sobre el impulso, pero el verdadero desafío es cómo dejar de lado esos pensamientos cerrados y pensar fuera de la red.
sensación de ciudad
Si comparas la planificación urbana con el diseño web, las similitudes entre ambos son interesantes. Los diseños de cuadrícula son excelentes para crear sitios web predecibles y fáciles de navegar. Las cuadrículas son excelentes para ayudar a los diseñadores a planificar y facilitar el acceso de los usuarios (Figura 3).
Figura 3: Ryan Brill
En el lado positivo, Tucson es ciertamente una ciudad fácil de visitar, un poco de sentido de orientación o un mapa de calles es suficiente, los residentes dan direcciones a otros, basta decir que estoy en la esquina suroeste de la intersección de Campbell Avenue y Prince Road En cualquier lugar. El transporte público circula hacia el sur y el norte o hacia el este y el oeste, por lo que es muy fácil identificar la carretera.
Por otro lado, los diseñadores de Tucson originalmente planearon una expansión limitada y surgieron problemas cuando la ciudad creció más allá de sus límites planificados. Las limitaciones de la red de Tucson impiden el surgimiento de diferentes estilos de comunidades o vecindarios. Muchos residentes de Tucson sienten que la ciudad carece de un centro vibrante o de numerosos vecindarios distintivos. Como resultado, incluso si tales áreas aparecen, no son de fácil acceso. No te molestes en buscarlo.
Londres es diferente, es un misterio. Sé que los propios londinenses dependen de las guías de la ciudad para desplazarse. El sistema de transporte de la ciudad está lleno de desafíos y los taxistas deben aprobar exámenes especiales antes de poder trabajar. El crecimiento natural de la ciudad no la convierte en un lugar fácil para viajar.
Sin embargo, Londres está lleno de distritos apasionantes y barrios únicos, así como de centros culturales y barrios extravagantes. Aunque es más difícil viajar, por la variedad de gustos, la gente está más dispuesta a estar entre ellos.
Esta metáfora también es adecuada para aquellos diseños web que tienden a ser naturales. ¿Cómo pueden las personas navegar fácilmente por esos callejones sinuosos? Por otro lado, se puede lograr un diseño hermoso rompiendo las cajas en las que hemos estado viviendo. En la Figura 4 se puede ver cómo romper con las reglas del diseño de cuadrícula permite que el diseño siga siendo utilizable sin dejar de verse diferente.
Figura 4: AIGA Los Ángeles
El mito del código de red
Como persona que presta más atención al código que al diseño, me confunde descubrir cómo nuestro diseño se adhiere al código. Creo que es el diseño de la tabla a largo plazo lo que nos hace trazar una base sólida (Figura 5). El último diseño CSS, es fácil saber por qué.
Figura 5: k10k
Los diseños de mesa funcionan bien con diseños de cuadrícula. El código de la tabla en sí reproduce una cuadrícula. Simplemente completamos las celdas con imágenes, texto y elementos de la interfaz para completar nuestro diseño (Figura 6). Si queremos implementar un diseño complejo y no estructurado, necesitamos usar una gran cantidad de imágenes en el documento, lo que hace que todo el documento esté inflado.
Figura 6: Cambio de peso
El diseño tabular tiene algunas ventajas, pero al igual que la planificación urbana, las ventajas a veces pueden convertirse en desventajas. Una cuadrícula basada en tablas garantiza que todas las celdas sean regulares. ¿Quiere que todas las columnas tengan el mismo ancho? Demasiado simples, tal es la naturaleza de las mesas. ¿Mantener espacios consistentes entre las celdas? También es pan comido. Sin embargo, ¿qué pasa si no quieres esta estructura ordenada? Desafortunadamente, no puedes.
CSS cambia todo eso, por eso creo que aún no hemos aprendido a diseñar para la Web. Nosotros, especialmente aquellos que llegamos a CSS desde diseños de tablas de larga data, apenas estamos comenzando a comprender cuán útil puede ser el modelo visual de CSS para romper con las rutinas del diseño de cuadrículas. ¿Es perfecto el diseño CSS? No, además de los beneficios que aporta CSS, también perdemos algo. La expansión de columnas es un gran problema para el diseño CSS, al igual que el espacio entre celdas.
CSS no es más que bordes y cajas, que también se encuentran en las cuadrículas. Sin embargo, la diferencia esencial entre los dos es que CSS nos permite separar una caja de su entorno y desecharla a voluntad (Figura 7).
Figura 7
Podemos usar atributos de posición o flotantes para el posicionamiento, y podemos usar imágenes livianas como fondos. Por lo tanto, cuando usamos Box, podemos implementar tanto el diseño de cuadrícula como el diseño sin cuadrícula de manera más efectiva. Puede ver esto en Blood de Dave Shea. Vea este ejemplo. en Lust, uno de los muchos diseños que utilizó en su CSS Zen Garden (Figura 8).
Figura 8: CSS Zen Garden: Sed de sangre
La Figura 9 muestra el diseño no estructurado basado en BOX utilizado en Blood Lust y también muestra cómo usar CSS y BOX para implementar cuadrículas no estructuradas independientes.
Figura 9
Una vez que comprendamos las capacidades de BOX, podremos superar fácilmente las limitaciones de la red. En la Figura 10 se muestra un diseño muy desestructurado e incluso libre.
Figura 10: Universidad de Kutztown: Departamento de Diseño de Comunicación
Estos BOX se posicionan usando CSS:
Figura 11
El código no sólo es más limpio, sino que también es más intuitivo y sencillo para los diseñadores familiarizados con el diseño CSS. El diseño también es intuitivo, fácil de usar y poco convencional.
Perspectiva
La belleza de la tecnología de diseño moderna es que tenemos más opciones para elegir. Usando CSS podemos crear diseños manejables, livianos y visualmente ricos que pueden estar basados en cuadrículas si lo deseamos, y podemos romper o romper la cuadrícula fácilmente.
Esto abre más oportunidades para el diseño web contemporáneo y no deberíamos cometer los mismos errores sólo porque estamos más familiarizados con el diseño de cuadrícula.
Para aquellos de nosotros que llevamos mucho tiempo obsesionados con la disposición de las mesas, las dificultades son especialmente grandes. Para aquellos que han sido diseñadores web durante muchos años, esto significa romper con lo que siempre han usado. Puede que a algunos no les resulte difícil, pero a la mayoría les resultará intimidante. Necesitamos aprender cómo funcionan los modelos CSS y tener el coraje de decir adiós a las viejas reglas.
Es de estos recién llegados de quienes esperamos ver más avances en los estereotipos del diseño, para quienes nuestros métodos pasados son extraños y rígidos.
La web está madurando, la forma en que diseñamos está cambiando y tenemos más innovación y creatividad frente a nosotros. No nos quedaremos con ciudades planificadas, podemos lograr diseños únicos Los viejos diseñadores, combinados con los recién llegados de hoy, haremos que la Web cambie cada día.
Autor de este artículo:
Molly E. Holzschlag es una conocida defensora y evangelista de los estándares web. El más vendido de sus más de 30 libros es The Zen of CSS Design (Zen Web Design), del que fue coautora con Dave Shea. Molly es una experta invitada en los grupos de trabajo del W3C y ex directora del Web Standards Project Group (WaSP). Molly trabaja con diseñadores, desarrolladores, profesionales y tomadores de decisiones para impulsar una Web que sea útil, hermosa y significativa.
Posdata
Este es un artículo publicado en A LIST APART en 2005. En 2005, el diseño CSS no era tan común como lo es ahora, y el diseño de tablas ha abrumado a muchas personas. Como experta senior en el campo web, la autora Molly E. Holzschlag. También es una usuaria a largo plazo del diseño de tablas. Cuando CSS se acerca a la madurez y los diseños basados en CSS son refrescantes, tiene sentimientos encontrados sobre el diseño de cuadrículas basado en tablas, como se puede ver en el artículo.
Sin embargo, en 2009, cuando CSS se ha vuelto omnipresente y el diseño CSS se ha vuelto familiar, es necesario que volvamos a pensar en el diseño de cuadrículas. ¿Está la cuadrícula muerta o las tablas son malas? La respuesta no es tan simple. No importa cómo cambie, la Web de hoy tiene un propósito eterno. Además de las aplicaciones web, la misión en constante cambio es expresar y transmitir información. Si eres un literato, te enamorarás. con Londres. Sin embargo, si fueras cartero, elegirías Tucson. Por lo tanto, ya sea un diseño de cuadrícula o un diseño natural, no hay ninguna ventaja o desventaja absoluta. El diseño de cuadrícula es más claro y ordenado, mientras que el diseño natural es más elegante y refinado.
Y las tablas no son tan malas como mucha gente dice. Cabe señalar que las tablas de hoy ya no son las tablas del pasado. BOX se puede combinar con CSS y también se pueden usar tablas completamente modificadas con CSS. conjunto de combinaciones e interacciones orgánicas, cuando no necesita la ubicación precisa de las celdas en ella, la tabla es un contenedor más perfecto que BOX, porque es el mejor compatible con todos los navegadores, no colapsará y. no será diferente en longitud, su comportamiento es más fácil de cumplir con las expectativas y, lo más importante, es la forma más directa para que las personas organicen las cosas.
Autor original Molly E. Holzschlag
Fuente de traducción al chino: sitio web oficial de COMSHARP CMS, traductor a 35 kilómetros.