Es muy útil seguir a la par el curso de Sistemas de diseño https://platzi.com/clases/1420-sistemas-diseno/15003-introduccion-y-presentacion/ para ir documentando lo que se está trabajando en el ejemplo del portal
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Misael León
Aportes 24
Preguntas 2
Es muy útil seguir a la par el curso de Sistemas de diseño https://platzi.com/clases/1420-sistemas-diseno/15003-introduccion-y-presentacion/ para ir documentando lo que se está trabajando en el ejemplo del portal
Mi primer design system, aún queda bastante por practicar y mejorar pero que interesante poder haber empezado uno desde 0.
uff! me tomó más de lo que esperaba estas pantallas pero todo con practica mejora!!
Podrán ver que en la ultima pantalla ya quería terminar 😛
parece un trabajo super tedioso, pero resulta sr divertido y muy practico a la hora de armar todo
Veo que menciona en múltiples ocasiones el curso de UI de Platzi, pero ese curso es solo de fundamentos y no abarca detalles como distancias entre elementos y cosas más minuciosas. Estaría bien un curso de UI pero que sea avanzado, no solo de fundamentos.
Un plugin interesante para crear temas desde Figma
https://www.figma.com/c/plugin/731176732337510831/Themer
Este curso me sirvio mas a entender figma que el propio curso de figma basico
Mi librería de estilos:
Tipografía
Paleta de colores
Es muy bueno para elegir paletas de colores https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
Puedo recomendar este kit para tomar como ejemplo para proyectos más grandes:
https://www.figma.com/community/file/1035203688168086460
La razón de crear frames con estilos de componentes al lado de nuestras interfaces dentro del mismo archivo Figma es ligar las características visuales de esos componentes maestros para que al hacerles alguna modificación a los átomos, ese cambio se refleje automáticamente en todas las interfaces (frames) donde esté ese elemento (instancias).
Darle estilo al prototipo de alta fidelidad con los colores de los iconos
He notado que el profesor va agregando gradualmente el atomic desing, estilos, componentes, etc…pero en la práctica, considero que antes de empezar a diseñar lo que se desea, es mucho más práctico crear esa estructura y tomarse el tiempo para tomar ciertas decisiones de acuerdo a lo que se habla con el cliente, con el grupo de trabajo y teniendo en cuenta los estilos propios de diseñador. Sí, esto lleva un poco más de tiempo, pero el resultado al final es mucho más gratificante, facilita los procesos y da una claridad de lo que se quiere hacer. Y si bien es cierto que se pueden presentar cambios, tener algo definido desde un principio, siempre y cuando se puedan establecer estas cosas, es mejor método que hacerlo gradualmente.
por cierto! después de esta practica creo que ayudaría mucho hacer la filtración de átomos, moléculas y organismos por pantallas, no tener el X de frames, que en el mismo frame hacer un | separador | para tener todo más organizado por que puedes usar el mismo átomo varias veces pero con diferentes tamaños o texturas 💡
Object Oriented Styles :sw
Para la selección de colores conviene crear un moodboard
Este es mi avance del proyecto, hasta ahora solo he avanzado 2 pantallas pero traté de usar la metodología de Atomic design y algunos tips de los que nos platicó Misaello para crear componentes aunque me resulta complicado redimensionarlos.
Para alguien que inició trabajando pensando en pantallas y no en crear elementos es algo complicado dejar ese hábito.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?