Una guía, de estética visual, escrita por un «nerd»
7 normas para crear interfaces de usuario espléndidas (Parte 2)
--
Por Erik D. Kennedy
Traducción: Fernando Valverde
Esta es el segundo episodio de un artículo divido en dos partes. Deberías leer la primera parte antes de empezar esta.
Estamos hablando sobre las normas para diseñar UI limpias y sencillas sin la necesidad de ir a una escuela de arte para hacerlo.
Estas son las normas:
Norma 4: Aprende los métodos de la superposición de textos en imágenes
Hay pocas formas de superponer con seguridad y belleza textos sobre imágenes. Aquí van cinco más un método adicional.
Si quieres ser un buen diseñador de UI, tienes que aprender cómo colocar texto sobre imágenes de forma atractiva. Esto es algo que todo buen diseñador de UI hace bien y todo mal diseñador de UI hace pobremente —o simplemente no hace, ¡caso en el que tendrás una enorme ventaja después de leer esta sección!
Método 0: Aplica texto directamente a las imágenes
Dudaba sobre incluir esto, pero es técnicamente posible añadir texto directamente en una imagen y que se vea bien.
Hay todo tipo de problemas y advertencias con este método:
- La imagen debería ser oscura, y no tener muchos bordes contrastados.
- El texto tiene que se blanco —te reto a encontrar un contra-ejemplo que sea limpio y sencillo. En serio. Solo uno.
- Pruébalo en todos los tamaños de ventana/pantalla para asegurar que es legible.
¿Tienes todos esos puntos? Genial. Ahora nunca cambies el texto o la imagen, y todo debería irte bien.
No creo que haya usado texto directamente sobre una imagen en ningún proyecto profesional, y realmente está comentado aquí como alguna clase de método de «control». Dicho esto, es posible conseguir un efecto realmente molón, pero ten cuidado.
Método 1: Superpón la imagen entera
Quizás el método más sencillo de poner texto sobre una imagen es superponerlo a la imagen. Si la imagen original no es suficientemente oscura, puedes superponer un negro traslúcido.
Aquí hay una imagen de bienvenida moderna con una superposición oscura.
Si trasteas con Firebug y eliminas la superposición, verás que la imagen original era demasiado brillante y tenía demasiado contraste para ser legible. Pero con la superposición oscura, ¡ningún problema!
Este método también funciona muy bien con las miniaturas o imágenes pequeñas.
Y mientras una superposición en negro es más sencilla y versátil, también puedes, sin duda, encontrar superposiciones con colores.
Método 2: Texto en una caja
Esto es realmente sencillo y muy fiable. Prepara un rectángulo negro semi-transparente y ponle un texto blanco sobre él. Si la superposición es suficientemente opaca, puedes poner casi cualquier imagen bajo ella y el texto será totalmente legible.
También puedes aplicar algo de color, pero, como siempre, sé prudente.
Método 3: Difumina la imagen
Una forma sorprendentemente buena para hacer legible el texto superpuesto es difuminar parte de la imagen inferior.
iOS 7 ha hecho realmente del difuminado del fondo algo importante recientemente, aunque en Vista se usó con gran efecto también.
También puedes usar las zonas sin foco de una fotografía como el difuminado. Pero, ten cuidado, este método no es tan dinámico. Si tu imagen cambia, asegúrate de que el texto siempre esté sobre las partes difuminadas.
Quiero decir, solo intenta leer el subtítulo a continuación.
Método 4: Decolorado de la base
El decolorado de la base en cuando tienes una imagen que sutilmente pasa a negro en la parte baja, y luego tiene un texto blanco escrito encima. Este es un método ingenioso, y no tengo ni idea sobre quien lo usó antes que Medium, pero ahí es dónde lo vi por primera vez.
Para el observador casual, parece que estas colecciones de Medium se muestran luciendo algún texto blanco sobre una imagen, pero en respuesta a eso, yo digo: ¡falso! Hay un gradiente tan, tan sutil, desde la mitad (negro al 0% de opacidad) hasta el inferior (negro a, ehm, quizás al 20% de opacidad).
Difícil de ver, pero definitivamente presente, y definitivamente mejorando la legibilidad.
Observa también que las miniaturas de las colecciones de Medium usan una ligera sombra en el texto para incrementar aún más la legibilidad. ¡Esos tíos son buenos!
El resultado neto es que Medium puede superponer casi cualquier texto en cualquier imagen y tener un resultado legible.
Ah, y otra cosa, ¿por qué la imagen pasa a negro en la parte inferior? La respuesta está en la Norma 1: la luz siempre viene de arriba. Para que parezca más natural a nuestros ojos, la imagen tiene que estar ligeramente oscurecida en la parte inferior, exactamente igual que todo lo que vemos.
Movimiento avanzado: mezcla el difuminado con el decolorado de la base… introduciendo el difuminado de la base.
Método extra: El difusor
¿Cómo hace el blog Elastica para tener un titular legible sobre una imagen dinámica en cada ocasión? Las imágenes son:
- No particularmente oscuras
- Bastante contrastadas
Aún así es difícil describir por qué el texto es tan legible: Échale un ojo:
La respuesta: el difusor.
Un difusor es un equipamiento de fotografía que suaviza la luz. Ahora es también una técnica de diseño visual para suavizar una imagen para que el texto superpuesto sea más legible.
Si nos alejamos en el blog de Elastica, podemos ver más claramente qué es lo que está sucediendo.
Hay una caja de opacidad degradada alrededor del titular «145.000 Salesforce Users Come out to Celebrate…». Es más fácil de observar contra el fondo de color azul que contra imágenes contrastadas.
Esta es, probablemente, la forma más sutil de superponer con seguridad texto sobre imágenes ahora mismo, y no la he visto en ningún otro sitio (pero esto es muy engañoso). Apúntala de todos modos. Nunca sabes cuando podrás necesitarla.
Norma 5: Haz que el texto destaque y se oculte
Estilizar el texto para que se vea bonito y apropiado es en muchas ocasiones una cuestión de estilizado en contraste, por ejemplo: más grande pero más fino.
En mi opinión, una de las partes más complicadas para crear hermosas UI es estilo del texto, y claramente no es por no estar familiarizado con las opciones. Si ya te has gradaduado, probablemente hayas usado todos los métodos para llamar la atención sobre el texto que vemos:
- Tamaño (más grande o más pequeño)
- Color (mayor o mentor contraste; los colores brillantes captan la atención)
- Peso de la fuente (negrita o fina)
- Capitalización (minúsculas, MAYÚSCULAS)
- Cursivas o itálicas
- Espaciado de la letra (o —alerta de término estrafalario— ¡tracking!)
- Márgenes (técnicamente no es una propiedad del texto, pero puede ser usado para atraer la atención, así que por eso está en la lista)
Hay algunas otras opciones posibles para atraer tu atención, pero no son muy usadas o recomendadas:
- Subrayado. El subrayado significa enlace hoy en día, y no merece la pena forzar que signifique otra cosa, si me preguntas.
- Color de fondo del texto. No es tan común, pero el sitio 37signals tuvo esto como estilo de enlace durante un tiempo.
- Tachado. ¡Atrás, mago del CSS de los noventa!
En mi experiencia personal, cuando me encuentro ante un elemento de texto que parece que no puedo estilizar correctamente, no es porque me haya olvidado de probar las mayúsculas o un color más oscuro, es porque la mejor solución es, normalmente, conseguir una combinación adecuada de propiedades «competentes».
«Pop» aumentado y reducido
Puedes dividir todas las formas de darle estilo al texto en dos grupos:
- Estilos que incrementan la visibilidad del texto. Grande, negrita, mayúsculas, etc.
- Estilos que disminuyen la visibilidad del texto. Pequeño, con menos contraste, menos margen, etc.
Llamaremos a esto estilos de «pop aumentado» y «pop reducido», en honor a los adjetivos favoritos de los diseñadores. No lo llamaremos «peso visual» porque es aburrido.
Hay mucho pop aumentado en el título Material Design. Es grande, tiene alto contraste, está en negrita.
Los elementos este pie, por otra parte, son de pop reducido. Son pequeños, de poco contraste y con un peso tipográfico inferior.
Ahora lo importante.
Los títulos de la página son los únicos elementos que a los que siempre tienes que aumentarle el pop. A los demás, hay que subirlo y bajarlo.
Si el elemento de un sitio necesita énfasis, aplica ambos estilos de aumento y reducción del pop. Esto evitará que las cosas saturen, pero permitirá que los diferentes elementos tengan el peso visual que deben tener.
El impecablemente diseñado sitio web de Blu Homes tiene algunos títulos grandes, pero la palabra enfatizada está en minúscula —demasiado énfasis parecería abrumador.
Estos números en el sitio de Blu Homes captan la atención con su tamaño, color y alineación, pero observa como están, al mismo tiempo, minimizados con una fuente muy fina y un color con menos contraste que el gris oscuro.
Las pequeñas etiquetas bajo los números, sin embargo, y aunque son grises y pequeñas, están también en mayúsculas y en negrita.
Todo gira alrededor del equilibrio.
Contents Magazine es un buen caso de estudio sobre el aumento y la reducción del pop.
- Los títulos de los artículos son, básicamente, los únicos elementos de la página que no están en cursiva. En este caso, la falta de cursiva capta más efectivamente la atención (especialmente en combinación con la fuente pesada).
- El nombre del autor va en negrita en la línea del «por», haciendo que resalte sobre el peso normal del «por».
- El texto «ALREADY OUT», pequeño y de bajo contraste no molesta, pero con sus mayúsculas, generoso espaciado de letra y los grandes márgenes, puedes verlo en el momento en el que lo buscas.
Estilos seleccionado y «hover»
Dar estilo a los elementos seleccionados y efectos al hover [es el estado que se muestra cuando el ratón está encima de un enlace, sin pulsarlo] son otra ronda en el mismo juego, pero más complicada.
Normalmente, cambiar el tamaño de la fuente, su peso o caja, cambiará el espacio ocupado por el área de texto, lo que puede llevar a fastidiar los efectos hover.
¿Con qué te deja esto?
- Color del texto
- Color del fondo
- Sombras
- Subrayado
- Pequeñas animaciones: ampliaciones, reducciones, etc.
Una opción sólida: prueba a poner en blanco los elementos coloreados o viceversa, pero oscureciendo el fondo detrás de ellos.
Te dejo esto: darle estilo al texto es complicado.
Pero cada vez que pensé «quizás este texto no puede verse bien», me equivoqué. Solo necesitaba mejorar. Y para mejorar, solo tenía que seguir intentándolo.
Así, te ofrezco esta pequeña consolación: si no se ve bien, no te preocupes, podría si fueras mejor. Pero, oye, sigamos intentándolo y volviéndonos mejores.
Norma 6: Usa buenas fuentes
Algunas fuentes son buenas. Úsalas.
Nota: No hay estrategias o cosas que estudiar en esta sección. Simplemente voy a listar una serie de buenas fuentes gratuitas para que las descargues y las uses.
Los sitios con una personalidad muy diferente puede usar fuentes muy diferentes. Pero para la mayoría del diseño de UI, solo necesitas algo limpio y sencillo. Eso es, colega, olvídate de la Wisdom Script.
Además, solo estoy recomendando fuentes gratuitas. ¿Por qué? Esta es una guía para gente que está aprendiendo. Hay más que suficientes al precio del cero dólares. Vamos a usarlas.
Te recomiendo que las descargues todas ahora, y luego puedes revisarlas mientras empiezas tu proyecto de diseño visual.
Ubuntu (arriba). Multitud de pesos. Un poco más distintiva de lo necesario para algunas aplicaciones, perfecta para otras. Disponible en Google Fonts.
Open Sans (arriba). Una fuente popular, fácil de leer. Buena para los cuerpos de texto. Disponible en Google Fonts.
Bebas Neue (arriba). Genial para títulos. Solo mayúsculas. Disponible en Fontfabric, que tiene una galería increíble de «la Bebas Neue en uso».
Montserrat (arriba). Solo dos pesos, pero suficientemente buena para psar el corte. Definitivamente la mejor alternativa gratuita a Gotham y Proxima Nova, pero no tan buena como esas dos. Disponible en Google Fonts.
Raleway (arriba). Buenas para titulares, quizás demasiado para cuerpos de texto (¡esa w!). Tiene un peso ultra fino precioso (que no está en la imagen). Disponible en Google Fonts.
Cabin (arriba). Disponible en Google Fonts.
Lato (arriba). Disponible en Google Fonts.
PT Sans (arriba). Disponible en Google Fonts.
Entypo Social (arriba). Esta es una fuente de iconos, y sí, una vez uses Entypo, lo verás en todos lados, pero los iconos sociales son oro puro. ¿No te apetece recrear un mogollón de marcas gráficas de medios sociales en pequeños círculos coloreados? Perfecto, a mí tampoco. Disponible en Entypo.com.
Te dejo con algunos recursos:
- Beautiful Google web fonts. Esto es una increíble muestrario sobre lo bien que se pueden ver las Google Fonts. He vuelto a esta simple página como mínimo una docena de veces en busca de inspiración.
- FontSquirrel. Una colección de las mejores fuentes disponibles para uso comercial, y totalmente gratis
- Typekit. Si estás en Adobe Creative Cloud (esto es, suscritop a Photoshop, Illustrator, etcétera), entonces tienes acceso gratuito a un montón de fuentes increíbles. Y sí, Proxima Nova está incluida.
Norma 7: Roba como un artista
La primera vez que me senté a intentar diseñar algún elemento de una aplicación —un botón, una tabla, un gráfico, una ventana emergente, lo que sea— fue la primera vez que me di cuenta lo poco que sabía sobre cómo hacer un elemento que se viera bien.
Pero por mucha suerte que tuviera, no he tenido que inventar ningún nuevo elemento de la UI aún. Lo que significa que siempre puedo ver cómo lo han hecho otros y manipular lo mejor.
¿Pero dónde deberías buscar? Estos son los recursos que encuentro como los más útiles mientras diseño para clientes. Listados en orden descendiente:
1. Dribbble
Este muestrario, de acceso con invitación, para diseñadores tiene el trabajo de UI de mayor calidad disponible en línea. Puedes encontrar grandes ejemplos de casi todo aquí.
De hecho, deberías seguir mi trabajo en Dribbble aquí. Y a estas otras personas también:
- Victor Erixon. Tiene un estilo diferente y personal, y es genial. Diseños planos, limpios y preciosos. El tío es diseñador desde hace 3 años y ya está en lo más alto.
- Focus Lab. Estos tíos son como «celebridades de Dribbble», y su trabajo está a la altura de su reputación. Muy variado, siempre en la cima.
- Cosmin Capitanu. Un comodín increíble. Hace cosas que parecen futuristas sin ser estridente. Realmente bueno con el color. No se centra, sin embargo, en la UX, lo que es también una crítica a Dribbble en general.
2. Flat UI Pinboard
No tengo ni idea de quien es «warmarc», pero su pinboard de UI móviles ha sido ridículamente útil para mi en la búsqueda de ejemplos disparatados de bellas UI.
3. Pttrns
Un directorio de pantallazos de aplicaciones móviles. Lo bueno de Pttrns es que todo el sitio está organizado por —espera— patrones de UX. Esto hace que sea muy rápido investigar cualquier parte de la interfaz en la que estés trabajando actualmente, ya sea una página de inicio de sesión, un perfil de usuario, resultados de búsqueda, etc.
Creo firmemente que todo artista debería ser un loro hasta que sean buenos imitando a los mejores. Luego puedes buscar tu propio estilo, inventar nuevas tendencias.
Mientras, seamos como los ladrones.
Y, en el espíritu de esta sección, el título «Roba como un artista» fue sustraído de un libro homónimo que no he leído, principalmente porque creo que el título resume todo lo que las páginas pueden contener.
Conclusión
He escrito esto porque me hubiera gustado ver esto hacer tiempo. Espero que te ayude. Si eres un diseñador de UX, haz un buen mockup cuando hayas bocetado el wireframe. Si eres un desarrollador, coge tu próximo proyecto y haz que se vea bien. No quiero que la UI parezca que requiere habilidades mágicas de la escuela de arte para realizarla decentemente. Solo observación, imitación y decirle a tus amigos qué funciona.
De todos modos, así es como he aprendido hasta ahora, y siempre soy un principiante.
Si sigues aquí, has leído dos artículos con unas 5.000 palabras y has visto muchas ilustraciones y pantallazos. Pero no estoy muerto aún, así que no he acabado.
¡Deberías meterte en el boletín de diseño de Erik para encontrar más análisis de diseño y cosas similares!
Por último: a esto se dedica para vivir. ¿Buscas un diseñador de UX/UI freelance? Contrátale.
