7 consejos prácticos para hacer trampa en el diseño

Mejora tus diseños con tácticas en lugar de talento.

Todos los desarrolladores web inevitablemente se encuentran con situaciones en las que necesitan tomar decisiones de diseño visual, les guste o no.

Tal vez la empresa para la que trabaja no tiene un diseñador a tiempo completo y necesita implementar la interfaz de usuario para una nueva función por su cuenta. O tal vez estás pirateando un proyecto paralelo y quieres que se vea mejor que otro sitio Bootstrap.

Es fácil levantar las manos y decir: "¡Nunca podré hacer que esto se vea bien, no soy un artista!", Pero resulta que hay un montón de trucos que puedes usar para subir de nivel tu trabajo que no requieren un fondo en diseño gráfico.

Aquí hay siete ideas simples que puede usar para mejorar sus diseños hoy.

1. Use color y peso para crear jerarquía en lugar de tamaño

Un error común al diseñar el texto de la interfaz de usuario depende demasiado del tamaño de fuente para controlar su jerarquía.

“¿Es importante este texto? Hagámoslo más grande ".

“¿Es este texto secundario? Hagámoslo más pequeño ".

En lugar de dejar todo el trabajo pesado al tamaño de la fuente solo, intente usar el color o el peso de la fuente para hacer el mismo trabajo.

“¿Es importante este texto? Hagámoslo más audaz ".

“¿Es este texto secundario? Usemos un color más claro ".

Intenta seguir con dos o tres colores:

  • Un color oscuro (pero no negro) para el contenido primario (como el título de un artículo)
  • Un gris para contenido secundario (como la fecha de publicación de un artículo)
  • Un gris más claro para el contenido auxiliar (tal vez el aviso de copyright en un pie de página)

Del mismo modo, dos pesos de fuente suelen ser suficientes para el trabajo de la interfaz de usuario:

  • Un peso de fuente normal (400 o 500 dependiendo de la fuente) para la mayoría del texto
  • Un peso de fuente más pesado (600 o 700) para el texto que desea enfatizar

Manténgase alejado de los pesos de fuente por debajo de 400 para el trabajo de la interfaz de usuario; pueden funcionar para títulos grandes pero son demasiado difíciles de leer en tamaños más pequeños. Si está considerando usar un peso más ligero para quitarle énfasis al texto, use un color más claro o un tamaño de fuente más pequeño.

2. No use texto gris en fondos de colores

Hacer que el texto sea un gris más claro es una excelente manera de quitarle énfasis a los fondos blancos, pero no se ve tan bien en fondos de colores.

Esto se debe a que el efecto que realmente estamos viendo con gris sobre blanco es un contraste reducido.

Acercar el texto al color de fondo es lo que realmente ayuda a crear la jerarquía, no lo hace gris claro.

Hay dos formas de reducir el contraste al trabajar con fondos coloridos:

1. Reduce la opacidad del texto blanco

Use texto blanco y baje la opacidad. Esto permite que el color de fondo se desvanezca un poco, enfatizando el texto de una manera que no entre en conflicto con el fondo.

2. Elija manualmente un color basado en el color de fondo

Esto funciona mejor que reducir la opacidad cuando el fondo es una imagen o patrón, o cuando la reducción de la opacidad hace que el texto se sienta demasiado opaco o deslucido.

Elija un color que tenga el mismo tono que el fondo, ajustando la saturación y la luminosidad hasta que se vea bien.

3. Compense sus sombras

En lugar de utilizar grandes valores de desenfoque y dispersión para hacer que las sombras de los cuadros sean más notables, agregue un desplazamiento vertical.

Se ve mucho más natural porque simula una fuente de luz que brilla desde arriba como estamos acostumbrados a ver en el mundo real.

Esto se aplica a las sombras insertadas como las que podría usar en pozos o entradas de formulario también:

Si está interesado en aprender más sobre el diseño de sombras, las Pautas de diseño de materiales son una introducción fantástica.

4. Use 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.

La próxima vez que te encuentres buscando un borde, prueba una de estas ideas:

1. Use 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.

2. Use 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.

3. 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.

5. No explote los íconos que deben ser pequeños

Si está diseñando algo que podría usar algunos íconos grandes (como tal vez la sección "características" de una página de destino), puede tomar instintivamente un conjunto de íconos gratis como Font Awesome o Zondicons y aumentar el tamaño hasta que se ajuste a sus necesidades.

Después de todo, son imágenes vectoriales, por lo que la calidad no se verá afectada si aumenta el tamaño, ¿verdad?

Si bien es cierto que las imágenes vectoriales no se degradarán en calidad cuando aumente su tamaño, los íconos que se dibujaron a 16–24 píxeles nunca se verán muy profesionales cuando los aumente a 3x o 4x de su tamaño previsto. Carecen de detalles y siempre se sienten desproporcionadamente "gruesos".

Si solo tienes iconos pequeños, intenta encerrarlos dentro de otra forma y dale un color de fondo a la forma:

Esto le permite mantener el icono real más cerca de su tamaño deseado, mientras llena el espacio más grande.

Si tiene el presupuesto, también puede usar un conjunto de iconos premium diseñado para usarse en tamaños más grandes, como Heroicons o Iconic.

6. Use bordes de acento para agregar color a un diseño suave

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, al costado de un mensaje de alerta:

... o para resaltar elementos de navegación activos:

... 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 su sitio se sienta más "diseñado".

¿Te cuesta elegir colores? Intente elegir entre una paleta restringida como la búsqueda de color de Dribbble para evitar sentirse abrumado por las infinitas posibilidades de un selector de color tradicional.

7. No todos los botones necesitan un color de fondo

Cuando hay varias acciones que un usuario puede realizar en una página, es fácil caer en la trampa de diseñar esas acciones basadas únicamente en la semántica.

Los marcos como Bootstrap fomentan esto al darle un menú de estilos semánticos para elegir cada vez que agrega un nuevo botón:

“¿Es esta una acción positiva? Haz que el botón sea verde.

“¿Esto elimina datos? Haz el botón rojo.

La semántica es una parte importante del diseño de botones, pero hay una dimensión más importante que comúnmente se olvida: la jerarquía.

Cada acción en una página se encuentra en algún lugar de una pirámide de importancia. La mayoría de las páginas solo tienen una acción primaria verdadera, un par de acciones secundarias menos importantes y algunas pocas rara vez usan acciones terciarias.

Al diseñar estas acciones, es importante comunicar su lugar en la jerarquía.

  • Las acciones primarias deben ser obvias. Los colores de fondo sólidos y de alto contraste funcionan muy bien aquí.
  • Las acciones secundarias deben ser claras pero no prominentes. Los estilos de contorno o los colores de fondo de bajo contraste son excelentes opciones.
  • Las acciones terciarias deben ser reconocibles pero discretas. Diseñar estas acciones como enlaces suele ser el mejor enfoque.

"¿Qué pasa con las acciones destructivas, no deberían ser siempre rojas?"

¡No necesariamente! Si la acción destructiva no es la acción principal en la página, podría ser mejor darle un tratamiento de botón secundario o terciario.

Guarde el estilo grande, rojo y audaz para cuando esa acción negativa sea realmente la acción principal en la interfaz, como en un diálogo de confirmación:

¿Disfrutas esta publicación? ¡Acabamos de lanzar un libro!

Refactoring UI toma todo lo que sabemos sobre diseño y lo agrupa en un paquete integral, que incluye un libro, screencasts, una galería de componentes, activos diseñados a medida y más.

Más de 6000 personas lo han recogido hasta ahora, y los comentarios han sido increíbles.

Si está interesado, diríjase a RefactoringUI.com/book para obtener más información y descargar una muestra.