UID | Diseño de interfaces de usuario

Material Design, el sistema de diseño de Google, ha evolucionado desde su primera versión, en 2014, hasta su reciente versión 3, introducido con Android 12 y su enfoque en Material You, que permite personalización dinámica del color. En este artículo es una breve reseña sobre el uso del color en M3, aplicado en Android, con referencias a los colores dinámicos, estados de los componentes, y herramientas como Theme Builder, pensadas para mejorar la accesibilidad y experiencia del usuario, dos aspectos clave para el diseño de interfaces modernas, adaptables y funcionales.

OKLCH es un modelo de color perceptual diseñado para representar colores de manera más intuitiva y consistente en los entornos de diseño dirigidos a medios digitales.

Muchas veces considerada un aspecto secundario del diseño de experiencias del usuario, la accesibilidad resulta clave para el diseño centrado en el usuario... ¡veamos por qué!

Hace unas horas, en el área de Desarrollo web, creamos el Grupo Mustache, dedicado a compartir experiencias, realizar prácticas sobre este sistema de plantillas ligero y sin lógica (logic-less) utilizado en diversas tecnologías y lenguajes de programación. Compartimos lecciones y ejemplos, trabajaremos sobre las buenas prácticas para integrarlo en proyectos web y más. ¡Consúltanos sobre como unirte comienza a aprender Mustache, en comunidad!

User Inyerface un juego sobre diseño de experiencia de usuario (UX) creado por la empresa Bagaar con el propósito principal de mostrar de manera extrema cómo un mal diseño de interfaz puede afectar al usuario.

Design Systems Database, un sitio web que que recopila y presenta sistemas de diseño de empresas líderes y de equipos de renombre en el sector de UID.

Previewed es un sitio que ofrece variedad de mockups animados, especialmente, a la presentación de proyectos relacionados con el diseño de interfaces de usuario, exportables en formato de video (gratis para videos de 720p).

En el sitio oficial de Previewed (https://previewed.app/), encontrarás, entre otros:

• Generador de videos para iPhone: https://previewed.app/iphone-mockup-generator/
• App Store Screenshot Generator: https://previewed.app/app-store-screenshot-generator
• App Promo Videos (permite generar videos UI a partir de plantillas, con un editor online muy práctico e intuitivo): https://previewed.app/app-promo-video/
• Animaciones 3D: https://previewed.app/mockups/3d/animations

Además de los recursos anteriores, el sitio dispone de un interesante editor de mockups para la presentación de capturas de pantallas:

• App Store Screenshots: https://previewed.app/mockups/screenshots/appstore
• iPhone Mockups: https://previewed.app/mockups/apple/iphone
• MacBook Mockups: https://previewed.app/mockups/apple/mac/macbook
• iPad Mockups: https://previewed.app/mockups/apple/ipad
• iMac 24" Mockups (2021 Update): https://previewed.app/mockups/apple/mac/imac-2021
• Google Play Store Screenshots: https://previewed.app/mockups/screenshots/playstore
• Mockups con vistas editables en 3D: https://previewed.app/mockups/3d/images
• Recursos para promociones en redes sociales (social media marketing) que puedes crear desde cero, o a partir de plantillas:
• Mockups para Instagram: https://previewed.app/mockups/social-media/instagram
• Mockups para Facebook: https://previewed.app/mockups/social-media/facebook
• Mockups for Twitter: https://previewed.app/mockups/social-media/twitter
• Mockups for LinkedIn: https://previewed.app/mockups/social-media/linkedin

En muchos de los casos, una vez que eliges la plantilla, el editor online de Previewed te permitirá editar los contenidos, tamaños y colores de fuentes, el modelo del dispositivo y fondos, entre otros parámetros.

#uid #mockups #mockupsUI #video ?#recursosDeClases? #recursosUI

Imagen de cabecera: Captura parcial de pantalla desde la página del generador de mockups para iPhone (https://previewed.app/iphone-mockup-generator/)

Si estás comenzando con el diseño de interfaces de usuario para iOS y otros entornos dentro del ecosistema de Apple, te comparto el enlace a un video en YouTube donde se explican aspectos indispensables para comprender el proceso desde las bases: https://www.youtube.com/watch?v=bUj5-O7jhOE

Si tienes problemas con el inglés, el video dispone de subtítulos, y aunque ya tiene 2 años desde su publicación, te recomiendo mirarlo porque abarca el diseño de interfaces para iOS desde las bases de las HIG, utilizando inclusive su documentación oficial (https://developer.apple.com/design/human-interface-guidelines/).

Si a futuro piensas desarrollar tu carrera en el UID siguiendo las HIG, te recomendaría que sigas el canal del autor (https://www.youtube.com/@code-with-karma/videos).

Necesitas recursos de Figma para el diseño de interfaces de usuario sobre las HIG, búscalos en la cuenta oficial de Apple, dentro de Figma Community: https://www.figma.com/@apple

¿Debatimos sobre estos y otros temas de sobre el diseño de interfaces de usuario?

Estamos en contacto :)

Plácido.

#hig #uid #iOS #ui

System Usability Scale (SUS)

Introducción

Se trata de una herramienta de evaluación de usabilidad, desarrollada por John Brooke en 1986, que ofrece una medida rápida y confiable de la facilidad de uso de un sistema. A partir de cuestionario de diez ítems, basados en la Escala Likert, que los usuarios deben responder reflejando su experiencia con la interacción después de un sistema, producto o servicio, eligiendo un valor, de entre 5, que van desde totalmente de acuerdo hasta totalmente en desacuerdo.

Los resultados finales se traducen en un puntaje que va de 0 a 100, en el que mayor puntaje, representa mayor usabilidad, sin embargo, es importante no confundir este puntaje con un porcentaje del valor de usabilidad.

Nota: En Formación Gráfica tienes un artículo completo sobre la Escala SUS, con sus 10 preguntas, su modo de uso, la forma de obtener esta puntuación final, y la normalización de resultados: https://www.formaciongrafica.net/blog/tutoriales-online/uxd/system-usability-scale-sus/

Beneficios de implementar SUS

En la actualidad, tanto la innovación como la eficiencia son fundamentales para el éxito de cualquier proyecto o empresa, y es aquí donde la aplicación de la Escala SUS se convierte en una herramienta valiosa no solo en el ámbito digital, sino en sistemas en general, debido a que, entre otras:

• Proporciona una métrica sencilla y objetiva sobre la usabilidad de un sistema.
• Permite la mejora continua del sistema si se implementa cíclicamente, lo que facilita el seguimiento de la evolución en la usabilidad del sistema, producto o servicio, a lo largo del tiempo, basándose en la atención a la percepción y necesidades del usuario.
• Puede ser aplicada tanto con usuarios finales como en procesos internos, para atender a las necesidades del usuario interno de una empresa o institución, impactando positivamente en la eficiencia operativa y la satisfacción de sus colaboradores.

Enlaces relacionados

• John Brooke: https://uxpajournal.org/author/john-brooke/
• Escala Likert: https://es.wikipedia.org/wiki/Escala_Likert
• System Usability Scale (SUS): https://www.formaciongrafica.net/blog/tutoriales-online/uxd/system-usability-scale-sus/
• Aprende UX, con fundamentos, con nuestros talleres personalizados:
• https://www.formaciongrafica.net/capacitaciones/talleres-a-medida/taller-el-ux-mas-alla-del-ui/

Plácido Luna.

Durante esta semana estuvimos trabajando sobre el prototipado de interfaces de usuario, tanto para iOS como para Android.

Uno de los asuntos más importantes en este sentido radica en saber, de manera fundamentada, los requerimientos necesarios para prototipar, de manera correcta, para uno y otro entorno. Más específicamente, hablamos sobre las Human Interface Guidelines de Apple, y de Material Design 3, impulsadas por Google:

• Human Interface Guidelines (documentación oficial):
• https://developer.apple.com/design/human-interface-guidelines/
• Material Design 3 (documentación oficial):
• https://m3.material.io/

También, compartimos varios recursos disponibles en la Comunidad de Figma, fundamentales para optimizar nuestros procesos de prototipado:

• Cuenta de Apple en Figma Community: https://www.figma.com/@apple
• Design Kit oficial de Apple para iOS 17 and iPadOS 17:
• https://www.figma.com/community/file/1248375255495415511
• Apple Design Resources - App Icon Production Templates:
• https://www.figma.com/community/file/1250144691121363237
• Cuenta de Material Design en Figma Community: https://www.figma.com/@materialdesign
• Material 3 Design Kit:
• https://www.figma.com/community/file/1035203688168086460
• Android UI Kit:
• https://www.figma.com/community/file/1237551184114564748
• Material Design Icons:
• https://www.figma.com/community/file/1014241558898418245
• Material Theme Builder, para Material Design 3:
• https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder
• Visualizing dynamic color in your app with Material Design:
• https://www.figma.com/community/file/1035197037666593721

También hablamos sobre una de las formas contenedoras para los íconos de un sistema: El squircle. ¿Lo conocías? ¿Conoces sus cualidades geométricas y el posible beneficio al momento de aplicar degradados sobre superficies con esta forma?

Capacítate con nuestros talleres a medida (https://www.formaciongrafica.net/capacitaciones/talleres-a-medida/) y asesorías personalizadas de diseño (https://www.formaciongrafica.net/capacitaciones/asesorias-personalizadas/), y forma parte de nuestra Comunidad Creativa FG, para seguir aprendiendo, con fundamentos.

Saludos y bonita jornada para ti.

Plácido Luna.

#iOS #materialDesign #materialDesign3 #md #md3 #android #humanInterfaceGuidelines #apple #google #diseñoUI #prototipadoUI #talleresPersonalizados #talleresUI #themeBuider #materialThemeBuider #dynamicColor #material3DesignKit #androidUIkit #materialDesignIcons #íconos