¡Bienvenido! Soy Sparsh Malhotra, y hoy estoy emocionado de compartir con ustedes un tema que está muy cerca de mi corazón: el diseño de la interfaz de usuario. Como desarrollador front-end, siempre me ha interesado crear impresionantes interfaces de usuario, pero seamos honestos, no siempre fue fácil.

Solía ​​desear poder hacer que mis ideas se vieran geniales sin depender de un diseñador, pero cada vez que intentaba diseñar algo yo mismo, me frustraba y me daba por vencido. ¿Te identificas? Si es así, no estás solo.

Es por eso que estoy aquí para decirles que diseñar interfaces de usuario hermosas no tiene por qué ser una lucha. Puede aprovechar su punto de vista único como desarrollador sobre cómo los consumidores interactúan con el software para crear mejores interfaces de usuario. Y al seguir las últimas tendencias y técnicas de diseño de interfaz de usuario, puede depender menos del diseñador real del equipo.

En esta serie, "Cómo hacer IU en 2023", analizaré las estrategias y los consejos que he recogido que me han permitido diseñar hermosas interfaces de usuario que a los usuarios les encantan. Le proporcionaré consejos y ejemplos útiles para que pueda comenzar con cualquier cosa, desde paletas de colores hasta tipografía, diseño de diseño y más.

Entonces, ya sea que sea un desarrollador experimentado o recién esté comenzando, prepárese para llevar sus habilidades de diseño de interfaz de usuario al siguiente nivel. ¿Estás listo para embarcarte en este viaje conmigo? ¡Excelente! ¡Vamos!

PARTE 1 — Empecemos de cero

El primer paso es importante: elegir características sobre el diseño

¿Qué es lo primero que diseña cuando comienza el diseño de una nueva aplicación? Si es la barra de navegación en la parte superior de la página, estás cometiendo un error.

Diseñar el shell de la aplicación, que incluye determinar el diseño de la página, como dónde colocar los elementos de navegación, si se debe tener una navegación superior o una barra lateral, si se debe usar un contenedor o ancho completo para el contenido de la página, y dónde colocar el logo, no es el mejor punto de partida. Este enfoque puede llevar a quedarse atascado en el proceso de diseño y descuidar otros aspectos esenciales del diseño.

Una aplicación es esencialmente un grupo de funciones.

Sin tener una idea clara de las funciones de la aplicación y cómo funcionan juntas, es difícil tomar decisiones informadas sobre los elementos de diseño que funcionarán mejor. Por lo tanto, es fundamental centrarse primero en las características de la aplicación y recopilar información sobre cómo interactuarán antes de tomar decisiones sobre el diseño de la aplicación.

Los detalles pueden esperar

En las primeras etapas del diseño de funciones, es fácil atascarse con detalles menores como tipos de letra y sombras. Si bien estos elementos son importantes, es más importante centrarse en el propósito más amplio de la función y cómo encaja en el diseño general. Solo una vez que los elementos centrales estén en su lugar, debe comenzar a refinar los detalles para asegurarse de que se alineen con los objetivos de diseño más amplios. Al priorizar primero los aspectos centrales, puede crear un diseño más cohesivo y efectivo, que satisfaga mejor las necesidades del usuario.

Los diseños de baja fidelidad permiten un proceso de diseño rápido, lo que le permite pasar rápidamente a la construcción del producto final. Use bocetos y estructuras alámbricas para la ideación, luego refine su diseño elegido en formatos de mayor fidelidad. Al priorizar la velocidad y usar maquetas de baja fidelidad para explorar ideas, puede desarrollar rápidamente un diseño final más efectivo.

Elige tu voz de diseño

Los diseños son como personalidades: comunican ciertas características y valores. Un sitio bancario puede aspirar a un aspecto profesional y seguro, mientras que una nueva empresa de moda puede optar por un ambiente lúdico y divertido. Es importante elegir una personalidad de diseño que se alinee con el mensaje de la marca y el público objetivo.

Aunque suene abstracto, asignar una personalidad a un diseño en realidad se basa en factores sólidos y concretos:-

Elección de fuente

La tipografía juega un papel muy importante en la determinación de cómo se siente un diseño.

• Si desea un aspecto elegante o clásico, es posible que desee incorporar un tipo de letra serif en su diseño:

• Para una apariencia divertida, podrías usar un sans serif redondeado:

• Si buscas una apariencia más sencilla o quieres confiar en otros elementos para proporcionar la personalidad, un sans serif neutral funciona muy bien:

Los diseñadores no necesitan ser expertos en la psicología del color para usarlo de manera efectiva. Prestar atención a cómo te hacen sentir los colores y seleccionar aquellos que se alineen con la personalidad y el mensaje del diseño puede crear un impacto visual poderoso.

• El azul es seguro y familiar: nadie se queja nunca del azul:

• El oro podría decir "caro" y "sofisticado"
• El rosa es un poco más divertido y no tan serio.

Redondear las esquinas en un diseño puede parecer un detalle menor, pero puede afectar significativamente la sensación y la estética general.

• Un radio de borde pequeño es bastante neutral, y en realidad no comunica mucha personalidad por sí solo.
• Un radio de borde grande comienza a sentirse más divertido
• Ningún radio de borde se siente mucho más serio o formal

Utilice sistemas de diseño predefinidos

Es fácil caer en la trampa de pensar que tener infinitas opciones de colores, fuentes y otros elementos de diseño es algo bueno. Después de todo, tener más opciones significa más posibilidades para crear algo realmente único, ¿verdad? Bueno no exactamente.

En realidad, tener demasiadas opciones puede entorpecer su proceso de diseño. Cuando tienes tantas decisiones que tomar, cada una se siente más abrumadora que la anterior. Te atormentas incluso con los detalles más pequeños, como si usar un tamaño de fuente de 12 px o 13 px o si una sombra de cuadro debe tener una opacidad del 10 % o 15 %. Con tantas posibilidades, es fácil sentirse abrumado y estancado en un estado de indecisión.

• Definir sistemas por adelantado

No utilices el selector de color cada vez que necesites elegir un nuevo tono de púrpura: elige entre un conjunto de 8 a 10 tonos elegidos con anticipación.

Del mismo modo, no modifique el tamaño de una fuente un píxel a la vez hasta que se vea perfecto. Defina una escala de tipo restrictiva por adelantado y utilícela para tomar decisiones futuras sobre el tamaño de fuente.

• Diseñar eliminando

Comience por adivinar qué tamaño funcionaría mejor, tal vez 16 px. Luego, compáralo con las opciones de cada lado, como 12px y 24px. Normalmente, dos de las tres opciones aparecerán claramente inferiores. Si las opciones inferiores son las que están en los extremos exteriores, entonces la opción del medio es probablemente la mejor opción.

Este método es efectivo para cualquier elemento de diseño que tenga un sistema definido de opciones. Al restringir sus opciones a aquellas que tienen diferencias notables, seleccionar la mejor es una tarea sencilla.