Puede resultarte muy útil aplicar SUS, más allá de las webs o aplicaciones.
SUS te permitirá medir la usabilidad de un sistema, de manera confiable, simplificando otros métodos más caros y extensos de implementar, mejorando la experiencia de tus usuarios, así como los porcentajes de promotores naturales para tu empresa: https://www.formaciongrafica.net/blog/tutoriales-online/uxd/system-usability-scale-sus/
Artículo recomendado
Domina y aplica el NPS con éxito: https://www.formaciongrafica.net/blog/tutoriales-online/uxd/domina-y-aplica-el-nps-con-exito/
¡Saludos y bonita jornada para ti!
Plácido.
#UXD #NPS #SUS #Usabilidad #NetPromoterScore #IxD #Interacción #Ix #DiseñoDeInteracción
Prototipado para MD3 en Figma, con eficiencia
Comparto tres tutoriales, donde hablamos de las características de Material Design, desde su versión 2 hacia la última versión de este sistema de diseño, que te permitirá comprender, de manera global, la forma de prototipar en Figma para Material Design 3:
- MD2 vs. MD3 (1/3) | Material Design 2: https://www.formaciongrafica.net/blog/tutoriales-online/uid/md2-vs-md3-material-design-2/
- MD2 vs. MD3 (2/3) | Material Design 3: https://www.formaciongrafica.net/blog/tutoriales-online/uid/md2-vs-md3-material-design-3/
- Prototipado en Figma con MD3 (3/3): https://www.formaciongrafica.net/capacitaciones/tutoriales-online/uid/md2-vs-md3-material-design-3/
En cada enlace encontrarás los enlaces necesarios hacia la documentación oficial de Material Design y los videos correspondientes a cada tema.
Espero que los recursos compartidos, te resulten de utilidad :)
¡Saludos y bonita jornada para ti!
Plácido.
#ui #uid #materialDesign #materialDesign3 #prototipado #MD2 #MD3 #MD
Crea un efecto de precarga en Figma
El efecto Afder delay aplicado de manera creativa
Imagen superior: Captura de pantalla desde el video compartido.
El tutorial muestra, en pocos minutos, la técnica para crear un efecto de precarga utilizando Figma: https://www.youtube.com/watch?v=ARxUAjZCFuE
¿Cómo perfecciono la técnica?
Si bien el tutorial es claro y logra buenos resultados, recuerda que las animaciones en Material Design cumple algunos roles, y tienen comportamientos específicos en algunos casos. Toca entonces conocer las pautas que se incluyen en las guías de estilo de Material Design 3:
Animaciones con MD3
- Introducción: https://m3.material.io/styles/motion/overview
- Easing y duración: https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration
- Tokens: https://m3.material.io/styles/motion/easing-and-duration/tokens-specs
- Patrones de transición: https://m3.material.io/styles/motion/transitions/transition-patterns
- Aplicando transiciones: https://m3.material.io/styles/motion/transitions/applying-transitions
¡Gracias Alessandra por el enlace al videotutorial!
Saludos y bonita jornada.
Plácido.
Imagen de cabecera: Captura de pantalla ilustrativa tomada desde https://m3.material.io/styles/motion/overview
#recursosDeClases #materialDesign3 #MD3 #MD #materialDeApoyo #recursosDeApoyo #materialCursos #Figma #tutorialesUI #ui #uid #RecursosUI #RecursosMD #Animación #AnimacionesEnFigma #Motion #MotionMD3 #MD3Motion #IxD #Ix #DiseñoDeInteracción #MaterialCursosIxD #MaterialCursosUID
Prototipado web con Bootstrap 5 (ii)
Recursos desde la Comunidad de Figma (Figma Community)
Complementando un recurso compartido recientemente (Bootstrap 5 Design System - UI Kit | https://cc.formaciongrafica.net/publicacion/bootstrap-5-design-system-ui-kit), el que te recomiendo leer, comparto un segundo kit de componentes de Bootstrap 5, desde la comunidad de Figma: https://www.figma.com/community/file/876022745968684318
Beneficios de este recurso
- Muy bien ordenado y claro
- Una colección justa de componentes para Bootstrap 5 y una colección acotada de íconos, pero que pueden ser el conjunto exacto para trabajar tus prototipos de media fidelidad de forma rápida y eficiente, cuando esto sea suficiente.
Enlaces relacionados:
- Figma: https://www.figma.com/
- Community de Figma: https://www.figma.com/community/
- Recurso compartido: https://www.figma.com/community/file/1044316192441037087
- Nuestra cuenta en la comunidad de Figma: https://www.figma.com/@formac_grafica
Nota: La cabecera de esta publicación corresponde a una captura de pantalla ilustrativa desde la página del recurso compartido.
#Figma #Community #FigmaCommunity #recursosFigma #uid #Bootstrap #Bootstrap5 #prototipadoWeb #maquetaciónWeb #recursosDeClases #materialDeApoyo #materialCursos #UID #IxD #retículas #retículasWeb #retículasBootstrap #retículasBootstrap5
Prototipado web con Bootstrap 5
Recursos desde la Comunidad de Figma (Figma Community)
Como siempre mencionamos en clases, es importante mantener la coherencia interna de las páginas de un sitio web, así como los estándares existentes. Para ello, es importante determinar tanto el tipo de aplicación o sitio a diseñar, como los frameworks y guías de estilos que vayamos a emplear.
En esta ocasión te comparto "Bootstrap 5 Design System - UI Kit", un completo sistema de diseño (sí, para quienes saben mi posición respecto a otros sistemas de diseño en Figma, a los que suelo definir más correctamente como guías de estilos, en este caso sí me animo a llamarlo sistema de diseño): https://www.figma.com/community/file/1044316192441037087
¿Qué beneficios ofrece?
- Bien documentado
- Estilos tipográficos y de color
- Retículas, espaciados y layouts bien presentados
- Un completísimo kit de componentes para Bootstrap 5
Gracias Joel Ángel por el enlace original hacia el recurso en la comunidad de Figma.
Enlaces relacionados:
- Figma: https://www.figma.com/
- Community de Figma: https://www.figma.com/community/
- Recurso compartido: https://www.figma.com/community/file/1044316192441037087
- Nuestra cuenta en la comunidad de Figma: https://www.figma.com/@formac_grafica
Nota: La cabecera de esta publicación corresponde a una captura de pantalla ilustrativa desde la página del recurso compartido.
#Figma #Community #FigmaCommunity #recursosFigma #uid #Bootstrap #Bootstrap5 #prototipadoWeb #maquetaciónWeb #recursosDeClases #materialDeApoyo #materialCursos #UID #IxD #retículas #retículasWeb #retículasBootstrap #retículasBootstrap5
Crea y anima un carousel estilo Material Design 3
Técnica fácil en Figma
Imagen superior: Captura de pantalla desde el video compartido.
El tutorial muestra, en pocos minutos, la técnica para crear un carousel para Material Design 3 utilizando Figma: https://www.youtube.com/watch?v=ZBKS7stXSio
¿Cómo perfecciono la técnica?
Si bien el tutorial es claro y logra buenos resultados, toca conocer las pautas que se incluyen en las guías de estilo de Material Design 3: https://m3.material.io/components/carousel/guidelines
¡Gracias Alessandra por el enlace del tutorial!
Saludos y bonita jornada.
Plácido.
#recursosDeClases #materialDesign3 #MD3 #MD #materialDeApoyo #recursosDeApoyo #materialCursos #Figma #Carousel #tutorialesUI #ui #uid #RecursosUI #RecursosMD #MaterialCursosIxD #MaterialCursosUID
¿Cuáles son los componentes de Material Design 3 para enviar notificaciones y estados a los usuarios?
Esta fue una pregunta que surgió en clases en la tarde de hoy.
Rápidamente, la respuesta es la siguiente:
- Dialogs, para comunicaciones importantes y modales: https://m3.material.io/components/dialogs/overview
- Progress indicators, para informar del progreso de un proceso: https://m3.material.io/components/progress-indicators/overview
- Snackbars, para notificaciones de procesos de una aplicación, mostradas al pie de la pantalla: https://m3.material.io/components/snackbar/overview
- Tooltips, utilizado para ayudas contextuales: https://m3.material.io/components/tooltips/overview
¿Dudas, observaciones y comentarios adicionales sobre este tema? ¿Abrimos el debate?
Cabecera de este debate: Captura de pantalla parcial desde https://m3.material.io/components/dialogs/overview
#md3 #materialDesign3 #materialDesign #interacción #componentes #componentesMD #componentesMD3 #consultasDeClases #consultasUID #consultasIxD #UID #IxD #UI #Ix
En las sesiones de nuestros talleres de diseño de interacción (IxD) y diseño de interfaces de usuario (UID) de esta semana, trabajamos sobre los aspectos relacionados con el paseo cognitivo, su metodología y buenas prácticas, así como su utilidad al realizar un test de usuario utilizando Think Aloud, una herramienta de investigación cualitativa.
También trabajamos creando historias de usuario para ayudarnos a comprender las necesidades de los usuarios involucrados en nuestros proyectos, identificando así aquellas funcionalidades mejor influyan en la creación de valor de cada propuesta.
Si quieres saber más sobre estos y otros temas relacionados con el diseño de experiencia de usuario:
- Visita nuestra web: https://www.formaciongrafica.net/
- Nuestra propuesta: https://www.formaciongrafica.net/capacitaciones/
- Pódcast de Diseño: https://www.formaciongrafica.net/podcast/
También puedes acceder a los contenidos públicos de nuestros grupos y canales de diseño, o consultarnos aquí, https://www.formaciongrafica.net/contacto/, para saber más sobre nuestra Comunidad Creativa.
Saludos y bonita jornada para ti.
Plácido Luna.
#ixd #uid #interfacesDeUsuario #diseñoDeInteracción #thinkAloud #ui #historiasDeUsuario #talleresDeDiseño #talleresUID #talleresIxD
www.formaciongrafica.net 
Los UI Kits, las guías de estilos y sistemas de diseño (Design Systems) también formaron parte de nuestros talleres sobre IxD y UID de esta semana. Definimos cada concepto, sus características, aplicabilidad y beneficios de uso.
Visita los contenidos públicos de nuestros grupos y canales relacionados con estos y otros temas sobre diseño de experiencia de usuario, diseño de interacción, diseño de interfaces de usuarios, entre muchos otros temas.
Aunque aún permanecemos en fase beta, visita este enlace https://www.formaciongrafica.net/comunidad-creativa/ e infórmate sobre nuestra Comunidad Creativa FG, un espacio de apoyo a nuestros talleres personalizados de diseño.
Saludos y bonita jornada.
Plácido Luna.
#comunidadCreativa #comunidadCreativaFG #CCFG #ixd #uid #uiKits #guíaDeEstilos #sistemaDeDiseño #designSystem #sistemasDeDiseño
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