![](https://i.imgur.com/l5fX4W9.png) # Intro al User Interface ![](https://media.giphy.com/media/tWcdsU5gvsXw4/giphy.gif) ## Recuerda, el UX no es UI ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_2bfb8ef66133c5fa8576998037d4276f.png) | UX | UI | | :------: | :-----------: | | Hace que las interfaces sean útiles | La interfaz de usuario hace que las interfaces sean hermosas | | Ayuda a los usuarios a lograr objetivos | UI hace conexiones emocionales | | Se emplea en productos, interfaces y servicios | Solo se refiere a las interfaces | | Debe hacerse primero | La interfaz de usuario debe hacerse después de UX | ## Diseño UI Como ya sabemos, el objetivo del Diseño de UI es asegurar que la interfaz proporcione elementos que sean fáciles de acceder, entender y utilizar. Pero, ¿cómo lo hacemos? El Diseño de UI es en realidad la combinación de tres elementos principales: - Diseño Visual - Diseño de Interacción - Arquitectura de Información En las etapas previas del proceso de diseño UX, hemos establecido la estrategia, alcance, estructura y esqueleto de la experiencia del usuario. Ahora, necesitamos traducir esta información en un producto visual y tangible. Este producto final reunirá todos los conceptos y hallazgos de las etapas previas. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7cb4e6eb034c86fc9bf47041bd235c0f.jpg) ## Fundamentos de una Interfaz de Usuario Las UIs exitosas permiten a los usuarios completar sus tareas sin "interferir". Esto evita los costos de capacitación y soporte al favorecer la participación y satisfacción del usuario. El primer paso en el diseño de páginas web es aprender cómo piensa el usuario. ¿Qué quieren realmente los usuarios? En general, quieren calidad y credibilidad. Cuando las personas están en línea, son típicamente impacientes. Van a *'escanear'* la página en lugar de leer todo el contenido y elegirán opciones satisfactorias en lugar de opciones óptimas. Para cumplir con estos objetivos, los diseñadores de UI necesitan estos elementos para construir las pantallas de la aplicación: ### Puntos, líneas y formas Piensa en cualquier forma. Los bloques de construcción básicos son puntos, líneas (puntos infinitos) y formas (la unión de múltiples líneas). Con estos tres elementos puedes crear cualquier elemento que desees. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_f8cd42529eb140a421654c30e2a2b73c.gif =400x) > [name=Extracto de José Torre] > ### Color Usamos el color para agregar significado e intención a nuestros diseños. El color es uno de los elementos que mejor define el "estado de ánimo y estilo" de la aplicación. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_9fb81f2bd8bd386ed15acf26726b42b1.gif) ### Tipografía La tipografía es el tipo de letra y las fuentes que utilizaremos para el contenido. Hay miles de tipos de letra diferentes para elegir. ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_c6980bf749d566e9e997cbfd56c00f09.gif](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_c6980bf749d566e9e997cbfd56c00f09.gif) ### Alineación, Espaciado y Cuadrículas Debes considerar cómo se relaciona cada elemento entre sí (alineación) y dar el espacio preciso a cada elemento (espacio). Una cuadrícula es una serie de líneas verticales y horizontales que se utilizan para dividir una página formando la base de un enfoque modular y sistemático para la disposición. Las cuadrículas se utilizan para hacer el proceso de diseño más rápido y garantizar la consistencia visual entre vistas relacionadas de tu diseño. ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_bb168af607a74aff97fc11fa5b63fab2.gif](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_bb168af607a74aff97fc11fa5b63fab2.gif) ### Consistencia, Equilibrio y Ritmo La información, el contenido y los elementos en un diseño web deben presentarse en el momento adecuado. Para hacerlo, necesitamos aprender a controlar el flujo de tu composición. Este flujo determina cómo el ojo mira un diseño: dónde mira primero, dónde se detiene, etc. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_8b24833d91743c1f2efecf422eaa5ad0.gif) ### Estética La estética aparece cuando hacemos que nuestros elementos y todo el diseño sean algo más que utilitario y funcional. Son los detalles adicionales que se ponen para hacerlos visualmente atractivos. La estética es la parte artística del diseño de la interfaz de usuario. ### Concepto o Historia Esta es la idea detrás de tu diseño. El mensaje principal que deseas enviar al usuario. Esta idea estará en la mente de nuestros usuarios cuando usen nuestro producto. ![https://media.giphy.com/media/qQ0x4bfZgxtRu/giphy.gif](https://media.giphy.com/media/qQ0x4bfZgxtRu/giphy.gif =400x) ## Cosas a tener en cuenta al diseñar interfaces [Usability.gov](https://www.usability.gov/what-and-why/user-interface-design.html) nos da algunas cosas a tener en cuenta: - **Mantén la interfaz simple.** Las mejores interfaces son casi invisibles para el usuario. Evitan elementos innecesarios y son claras en el lenguaje que utilizan en etiquetas y en los mensajes. . “El verdadero problema con la interfaz es que es una interfaz. Las interfaces se interponen. No quiero centrar mis energías en una interfaz. Quiero centrarme en el trabajo... No quiero pensar en mí mismo como usando una computadora, quiero pensar en mí mismo como haciendo mi trabajo". > [name=Donald Norman] > ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_90dd734c2785d37b31de7fe23b148a2a.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_90dd734c2785d37b31de7fe23b148a2a.png =200x) *El feed de noticias de Twitter presenta solo la información necesaria. Observa cómo se simplifica la información de un tweet en una tarjeta. Además, las interacciones que un usuario puede hacer con un tweet en particular se resumen (responder, retuitear, me gusta o mensaje directo al usuario que publicó el tweet). ¡Eso es todo lo que puedes hacer con alrededor de 140 caracteres!* --- - **Crear consistencia y utilizar elementos de UI comunes**. Al utilizar elementos comunes en su UI, los usuarios se sienten más cómodos y pueden hacer las cosas más rápidamente. También es importante crear patrones en el lenguaje, el diseño y la disposición en todo el sitio para ayudar a facilitar la eficiencia. Una vez que un usuario aprende cómo hacer algo, debe poder transferir esa habilidad a otras partes del sitio. ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_770bad7e1199ca6d6f2d1561d3e8de69.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_770bad7e1199ca6d6f2d1561d3e8de69.png =200x) *Photoshop para móvil utiliza el carrusel común para mostrar los diferentes filtros que se pueden aplicar a una imagen. Mira la simplicidad de los iconos. ¡Es natural entender cómo agregar texto, mejorar la calidad de la imagen o incluso compartirla! (Cuando aplicas estas correcciones rápidas, el icono se resalta en azul)* --- - **Ser intencional en la disposición de la página**. Considere las relaciones espaciales entre los elementos de la página y estructure la página en función de la importancia. La colocación cuidadosa de los elementos puede ayudar a llamar la atención sobre las piezas de información más importantes y puede ayudar a la lectura y la legibilidad. ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_c6fa8bc98380bebdba737c5ecde50565.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_c6fa8bc98380bebdba737c5ecde50565.png =400x) *¡Amazon muestra mucha información! Por lo tanto, es muy importante usar el espacio correctamente. Mira el espacio preferido que le dan a los nuevos productos: PRIME y ALEXA. Además, a primera vista, tienes información personalizada a través de tus categorías principales... Con el tiempo, la barra de navegación de Amazon se ha vuelto menos importante, más pequeña y más oscura!!!* --- - **Usar la estrategia de color y textura.** Puede dirigir la atención hacia o alejar la atención de los elementos utilizando color, luz, contraste y textura a su favor. ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_95e35b6ded561abdd3c7ca11dbd737d8.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_95e35b6ded561abdd3c7ca11dbd737d8.png =200x) *El calendario del iPhone te permite personalizar tus citas con colores para resaltarlas. Sin embargo, su rojo/naranja se utiliza para resaltar un elemento específico en la UI. Mira la diferencia en textura y color entre "¿qué día es hoy?" Y "¿qué día estoy viendo?"* --- - **Usar la tipografía para crear jerarquía y claridad.** Considere cuidadosamente cómo usa la tipografía. Tamaños, fuentes y disposición diferentes del texto para ayudar a aumentar la legibilidad y la lectura. ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_dcc2ce53cdb4b8a898b7c4e8a8ad0bbf.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_dcc2ce53cdb4b8a898b7c4e8a8ad0bbf.png =200x) *Blinkist te permite leer las lecciones clave de más de 2000 libros de no ficción en 15 minutos o menos. Mira cómo usan tamaños, fuentes y disposiciones diferentes de la misma tipografía para diferenciar títulos, autores, descripciones de libros y secciones de la aplicación* --- - **Asegurarse de que el sistema comunique lo que está sucediendo.** Siempre informe a sus usuarios sobre la ubicación, acciones, cambios de estado o errores. El uso de varios elementos de UI para comunicar el estado y, si es necesario, los próximos pasos puede reducir la frustración para su usuario. ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_9b46e90c078ea6744d6ef6b05899e2ea.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_9b46e90c078ea6744d6ef6b05899e2ea.png =200x) *LinkedIn permite a los usuarios saber en tiempo real cuándo se agrega una noticia al feed de noticias: puede actualizar el feed haciendo clic en el icono de Inicio o en el botón Nuevas publicaciones. Además, observe la flecha en el botón Nuevas publicaciones. ¿No predice la animación?* --- - **Piensa en los valores predeterminados.** Al pensar cuidadosamente y anticipar los objetivos que las personas llevan a su sitio, puede crear valores predeterminados que reduzcan la carga sobre el usuario. Esto se vuelve particularmente importante cuando se trata del diseño de formularios, donde puede tener la oportunidad de tener algunos campos preseleccionados o completados. ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_3c9b0d62358514b60477eef6ea8b8ac1.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_3c9b0d62358514b60477eef6ea8b8ac1.png =400x) *Los bancos usan esto mucho. Cuando tienes que crear una transferencia de dinero, puedes hacer clic en "Recuperar anterior". Los datos que ya completaste desde una transacción anterior se insertan automáticamente en los campos correspondientes. Es realmente útil porque los usuarios evitan cometer errores... ¡y nadie quiere cometer errores cuando se habla de dinero!* --- # Analizando la estética # Un buen diseño no es magia ... y tampoco es arte. ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_b7f40e00e5f98fc37c12dfc0ee7be3fa.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_b7f40e00e5f98fc37c12dfc0ee7be3fa.png) :::warning **NOTA LATERAL**: Aunque no es un diseñador UX/UI, Massimo Vignelli es uno de los diseñadores más completos de nuestra época. Recomendamos encarecidamente ver su documental **[Design is One](https://www.youtube.com/watch?v=qglaQekqrWU)**. ::: Muchas personas dicen que el diseño es subjetivo, pero eso no es necesariamente cierto. El arte es subjetivo. El diseño, por otro lado, es **abierto**. Puedes diseñar algo de muchas maneras diferentes, pero sus objetivos son claros. El diseño siempre debe considerar la pregunta: **"¿Mi diseño resuelve el problema?"** > Un ingeniero, si se le dan las coordenadas exactas para colocar píxeles de diferentes colores en lugares específicos, podría crear un sitio web o un anuncio hermoso simplemente siguiendo instrucciones; la mayoría de los proyectos de diseño tienen un conjunto detallado de instrucciones y la mayoría del diseño se basa en tendencias e influencias actuales. Un artista, por otro lado, nunca podría recibir instrucciones específicas para crear una nueva obra de arte caótica y única porque sus emociones y su alma dictan el movimiento de sus manos y los impulsos para el uso del medio. Ningún director de arte reprenderá a un artista por producir algo completamente único porque eso es lo que hace que un artista sea un artista y no un diseñador.” -- Craig Elimeliah > [Este artículo](https://www.webdesignerdepot.com/2009/09/the-difference-between-art-and-design/) señala algunas diferencias importantes entre el arte y el diseño: ### 1. El buen arte **inspira**. El buen diseño **motiva**. Una obra de arte surge de una vista, opinión o sentimiento que el artista tiene dentro de sí. Las obras de arte más renombradas y exitosas son aquellas que establecen el vínculo emocional más fuerte entre el artista y su audiencia. Cuando un diseñador se propone crear una nueva pieza, casi siempre tiene un punto de partida fijo. Podrían comenzar con un mensaje, una imagen, una idea o una acción. **Los diseños más exitosos son aquellos que comunican su mensaje de manera más efectiva y motivan a sus consumidores a llevar a cabo una tarea.** ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_6530048f8080a22018d0ce3588c288b6.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_6530048f8080a22018d0ce3588c288b6.png) ### 2. El buen arte es **interpretado**. El buen diseño es **entendido**. Aunque un artista se propone transmitir un punto de vista o una emoción, eso no significa que el punto de vista o la emoción tengan un solo significado. El arte se conecta con las personas de diferentes maneras, porque el arte puede ser interpretado de manera diferente. El diseño es todo lo contrario. Muchos dirán que si un diseño se puede "interpretar", ha fallado en su propósito. **Si su diseño comunica un mensaje que no sea el que pretendía, y su espectador va y hace algo basado en ese otro mensaje, entonces no ha cumplido con su requisito.** ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e91c6cca94f15bfde7b081aed447c06c.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e91c6cca94f15bfde7b081aed447c06c.png) ### 3. El buen arte envía un **mensaje diferente** a todos. El buen diseño envía el **mismo mensaje** a todos. Los artistas no crean su trabajo para vender un producto o promocionar un servicio. Lo crean únicamente como medio de expresión personal para que pueda ser visto y apreciado por otros. Una composición visual destinada a cumplir una tarea específica o comunicar un mensaje particular, por muy hermosa que sea, no es arte. Es una forma de comunicación, simplemente **una ventana al mensaje que contiene**. ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_a7508d1ba62f1536637ab65a76193f07.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_a7508d1ba62f1536637ab65a76193f07.png) :::success Lo que nos lleva a la diferencia más importante de todas... ::: ### El buen arte es un **talento**. El buen diseño es una **habilidad**. El verdadero valor de un artista está en el talento (o la habilidad natural) con el que nacen. Hay cierta superposición aquí: los buenos artistas ciertamente tienen la habilidad, pero la habilidad artística sin talento innato es, sin duda, inútil. El diseño, sin embargo, es realmente una habilidad que se enseña y se aprende. **No tienes que ser un gran artista para ser un gran diseñador; solo tienes que poder lograr los objetivos del diseño.** Algunos de los diseñadores más respetados del mundo son más conocidos por sus estilos minimalistas. No usan mucho color o textura, pero prestan gran atención al tamaño, la posición y el espacio, todo lo cual se puede aprender sin talento innato. ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_d0ec174fdbf4cb8cab98744912dcae8f.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_d0ec174fdbf4cb8cab98744912dcae8f.png) ## Desglosando la estética Entonces, si el diseño no es arte, ¿qué es lo que hace que algunos diseños se vean mejor que otros? Echemos un vistazo a las siguientes imágenes de diseño de interiores... ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_c2071c298ea1d5791feb7e13624be1b0.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_c2071c298ea1d5791feb7e13624be1b0.png) ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e5f3a4f7254cfeabc56ebe481435f733.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e5f3a4f7254cfeabc56ebe481435f733.png) :::info **Pregunta de discusión:** ¿Recuerdas el ejercicio previo de trabajo en el que observamos diseños buenos y malos y enumeramos las razones por las que nos hizo sentir de esa manera? ¡Intentémoslo con el diseño de interiores! ### ¿Qué crees que hace que esta habitación se vea hermosa? ::: Piense en los principios y elementos del diseño visual que aprendimos durante el pretrabajo. - **elementos:** línea, forma, forma, color, textura y espacio, patrones - **principios:** equilibrio, proximidad, alineación, repetición, contraste y unidad/armonía :::info **¿Puedes encontrar ejemplos de esto en el diseño anterior?** ::: Aquí está la clave: lo que hace que un diseño sea visualmente atractivo se conoce como **ESTÉTICA**. Lo que los seres humanos perciben como *hermoso* generalmente está determinado por un conjunto específico de factores que se hacen correctamente. Debido a que el diseño es de naturaleza abierta, crear un diseño "bueno" puede parecer abrumador. ¿Por dónde empiezo? ¿Cuál es la solución correcta? Cuando se trata de diseño visual, hay ciertas reglas de oro (también conocidas como *heurísticas*) que te guiarán en la dirección correcta. Por eso decimos que el diseño es una habilidad que se aprende. Con experiencia y práctica, estas heurísticas estéticas se convertirán en algo natural para ti. Cuando te enfrentes a un problema, tu cerebro automáticamente usará estas "reglas de oro" para crear una solución sólida. **Veamos de nuevo la sala de estar y analicemos qué funciona bien en esta composición:** ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e7daa1ad58e31236723488027d69ab6e.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e7daa1ad58e31236723488027d69ab6e.png) Aquí hay algunas razones clave por las que muchas personas encontrarán esta habitación hermosa: 1. **Alineación** - Todo está perfectamente alineado, por lo que se experimenta una sensación de orden y tu ojo sabe cómo moverse a través del espacio. - Los muebles se alinean con la alfombra. El televisor se alinea con el sofá. La madera en la pared del televisor se posiciona verticalmente, al igual que la unidad de TV. - Hay una sensación de armonía. 2. **Espacio en blanco** - Espacio vacío, aire libre - Hace que los elementos en él, o rodeados por él, se vean **presentados** y **valiosos**. Esto evoca una sensación de elegancia. - Da énfasis a los elementos importantes y a la habitación. - Se ha pensado y esfuerzo se ha puesto en decidir qué cosas valen la pena presentar. 3. **Consistencia** - El fundamento que dice "estas cosas pertenecen juntas" - Tamaño, estilo visual, forma, distancia, espaciado - Ejemplo: el estante de libros en la parte posterior tiene un patrón consistente, el piso y el techo se reflejan mutuamente, enmarcando todo lo que hay entre ellos, las dos sillas son iguales y están espaciadas uniformemente. Están juntas para que sepas que son un grupo. 4. **Diseño** - El diseño es más que solo lo que se ve bien. Se trata de lo que es funcional. - Hay elementos de usabilidad que te limitarán y limitarán tus opciones, cómo manejes esto determinará la calidad de tu diseño. - Ejemplo: en esta sala, puedes ver claramente cómo se diseñó el flujo de tráfico. Las opciones de diseño de los muebles están limitadas por el espacio, sin embargo, los muebles se colocan de manera que tiene sentido para el contexto. - Las decisiones de diseño son decisiones de UX - ¿Cómo se relaciona la información entre sí? - ¿Cómo se relaciona con los modelos mentales de los usuarios? - ¿Cómo se relaciona con el contexto en el que se utilizará? 5. **Color** - Los tonos de escala de grises y los tonos neutros siempre dan una sensación de elegancia y crean una sensación moderna, y se usan colores brillantes para acentuar. :::info Ahora apliquemos esto al diseño digital. ¿Puedes identificar qué hace que este sitio sea estéticamente agradable? ::: ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_89be050fe271d27beab26d46dd195da3.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_89be050fe271d27beab26d46dd195da3.png) Aunque es posible que no *te encante* este diseño, es seguro decir que no es doloroso de mirar y que está bien diseñado. Esto es lo que queremos decir cuando decimos que aunque el diseño es **abierto**, no es realmente subjetivo. Entonces, para aquellos de ustedes que no se consideran "talentosos" o "dotados", ¡no se preocupen! ¡Esta semana se trata de entrenar tu ojo y aprender consejos y trucos que te convertirán en un gran diseñador! ## El truco #1 para diseñar por encima de tu nivel. :::success **ITERACIÓN** ::: ![https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_592bc872d5fd874ee43bbf314352fba5.png](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_592bc872d5fd874ee43bbf314352fba5.png) **comando + d** será tu mejor amigo esta semana. ¡Lo que sea que estés trabajando, simplemente **duplica** y ponlo lado a lado, y pruébalo de al menos 5 maneras diferentes! ## Recursos adicionales - [5 grandes diferencias entre UX y UI](https://careerfoundry.com/en/blog/ux-design/5-big-differences-between-ux-and-ui-design/) - [Diseño de interfaz de usuario](https://www.usability.gov/what-and-why/user-interface-design.html) - [Principios de diseño de interfaz de usuario](http://bokardo.com/principles-of-user-interface-design/) - [10 principios básicos de diseño visual](https://blog.prototypr.io/10-basic-principles-of-visual-design-55b86b9f7241) - [Lecciones no intuitivas sobre ser un diseñador](https://medium.com/the-year-of-the-looking-glass/8-unintuitive-lessons-on-being-a-designer-ca7e97a572ee) - Este artículo de Julie Zhuo, VP de Diseño de Producto en Facebook, tiene muchos consejos e ideas excelentes sobre lo que se necesita para ser un buen diseñador.