Atomic Design

Speaker: José Pedro Iglesias
Web UI Developer @ NetSuite 
josepedroiglesias.com 
linkedin.com/in/josepedroiglesias
Diseño atómico desde dos perspectivas.
José Pedro nos habló de esta metodología para la creación de sistemas de diseño, ya sea desde el punto de vista de un diseñador o de un programador, simplificando el entendimiento mutuo entre ambas partes como también en generar un producto consistente y uniforme.

Transcript

1. ATOMIC DESIGN DESDE DOS PERSPECTIVAS JOSE PEDRO IGLESIAS WEB UI DEVELOPER
2. ¿ QUÉ ES EL ATOMIC DESIGN ? Atomic Design es una metodología para la creación de sistemas de diseño.
3. We’re not designing pages, we’re designing systems of components. - Stephen Hay
4. ATOMOS Los átomos son los bloques de construcción básicos de la materia. Aplicado a las interfaces web, los átomos son nuestras etiquetas HTML, como una etiqueta de formulario, un input o un botón.
5. ATOMOS
6. ATOMOS Estructura del átomo (HTML) Estilo específico de este átomo (SASS / CSS) Estilo base del átomo (SASS / CSS)
7. MOLECULAS Las moléculas son grupos unidos de átomos, y son las unidades mas pequeñas fundamentales de un compuesto. Por ejemplo, una etiqueta de formulario, input o botón no son demasiado útiles por sí mismos, pero al unirlos y combinarlos como parte de algo mas complejo, empiezan a tener significado y pueden hacer algo juntos.
8. MOLECULAS
9. MOLECULAS Estructura de la molécula (HTML) Estilos de la molécula (SASS / CSS)
10. ORGANISMOS Las moléculas nos dan algunos bloques de construcción para trabajar, y que ahora se pueden combinar entre sí para formar organismos. Los organismos son grupos de moléculas unidas entre sí para formar una sección relativamente compleja, distinto de una interfaz.
11. ORGANISMOS
12. TEMPLATES Los templates (plantillas) son muy concretos y proporcionan un contexto a todas estas moléculas y organismos relativamente abstractos. Los templates son también las que los clientes empiezan a ver como el diseño final.
13. TEMPlaTES
14. PAGINAS Las páginas son instancias (casos específicos) de los templates. El template anteriormente representado se reemplaza con el contenido real, para así dar una descripción exacta de lo que el usuario verá en última instancia.
15. PAGINAS
16. ¿ EN QUE CASOS ES RECOMENDABLE UTILIZAR ATOMIC DESIGN ?
17. VENTAJAS • Escalable / Mantenibilidad • Reusable • Fácil para la creación de una Guía de Estilos • Fácil de entender el Layout • Codificar es más consistente • No se enfoca en diseños pixel perfect • Rápido prototipado • Estimaciones más claras • Estructura Modular del sistema
26. CONCLUSIONES
27. VAMO A PREGUNTAR JOSE PEDRO IGLESIAS WEB UI DEVELOPER
28. GRACIAS. JOSE PEDRO IGLESIAS WEB UI DEVELOPER