Contenido
Este artículo apareció por primera vez en el número 229 de la revista .net, la revista más vendida del mundo para diseñadores y desarrolladores web.
Una de las cosas más importantes en las que puede concentrarse cuando se trata de diseñar una página en HTML / CSS es el ritmo vertical, el patrón visual en el que se forman los bloques de texto o las líneas de texto a medida que recorre la página.
Otras cosas pueden llegar a afectar este ritmo, como títulos, elementos de la lista, imágenes, etc. Tener un buen ritmo vertical es primordial porque ayuda a la legibilidad y la capacidad de escaneo de su (s) página (s).
Hay bastantes tutoriales excelentes (consulte aquí y aquí, por ejemplo) en la web donde puede encontrar cómo lograr técnicamente el ritmo vertical adecuado mediante el uso de ems para su altura de línea y aprender sobre lo que mantiene su tipo 'en fase' medio.
Jerarquía
Las cosas básicas a las que se debe prestar mucha atención son la altura de la línea entre los elementos y la jerarquía visual general en la página. Establecer proporciones adecuadas de altura de línea puede ser un ejercicio de diseño complicado, pero es importante dominarlo. La jerarquía también es importante, ya que las imágenes y los elementos de texto deben estar en armonía visualmente entre sí; las cosas más importantes son generalmente más grandes y son lo primero en la página.
Los diseñadores de impresión se han ocupado de la idea del ritmo vertical durante muchos años y es solo en el pasado reciente que los diseñadores web han tenido que meterse realmente en esto. Con la necesidad cada vez mayor de crear sitios web utilizando diseños de cuadrícula y prestar atención a las implementaciones receptivas para adaptarse a múltiples anchos de pantalla, es más importante ahora que nunca desde una perspectiva de diseño visual, probablemente más que solo técnica.
Cinco ejemplos para ver
1. Los elementos del estilo tipográfico Este libro de Robert Bringhurst es el estándar para el estudio de la tipografía. Léelo, consúmalo, viértalo en tu cerebro de cualquier forma que puedas.
2. Frank Chimero Además de ser absolutamente asombroso en general, el reciente rediseño del sitio web personal del diseñador Frank Chimero exhibe un magnífico ritmo vertical. Él usa un efecto de paralaje para ayudar a llevar el ritmo a casa mientras te desplazas hacia abajo por la página.
3. Dan Cederholm Para ver un buen ejemplo de un gran ritmo vertical tipográfico, eche un vistazo al blog de Dan Cederholm. La altura de la línea de la copia y los titulares está en perfecta proporción.
4. Laboratorio de enfoque Focus Lab, empresa de diseño web y branding, utiliza la jerarquía con destreza para ayudar a comunicar lo que es más importante para el visitante.
5. Typofonderie El sitio web de Typography Studio Typofonderie tiene un gran ritmo vertical con sus imágenes y texto. El espacio entre los elementos es proporcional en todo el sitio web y la jerarquía entre la imagen principal y las imágenes / secciones secundarias es perfecta.
Descubra 10 ejemplos asombrosos de diseño experimental en Creative Bloq.
