Sistematizando el diseño UI

Proyectos Ficticios Present →

Lowferry (AdobeXD) →

Dormin (Figma) →

Roco (Figma) →

Espaciados y tipografía figma →

Tipografía plural DS →

Espaciados plural DS →

Checklist Entregable

✅ Escala de espaciados responsive
✅ Escala tipográfica. Desktop y Mobile
✅ Paleta cromática
✅ Rejilla
✅ Containers
✅ Un sistema de iconos
✅ Sistema de botones y estados (Active, hover, disable)
✅ Listado de módulos y variaciones de los mismos
✅ Borders Radius
✅ Shadows
✅ Recursos (Logos vectoriales en varios colores, imágenes, favicon)
✅ Header + Menú mobile. Detallar comportamiento
✅ Footer
✅ Home
✅ Home mobile

Material Extra y bibliografía

¿Qué son los design tokens? Ui From Mar →

Cómo administrar el espacio en Figma usando tokens. Medium (Rafael Sepeda) →

Digital System Playbook. FarCo →

Hand Book Mendesaltaren →

Atomic Design. Brad Fros →

¿Cómo pueden los diseñadores entregar su trabajo a los desarrolladores de manera efectiva? Medium (Joana Boavida) →

Consejos para comunicar mejor la información de los archivos Figma a los desarrolladores. Medium (Eduardo Chechique) →

Color

Todo lo que debes saber de Colores en UI Design: Teoría y Práctica. Medium (Christian Vizcarra) →

Paletas de colores para UI: créala en solo 2 pasos. Ui From Mars →

Product Design HandBook Mendesaltaren →

5 consejos sobre los colores en el diseño UI →

Generador de sistemas de color de código abierto →

Tipografía

Tipografía: una guía básica para su uso en el diseño digital. Diana Bobo →

Tipografía en sistemas de diseño. SuperFriendly →

Fonts Knowledge. Google Fonts →

Herramientas para escalas tipográficas

Type Calculator →

Archetypeapp →

Design Systems

Plural DS. Sngular →

Helsinki DS →

Polaris Shopify →

Mercury DS Canadá →

🤔 Encuesta de satisfacción

Ir a la encuesta →