UID | Diseño de interfaces de usuario

  • View
  • More
Add new...
 
 
Plácido Luna
·
Added a post to , UID | Diseño de interfaces de usuario
Wireframing Starter Kit | Wireframe Starter Kit (Recursos UI para Figma)

UI Wireframing Starter Kit para Figma

Un UI Kit para el prototipado de baja fidelidad (wireframing), especialmente orientado a dispositivos móviles, con más de 50 componentes y 100 variantes:

Entre otros:

  • Íconos
  • Botones
  • Campos de entrada
  • Menús
  • Selectores de fecha y hora
  • Barra de búsqueda
  • Casillas de verificación
  • Pestañas de texto y pestañas de iconos
  • Alertas
  • Paginación
  • Reproductor de música y video
  • Marcos para dispositivos iOS, Android y Web

El kit incluye, además, bloque de ejemplo que pueden resultarte de utilidad, en caso de que estés comenzando el el diseño de interfaces de usuarios:

Duplica el recurso en tu cuenta de Figma, aquí: https://www.figma.com/community/file/1088059168988686975

Imagen de cabecera: Captura de pantalla desde la página del recurso compartido en la Comunidad de Figma.

#PrototipadoIOS #PrototipadoMD #RecursosClases #RecursosDeClases #MaterialCursos #CursosUID #CursosIxD #IxD

Plácido Luna
·
Added a post to , UID | Diseño de interfaces de usuario
Mobile Design System Starter 2.0 (Recursos UI para Figma)

UID para dispositivos móviles: Starter Kit 2.0

Si diseñas interfaces de usuario para dispositivos móviles, te comparto este UI Kit con recursos útiles como punto de partida, tanto para iOS como para Material Design:

Es importante destacar que, si bien es cierto que el kit es un excelente recurso complementario, no sustituye a los kits oficialmente compartidos (ver enlaces relacionados).

Duplica el recurso en tu cuenta de Figma, aquí: https://www.figma.com/community/file/905721148293392121

Enlaces relacionados:

Perfiles oficiales en la Comunidad de Figma:

Imagen de cabecera: Captura de pantalla parcial desde la página del recurso compartido.

#materialCursos #MaterialCursos

Plácido Luna
·
Added a post to , UID | Diseño de interfaces de usuario
Accesibilidad en el UID con Figma: Dos plugins recomendados

Accesibilidad en Figma | Mejores plugins para accesibilidad web y móvil

Comparto este video del canal de Mokkap (https://www.youtube.com/@mokkapp) en el que, con alguna observación a corregir sobre los niveles de accesibilidad mencionados, presenta de manera bastante clara, dos plugins de Figma relacionados con este tema:

URL del video recomendado: https://youtu.be/3lryfC4MpNM?si=RhM0AAbCUfdHrxmg

Para conocer tu interés en este tipo de recursos para Figma, dejo una encuesta al pie de esta entrada.

Saludos y bonita jornada para ti.

Plácido.

#VideosUX #VideosUI #VideosRecomendados

Plácido Luna
·
Added a post to , UID | Diseño de interfaces de usuario
SUS (System Usability Scale), lo que debes saber

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.

Plácido Luna
·
Added a post to , UID | Diseño de interfaces de usuario
Migra a Material Design 3

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:

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.

Plácido Luna
·
Added post to , UID | Diseño de interfaces de usuario

Tal vez esto te parezca evidente, pero recuerda:

Por más que la veas en un dispositivo móvil, las páginas de un sitio web no son aplicaciones nativas de ese dispositivo. Si diseñas para web debes considerar las retículas, estilos y demás variables asociadas con el framework que estés usando, conversa siempre sobre este aspecto con el equipo de desarrollo (desarrolladores si trabajas bajo SCRUM).

Es más frecuente de lo que imaginas este tipo de confusiones entre quienes se incorporan recién al diseño de interfaces de usuario, aplicando retículas de las HIG (https://developer.apple.com/design/human-interface-guidelines/) o de MD (https://m3.material.io/) al diseño de sus páginas web cuando prototipan para pequeños dispositivos móviles, obviando frameworks tales como

Como te decía antes, recuerda conversar con el equipo de desarrollo para determinar el framework que se utilizará. Los ya mencionados son solo algunos ejemplos, además de otros completos y complejos como React, Angular, Django, Flask, Laravel, Symfony o Vue.js, entre otros.

Saludos y bonita jornada para ti.

Plácido.

#Frameworks #FrameworksWeb #Bootstrap  #Tailwind #AntDesign #Milligram #SemanticUI  #UI #UID #notasDeClases #fuentesDeInvestigación #Motivación

Plácido Luna
·
Added a post to , UID | Diseño de interfaces de usuario
Tres formas de crear un precargador

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

¡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

#ui #uid #RecursosUI #RecursosMD #Animación #AnimacionesEnFigma #Motion #MotionMD3 Motion #IxD #Ix #DiseñoDeInteracción #MaterialCursosIxD #MaterialCursosUID

Plácido Luna
·
Added a post to , UID | Diseño de interfaces de usuario
Bootstrap 5 UI Kit

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:

Nota: La cabecera de esta publicación corresponde a una captura de pantalla ilustrativa desde la página del recurso compartido.

#recursosDeClases #materialDeApoyo #materialCursos #UID #IxD #retículas #retículasWeb #retículasBootstrap #retículasBootstrap5

Plácido Luna
·
Added a post to , UID | Diseño de interfaces de usuario
Bootstrap 5 Design System - UI Kit

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:

Nota: La cabecera de esta publicación corresponde a una captura de pantalla ilustrativa desde la página del recurso compartido.

#recursosDeClases #materialDeApoyo #materialCursos #UID #IxD #retículas #retículasWeb #retículasBootstrap #retículasBootstrap5

Plácido Luna
·
Added a post to , UID | Diseño de interfaces de usuario
Crea y anima un carousel MD3 en Figma

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.

#tutorialesUI #ui #uid #RecursosUI #RecursosMD #MaterialCursosIxD #MaterialCursosUID