Cuidado con el contenido subido por el usuario
Prevenir el sangrado de fondo
Cuando un usuario proporciona una imagen con un color de fondo similar al fondo en su IU, la
imagen y el fondo pueden sangrar juntos, haciendo que la imagen pierda su forma.
En lugar de tratar de resolver esto con un borde, intente usar una sutil sombra de cuadro interno:
189
Cuidado con el contenido subido por el usuario
190
Las fronteras a menudo chocan con los colores de la imagen, mientras que la mayoría de las personas apenas se dan cuenta
de que la sombra está allí.
Si no le gusta el ligero aspecto de "inserción" que obtiene al usar una sombra de cuadro, un borde interno
semitransparente también funciona muy bien.
Últimos retoques
Sobrealimentar los valores predeterminados
No siempre tiene que agregar nuevos elementos a un diseño para agregar destellos: hay muchas
formas de animar una página "sobrealimentando" lo que ya está allí.
Por ejemplo, si su diseño incluye una lista con viñetas, intente reemplazar las viñetas con iconos:
Las marcas de verificación y las flechas son excelentes opciones genéricas para muchas situaciones, pero también puede usar
algo más específico para su contenido, como un icono de candado para una lista de características relacionadas con la
seguridad:
Sobrealimentar los valores predeterminados
193
Del mismo modo, si está trabajando en un testimonio, intente "promover" las citas en elementos
visuales aumentando el tamaño y cambiando el color:
Los enlaces son otro gran candidato para un estilo especial. Puede hacer algo tan simple como cambiar el
color y el peso de la fuente, o algo tan elegante como un subrayado personalizado grueso y colorido que se
superpone parcialmente al texto:
Sobrealimentar los valores predeterminados
Si está trabajando en un formulario, usar casillas de verificación personalizadas y botones de opción es una manera fácil
de agregar algo de color al diseño:
El uso de uno de los colores de su marca para los estados seleccionados en lugar de los valores
predeterminados del navegador suele ser suficiente para pasar de sentirse aburrido a sentirse pulido y bien
diseñado.
194
Agregue color con bordes decorativos
Si no eres un diseñador gráfico, ¿cómo agregas ese toque de estilo visual a tu interfaz de usuario que
otros diseños obtienen de hermosas fotografías o ilustraciones coloridas?
Un truco simple que puede marcar una gran diferencia es agregar bordes de acento coloridos a partes de
su interfaz que de otra manera se sentirían un poco insípidas.
Por ejemplo, en la parte superior de una tarjeta:
Agregue color con bordes decorativos
... o para resaltar elementos de navegación activos:
... o al costado de un mensaje de alerta:
... o como un acento corto debajo de un titular:
196
Agregue color con bordes decorativos
... o incluso en la parte superior de todo el diseño:
No se necesita ningún talento de diseño gráfico para agregar un rectángulo de color a su interfaz de
usuario, y puede hacer mucho para que algo se sienta más "diseñado".
197
Decora tus fondos
Incluso si hace un gran trabajo con la jerarquía, el espaciado y la tipografía, a veces un
diseño se sentirá un poco simple.
Una excelente manera de romper parte de la monotonía sin alterar drásticamente el diseño es
agregar algo de emoción a algunos de sus fondos.
Cambiar el color de fondo
Una forma de agregar algo de emoción a un fondo es simplemente cambiar el color.
Decora tus fondos
Esto funciona muy bien para enfatizar un panel individual, así como para agregar alguna distinción entre
secciones completas de la página.
Para una apariencia más enérgica, incluso podría usar un ligero gradiente:
Para obtener mejores resultados, use dos tonalidades que no estén separadas más de 30 °.
199
Decora tus fondos
Usa un patrón repetitivo
Otro enfoque es agregar un patrón repetible sutil, como este de Hero Patterns:
No necesariamente tiene que repetirlo en todo el fondo, tampoco
-
un patrón diseñado para repetirse a lo largo de un solo borde también puede verse bien.
Mantenga el contraste entre el fondo y el patrón bastante bajo para garantizar la legibilidad.
200
Decora tus fondos
Agregue una forma o ilustración simple
En lugar de decorar un fondo completo, también puede intentar incluir un gráfico individual o dos
en posiciones específicas.
Las formas geométricas simples funcionan bien para esto:
... al igual que pequeños trozos de un patrón repetible:
201
Decora tus fondos
Incluso puede hacer algo más complejo, como un mapa mundial simplificado:
Al igual que con un patrón de fondo completo, es mejor mantener el contraste bajo para que nada
interfiera con el contenido.
202
No pase por alto los estados vacíos
Imagine que está diseñando una nueva característica para una aplicación en la que está trabajando.
Has pasado un montón de tiempo creando los datos de muestra realistas perfectos, seleccionando
nombres de usuario y avatares, y armando una pantalla hermosa y electrizante.
No pase por alto los estados vacíos
Lo codifica todo y lo implementa en producción. Pero cuando un usuario entusiasmado hace clic en el nuevo
elemento en la navegación, ve esto:
Si está diseñando algo que depende del contenido generado por el usuario, el estado vacío debe ser
una prioridad, no una ocurrencia tardía.
Intente incorporar una imagen o ilustración para captar la atención del usuario y enfatizar el
llamado a la acción para alentarlo a dar el siguiente paso:
204 204
No pase por alto los estados vacíos
205
Si está trabajando en algo que tiene un montón de IU de soporte, como pestañas o filtros, considere
ocultarlo por completo. No tiene sentido presentar un montón de acciones que no hacen nada hasta
que el usuario haya creado algún contenido.
Los estados vacíos son la primera interacción del usuario con un nuevo producto o función. Úsalos como una
oportunidad para ser interesante y emocionante, no te conformes con lo simple y aburrido.
Usa menos bordes
Cuando necesite crear una separación entre dos elementos, intente resistirse inmediatamente a
alcanzar un borde.
Si bien los bordes son una excelente manera de distinguir dos elementos entre sí, no son la única forma,
y ​el uso de muchos de ellos puede hacer que su diseño se sienta ocupado y abarrotado.
Usa menos bordes
Usa una caja de sombra
Las sombras de cuadro hacen un gran trabajo al delinear un elemento como lo haría un borde, pero
pueden ser más sutiles y lograr el mismo objetivo sin ser tan molesto.
Este enfoque funciona mejor cuando el elemento al que está aplicando la sombra del cuadro
no es del mismo color que el fondo.
207
Usa menos bordes
Usa dos colores de fondo diferentes
Por lo general, todo lo que necesita para crear distinción entre ellos es dar colores de fondo ligeramente
diferentes a los elementos adyacentes.
Si ya está utilizando diferentes colores de fondo además de un borde, intente eliminar el borde;
Puede que no lo necesites.
208
Usa menos bordes
Añadir espacio extra
¿Qué mejor manera de crear separación entre elementos que simplemente aumentar la
separación?
Espaciar las cosas más aparte es una excelente manera de crear distinción entre grupos de elementos sin
introducir ninguna interfaz de usuario nueva.
209
Piensa fuera de la caja
La mayoría de las personas tienen muchas nociones preconcebidas sobre cómo se supone que se deben ver
ciertos componentes. Pero solo porque hayamos sido condicionados a creer que solo hay una forma de diseñar
un componente en particular, no significa que sea cierto.
Por ejemplo, imagine un menú desplegable. Probablemente esté imaginando una caja blanca con un poco
de sombra y una lista de enlaces apilados dentro de ella:
Piensa fuera de la caja
211
Pero, ¿quién dice que un menú desplegable debe ser una lista aburrida de enlaces? Es solo un cuadro flotante en
la pantalla, puede hacer lo que quiera con él.
Divídalo en secciones, use varias columnas, agregue texto de apoyo o iconos coloridos: ¡haga algo
divertido con él!
Y no te detengas en los menús desplegables; ¿Qué tal algo como una mesa?
Piensa fuera de la caja
Cuando imagina una tabla, probablemente piense en columnas que contienen una pieza de datos
específica:
Las tablas no tener sin embargo, para trabajar de esta manera: si una columna no necesita ser ordenable, no
hay razón para que no pueda combinarla con una columna relacionada e introducir una jerarquía interesante:
212
Piensa fuera de la caja
El contenido de la tabla tampoco tiene que ser texto sin formato. Agregue imágenes si tiene sentido o introduzca un
poco de color para enriquecer los datos existentes:
¿Qué hay de los botones de radio? No hay nada más aburrido que una pila de etiquetas con pequeños
círculos al lado.
213
Piensa fuera de la caja
Si un conjunto de botones de radio es una parte importante de la interfaz de usuario que está diseñando, intente algo
como tarjetas seleccionables:
No permita que sus creencias existentes frenen sus diseños; las restricciones son poderosas, pero a
veces un poco de libertad es justo lo que necesita para llevar una interfaz al siguiente nivel.
214
Subir de nivel
Subir de nivel
Con suerte, después de leer este libro, se siente mucho más seguro de su capacidad para hacer que
algo se vea increíble, sin depender de un diseñador. Pero a pesar de que hemos hecho todo lo
posible para incluir todas las buenas ideas que podamos pensar, siempre habrá más para aprender.
Estas son dos de las mejores formas en que puede continuar perfeccionando sus habilidades y agregar nuevas herramientas a su
cinturón de herramientas.
Busca decisiones que no hubieras tomado
Siempre que encuentre un diseño que realmente le guste, pregúntese:
"¿El diseñador hizo algo aquí que nunca hubiera pensado hacer?"
Tal vez es la forma en que invirtieron el color de fondo en un selector de fechas:
Subir de nivel
... o la forma en que colocaron un botón dentro de una entrada de texto en lugar de en el exterior:
... o algo tan simple como usar dos colores de fuente diferentes para un título:
Prestar atención a este tipo de decisiones poco intuitivas es una excelente manera de descubrir
nuevas ideas que puede aplicar a sus propios diseños.
Reconstruye tus interfaces favoritas
La mejor manera absoluta de notar los pequeños detalles que hacen que un diseño se vea
217
218
Subir de nivel
realmente pulido es recrear ese diseño desde cero, sin echar un vistazo a las herramientas de desarrollador.
Cuando intente averiguar por qué su versión se ve diferente a la original, descubrirá trucos como
"reducir la altura de la línea para los encabezados", "agregar espacios entre letras al texto en
mayúsculas" o "combinar varias sombras" todo en tu propio.
Al estudiar continuamente el trabajo que lo inspira con un ojo cuidadoso, aprenderá trucos de
diseño en los años venideros.
-
Adam Wathan y Steve Schoger