Share
¡Hoy tengo un regalo especial para todos ustedes amantes de la rejilla! Khoi Vinh (una de las principales autoridades en sistemas tipográficos de cuadrícula en diseño web) y Peachpit acordaron dejarnos publicar un extracto del nuevo libro de Khoi sobre diseño de cuadrículas: Trastorno de pedidos: principios de rejilla para el diseño web. En este extracto, describirá los principios que todo diseñador debe tener en cuenta al diseñar un sitio web en una cuadrícula..
La cuadrícula ha sido durante mucho tiempo una herramienta invaluable para crear orden a partir del caos para los diseñadores de todo tipo, desde planificadores de ciudades hasta arquitectos, tipógrafos y artistas gráficos. En los últimos años, los diseñadores web también han llegado a descubrir el extraordinario poder que el diseño basado en grid puede proporcionar para crear experiencias de usuario intuitivas, inmersivas y hermosas..
Ordering Disorder ofrece una toma definitiva de las redes y la Web. Proporciona las grandes ideas y las técnicas de diseño basado en cuadrícula. Los lectores seguramente obtendrán una comprensión profunda del poder de las redes, así como las herramientas de diseño necesarias para implementarlas en la World Wide Web..
El siguiente es un extracto, pero como leerás, ¿el libro completo está escrito de modo que pueda ser recogido en cualquier capítulo y aún tenga sentido? por lo que este debe ser un lugar perfecto para saltar.
También tenemos un código promocional especial de 35% de descuento para nuestros lectores que deseen recoger todo el libro (al final de la publicación)!
El balance de este libro se centra en cómo construir una cuadrícula, que incluye una descripción general de los pasos para una solución de trabajo. Antes de comenzar, sin embargo, es útil delinear los principios que todo diseñador debe tener en cuenta.
Una cuadrícula debería centrarse primero en la resolución de problemas y luego la estética.. Una cuadrícula puede proporcionar una mejora estética tan seductora a cualquier diseño que es tentador centrarse en su belleza más que en su utilidad. Muchos diseñadores se preocupan por la belleza de la cuadrícula y contorsionan el contenido o la funcionalidad para integrarlo, independientemente de lo incómodo o inadecuado que sea. Pero las grillas más exitosas se construyen en servicio de problemas bien definidos. Ya sea que se trate de problemas de comunicación, problemas organizativos o problemas transaccionales, una cuadrícula deriva su belleza de lo bien que resuelve esos desafíos..
Una grilla es un componente de la experiencia del usuario.. Una cuadrícula no es una herramienta para imponer un control completo sobre la experiencia de un usuario de un sitio web. Más bien, una cuadrícula es un marco dentro del cual el usuario puede controlar sus propias experiencias. Los diseñadores no deben obligar a que todos los elementos e interacciones ocurran dentro de la cuadrícula, ni deben permitir que la experiencia del usuario no esté formada y sea impredecible. Es tarea del diseñador tomar ciertas decisiones para el usuario, no todas las decisiones, pero lo suficiente como para que el usuario pueda cumplir sus objetivos sin impedimentos. La grilla es una herramienta para ese trabajo..
Cuanto más simple sea la cuadrícula, más efectiva es. Los principios descritos en este libro se pueden usar para crear cuadrículas compuestas por dieciséis, veinte o incluso más unidades, en cualquier combinación de columnas de ancho uniforme o irregular. Sin embargo, el hecho del asunto es que el diseñador siempre debe esforzarse por crear la cuadrícula más simple posible. Como veremos, la precisión matemática es un elemento clave de un buen diseño de cuadrícula, pero la utilidad matemática es igual de importante. Las fórmulas que utiliza para calcular unidades y columnas combinadas deben ser bastante sencillas, incluso lo suficientemente simples como para hacerlo en su cabeza o explicárselo rápidamente a un colega. Cuanto más simple sea un sistema de cuadrícula es usar y explicar a otros, más usuarios se beneficiarán de ese sistema de cuadrícula.
Aquí, entonces, están los pasos principales en el diseño de una solución de red:
Tenga en cuenta que aunque nuestro pensamiento debe ser riguroso, nuestro proceso no tiene por qué serlo. Aunque el orden en el que he presentado estos pasos me ha sido útil, no necesariamente funciona para todos
diseñador. No todos los pasos deben seguirse exactamente en el mismo orden, por un tiempo específico, de una manera específica, o incluso en absoluto. Por ejemplo, el paso 3, diseño preparatorio, es un conjunto de tres actividades diferentes
que a menudo se realizan al mismo tiempo, con el diseñador cambiando entre lápiz y papel, software y matemáticas de fondo de sobres, según sea necesario. Lo que importa no es la repetición de estos pasos, sino el siguiente
Los principios de un buen diseño de red en todo.
De todos modos, vale la pena pasar algún tiempo por adelantado para analizar dos pasos críticos en este proceso. El primero es la investigación, y el segundo es el boceto..
En primer lugar, consideramos que el diseño es realmente bueno, no por su belleza o su capacidad de innovación o su eficacia, sino por la forma en que responde a su problema original. Las soluciones exitosas exigen que el diseñador capte el problema que se le presenta y las limitaciones dentro de las cuales está trabajando. El diseñador tiene que preguntar y entender la respuesta a preguntas como: quién es la audiencia, cuál es el contexto, cuándo se encontrará la solución, cómo se usará la solución e incluso por qué es la solución necesaria?
Estas preguntas pueden ser difíciles de responder y las respuestas en sí mismas son a menudo poco claras o difíciles de analizar. Un diseñador debe ser persistente en preguntar, en presionar para obtener respuestas buenas y precisas, y en examinar y comprender a fondo esas respuestas.
Debido a que una cuadrícula nos puede dar una ventaja en la creación de soluciones, puede ser tentador renunciar a esta etapa del proceso. Una vez que un diseñador domina los rudimentos de las cuadrículas, resulta mucho más fácil iniciar el proceso mecánico de construcción de unidades y columnas que hacer el arduo trabajo de formular y responder estas preguntas..
Pero casi todos los problemas de diseño requieren un período de estudio minucioso antes de que comience la búsqueda de una solución. Sin una idea clara del desafío en cuestión, cualquier trabajo de diseño, incluido el desarrollo de la red, se realiza en vano. Es un uso mucho más productivo del tiempo para investigar al principio de un proyecto que para saltar directamente al diseño..
Los diseños basados en grillas no son diferentes. Cuanto más se investigue el problema, mejor será la cuadrícula. Las grillas bien investigadas maximizan las opciones creativas disponibles para el diseñador. También anticipan y evitan las trampas de cuadrículas construidas prematuramente: unidades y columnas inadecuadamente estructuradas, cuadrículas que son buenas para algunos aspectos del problema pero inadecuadas para otros, cuadrículas que no tienen en cuenta las restricciones que pueden no ser obvias al principio, cuadrículas que resultan tan impracticables que necesitan ser reconstruidos en momentos inadecuados, y cuadrículas que resultan inutilizables para los colaboradores.
¿Qué tipo de restricciones debe buscar el diseñador? Se dividen en tres categorías principales:
Por supuesto, los diseñadores lamentarán el inconveniente de las restricciones, o tal vez la dificultad de algunas de las restricciones particulares con las que deben lidiar. Si solo se eliminaran esas restricciones, si el problema fuera un poco diferente, entonces la solución sería mucho más fácil de alcanzar o más elegante en la naturaleza.
Sin embargo, estas restricciones tienen un lado positivo: de alguna manera pueden hacer que un problema sea más difícil, pero también pueden hacer que sea más fácil llegar al diseño. Las soluciones integrales como las redes a menudo pueden beneficiarse de la construcción de una o dos restricciones no negociables, requisitos inamovibles que no pueden modificarse fácilmente durante el proceso de diseño. Para empezar, pueden influir directamente en las proporciones de una cuadrícula, los tamaños de las unidades, columnas y regiones que el diseñador construye. Este tipo de restricciones puede parecer que limitan las opciones disponibles para un diseñador, que a menudo también tienen el efecto de aumentar la inventiva de un diseñador. Cuanto más amplio sea un problema de diseño y cuanto menos restrictivas sean las restricciones, menos probable será que un diseñador haga esos saltos de lógica que son el sello distintivo de un gran diseño. Las restricciones no negociables pueden ayudar a estimular a un diseñador a hacer esto. Ya sea que se está bloqueando en una dimensión particular, un imperativo tecnológico, una unidad de publicidad o algún otro factor que un diseñador debe solucionar en lugar de modificar convenientemente para sus propias necesidades, tener un requisito de bienes inmuebles puede ser enormemente útil.
Después de haber dedicado tantos párrafos a la importancia de investigar a fondo un problema, puedo hacer este siguiente punto de manera más sucinta: dibujar en papel es una herramienta esencial para la solución completa de problemas de diseño, y es particularmente útil para desarrollar cuadrículas. El simple hecho de dibujar de forma rápida y holgada combinaciones especulativas de columnas y posibles diseños puede ahorrar enormes cantidades de tiempo y, a menudo, conduce a soluciones de cuadrícula mucho más fértiles y creativas que simplemente saltar al diseño o incluso codificar una cuadrícula..
No puedo enfatizar lo suficiente el poder y la utilidad de usar el lápiz y el papel pasados de moda para resolver problemas, hacer una lluvia de ideas sobre las posibles soluciones y explorar ideas prometedoras o no tan prometedoras que pueden ser demasiado costosas o llevar mucho tiempo para probarlas. de otra manera. De hecho, el aspecto más importante de los bocetos no es tanto hacer marcas en el papel, sino más bien poder ejecutar muchas ideas rápidamente, a un bajo costo. Recuerde, no tiene ninguna expectativa de que los bocetos equivalgan a algo más que los bocetos. Los bocetos no necesitan ser bonitos.
Como se mencionó anteriormente, también es importante tener en cuenta que los bocetos no tienen que ser una fase discreta para construir una cuadrícula que comienza y termina en puntos específicos. El boceto puede ocurrir en cualquier fase a lo largo del proyecto, en múltiples niveles de finalización, aunque, por supuesto, es más útil dibujar antes, para que se puedan ejecutar más ideas y posibilidades muy rápidamente. Tener un lápiz y una libreta de papel a mano en todo momento es seguro que será invaluable..
El vocabulario que describe los diversos componentes de una cuadrícula puede parecer simple, pero también puede ser sorprendentemente inespecífico. Por ejemplo: la noción de una columna parece bastante clara, pero en una página basada en una cuadrícula de ocho columnas, un diseñador puede crear un diseño con solo dos columnas de texto, lo que hace que el significado de ese término sea impreciso. Incluso los libros sobre el arte del diseño basado en cuadrícula no siempre coinciden en la terminología, con algunos términos de uso (por ejemplo, regiones, campos) que faltan en otros. Para los propósitos de este libro, entonces, es importante establecer una terminología común a medida que avanzamos en discusiones más prácticas de grillas.
El bloque de construcción de cualquier cuadrícula, una unidad es la división vertical más pequeña de la página (es decir, las unidades se miden en ancho), sobre las cuales se construyen las columnas. Las unidades suelen ser demasiado estrechas para albergar la mayoría del contenido textual.
Las columnas son grupos de unidades, combinadas para crear áreas viables para la presentación de contenido. La mayoría de las columnas de texto, por ejemplo, requieren dos o más unidades para poder trabajar. Un sistema de cuadrícula de, digamos, dieciséis unidades se puede combinar en dos columnas de ocho unidades cada una, o cuatro columnas de cuatro unidades cada una, y así sucesivamente.
Las regiones son agrupaciones de columnas similares que forman parte de la página. Por ejemplo, en una cuadrícula de cuatro columnas, las tres primeras columnas de la izquierda podrían formar una sola región para mostrar un tipo de contenido, y la columna restante podría formar otra región.
Los campos son divisiones horizontales de la página (es decir, los campos se miden en altura) que ayudan a un diseñador a controlar visualmente la ubicación de los elementos en el eje Y. Los campos se pueden calcular de muchas maneras, pero usar la proporción áurea es uno de los métodos más efectivos.
En la tipografía tradicional, la línea de base es la línea invisible sobre la que descansan las formas de las letras, por ejemplo, el borde inferior de una E mayúscula descansa sobre la línea de base, mientras que el descensor de una p minúscula caerá por debajo de la línea de base. La cuadrícula de la línea de base está formada por una repetición uniforme, de arriba a abajo, de líneas de base espaciadas de acuerdo con la línea de entrada o el espaciado entre líneas del texto..
Estos conceptos son notoriamente fáciles de confundir (una unidad puede pensarse como una división horizontal o vertical de una página, según el punto de vista de cada uno), por lo que este libro se refiere a la cuadrícula de columnas (divisiones de la página medidas en anchura). ) y la cuadrícula de base y las regiones (divisiones de la página medidas en altura).
Las alcantarillas son los espacios vacíos entre unidades y columnas. Cuando las unidades se combinan en columnas, incorporan los canales entre ellas, pero no el espacio a la izquierda de la unidad de la izquierda ni el espacio a la derecha de la unidad de la derecha.
Los márgenes son el espacio fuera de una unidad o columna. El relleno es el espacio dentro de una unidad o columna. Los márgenes se usan generalmente para crear canales, mientras que el relleno se usa generalmente para crear un pequeño recuadro visible dentro de un bloque de texto dentro de una columna.
Un elemento es cualquier componente único de un diseño. Los ejemplos incluyen un título, un bloque de texto, una foto o un botón.
Los módulos son grupos de elementos, combinados para formar bloques discretos de contenido o funcionalidad. Un formulario de registro, por ejemplo, es un módulo compuesto por varios elementos constituyentes, como una etiqueta, un campo de formulario, un botón, etc..
Este ha sido un solo capítulo del libro? Si quieren leer el resto del libro, pueden comprarlo en peachpit.com. La buena noticia es que tenemos un código promocional especial para nuestros lectores. Obtener 35% de descuento sobre el precio. ingresando el código "KHOI"durante el proceso de pago en peachpit.com. Ah, y el envío nacional de EE. UU. es gratuito!
Accentsconagua