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
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
You don't have access to this class
Keep learning! Join and start boosting your career
In the world of digital design, understanding how to identify and organize the components of a project is critical to creating effective and efficient interfaces. Through the correct classification of these elements, you can ensure that the design is consistent and easy to maintain. Here we will discuss key techniques and concepts for managing components using terms such as atoms, molecules and organisms.
Identifying components in a design is a crucial step in building a solid structure. Here are tips on how to do it effectively:
The atomic model, derived from Brad Frost's atomic methodology, helps organize the elements of a design by complexity:
Using this methodology ensures that your design is scalable and easy to update or modify.
Once you have identified components, the next step is to create and manage them properly:
This management strategy not only improves efficiency, but also provides a foundation for advanced use of features and properties, allowing your design to evolve with ease.
Adopting best practices in the use of components ensures that your design is flexible and easy to maintain. Here are some recommendations:
The organization and intelligent use of components is indispensable for any digital design project. By applying these practices, you will not only improve the quality and consistency of your designs, but also increase the efficiency of the design process itself. So go ahead, explore, experiment and optimize your designs with confidence!
Contributions 22
Questions 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
💡**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.
crear el ui kit a partir de átomos, moléculas y organismos es una gran practica que no he visto en ninguna parte
yo le hice a mi novia su pagina de su consultorio dental
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/
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 mi caso, descubrí por mi cuenta que agruparlos de esta forma resula más comodo y organizado.
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.
Recomiendo realizar los cursos de Figma. Hay de varios niveles y son muy recomendables.
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.
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
Want to see more contributions, questions and answers from the community?