7 normas para crear interfaces de usuario espléndidas. Norma #1

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.

Aquí están:

  1. La luz viene del cielo
  2. Primero en blanco y negro
  3. Dobla tu espacio blanco
  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

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.

1-eFJGYuA67SIzu9pB1MZFKQ

¡Buh!

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.

ueno, 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.

Sombra en botones

Sombra en botones

Mira los botones. Incluso en estos botones relativamente «planos» hay un puñado de detalles relacionados con la luz:

  1. El botón sin pulsar (arriba) tiene un borde inferior oscuro. El sol no lo ilumina, hijo.
  2. El botón sin pulsar es ligeramente más brillante en la parte superiorque 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.
  3. El botón sin pulsar arroja una sombra sutil —quizás más sencilla de observar en la sección ampliada.
  4. 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.

iOS 6 está un poco obsoleto, pero es un buen caso de estudio sobre el comportamiento de la luz.

iOS 6 está un poco obsoleto, pero es un buen caso de estudio sobre el comportamiento de la luz.

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.
Un acercamiento al separador en una lista.

Un acercamiento al separador en una lista.

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.

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.

Material design en Android

Material design en Android

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.

Fuente: Erik D. Kennedy

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s