Diseño atómico: explotando lo que creías saber sobre el diseño web


Es una creencia común que la flexibilidad es lo mismo que no tener restricciones, que para ser creativo también hay que ser desenfrenado. Sin embargo, para completar un proyecto, especialmente uno que es tan intrincado como el diseño web, crear una estructura puede en realidad brindarle más flexibilidad. usted necesitar un marco: no es negociable. Si flexionas tus músculos artísticos y creativos donde realmente tienes libertad, obtendrás diseños tan inspiradores como funcionales y realistas. El diseño atómico es un enfoque sensorial y metódico para el 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
  • Rejillas
  • Textura
  • Tipografía
  • Etc.

Amo como Jack Strachan en 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 pueden ensamblarse juntos para construir cualquier número de aplicaciones. Los sistemas de diseño son un método para traducir una experiencia consistente y un lenguaje visual a través de un producto cuando se trabaja en diferentes puntos de contacto ".

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

El nacimiento del diseño atómico

Así es como se le ocurrió a Brad diseño atómico: “En la búsqueda de inspiración y paralelos, 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 pedido de menor a mayor:

  • Átomos
  • Moléculas
  • Organismos
  • Plantillas
  • Páginas
diseño atómico

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 consistencia. 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 construir una biblioteca donde 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 bloques de construcción se vuelven más complejos y de mayor alcance. Veamos 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 formulario, etc.). Si bien estos átomos no son beneficiosos para el diseño web por sí solos, son necesarios para construir la interfaz web.

diseño atómico

2. Moléculas

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

diseño atómico

3. Organismos

Cuando agrupa las 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) = ​​Masthead completo (organismo)

diseño atómico

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 usar el mismo tipo de masthead en todos los sitios web que diseña, o puede crear un organismo específico del producto (imagen + título + precio) que repite en la página del producto.

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

diseño atómico

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

4. Plantillas

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

diseño atómico

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 tiene que ser probado, revisado y ajustado. Dicho esto, es posible que tú será conecte el contenido finalizado; depende de dónde se encuentre en ese proceso.

Esta es la etapa donde el sitio web estará bajo el mayor escrutinio. Dependiendo de las revisiones y comentarios que reciba, las moléculas, organismos y plantillas pueden tener que cambiarse. 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 sí lo es, pero la teoría no lo es. Así es como los sitios web se han diseñado durante mucho tiempo. Hablar en términos de diseño atómico no lo convertirá automáticamente en un gran diseñador o desarrollador; No es un reemplazo para el trabajo sólido.

Una ventaja de hablar sobre 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 no desarrolladores: puede explicar su proceso a los clientes. Y para el desarrollador organizado, es una forma de compartimentar diseños. Podrá profundizar en un componente o una pequeña agrupación de elementos que no funcionan. Puede ayudarlo a ver el bosque en busca de árboles en lugar de decir: "Todo esto es defectuoso".

El diseño atómico le permite abrazar la creatividad sin perderse en ella. Combina elementos básicos y 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 necesita su arte y habilidades: hacer adaptaciones complejas, 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 eche un vistazo 10 reglas de buen diseño de interfaz de usuario a seguir en cada proyecto de diseño web.

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