Diseño atómico: explotar lo que pensaba que sabía sobre el diseño web

Es una creencia común que la flexibilidad es lo mismo que estar desenfrenado, que para ser creativo también hay que ser desenfrenado. Sin embargo, para completar un proyecto, especialmente uno que sea tan intrincado como el diseño web, la creación de una estructura en realidad puede brindarle más flexibilidad. Necesita un marco, no es negociable. Flexionar sus músculos artísticos y creativos donde realmente tiene la libertad de dar como resultado diseños que son tan inspirados como funcionales y realistas. El diseño atómico es un enfoque sensato y metódico del diseño web que aún le brinda la oportunidad de experimentar dentro del marco.

Sistemas de diseño

Los diseñadores ya no crean simplemente páginas web; crean sistemas de diseño. Los sistemas de diseño incluyen:

• Color
• Cuadrículas
• Textura
• Tipografía
• Etc.

Me encanta cómo Jack Strachan, de UX Planet, describe los sistemas de diseño: “En resumen, un sistema de diseño es una colección de componentes reutilizables, guiados por estándares claros, que se pueden ensamblar para construir cualquier cantidad de aplicaciones. Los sistemas de diseño son un método para traducir una experiencia coherente y un lenguaje visual en un producto cuando se trabaja en diferentes puntos de contacto ".

Los elementos del diseño pueden ser subjetivos y rápidamente pueden volverse abrumadores y caóticos. Para categorizarlos, el diseño debe verse de una manera más metódica. Eso es lo que hizo el diseñador web Brad Frost.

El nacimiento del diseño atómico

Así es como a Brad se le ocurrió el diseño atómico: “En la búsqueda de inspiración y paralelismos, seguí volviendo a la química. La idea es que toda la materia (ya sea sólida, líquida, gaseosa, simple, compleja, etc.) está compuesta de átomos. Esas unidades atómicas se unen para formar moléculas, que a su vez se combinan en organismos más complejos para finalmente crear toda la materia en nuestro universo ".

Continúa explicando que las interfaces están formadas por componentes que se pueden clasificar en bloques de construcción. Aquí está el orden de menor a mayor:

• Átomos
• Moléculas
• Organismos
• Plantillas
• Paginas

Fuente: BradFrost.com

Los bloques de construcción del diseño atómico

El principal atractivo del diseño atómico es que promueve la coherencia. Muchos de los elementos que crea se pueden replicar, reutilizar o escalar fácilmente. Y para realizar un seguimiento de todos ellos, los diseñadores pueden crear una biblioteca en la que puedan ver todos sus elementos y estilos en un solo lugar. También hay espacio para la personalización, pero solo a medida que los componentes básicos se vuelven más complejos y de mayor alcance. Entremos en los cinco bloques de construcción:

1. Átomos

Como los átomos son importantes en el mundo natural, las etiquetas HTML son para las interfaces web. Significado: todas las interfaces web comienzan con etiquetas HTML o elementos fundamentales (animaciones, botones, paletas de colores, fuentes, etiquetas de formularios, etc.). Si bien estos átomos no son beneficiosos para el diseño web por sí solos, son necesarios para crear la interfaz web.

2. Moléculas

Las moléculas son más complejas que los átomos, pero no son complejas en general. Cuando agrupa átomos no tan útiles, tiene moléculas más útiles: Etiqueta del formulario de búsqueda + Entrada + Botón (átomos) = Formulario de búsqueda completo (molécula)

3. Organismos

Cuando agrupa moléculas, obtiene organismos, que son más complejos que sus predecesores: Logotipo + Navegación + Formulario de búsqueda + Iconos de redes sociales (moléculas) = ​​Cabecera completa (organismo)

Idealmente, podrá reutilizar organismos en el sitio web o en diferentes sitios web, manteniendo el diseño general y personalizándolo con diferentes textos e imágenes. Por ejemplo, puede utilizar el mismo tipo de cabecera en todos los sitios web que diseñe, o puede crear un organismo específico del producto (imagen + título + precio) que repita en la página del producto.

Aquí es cuando la interfaz web realmente comienza a configurarse de una manera única y personalizada. Hasta ahora, su interfaz es solo una colección de elementos simples. Durante la etapa de organismos, el sitio web se vuelve más visual.

Si tuviera que compartir su proceso con un cliente, esta es la parte a la que diría, "Oh, lo entiendo". Este es el momento de comenzar a hacer wireframes o armar maquetas para que el cliente pueda darle su opinión antes de que avance.

4. Plantillas

Cuando agrupa organismos, tiene plantillas. Aquí es cuando se junta el diseño de la página real. Si bien las moléculas y los organismos tienen sus propios diseños internos, la etapa de las plantillas es cuando comienza a ver cómo se complementan e interactúan entre sí; dónde están colocados uno con respecto al otro; y cómo fluyen en su conjunto. La plantilla proporciona el contexto de las moléculas y los organismos. Tenga en cuenta que las plantillas tienen contenido de marcador de posición, no contenido personalizado u original.

Fuente: BradFrost.com

5. Páginas

Las páginas llevan las plantillas al siguiente nivel al reemplazar el contenido del marcador de posición con contenido real. Probablemente no será el contenido final, pero será más representativo del diseño y contenido final. Agregar contenido permanente de alta calidad en este punto podría ser un desperdicio porque el sitio web aún debe ser probado, revisado y ajustado. Dicho esto, es posible que se conecte en el contenido finalizado - que depende de dónde se encuentra en ese proceso.

Esta es la etapa en la que el sitio web estará bajo mayor escrutinio. Dependiendo de las revisiones y comentarios que reciba, es posible que sea necesario cambiar moléculas, organismos y plantillas. Este también es un buen momento para probar las variaciones de diseño.

Pensamientos finales

Lo que pasa con el diseño atómico es que no es nuevo: la palabrería lo es, pero la teoría no lo es. Así es como se diseñan los sitios web desde hace mucho tiempo. Hablar en términos de diseño atómico no lo convertirá automáticamente en un gran diseñador o desarrollador; no reemplaza el trabajo sólido.

Un beneficio de hablar de esto de esta manera, al usar este tipo de terminología para aclarar la metodología, es que es más fácil de entender para los que no son desarrolladores: puede explicar su proceso a los clientes. Y para el desarrollador organizado, es una forma de compartimentar los diseños. Podrá profundizar en un componente o un pequeño grupo de elementos que no funcionan. Puede ayudarlo a ver el bosque en busca de árboles en lugar de decir: "Todo esto tiene fallas".

El diseño atómico le permite abrazar la creatividad sin perderse en ella. Combina los elementos básicos y los sistemas de diseño de una manera que lo ayuda a comenzar un proyecto más rápido para que pueda dedicar el tiempo donde más se necesitan su arte y habilidades: hacer adaptaciones intrincadas, resolver problemas, satisfacer las necesidades del cliente y, en última instancia, crear un sitio web que funcione. más allá de la norma.

Mantenga ese impulso de diseño web y consulte las 10 reglas de un buen diseño de interfaz de usuario para seguir en cada proyecto de diseño web.

Imagen destacada a través de ShadeDesign / shutterstock.com