Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design

21 consejos para el diseño de UI que te harán un mejor diseñador

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

¿Deseas aprender a diseñar interfaces de usuario o mejorar tus habilidades en su diseño? ¡Entonces estás en el lugar correcto! Si bien los fundamentos son un excelente lugar para empezar, los detalles son el lugar donde tus diseños de UI realmente comienzan a sentirse completos. En este tutorial, revisaremos bastantes consejos, mostrándote ejemplos para que empieces a trabajar en esos detalles que te ayudarán a crear diseños profesionales y claros.

Intro UI Kit
Intro: Kit de interfaz de usuario disponible en Envato Elements

Cuando se diseñan interfaces y componentes de UI, puede ser fácil sentirse abrumado por todas las decisiones de diseño que se deben tomar. En ocasiones, un diseño de UI simplemente no funciona del todo y hay que retocarlo una y otra vez hasta el punto que esté correcto.

Al igual que una pintura que está hecha de miles de simples pinceladas, un buen diseño de UI se compone de numerosas pequeñas decisiones que dan como resultado una experiencia fácil y agradable para el usuario.

¡Revisemos un grupo de consejos para mejorar nuestras habilidades en el diseño de IU!

21 técnicas de diseño de UI (con ejemplos)

1. Desvanece el fondo

Cuando tengas una ventana modal que realmente quieres que llame la atención del usuario, desvanece el fondo. Esto hará que tu ventana resalte para el usuario, provocando que se concentre en la acción.

Mira la ventana y el fondo más oscuro del siguiente ejemplo; el contraste realmente enfatiza la importancia de las opciones del menú.

Fade the Background
Ejemplo tomado de la plantilla centrada en modales para dispositivos móviles

2. Cambia los colores de fondo

Divide las áreas de contenido utilizando diferentes colores de fondo. Al igual que las cabeceras y los pies de página, un cambio en los colores de fondo puede ayudar a dividir diferentes áreas. Esta es una excelente forma para enfocarse en cierto contenido y brindar variedad visual. También puede ayudar a  los usuarios a mantenerse interesados ​​y animarlos a desplazarse.

Switch up Background Colors
Titan | Correo electrónico responsivo más acceso al creador de temas

3. Utiliza el color a tu favor

¡Utiliza el color a tu favor! Si hay algo que sea particularmente importante para el usuario, no temas usar un color que en verdad resalte.

Trata de usar colores que no se utilicen mucho en el resto del diseño e intenta saturar el tono. ¡Quizá también te sorprenda el atractivo visual!

Use Color to your Advantage
Titan | Correo electrónico responsivo más acceso al creador de temas

4. ¡Personaliza esos botones de redes sociales!

Los botones de redes sociales son esenciales para muchos proyectos de diseño. Si bien parece una tarea simple al principio, puede ser complicado decidir dónde van y cómo mostrarlos. Algo que sucede a menudo es que pueden romper la unidad de tu diseño, pues todos vienen en colores diferentes y esto puede ocasionar que compitan por el espacio visual entre sí y con tu UI.

Vale la pena tomarse un tiempo adicional para personalizar tus propios botones de redes sociales para que se adapten al diseño de tu UI. ¡Esto aportará la unidad visual que necesitas para tu proyecto!

Customize Those Social Buttons
Iconos de redes sociales dibujados a mano

5. Añade formas a los bordes

Añade un poco de atractivo visual entre los bordes para ayudar a romper la cuadrícula. Adherirse a la cuadrícula es excelente, pero a veces es deseable liberarte de ese aspecto cuadrado. Agregar una imagen que conecte con la siguiente sección puede ayudar a que tu página se vea más dinámica. Incluso puedes dirigir la atención de los usuarios hacia arriba o hacia abajo utilizando una forma de flecha. ¡Intenta ser creativo y aportar tus propias ideas a este concepto!

Add Shapes to Edges of Borders

6. Personaliza las listas con viñetas

Las listas con viñetas son una herramienta útil para ayudar a dividir el contenido y facilitar al usuario la lectura de los puntos importantes. Un buen truco que puedes usar aquí es personalizar las listas con imágenes. Esta es una buena manera de impulsar tu marca o incluso para ofrecer alguna información con iconografía. ¡Intenta usar colores o íconos únicos que enfaticen el mensaje del contenido!

Customize Bullet Lists
Intro | Kit de interfaz de usuario

7. Organiza las categorías en bloques

Hay muchas situaciones en las que se tiene mucha información en una lista con viñetas, o probablemente te preocupe que el orden de una lista esté enfatizando algo como opciones principales cuando deberían considerarse iguales. En estos casos, trata de dividir este contenido en bloques que se sitúen uno al lado del otro.

Con los bloques, todo el contenido es presentado como de igual valor. Otro gran beneficio de esto es que puedes personalizar el diseño de los cuadros y mostrar mucha más información visual que en una simple lista.

Separate Content into Blocks
Intro | Kit de interfaz de usuario

8. Utiliza colores amigables para daltónicos

Muchos usuarios con daltonismo u otros tipos de discapacidad visual pueden tener dificultades para distinguir entre distintos colores. Siempre es una buena idea comprobar para asegurarte de que tus colores de alto contraste serán inconfundiblemente diferentes para todos.

Consejo para Photoshop: ¡Existe un truco genial que puedes usar con Photoshop para comprobar esto! Ve a Vista > Ajuste de prueba, a continuación puedes seleccionar los diferentes filtros de daltonismo para verificar tus colores contrastantes.

Use Color Blind Friendly Colors

9. Divide tu texto

Puede ser muy fácil caer en la trampa de utilizar grandes cantidades de texto. En ocasiones, esta puede ser la forma en la que, a ti como diseñador, se te ha proporcionado la información. Sin embargo, a menos que se trate de un artículo que esperas que tu usuario se siente y lo lea con una taza de café, por lo general, es una buena idea empezar a dividir tu información. Los usuarios están buscando cosas específicas, así que haz que sea lo más sencillo posible para ellos.

Asegúrate de que los encabezados sean distintivos, utiliza viñetas para enfatizar la información clave. Utiliza texto a color y en negrita para destacar las piezas importantes. Sobre todo, asegúrate de que tu contenido escrito sea atractivo e interesante de ver.

Break Up Text
Sakola | Interfaz de UI para sitio web de escuela secundaria

10. Utiliza bloques, no bordes

Dividir el contenido con bordes y líneas puede ser una excelente forma de diferenciar distintas secciones. Sin embargo, también pueden abarrotar tus diseños y, aunque de forma individual pueden estar bien, podrían tener un impacto negativo general en tus diseños.

Para combatir esto, puedes crear bordes seccionando tus áreas con diferentes colores de fondo. Esto crea naturalmente una línea entre las distintas áreas del contenido, haciendo que tus diseños se sientan menos desordenados y claustrofóbicos. ¡Cuanto menos desorden haya, más resaltará tu contenido!

Blocks of Content
Sakola | UI para sitio web de escuela secundaria

11. Espacia prudentemente tu texto

Así como el uso de bloques puede ayudar a crear una cuadrícula sin bordes, un espaciado bien pensado también puede tener el mismo efecto. Cuando espacias los párrafos de texto entre sí de manera adecuada, con frecuencia ni siquiera necesitarás un color de fondo separado.

Crea grandes espacios entre los contenidos separados y acerca el cuerpo del texto al encabezado de su contraparte. De esta forma, podrás adherirte bien a una cuadrícula con la mínima cantidad de estilo de diseño.

Text Spacing
Sakola | UI para sitio web de escuela secundaria

12. Sé consistente con las esquinas redondeadas

Una técnica común es redondear las esquinas de los elementos de la UI para aportarles una apariencia más suave. Lo bueno de esto es que no rompe la cuadrícula. Trata de asegurarte de que, sea cual sea el tamaño que uses, lo utilices de manera consistente en todos tus elementos de diseño.

Incluso puedes llevar esto un paso más allá y redondear otros contenidos con las mismas dimensiones, como imágenes o íconos. ¡Esto realmente puede integrar un diseño!

Consistent with Rounded Corners
Kit de UI de financiación bancaria

13. Varía los diseños de los botones según su importancia

A veces los botones sirven para diferentes propósitos dependiendo de tu proyecto y los objetivos de los usuarios. En estos casos, puedes crear énfasis en las opciones más importantes utilizando un color llamativo, mientras que uno menos fuerte en los botones de menor importancia.

Por ejemplo, una pantalla de inicio de sesión deberá adaptarse tanto a los usuarios nuevos como a los existentes, pero quizá quieras enfatizar una de estas opciones dependiendo de tus objetivos.

Trata de crear dos botones que tengan las mismas dimensiones, pero dale más contraste al botón más importante. En este caso, «Crear una cuenta» está atenuado, pues la mayoría de los usuarios iniciarán sesión y solamente tendrán que crear una cuenta una vez.

Vary Button Designs

14. Utiliza líneas gruesas parciales

Si bien es común ver que en los efectos hover de los hipervínculos de texto se usen subrayados, también podrías usar esto en los bloques. Intenta poner un subrayado grueso a lo largo de todo un bloque al pasar el mouse para enfatizar que se puede hacer clic en el botón. También puedes añadir líneas como esta para añadir atractivo visual a los cuadros de contenido.

Thick One Sided Lines

15. Haz que tus botones resalten

Los diseños planos con mucho espacio negativo se están volviendo muy populares. Si bien mantener las cosas simples es importante, existe el riesgo de que el usuario no comprenda que los botones de navegación son diferentes del texto normal. Utiliza espacio y elementos de diseño únicos para que tus botones realmente sobresalgan del texto del cuerpo.

Make Buttons Stand Out
Plantilla de Adobe XD con kits de UI para menú de navegación de sitios web

16. Inspírate en los juegos (¡pero no demasiado!)

En el mundo del desarrollo de juegos existe un término llamado juice que, básicamente, significa hacer que el diseño de tus juegos sea agradable de usar. Esto por lo general incluye animaciones que se activan al presionar un botón.

Trata de añadir algunas animaciones frescas con CSS a tus botones o a los íconos de la pantalla de carga, o crea una UI visual única para ciertas funciones. Naturalmente, el desarrollo de aplicaciones y sitios web no es un videojuego y no se debe hacer perder el tiempo a tus usuarios, pero añadir un pop o un detalle atractivo con un clic realmente puede aportarle algo de diversión a tus proyectos.

17. Añade íconos a tus botones

Si bien un pequeño fragmento de texto es suficiente, podría haber casos en los que un ícono realmente puede enfatizar lo que hace el botón. Coloca el ícono junto a tu texto de la misma forma que lo harías con una viñeta.

Aunque yo no utilizaría esto con cada botón, puede ayudar al usuario a entender rápidamente lo que el botón hace. Las posibilidades son realmente ilimitadas con una idea como esta, por ejemplo podrías usar el ícono de una nube en un botón de guardar o una bolsa de compras en un botón de comprar. Otro gran beneficio de esto es que puede ayudar a tu diseño a romper algunas barreras con el idioma.

Add Icons to Your Buttons

18. Ahorra espacio valioso usando iconos

A medida que las aplicaciones móviles se han normalizado,  también muchos íconos diferentes lo han hecho. Esto nos brinda una buena oportunidad para ahorrar espacio y hacer que nuestros diseños estén impecables. ¿Tienes una página de configuraciones? En vez de tener esto como un elemento de navegación principal, crea un ícono de engrane que sea fácilmente accesible. ¿No tienes suficiente espacio para una barra de búsqueda? Prueba con un ícono de lupa que haga accesible esa barra cuando el usuario la necesite.

Aunque esto no puede reemplazar todos los vínculos de tu navegación, puedes crear una distinción entre tu contenido y las herramientas que se usan para navegar por ese contenido.

Menu Icons Save Space

19. Aprovecha los degradados de CSS

Cuando en verdad necesites llamar la atención sobre un botón, intenta colocar un degradado ambiental. Si bien desaconsejaría el uso excesivo de los degradados en la navegación, esta pieza adicional de estilo visual realmente puede aportarle nitidez a un componente.

CSS Gradients on Button
BitWallet

20. Superpón el contenido sobre los límites

Otra gran idea cuando se trabaje con los límites de las áreas de contenido es superponer el contenido. Esto realmente enfatiza el contenido en sí y añade una profundidad interesante que puede ser difícil de lograr con colores planos. ¡También puede hacer un gran trabajo acortando la distancia entre una sección y la siguiente!

Overlap Content Over Edges
BitWallet

21. Utiliza espaciado entre el texto

En ocasiones, el texto puede parecer un poco aislado por sí solo. ¡Algo que podrías hacer para destacarlo es ajustar el espaciado de las letras! Trata de hacer esto con todas las letras mayúsculas en los títulos para aportarle a tus encabezados un aspecto sofisticado.

También hace maravillas con el texto solo, sin mucho más a su alrededor. Esta es una excelente forma para enfatizar sin aumentar el tamaño de la fuente

Spacing Between Text
BitWallet

Empieza a aprender sobre el diseño de UI con estos consejos

¡Ahí los tienes! Una buena cantidad de consejos para ayudarte a aprender a diseñar interfaces de usuario. Prueba algunos de los consejos que se mencionaron aquí en tu próximo proyecto de diseño (y recuerda prestar atención a los detalles al utilizar cualquier forma de diseño de UI). Busca ideas que te puedan funcionar y toma notas.

Asimismo, recuerda que estos consejos no son reglas absolutas. Cada proyecto en el que trabajes tendrá sus propias necesidades y objetivos. Algunas ideas funcionarán en tu diseño y otras no. ¡Recuerda siempre el objetivo primordial de tu usuario al estar creando tu diseño de UI!

¿Te gustaron estos consejos? Revisa estos otros tutoriales y plantillas de diseño de UI de Envato Tuts+.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.