Introducción a la proporción

La proporción tiene una larga historia de definición de la belleza en el arte y el diseño. Los antiguos egipcios utilizaban un sistema de cuadrícula para sus obras de arte mural, lo que ayudaba a establecer la escala, la proporción y a ilustrar la jerarquía. Los antiguos griegos estaban fascinados con las proporciones del cuerpo humano. La proporción áurea se utilizó para crear proporciones «perfectas» para la Biblia de Gutenberg. No faltan ejemplos de proporciones cuidadosamente consideradas.

Hoy en día, la proporción vive como un poderoso principio de diseño que ayuda a formar consistencia, jerarquía, ritmo y belleza general en el diseño. En esta lección, vamos a discutir cómo utilizar la proporción en el diseño de la interfaz de usuario.

Tamaño vs. Escala vs. Proporción

Para poder aprovechar la proporción en el diseño de la interfaz de usuario, primero debemos entender las diferencias entre tamaño, escala y proporción. Los tres términos están relacionados, pero hay algunas distinciones claras a tener en cuenta.

El tamaño son las dimensiones reales de un elemento, a menudo medido en px, pt, em, rem, etc.

Por ejemplo, el tamaño de este logotipo es de 75px de alto y 275px de ancho.

La escala son las dimensiones relativas de un elemento, a menudo medidas por porcentajes o múltiplos.

Por ejemplo, un elemento puede ser escalado para ser más grande o más pequeño que su tamaño original.

La proporción es la relación armoniosa entre dos o más elementos de escala.

Por ejemplo, si un elemento aumenta de tamaño, el resto de elementos también deberían aumentar al mismo ritmo para seguir siendo proporcionados.

La proporción en el diseño de la interfaz de usuario

Comparar un logotipo proporcionado y otro desproporcionado es una cosa, pero probablemente te estés preguntando «¿Cómo funciona esto para el diseño de la interfaz de usuario?». Después de todo, con diferentes tamaños de pantalla y dispositivos, no es posible mantener una UI proporcionada, ¿verdad? La respuesta a esa pregunta es «Sí y No».

Las UIs suelen incluir una combinación de elementos estáticos y fluidos.

  • Los elementos estáticos mantienen el mismo tamaño, independientemente de lo grande o pequeña que sea la pantalla.
  • Los elementos fluidos se escalan a un porcentaje especificado de su contenedor.

Por definición, comparar elementos estáticos con elementos fluidos nunca daría como resultado un diseño proporcionado porque no se escalan al mismo ritmo. Sin embargo, los usuarios normalmente no cambian de dispositivo mientras experimentan su UI.

Con esto en mente, es posible utilizar la proporción en el diseño de UI. Sin embargo, es posible que no sea de la manera que usted espera.

Unidades de medida en el diseño de la interfaz de usuario

Es probable que haya escuchado el término «píxel» utilizado con mayor frecuencia como la unidad de medida para los productos digitales. Esto era generalmente aceptable hasta 2010, cuando Apple introdujo la pantalla Retina.

La pantalla Retina cambió la forma de pensar sobre el «tamaño» al incluir el doble de píxeles por pulgada cuadrada de la pantalla. Aunque el tamaño de un elemento entre una Retina y una no Retina parece ser el mismo, el número total de píxeles que componen ese elemento es muy diferente. Por ejemplo, un botón de 48px de altura en una pantalla normal sería ahora de 96px de altura en una pantalla Retina debido a la densidad de píxeles.

Desde entonces, muchas pantallas de alta densidad de píxeles (HPD) diferentes han estado disponibles en muchas marcas y dispositivos diferentes. Afortunadamente, las pantallas HPD se definen normalmente por el número de píxeles que caben por pulgada cuadrada que la pantalla estándar de densidad de píxeles 1X.

Por ejemplo, la mayoría de las pantallas pueden describirse como de densidad de píxeles 1X, 2X o 3X.

El término «píxel» sigue siendo comúnmente aceptado para describir el tamaño de un elemento. Sin embargo, para evitar confusiones, muchos diseñadores prefieren utilizar el término «punto» o «pt», que describe el tamaño, independientemente de la densidad de píxeles de la pantalla.

Para el resto de esta lección, utilizaremos los términos «pt» y «px» indistintamente como unidad de medida para describir las relaciones entre los elementos de nuestro diseño.

El sistema de cuadrícula de 8pt

Cuando se trabaja con software de diseño, como Illustrator, Photoshop, Sketch, XD, Figma, etc. es muy común que los diseñadores utilicen cuadrículas o columnas para ayudar en sus esfuerzos de diseño. Muchos de los principios de diseño discutidos en este curso se pueden lograr con la ayuda de cuadrículas o columnas, por lo que no es de extrañar que sean una herramienta popular en la caja de herramientas del diseñador.

Sin embargo, hay una estrategia particular, que funciona excepcionalmente bien para la proporción. Esta estrategia se conoce como el Sistema de Rejilla de 8pt.

El Sistema de Rejilla de 8pt fue introducido por primera vez por la especificación Material Design de Google. Afortunadamente, es bastante fácil de entender. Esencialmente, quieres usar una cuadrícula que está compuesta por cuadrados de 8 x 8 pt. A medida que diseñas sobre esta cuadrícula, querrás asegurarte de que todos los elementos se ajusten a la cuadrícula.

Esto resulta en elementos con dimensiones que son siempre divisibles por 8. Al diseñar de esta manera, es fácil mantener los elementos proporcionados, mientras se crea una sensación de ritmo vertical en todo el diseño.

¿Por qué 8 puntos?

El sistema de 8 puntos es el más adoptado por dos razones principales:

  • Las dimensiones de pantalla más comunes son divisibles por 8, lo que hace que sus diseños sean muy nítidos y claros en la mayoría de los dispositivos (sin píxeles divididos).
  • El tamaño de fuente base recomendado en la web es de 16px. Esto permite a los desarrolladores escalar elementos en una página web en unidades REM mientras se mantienen fieles al sistema de cuadrícula.

En general, hay más beneficios para el uso de 8 puntos en comparación con cualquier otro número para la cuadrícula. Sin embargo, puedes usar un número como 10pt o 12pt si te conviene más.

¿Por qué no 4 puntos?

La especificación de Google Material Design SÍ recomienda usar 4pt para «componentes más pequeños, como la iconografía y la tipografía». Sin embargo, la mayoría de los elementos de la interfaz de usuario todavía pueden ser manejados por el sistema de 8 puntos, por lo que es más popular para empezar.

La proporción áurea

El sistema de rejilla de 8 puntos tiene sus claras ventajas en el diseño de la interfaz de usuario, pero si haces una rápida búsqueda en Google de «Proporción en el diseño de la interfaz de usuario» te encontrarás con una primera página llena de resultados sobre la proporción áurea.

La proporción áurea es 1:1,618 y se cree que es la intersección de las matemáticas y la belleza estética. Muchos diseñadores ignoran por completo los sistemas de cuadrícula y prefieren crear proporciones con la proporción áurea.

Hay muchos ejemplos de cómo se ha utilizado la proporción áurea para todo, desde la Biblia de Gutenberg hasta el diseño de logotipos de hoy en día y los fenómenos de la naturaleza. Sin embargo, hay otros que creen que la belleza de la proporción áurea es simplemente un mito.

Independientemente, no se puede negar que muchos están enamorados de la proporción áurea, por lo que ciertamente vale la pena mencionarlo en esta lección.

Usando la proporción áurea en el diseño de la interfaz de usuario

En la lección 4 de este curso discutimos que un diseño no debe tener más de 3 a 4 niveles de jerarquía en una sección particular de la interfaz de usuario. Teniendo esto en cuenta, puedes aplicar la proporción áurea en tu diseño siguiendo estos sencillos pasos:

Define la altura de un rectángulo y multiplica ese número por 1,618 para encontrar el ancho. Esto crea un «Rectángulo Dorado»

En el ejemplo anterior, nuestro número inicial es 350pt, pero puede utilizar cualquier número que desee.

Divida su Rectángulo Dorado en cuadrados perfectos. Cada cuadrado perfecto dará lugar a un nuevo Rectángulo Dorado más pequeño.

Continúe dividiendo el Rectángulo Dorado hasta que tenga 3-4 cuadrados perfectos de diferentes tamaños.

Utilice el tamaño de cada cuadrado como «marcador de posición» para ayudar a romper su diseño y comunicar la jerarquía en su diseño.

En general, el resultado es un diseño estético y proporcionado. Echa un vistazo a este ejemplo de Prototypr.io.

Empezando con restricciones

Ahora que hemos cubierto algunos métodos para establecer la proporción en el diseño de la interfaz de usuario, vamos a discutir algunos grandes puntos de partida. Al comenzar con las restricciones primero, es más fácil construir su UI alrededor de esas restricciones.

Diseño Mobile First

La frase «Mobile First» fue acuñada por Luke Wroblewski en su libro del mismo título. El término ganó popularidad entre los diseñadores como una forma de combatir el impulso de meter más cosas en una interfaz de usuario simplemente porque había un amplio espacio para hacerlo.

Al centrarse en el diseño móvil en primer lugar, los diseñadores deben trabajar en torno a las limitaciones de los dispositivos móviles y centrarse en lo que realmente importa. Como resultado, la experiencia del usuario sigue siendo consistente entre los dispositivos, ya que el propósito principal de la interfaz de usuario sigue siendo el centro de atención.

Tamaño de la fuente

Como se mencionó anteriormente, el tamaño de la fuente por defecto para el cuerpo del texto en la web es de 16px para la mayoría de los principales navegadores. Cualquier tamaño inferior a éste puede provocar un comportamiento inesperado del zoom en los dispositivos móviles de Apple. Como resultado, generalmente se recomienda dejar 16px como su tamaño de fuente base y especificar sus tamaños de fuente restantes (encabezados, texto pequeño, subtítulos, etiquetas, etc.) en consecuencia.

Podemos definir estos tamaños de fuente con la proporción en mente siguiendo la especificación de diseño de Google Material y eligiendo tamaños con incrementos de 4pt, como la guía de estilo de Bootstrap para el tamaño de la fuente.

Nota: no se recomienda incrementar el tamaño de la fuente por la proporción áurea, ya que las diferencias entre cada tamaño de fuente serían demasiado grandes. Por ejemplo, comenzando con un tamaño de fuente base de 16 y multiplicando cada nivel de encabezado por 1.618 resultaría en un encabezado H1 de 177.4 pts, lo cual sería muy difícil de leer.

Tamaño del botón

Otro factor limitante a considerar es la precisión del método de entrada que se utiliza en su diseño. En este caso particular, nos referimos a los dedos, pulgares, cursores y lápices ópticos.

Los dedos y los pulgares son mucho más amplios y menos precisos que los cursores o los lápices ópticos. Teniendo esto en cuenta, es importante asegurarse de que los tamaños de sus botones, entradas, iconos u otros puntos táctiles se eligen cuidadosamente para tener en cuenta estas limitaciones.

El Material Design de Google recomienda que los puntos táctiles en el móvil no sean menos de 48pt de alto y 48pt de ancho con no menos de 8pt entre ellos.

Amplitud del contenido

El contenido es fluido, lo que significa que llena todo el espacio horizontal y vertical que puede. A pesar de esta característica, es una buena práctica definir una anchura mínima y máxima para su contenido.

La anchura mínima del contenido puede ser determinada por la anchura mínima de la pantalla que su diseño soportará. La resolución de pantalla más pequeña que soportan la mayoría de los diseñadores es de 320px (eso es a 1X) de ancho. Sin embargo, debes elegir tu ancho mínimo basándote en datos reales de los usuarios si puedes obtenerlos. Google Analytics es un buen lugar para buscar este tipo de datos.

Aunque el ancho del contenido puede llenar tanta pantalla como se le dé, generalmente no se recomienda permitir que su contenido abarque más de 52 caracteres por línea. Esto sugeriría que el ancho máximo de su contenido se puede determinar mediante el uso de texto del cuerpo real en su tamaño de fuente normal y encontrar un ancho de contenido cómodo que se ajusta a este rango.

Conclusión

En conclusión, la proporción es un principio de diseño útil. A pesar de tener una combinación de elementos estáticos y fluidos, todavía se puede lograr una IU proporcionada utilizando un sistema de cuadrícula de 8pt, la proporción áurea u otro método. Al comenzar a definir las dimensiones de los elementos, es una práctica común comenzar con sus restricciones, como el dispositivo, el tamaño de la fuente, el tamaño del botón y el ancho del contenido. Una vez definidos los tamaños base, es mucho más fácil escalar los elementos en consecuencia.

Siguiente lección
Principios de diseño: Espacio en blanco

Lección anterior
Principios de diseño: Énfasis

Comentarios

¿Cómo se puede mejorar esta lección? Por favor, deja tus comentarios abajo