atomic design ¿empezamos? · 2020. 3. 17. · 5 - set de iconos 6 - containers y grid. atomic...

Atomic Design ¿Empezamos?

1

Atomic Design

Por: Juan Serrano

¿Empezamos?


2

Ubetense de nacimiento y malagueño de corazón

Diseñador gráfico especializado en editorial y diseño y desarrollo web

Apasionado de la tipografía y el branding

Mis proyectos

¿Quién soy?


3

Necesitaba hacer que mis proyectos fueran escalables y modificables a lo largo del tiempo.

Es un + para mi empresa de diseño y desarrollo web.

Me ha abierto las puertas a proyectos importantes.

Mis proyectos

¿Por qué Atomic Design?


4

¿Atomic Design?


5

Metodología que pretende acabar con las inconsistencias y optimizar al máximo el diseño y el desarrollo de productos digitales

¿Atomic Design?

Brad Frost / https://bradfrost.com


6

Sistema de trabajo basado en la creación de sencillos elementos modulares para crear estructuras de información mucho más complejas

¿Atomic Design?

Brad Frost / https://bradfrost.com


7


8

Átomos Moléculas Organismos Templates Páginas


9

Son elementos que por si solos no tienen sentido.

Es el elemento más pequeño y necesita estar acompañado de otros átomos para que pueda llegar a tener sentido.

Átomos


10

Las moléculas surgen de la unión de dos o más átomos.

Elemento que puede utilizarse de forma autónoma.

Moléculas


11

Están formados por conjuntos de moléculas y átomos para formar una sección mucho más compleja.

Estos organismos ofrecen una experiencia más completa para el usuario.

Organismos


12

Es la unión de distintos organismos en una página final.

Se trata del entregable de alta fidelidad pero sin tener el diseño y contenido final.

Templates


13

Son el diseño final. Ya contienen imágenes y otros detalles que hacen que el producto esté listo para entregar o testar con usuarios.

Páginas


14

Fin.


15

Fin.y ¿ahora qué?


16

Diseño

Cómo empezar a aplicarAtomic Design en diseño


17

Diseño

Cómo empezar a aplicarAtomic Design en diseño


18

Son elementos que por si solos no tienen sentido.

Es el elemento más pequeño y necesita estar acompañado de otros átomos para que pueda llegar a tener sentido.

Átomos


19

¡!Diseño

Después de realizar nuestros bocetos y una vez que tenemos claras las características del diseño, comenzamos a crear los átomos.

Ya hemos seleccionado tipografía, color, tratamiento de imágenes...

Ya lo tenemos claro.


20

Diseño

Átomos1 - Set de tipografía + (mobile size)

2 - Colores corporativos

3 - Botones (hover, muted, selected, con iconos...) inputs de texto (hover...)

4 - Imágenes a todos los tamaños (intentar unificar)

5 - Set de iconos

6 - Containers y Grid


21


22

Diseño


2 - Colores corporativos




23

¡!Diseño

Dejar anotadas las familias tipográficas que utilizamos y los estilos.

¿Dónde hemos obtenido la tipografía? Google Fonts, My Fonts, Font Smith...

¿Hemos comprado la tipografía? Cuidado con las licencias para escritorio y web.


24

Diseño


2 - Colores corporativos y degradados



5 - Set de iconos



25


26

Diseño





5 - Set de iconos



27


28

Diseño




4 - Imágenes a todos los tamaños o proporciones (intentar unificar)

5 - Set de iconos



29

300x300 300x320

550x350 550x390

Diseño


30

¡!Diseño

Cada formato o tamaño de imagen que diseñemos ocupará espacio en el servidor.

Hay que intentar optimizar al máximo su uso.


31





5 - Set de iconos


Diseño


32


33

¡!Diseño

Dejar anotado de dónde obtenemos el pack de iconos y si tiene formato webfont.


34





5 - Set de iconos


Diseño


35


36





5 - Set de iconos


Diseño


37

Desarrolllo

Cómo empezar a aplicarAtomic Design en desarrollo


38

Desarrolllo

Cómo empezar a aplicarAtomic Design en desarrollo


39

Preprocesador CSS Buenas prácticas arquitectura CSS


40

Átomos1 - Font Family

2 - Estilos de texto + mixins ht-one

3 - Variables de colores y degradados

4 - Botones e inputs de texto, textareas...

5 - Formatos de imágenes

6 - Helpers (.text-center, .uppercase...)

Desarrolllo


41


42

Desarrolllo

Primitive (Recomendado 100%)Tania Rascia

Kit Sass. Template minimalista organizado por carpetas.

Nos permitirá asentar conceptos y entender cómo funciona.


43

¡!Diseño

Un pequeño bootstrap para empezar tus proyectos.

Ahorrarás muchísimo tiempo.


44

Desarrolllo

scss

settings

tools

generic

elements/atomos

object/moleculas

components/organism

utilities

pages

Átomos

1 - Font Family







45

Desarrolllo

scss

settings

tools

generic

atoms

molecules

organism

utilities

pages

Átomos

1 - Font Family






{


46

Desarrolllo

scss

settings

tools

atoms

Átomos

1 - Font Family






variables.scss

mixins.scss

buttons.scss

forms.scss

tablas.scss

scaffolding.scss

...

{


47

Las moléculas surgen de la unión de dos o más átomos.

Elemento que puede utilizarse de forma autónoma.

Moléculas


48

Diseño

Moléculas1 - Combinamos distintos átomos

2 - Convertimos en componente en xd

3 - Asignamos variables de color

4 - Asignamos estilos de caracteres

5 - Damos formato a las imágenes

6 - ¡Ya tenemos una MOLÉCULA!


49

Diseño

Moléculas


50

Diseño

MoléculasMiniatura de post Input + label

Texto + checkbox

Texto SEO


51

1 - Metodología BEM

2 - Especificamos comportamiento de átomos

3 - Especificamos estilos de átomos

4 - Cada molécula debe tener una clase

5 - Creamos un archivo scss/sass por cada molécula

Desarrolllo

Moléculas

moleculas{ scss


52

Desarrolllo

BEMBlock Element Modifier

block__element--modifier

Metodología para estructurar y nombrar clases CSS con el objetivo de mantener el código limpio, escalable y mantenible.

Morfología


53

Desarrolllo

.m-bxSeo

.m-bxSeo__tit

.m-bxSeo__sub

.m-bxSeo__txt

.m-bxSeo__rdmore


54

Desarrolllo

.m-bxSeo

.m-bxSeo__tit

.m-bxSeo__sub

.m-bxSeo__txt

.m-bxSeo__rdmore

Carpeta o tipo de bloque (Moléculas)

.m-


55

Desarrolllo

.m-bxSeo

.m-bxSeo__tit

.m-bxSeo__sub

.m-bxSeo__txt

.m-bxSeo__rdmore

Nombre del bloque

.m-bxSeo


56

Desarrolllo

.m-bxSeo

.m-bxSeo__tit

.m-bxSeo__sub

.m-bxSeo__txt

.m-bxSeo__rdmore

Elemento hijo dentro del bloque

.m-bxSeo__tit


57

Desarrolllo

.m-bxSeo .m-bxSeo--bgBlack

.m-bxSeo__tit

.m-bxSeo__sub

.m-bxSeo__txt

.m-bxSeo__rdmore

Clase modificadora

.m-bxSeo--bgBlack


58

Desarrolllo

.m-itmServ

.m-itmServ__ico

.m-itmServ__tit

.m-itmServ__txt

.m-itmServ__btn


59

Desarrolllo

.m-itmServ .m-itmServ--aCntr

.m-itmServ__ico

.m-itmServ__tit

.m-itmServ__txt

.m-itmServ__btn

Clase modificadora

.m-itmServ--aCntr


60

Desarrolllo

scss

settings

tools

generic

atoms

molecules

organism

utilities

pages


2 - Especificamos comportamiento de átomos

3 - Especificamos estilos de átomos

4 - Cada molécula debe tener una clase

5 - Creamos un archivo scss/sass por cada molécula

{

Moléculas


61

Están compuestos por conjuntos de moléculas y átomos para formar una sección mucho más compleja.

Estos organismos ofrecen una experiencia más completa para el usuario.

Organismos


62

Diseño

Organismos


63

Diseño

OrganismosOrganismo


64

Diseño

OrganismosOrganismo

Organismo


65

Diseño

Organismos

Molécula

Organismo

Organismo


66

Diseño

Organismos

Molécula Átomo

Átomo

Organismo

Organismo


67

Diseño

Organismos

Molécula

Molécula

Átomo

Átomo

Átomo

Átomo

Átomo

Átomo

Organismo

Organismo


68

Diseño

Organismos


69

Diseño

Organismos


70

Organismos

Diseño


71

Organismos

Diseño


72

Diseño

Organismos


73

Diseño

Organismos

1 - Preparar set de organismos

2 - Preparar posibilidades en BYN

3 - Preparar posibilidades de alineación

4 - En adobe xd Repetir Cuadrícula


74

Diseño

Organismos


75

Diseño

Organismos


76

Diseño

Organismos


77

¡!

Diseño

Cada set que preparemos nos ahorrará mucho tiempo a futuro.

Estamos creando componentes reutilizables.

Cada modificación se realizará solo una vez.

Organismos


78

Diseño

Organismos

¡!Facilitamos el trabajo al Desarrollador.

De un vistazo puede saber cuántos átomos, moleculas y organismos tiene que crear.


79


2 - Especificamos comportamiento de moléculas

3 - Cada organismo debe tener una clase

4 - Creamos un archivo scss/sass por cada organismo

Desarrolllo

Organismos

organism{ scss


80

Desarrolllo

.o-loopNews

.m-itmNew

Organismos

Carpeta de localización (Organismos)

.o-


81

Desarrolllo

.o-loopNews

.m-itmNew

Organismos

Nombre del organismo

.o-loopNews


82

Desarrolllo

.o-loopNews

.o-loopNews--x2

.o-loopNews--x3

Organismos

Clase modificadora

.o-loopNews--x3


83

Desarrolllo

.o-loopNews

.o-loopNews--x2

.o-loopNews--x3

.withBg

Organismos

Helper que da formato al background

.o-loopNews--x3.withBg


84

Desarrolllo

.o-loopNews

.o-loopNews--bgBlack

Organismos

Clase modificadora

.o-loopNews--bgBlack


85

Diseño

¡!Los organismos más complejos son los formularios y los dashboards.

Organismos


87

Es la unión de distintos organismos en una página final.

Se trata del entregable de alta fidelidad pero sin tener el diseño y contenido final.

Templates


88

Diseño

Templates1 - Organizamos los organismos por páginas.

2 - Paddings por secciones.

3 - Tener en cuenta diseño para mobile.


89


90


2 - Especificamos comportamiento de organismos

3 - Cada template debe tener una clase

4 - Creamos un archivo scss/sass por cada template

Desarrolllo

Templates

templates{ scss


91

Desarrolllo

.t-home

.t-home--bgBlack

Templates


92

Diseño

¡!El trabajo más laborioso está en las 3 primeras capas: átomos, moléculas y organismos.

Es aquí donde más código desarrollaremos.

Templates


93

Son el diseño final. Ya contienen imágenes y otros detalles que hacen que el producto esté listo para entregar o testar con usuarios.

Páginas


94

- La organización lo es todo.

- Atomic design hace que un proyecto pueda ser escalable, mantenible y modificable.

- Optimiza tiempos en diseño y desarrollo.

- Permite hacer prototipos rápidos.

Conclusiones


95

- Hace más rápido el proceso de actualización del producto con nuevas funcionalidades.

- Menos componentes hacen del diseño y el código un proyecto más consistente y eficiente.

- Permite reutilizar componentes incluso en otros proyectos.

Conclusiones


96

- Al principio cuesta adaptarse al cambio de metodología.

- Ensayo y error.

- Practicar, practicar, practicar...

- Te abre puertas a proyectos interesantes.

Mi experiencia


97

- Fácil implementación.

- Uso en templates desarrollados desde cero o con temas en blanco html5blank o underscores.me

- Crea un template para ti y úsalo.

WordPress & AtomicDesign


98

- Atomic Design- Optimizado para SEO- Poco peso- Permite ser clonado- Customización /DEV- “Low Cost“ y escalable- Contact Form 7- Perfecto para empezar

Template Theme


99

¡Muchas gracias!

atomic design ¿empezamos? · 2020. 3. 17. · 5 - set de iconos 6 - containers y grid. atomic...

Documents