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.
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
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
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
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
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 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
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