Conceptos básicos de prototipado
Qué aprenderás sobre diseño de prototipos móviles
Beneficios del Prototipado
Niveles de Fidelidad del Prototipado
Ténicas para estructurar información
Introducción a Patrones de Diseño
Introducción a UX Orientado a Objetos
Definición de Flujos de Tareas
Prototipado de Baja Fidelidad
Bocetado Rápido
Sistemas de Diseño
Principios de Atomic Design
Ventajas de Atomic Design
Prototipado de Mediana Fidelidad
Bocetado en Figma
Diseño de Wireframes (Mediana Fidelidad)
Librerías Compartidas de Componentes
Introducción a Componentes
Creación de Componentes
Detallado de Componentes
Estilos de Componentes
Librerías de Componentes Compartidas
Prototipado de Alta Fidelidad
Diseño de Mockups de Alta Fidelidad en Figma
Construcción de Prototipo Interactivo en Figma
Entregables de Diseño
Mejores prácticas de Entregables para Desarrollo usando Overflow y Zeplin
Exportación de Assets a Zeplin
Cierre
Cierre
Entrega feedback a los proyectos publicados en este curso
Contenido Bonus
Tips básicos para prototipar una idea
Cómo hacer prototipos funcionales de Apps iOS o Android
Crea un prototipo interactivo de tu aplicación
Mentoría expert
Los 10 pecados del Product Designer
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 21
Preguntas 3
Me tomó bastantes días hacer este ejercicio pero valió la pena totalmente. Ahora si a seguir practicando con más confianza. Gracias Misaello
crear el ui kit a partir de átomos, moléculas y organismos es una gran practica que no he visto en ninguna parte
💡**Recordatorio**
Átomos: Por si mismos no hace nada. Son la constitución mas básica de una interfaz.
Moléculas: Es la unión de dos o más átomos. Aún no tiene un uso por que no está dentro de un contexto donde podamos entender qué hace exactamente.
Organismos: Al juntar varias moléculas conformamos una forma más compleja que se convierte en una pieza coherente y con más sentido.
Templetes: Combinando varios organismos en una sola pantalla conseguimos obtener un contexto mucho mayor.
Página: Contiene color, imágenes y detalles que hacen que ese archivo ya esté listo para el desarrollo o en su defecto, test con usuarios o el equipo.
yo le hice a mi novia su pagina de su consultorio dental
Truco rápido. Para subir o bajar la opacidad solo necesitan jugar con las teclas numerales de su teclado. Si presionan 1 se cambiará al 10%, si presionan 2 se cambiará al 20% y así sucesivamente. Si tienen varios frames deben seleccionar el deseado.
En esta pagina https://material.io/ pueden encontrar muchos recursos y material para sus diseños:
Y en estos links pueden encontrar stock de icons gratis! https://fonts.google.com/icons
https://icons8.com/
falla demasiado la pagina, se traba, da error, desespera, y no, no es ni mi pc, ni mi internet
Entonces después de los wireframe creamos los componentes, o primero creamos los componentes y después terminamos de diseñar el wireframe?
Yo no conocia los componentes, hasta que vi que me pasaba mucho tiempo diseñando las cosas. Ahora me ayudan mucho desde el sistema de diseño
Excelente consejo de colocar componentes dentro de componentes. Increíble clase Misaello, ando aprendiendo bastante 😄
Los componentes se crean señalando todo los elementos damos clic en la parte superior donde dice crear componentes. Es importante tomar en cuenta que cada cambio que se haga en el componente maestro se va a reflejar en su instancia; pero no los cambios que se hagan en los componentes instancias.
Tengan en cuenta que si editan la instancia, y luego cambian el componente maestro, la intancia previamente modificada no cambiará, se quedará así. Es mejor saber esto antes de cometer errores a futuro.
En mi caso, descubrí por mi cuenta que agruparlos de esta forma resula más comodo y organizado.
Tambien se pueden usar en Figma ahora muchos plugins. por ejemplo pueden usar Iconify. Cuando tengo un cliente que quiere iconos muy personalizados lo vo haciendo en Illustrator, pero este plugin te ayuda bastante para los iconos tradicionales
https://www.figma.com/community/plugin/735098390272716381/Iconify
El uso de componentes e instancias facilita mucho el trabajo de UI, porque te ahorra tiempo y te facilita el trabajar de manera colaborativa. Las instancias dependen de su componente maestro, así que cualquier modificación a éste, afectará también a sus instancias, aunque en ciertas ocasiones también es posible deslindarlas de la influencia del componente.
Pensando a largo plazo tomamos medidas que nos van a ahorrar tiempo y ser mas eficientes en el futuro
Que magia la de los componentes
genial, trate de hacerlo para una app y quedo genial
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.