En el verano del 2013, el estadounidense Brad Frost presentó su nuevo enfoque de diseño – #Diseño #Atómico -, que se basa en un enfoque científico del diseño. Esto quiere decir que, “un buen #diseño y #desarrollo web en todos sus elementos individuales, debe tener una estructura consistente y modular”.
Y lo que me parece más interesante lo dice el propio Brad Frost cuando define el Diseño Atómico;
«nos permite crear consistencia en el diseño de #productos #digitales, así como escalar fácilmente nuestros #proyectos.»
Esta #metodología se divide en cinco etapas:
1. Átomos
Son la forma más simple en que podemos desglosar los diferentes elementos de nuestra interfaz.
Por ejemplo: Títulos, botones, tipografías, colores, iconos, etc.
2. Moléculas
Como en química, las moléculas son una combinación de varios átomos, y con ellos hacemos los primeros elementos complejos dentro de nuestra #interfaz.
Por poner un ejemplo sencillo que todos visualizaremos. En el buscador de Google la unión que forman el campo de búsqueda con con el botón buscar se le consideraría una molécula formada por dos átomos.
3. Organismos
Son un conjunto de moléculas y/o átomos que forman elementos visuales sencillos y que a menudo representan componentes independientes y utilizables.
Por ejemplo: Un buscador con su titulo sus campos y sus botones o una cabecera con el logotipo, el menú y el avatar.
4. Plantillas
Con las plantillas, la página empieza a cobrar sentido. Formando grupos de organismos que unidos pueden formar una página sin ser en realidad un – entregable de alta fidelidad –. Serían guías visuales que nos hacen entender la organización básica de los componentes dentro de una interfaz.
5. Páginas
La última etapa de la metodología de diseño atómico.
Son las implementaciones finales que pueden ver los usuarios, en esta etapa nuestros sistemas se ponen a prueba. Y si algún componente falla en los test, la metodología que hemos seguido nos permite de una manera más sencilla modificar cualquier organismo, molécula o átomo que requiera de su #optimización.
Una vez que comprobamos que todo está correcto, podemos generar la interfaz definitiva con texto, imágenes y diferentes de elementos con los que interactuará el #usuario.
Para cualquier duda que te surja sobre Diseño Atómico, puedes informarte con mayor detalle en la propia web de Brad Frost donde se explica todo con mayor detalle:
→ https://atomicdesign.bradfrost.com/chapter-2/
Y aunque el artículo de hoy trata sobre Diseño Atómico, hay que decir la verdad, la rueda ya estaba inventada, os invito a leer a: Jesse James Garrett o en DCU