9 grandes diseños de UI

En el diseño web, una excelente interfaz de usuario o diseño de interfaz de usuario se trata de ayudar al usuario a realizar una tarea determinada de la manera más simple y eficiente posible. Si bien la apariencia es innegablemente importante, el núcleo de una gran interfaz de usuario es la función: en términos de navegación, debe ser intuitiva hasta el punto de ser invisible. Tan pronto como un usuario se pierde o no puede averiguar adónde ir, la interfaz de usuario no está haciendo su trabajo y hay muchos ejemplos de IU dolorosa falla para demostrar lo que no debería estar haciendo.

Esta lista de sitios web y aplicaciones puede tener diferentes principios de diseño y diferentes funciones, pero tienen una cosa en común: un diseño de interfaz de usuario efectivo que satisface todo lo anterior y más. Siga leyendo para descubrir por qué tienen tanto éxito.

01. Festival de Jazz de Montreux

Diseño de interfaz de usuario: Festival de Jazz de Montreux



Esta es una forma fantástica de crear su propio programa de festival a medida con unos pocos deslizamientos(Crédito de la imagen: Festival de Jazz de Montreux)

No hay nada como estar en un festival para subir tus niveles de FOMO por las nubes; seguro, es posible que esté disfrutando el acto que está viendo ahora, pero tal vez haya otro aún mejor sucediendo en otro lugar que ni siquiera conoce. No importa cuántas veces revise la larga lista de artistas, seguramente habrá algunas gemas absolutas que extrañará. Pero esta gran pieza de diseño de interfaz de usuario para el Festival de Jazz de Montreux tiene como objetivo ayudarlo a garantizar que aproveche al máximo su tiempo allí.

Mantiene las cosas maravillosamente simples, presentándote seis opciones binarias que puedes deslizar hacia la izquierda o hacia la derecha para crear una impresión de tu preferencia musical; por ejemplo, ¿prefieres los DJ a las bandas? - y una vez que haya terminado, le presentará su propio programa personalizado basado en lo que cree que disfrutará, completo con enlaces para comprar boletos.

Diseño de interfaz de usuario: Festival de Jazz de Montreux

¡Lizzo! ¿Cómo lo supieron?(Crédito de la imagen: Festival de Jazz de Montreux)

Es fácil e intuitivo y, aunque sin duda querrá volver a verificar el programa completo de todos modos para asegurarse de que definitivamente no hay nada que se haya perdido, es una manera brillante de ayudarlo a explorar rápidamente una gran cantidad de información para encontrar resultados.

02. Cepillo de inclinación

La realidad virtual es un territorio fronterizo en lo que respecta a UI y UX. Los diseñadores y desarrolladores tienen que inventar cosas a medida que avanzan, con resultados naturalmente mixtos. Lo que funciona en una pantalla plana no necesariamente funciona tan bien en la realidad virtual, y crear una aplicación de realidad virtual eficaz y útil que pueda usar durante horas sin marearse por movimiento puede ser todo un desafío.

Por eso es genial ver un producto de realidad virtual como el de Google Cepillo de inclinación - que le permite crear pinturas en 3D en un entorno virtual - que no solo funciona, sino que es tan intuitivo de usar y con tan buenos resultados que los artistas ya lo están incorporando en sus flujos de trabajo creativos. Dirígete por aquí para obtener excelentes consejos profesionales sobre cómo comenzar con esta aplicación creativa que cambia el juego.

03. Patrones

Diseño de interfaz de usuario: Patrones

El enfoque circular y minimalista de los patrones hace que sea más fácil rodar sus ritmos [Imagen: Olympia Noise Co]

La caja de ritmos iOS de Olympia Noise Co, Modelado , es diferente a cualquiera que haya visto antes, y con razón. En lugar de secuenciar su ritmo en una cuadrícula como cualquier otra aplicación de música, Patterning usa una interfaz circular para el negocio básico de diseñar sus ritmos, con baterías codificadas por colores para que pueda ver fácilmente qué es qué.

Y más allá de lo básico, la interfaz de usuario inteligente pero mínima de Patterning hace que el negocio más complicado de secuenciar canciones más largas a partir de patrones individuales sea mucho menos desafiante, lo que le permite crear fácilmente variaciones en los patrones y luego unir todo. También se necesita un enfoque igualmente sencillo para hacer que todo suene mejor; Tanto su mezclador como su interfaz FX están cuidadosamente diseñados con señales visuales audaces que lo ayudan a obtener el sonido que desea sin atascarse entre controles inescrutables.

04. MailChimp

Diseño de interfaz de usuario: MailChimp

El diseño de MailChimp es limpio, plano y en gran parte tipográfico [Imagen: MailChimp]

La creación y administración de boletines puede no ser la tarea más emocionante del mundo, pero el diseño de interfaz de usuario intuitivo y bellamente diseñado de MailChimp lo hace mucho más apetecible. Desde su reciente rediseño, la interfaz de usuario web es limpia, plana y principalmente tipográfica.

Cuando se configura su cuenta por primera vez, el problema clásico de 'cuenta vacía' antes de que su primera campaña despegue se compensa con guías de usuario útiles y visualmente agradables. Hay mucho espacio en blanco y claras llamadas a la acción guían a los nuevos usuarios a través de cada paso del proceso; en algunos casos, incluso incorporan un puntero sutilmente animado para indicar dónde hacer clic.

Diseño de interfaz de usuario: MailChimp

Las útiles llamadas a la acción evitan que te pierdas en MailChimp [Imagen: MailChimp]

05. Papel para iPad

Diseño de interfaz de usuario: papel para iPad

El papel está diseñado para ser de uso intuitivo [Imagen: FiftyThree]

Una aplicación ganadora de múltiples premios diseñada para ayudar a los usuarios a ser creativos de una manera más intuitiva y natural, Papel le permite dibujar con la punta de los dedos con un nivel de detalle sorprendente, aunque también funciona con un lápiz óptico si se requiere más precisión.

Diseñado exclusivamente para el tacto, el diseño de la interfaz de usuario de Paper no tiene botones ni configuraciones de las que preocuparse, solo una serie de herramientas especializadas. La versátil herramienta Dibujar estilo pluma estilográfica es gratuita, mientras que Sketch (lápiz suave), Contorno (marcador en negrita), Escribir (bolígrafo de tinta), Color (pincel de acuarela) y Mixer (mezclador de colores) vienen como compras dentro de la aplicación.

Diseño de interfaz de usuario: papel para iPad

En lugar de botones, Paper tiene un conjunto de herramientas especializadas [Imagen: FiftyThree]

06. Cosas

Disponible para Mac e iOS, Cosas es una popular aplicación de administración de tareas con un diseño galardonado que es intuitivo y fácil de aprender, basado en el concepto familiar de lista de tareas pendientes. Como señalan sus creadores, Cultured Code, la idea es hacerte la vida más fácil, después de todo.

El elegante y limpio diseño de la interfaz de usuario viene dividido previamente en listas para ayudarlo a categorizar sus tareas: las cosas urgentes van en 'Hoy', un poco menos urgente puede esperar hasta 'Siguiente', mientras que 'Programar' planea más adelante. Cada entrada captura información importante de una sola vez: título, notas y fecha de vencimiento, así como etiquetas si es necesario para ayudar a clasificar todo. Lo mejor de todo es que se puede acceder a la ventana de Entrada rápida desde cualquier lugar mediante un simple atajo de teclado, y todo se sincroniza automáticamente en el escritorio, iPhone y iPad.

07. Monitor de campaña: Cosmovisión

Diseño de interfaz de usuario: Campaign Monitor Worldview

Worldview presenta datos complejos de una manera accesible(Crédito de la imagen: Campaign Monitor)

Una idea maravillosamente original que da un giro atractivo a los datos de suscripción de correo electrónico, Monitor de campaña: cosmovisión superpone información sobre personas que abren, hacen clic y comparten sus comunicaciones en un mapa de Google en tiempo real para obtener información geográfica y personal.

La página de inicio presenta el concepto de una manera visual inmediata, con pines de ejemplo que se colocan en un mapa mundial, y la interfaz de la aplicación en sí es refrescantemente limpia, gira en torno al mapa y algunos menús básicos para controlar la configuración. Un gran ejemplo de diseño de interfaz de usuario, con iconografía simple y codificación de colores que identifican diferentes categorías de participación del usuario de un vistazo.

08. Figura

Diseño de interfaz de usuario: figura

La figura está diseñada para ayudarte a tocar melodías sobre la marcha [Imagen: Propellerhead]

Otro ejemplo más de diseño plano que hace que un diseño de interfaz de usuario potencialmente muy complicado se vea muy limpio e intuitivo, Figura es un sintetizador y caja de ritmos para iOS del desarrollador sueco Propellerhead, que también está detrás del software de producción musical de escritorio Reason.

Puede tocar las almohadillas de la pantalla táctil, mantener presionado el dedo y desplazar las ruedas rítmicas para obtener una variedad de sonidos diferentes, o deslizar el dedo por la pantalla para tocar diferentes notas en la escala. También hay ruedas para controlar el rango de notas con las que tiene que trabajar, el número de notas en melodías y líneas de bajo, y varias pestañas para ajustar el sonido de diversas formas.

09. Kennedy

Diseño de interfaz de usuario: Kennedy

Kennedy agrega contexto a sus recuerdos [Imagen: Brendan Dawes]

No hay nada como desplazarse por un montón de viejas actualizaciones de Twitter y preguntarse en qué demonios estaba pensando cuando publicó eso hace seis meses. La falta de contexto a menudo puede significar que algo que tenía perfecto sentido en ese momento puede volverse sin sentido meses o años después.

Kennedy , una aplicación de diario de la siempre excelente Brendan Dawes , está diseñado para agregar contexto a sus recuerdos. Puede usarlo para crear notas de texto de lo que está haciendo, al igual que podría escribir en Facebook o Twitter, y tal vez agregar fotos a las notas mientras lo hace. Sin embargo, el toque inteligente es que Kennedy agrega una capa adicional de contexto al agregar su ubicación, la fecha y la hora, las condiciones climáticas actuales, un titular de noticias y, si está escuchando música en su teléfono en ese momento, el nombre de la pista que estás escuchando.

Diseño de interfaz de usuario: Kennedy

Los detalles agregados de Kennedy son una rica alternativa a las notas secas [Imagen: Brendan Dawes]

El resultado es que en lugar de una nota seca que realmente no significará mucho en el futuro, captura un momento en particular con un contexto más completo, completo con muchas indicaciones que pueden ayudar a recuperar un recuerdo con mucho más detalle. Y el diseño limpio y la interfaz de usuario inteligente de Dawes hacen que todo sea simple y atractivo.

Artículos relacionados: