Una guía no artística sobre la estética digital
7 normas para crear interfaces de usuario espléndidas (Parte 1)
--
Por Erik D. Kennedy
Traducción: Fernando Valverde
Introducción
Bueno, lo primero es lo primero. Esta guía no es para todo el mundo. ¿Para quién es entonces?
- Desarrolladores que quieren ser capaces de diseñar sus propias interfaces de usuario atractivas en un periquete.
- Diseñadores de experiencia de usuario (UX, del inglés: user experience) que quieren que su porfolio se vea mejor que un PowerPoint del Pentágono. O diseñadores de UX que saben que pueden vender mejor una increíble UX en un buen envoltorio de interfaz de usuario (UI, del inglés: user interface).
Si fuiste a una escuela de arte o ya te consideras un diseñador de UI, probablemente encuentres esta guía una combinación a) aburrida, b) incorrecta e c) irritante. Está bien. Todas tus críticas son correctas. Cierra la pestaña, sigue con otra cosa.
Deja que te cuente lo que encontrarás en esta guía.
Al principio yo era un diseñador de UX con ninguna habilidad en UI. Me encanta diseñar UX, pero no tardé mucho en darme cuenta de que hay muchísimas razones para aprender cómo hacer que una interfaz se vea bien:
- Mi porfolio parecía basura, reflejando pobremente mi trabajo y mi proceso de pensamiento.
- Mis clientes de consultoría de UX prefieren comprar las habilidades de alguien si su experiencia se extiende más allá del bocetado de cajas y flechas.
- ¿Quería trabajar en alguna startup que estuviera empezando? Mejor ser barrendero.
Tenía mis excusas. No sé una mierda sobre estética. Me especialicé en la ingeniería —es casi una una medalla al orgullo construir algo que se ve horrible.
«Me especialicé en la ingeniería —es casi una medalla
al orgullo construir algo que se ve horrible.»
Al final, aprendí la estética de las aplicaciones de la misma forma que aprendí mi empeño creativo: [mediante] análisis complicados y fríos. Y copiando descaradamente lo que funciona. Trabajé 10 horas en un proyecto de UI y facturé 1. Las otras 9 fueron las sacudidas salvajes del aprendizaje. Buscando desesperadamente en Google, Pinterest y Dribbble algo que copiar.
Estas «normas» son las lecciones de esas horas.
Para los nerds: si soy mínimamente bueno diseñando UI ahora es porque he analizado cosas, no porque me iluminara la comprensión intuitiva de la belleza y el equilibrio.
Este artículo no es teoría. Este artículo es pura práctica. No verás nada de proporciones áureas. Ni siquiera menciono la teoría del color. Solo lo que he aprendido de ser malo y luego practicar deliberadamente.
Míralo de esta forma: el judo fue desarrollado basándose en siglos de tradiciones, marciales y filosóficas, japonesas. Tomas lecciones de judo y, en adición al combate, escuchas muchas cosas sobre la energía, el fluir y la armonía. Ese tipo de cosas.
El Krav Maga, por otra parte, fue inventado por algunos judíos duros que se enfrentaban a los nazis en las calles de la Checoslovaquia de 1930. No hay arte ahí. En las lecciones del Krav Magga, aprendes como sacarle un ojo a alguien con un bolígrafo y quedártelo.
Este es el Krav Maga de las pantallas.
Las normas
Aquí están:
- La luz viene del cielo
- Primero en blanco y negro
- Dobla tu espacio blanco
- Aprende los métodos de la superposición de textos en imágenes (ver Parte 2)
- Haz que el texto destaque y se oculte (ver Parte 2)
- Usa solo buenas fuentes (ver Parte 2)
- Roba como un artista (ver Parte 2)
A por ello.
Norma 1: La luz viene del cielo
Las sombras son señales de valor incalculable para decirle al cerebro humano que elementos de la interfaz de usuario estamos viendo.
Esta es quizás la cosa más importante y menos obvia que aprender acerca del diseño de UI: la luz viene del cielo. La luz viene del cielo tan frecuente y consistentemente que cuando viene desde abajo realmente parece rara.
Cuando la luz viene del cielo, ilumina la parte alta de las cosas y produce sombras debajo de estas. La parte de arriba es más brillante, la de abajo, más oscura.
No pensarás en los parpados inferiores de la gente como algo particularmente sombrío, pero ilumina un poco a esos cabrones y de repente te encontrarás con una chica endemoniada delante de tu puerta.
Bueno, lo mismo es cierto para la UI. Del mismo modo que tenemos ligeras sombras en todos los recovecos de nuestras cara, hay sombras en los recovecos de casi todos los elementos de la UI que puedas encontrar. Nuestras pantallas son planas, pero hemos invertido una gran cantidad de arte en hacer que parezca 3D todo lo que aparece en ellas.
Mira los botones. Incluso en estos botones relativamente «planos» hay un puñado de detalles relacionados con la luz:
- El botón sin pulsar (arriba) tiene un borde inferior oscuro. El sol no lo ilumina, hijo.
- El botón sin pulsar es ligeramente más brillante en la parte superior que en la inferior. Esto es así porque imita una superficie un pelín curva. De la misma forma que tienes que inclinar hacia arriba un espejo enfrente tuya para poder ver el sol en él, las superficies inclinadas reflejan un poquitito más el sol hacia ti.
- El botón sin pulsar arroja una sombra sutil —quizás más sencilla de observar en la sección ampliada.
- El botón pulsado, mientras sigue siendo más oscuro en la parte baja que en la superior, es más oscuro —esto se debe a que está en un plano de la pantalla en el que el sol no puede alcanzarlo tan fácilmente—. Uno podría argumentar que todos los botones pulsados que vemos en la vida real son también más oscuros, porque nuestras manos bloquean la luz.
Eso era un solo botón, y aún así están estos 4 pequeños efectos lumínicos presentes. Esta es la lección. Ahora toca aplicarlo a todo.
Aquí vemos un par de configuraciones de iOS 6: «No molestar» y «Notificaciones». No es gran cosa, ¿verdad? Pero observa cuántos efectos lumínicos están aplicados sobre ellos.
- El borde superior del panel de control incrustado arroja una pequeña sombra.
- El deslizador «ON» también se levanta un poco.
- El deslizador «ON» es cóncavo y la parte baja refleja más luz.
- Los iconos están un poco expuestos. ¿Observas el borde brillante por encima de ellos? Esto representa una superficie perpendicular a la fuente de luz, de ahí que reciba tanta luz, de ahí que rebote tanta luz a tus ojos.
- El separador está sombreado dónde el ángulo se aleja del sol y viceversa.
Elementos que están generalmente incrustados:
- Los campos de introducción de texto
- Los botones pulsados
- Los deslizadores
- Los botones radiales (sin seleccionar)
- Las casillas de verificación
Elementos que están generalmente extruídos:
- Botones (sin pulsar)
- Botones deslizantes
- Controles desplegables
- Tarjetas
- La parte botón de un botón radial seleccionado
- Popups
Ahora que lo sabes, lo verás en todos lados. De nada, chico.
Espera, ¿qué hay del diseño plano, Erik?
iOS 7 generó un gran revuelo en la comunidad tecnológica por su «diseño plano». Esto viene a decir que es literalmente plano. No hay salientes o muescas simuladas, solo líneas y formas de colores sólidos.
Me gusta lo limpio y sencillo tanto como a cualquiera, pero no creo que esto sea una tendencia a largo plazo. La simulación delicada del 3D en nuestras interfaces parece demasiado natural para descartarla completamente.
Lo más probable es que veamos UI semi-planas en el futuro cercano (y por esto te recomiendo que te vuelvas competente en el diseño). Me voy a tirar a la piscina y lo voy a llamar «diseño planillo». Sigue siendo limpio, sigue siendo sencillo, pero tendrá algunas sombras y señales sobre lo que tocar/deslizar/cliquear.
Mientras escribo esto, Google está lanzando su lenguaje Material Design sobre sus productos. Es un lenguaje visual unificado que, en su núcleo, busca imitar el mundo físico.
Una ilustración de la guía de Material Design muestra cómo transmitir diferentes profundidades usando diferentes sombras.
Esta es la clase de cosa que creo que se mantendrá.
Usa sutiles señales del mundo real para transmitir información. Palabra clave: sutil.
No puedes decir que no imita el mundo real, pero tampoco es la web de 2006. No hay texturas, no hay gradientes, no hay brillos.
Creo que lo planillo es el futuro. ¿Lo plano? Solo algo del pasado.
Norma 2: Primero en blanco y negro
Diseñar en escala de grises antes de añadir color simplifica los elementos más complejos del diseño visual y te fuerza a concentrarte en espaciar y colocar los elementos.
Los diseñadores de UX están realmente metidos en diseñar «primero para móviles» estos días. Esto significa que piensas como las páginas y las interacciones funcionan en un teléfono antes de imaginarlas en tu monitor Retina de infinitos píxeles.
Esa clase de limitación es genial. Clarifica el pensamiento. Empiezas con el problema más complicado (una aplicación usable en una pantalla minúscula), luego adaptas la solución al problema más sencillo (una aplicación usable en una pantalla grande).
Bueno, esta es otra limitación similar: diseñar primero en blanco y negro. Empieza con el problema más difícil, el de hacer la aplicación bella y usable en todos los sentidos, pero sin la ayuda del color. Añade color al final, e incluso entonces, solo cuando tenga un propósito.
Esta es una forma eficaz y sencilla de mantener la apariencia de las aplicaciones «limpia» y «sencilla». Tener demasiados colores en demasiados lugares es una forma verdaderamente fácil de joder lo limpio/sencillo. El blanco y negro primero te fuerza a centrarte en cosas como el espaciado, los tamaños y la composición primero. Y esas son las principales preocupaciones de un diseño limpio y sencillo.
Hay algunos casos en los que el blanco y negro primero no es tan útil. Los diseños que tienen una actitud marcada y específica —«deportivo», «llamativo», «de dibujo animado», etcétera— necesitan un diseñador que pueda usar el color extremadamente bien. Pero la mayoría de las aplicaciones no tiene una actitud específica más allá de l0 limpio y sencillo. Aquellas que lo hacen son, claramente, más difíciles de diseñar.
Para el resto, ahí está el blanco y negro primero.
Paso 2: Cómo añadir color
El color más sencillo de añadir es un solo color.
Añadir un solo color a un sitio en escala de grises capta la atención sencilla y efectivamente.
Puedes llevarlo un paso más allá. Escala de grises + dos colores, o escala de grises + múltiples colores de un único matiz.
Códigos de color en práctica —por ejemplo: espera, ¿qué es un matiz?
La web en general habla de colores como códigos hexadecimales RGB. Es más útil ignorarlos. El RGB no es una buena estructura para colorear los diseños. Mucho más útil es el modelo de color HSV («básicamente sinónimo» de HSB o HSL).
El HSV es mejor que el RGB porque encaja en la forma en que pensamos en el color naturalmente, y puedes predecir cómo los cambios a los valores HSV afectarán al color que estás mirando.
Si esto es nuevo para ti, aquí tienes una buena guía sobre los colores HSV.
Al modificar la saturación y el brillo de un único matiz, puedes generar múltiples colores —oscuros, claros, fondos, acentos, reclamos— que no abruman a la vista.
Usar múltiples colores de uno o dos matices base es la forma más segura de acentuar y neutralizar elementos sin hacer del diseño un desastre.
Otras notas sobre el color
El color es el área más complicada del diseño visual. Y mientras muchas cosas sobre el color son obtusas y no son prácticas para finalizar el diseño que tienes delante, he visto cosas realmente buenas por ahí.
Una pequeña caja de herramientas:
- Never Use Black (Ian Storm Taylor). Habla sobre cómo el gris totalmente plano casi nunca aparece en el mundo real, y cómo saturar las sombras del gris —especialmente las más oscuras— añade riqueza visual a tus diseños. Además, los grises saturados se asemejan más al mundo real, lo que es su propia virtud.
- Adobe Color CC. Una herramienta increíble para encontrar, modificar y crear esquemas de color.
- Dribbble search-by-color. Otra forma increíble de encontrar lo que funciona con un color particular. Hablando de práctica. Si ya tienes un color decidido, échale un vistazo a lo que los mejores diseñadores del mundo están haciendo con ese color.
Norma 3: Dobla tu espacio blanco
Para hacer una UI que parezca diseñada, añade mucho espacio para que respire.
En la norma 2, dije que el blanco y negro primero fuerza a los diseñadores a pensar en el espacio y la composición antes de considerar el color, y cómo esto es algo positivo. Pues bien, es el momento de hablar de espaciado y composición.
Si has escrito HTML desde el cero, probablemente estás familiarizado con la forma en el HTML está, por defecto, dispuesto en la página.
Básicamente, todo está pegado a la parte superior de la pantalla. Las fuentes son pequeñas y no hay espacio entre línea, en absoluto. Hay un poquitito de espacio entre párrafos, pero no demasiado. Los párrafos se extienden hasta el final de la página, sea esta de 100 px o 10.000 px.
Estéticamente hablando, es horroroso. Si quieres hacer que tu UI parezca diseñada, necesitas añadir mucho espacio para que respire.
Algunas veces, muchísimo.
Espacio blanco, HTML y CSS
Si tú, como yo, estás acostumbrado a formatear con CSS, donde por defecto no hay espacio blanco, es el momento de desvincularte de esos malos hábitos. Empieza a pensar en el espacio blanco como lo predefinido —todo empieza como un espacio blanco, hasta que lo eliminas añadiendo un elemento de página.
¿Suena zen? Creo que es una de las grandes razones por las que las personas aún bocetan sus cosas.
Empezar con una página en blanco significa empezar con nada más que espacio blanco. Piensa en los márgenes y el espaciado desde el primer momento. Todo lo que dibujes es una decisión consciente de la eliminación del espacio blanco.
Empezar con un montón de HTML sin estilo significa empezar con contenido. El espaciado es la idea del último momento. Tiene que ser declarado explícitamente.
Este es un ilustrativo reproductor musical conceptualizado por Piotr Kwiatkowski.
Presta especial atención al menú de la izquierda.
El espacio vertical entre los elementos del menú es el doble que la altura del texto. Estás observando una fuente de 12 px que tiene el mismo padding por arriba y por abajo.
O échale un ojo a la lista de títulos. Hay un espacio de 15 px entre la palabra «PLAYLISTS» y su propio subrayado. ¡Es más que la altura de las mayúsculas de la propia fuente! Y eso sin decir nada de los 25 píxeles entre las listas.
La barra izquierda muestra un generoso espaciado entre las líneas de texto y demás.
Piotr fue concienzudo al poner un espacio extra aquí, y valió la pena. Aunque esto es solo un concepto que elaboró por gusto (hasta dónde yo sé), en lo que respecta a la estética, es suficientemente bello para competir con las mejores UI de música disponibles.
El buen y generoso espacio blanco puede hacer que las interfaces más desastrosas parezcan atractivas y sencillas —como los foros.
O Wikipedia.
Puedes encontrar multitud de argumentos que dicen que el rediseño de Wikipedia se aleja de funcionalidades clave del uso del sitio. ¡Pero no puedes decir que no sea una buena forma de aprender!
Pon espacio entre tus líneas.
Pon espacio entre tus elementos.
Pon espacio entre tus agrupaciones de elementos.
Analiza qué funciona.
Vale, esto concluye la primera parte. ¡Gracias por quedarte!
En la Parte 2, hablaré sobre las 4 últimas normas:
4. Aprende los métodos de la superposición de textos en imágenes
5. Haz que el texto destaque y se oculte
6. Usa solo buenas fuentes
7. Roba como un artista
Si has aprendido algo útil, lee la segunda parte.
Si quieres ver más textos y tutoriales de Erik, deberías suscribirte a su boletín de diseño.
Si tienes cualquier comentario, tuitéale o escríbele unas líneas.
¿Necesitas un diseñador UX/UI freelance? Contrátale.
