Diseño atómico: cómo diseñar un sitio web modular

Diseño atómico: cómo diseñar un sitio web modular

A menudo, los términos técnicos en diseño web no son más que palabras vacías. El término «Diseño Atómico» es uno de ellos. Lo único que hace es permitir que su inventor difunda su filosofía con un nombre memorable. No obstante, vale la pena investigar el contenido.

Diseño atómico: esto es lo que hay detrás de la palabra

El término «Diseño atómico» ha rondado la web durante casi media década. Inventado por Brad Frost y apoyado por un libro electrónico completo, sigue esperando su triunfo. ¿O es eso? Esto depende de cómo se mire el fenómeno. Si aún no ha oído hablar de «Diseño atómico», ha venido al lugar correcto. Explicaré brevemente el enfoque teórico, para que todos estemos en la misma página. Si termina desarrollando un interés más profundo en el concepto, use los enlaces a los sitios web de Brad y su libro electrónico, arriba.

Los cinco componentes del diseño atómico. (Ilustración: Brad Frost)

«Diseño atómico» se entiende de manera literal. Comienza en el átomo como el componente más pequeño de un diseño. Un átomo, por ejemplo, es una etiqueta HTML, una fuente u otra unidad del sistema de diseño que no se puede reducir más. A molécula es un conglomerado de múltiples átomos que resuelven una tarea juntos. Esto podría ser un formulario HTML, por ejemplo. La siguiente unidad se llama organismo. Aquí, múltiples moléculas asumen un papel específico. Un organismo sería un encabezado completo, un pie de página o el área con noticias recientes. Creo que puedes imaginar lo que quiero decir. Aquí Frost deja la analogía de la química. El organismo es seguido por el modelouna etapa previa de la actual página. Esta última es la página disponible para el usuario, con todos los contenidos activos, mientras que las plantillas son donde se pretende colocar estos contenidos. Y eso es todo.

Diseño atómico: lo único nuevo es el término

Huh, algunos diseñadores web se darán cuenta de que nunca han hecho esto de una manera diferente. Sin embargo, nunca habrían pensado en usar estos términos para describirlo. Si estás en el mismo barco, te doy la bienvenida. Esta es mi comprensión de la situación también. Por supuesto, suena excelente y pseudocientífico si hablamos de átomos, moléculas y demás. Sin embargo, esto no proporciona ningún valor. Solo tiene sentido construir páginas sobre una base de plantillas que hemos llenado con diferentes funciones y bloques de diseño. No importa si lo llamo átomos, moléculas o algo completamente diferente.

La tabla periódica de elementos HTML. (Ilustración: Pato Josh)

Por lo tanto, está justificado decir que el diseño atómico es solo vino viejo en tubos nuevos. Lo que también responde a la pregunta de si el diseño atómico es un éxito o no: tiene éxito, pero no bajo esta etiqueta de nombre. ** Puedo ver una ventaja de usar estos términos, incluso si es más psicológica. Al hablar de diseño atómico, creamos una mentalidad que nos indica la dirección correcta. Esto hace que nos concentremos en los detalles del enfoque de diseño, en lugar de diseñar al azar de la manera correcta. Debe ser indiscutible que un enfoque de diseño siempre debe comenzar con el componente más pequeño y terminar con el componente más grande. El diseño receptivo es uno de los factores, pero no el único, que nos impone este enfoque. Ya sea que lo hagamos voluntariamente o no, existen razones válidas para el método.

Argumentos a favor de los sistemas de kits de diseño

Aunque las casas pueden verse muy diferentes, la industria de la construcción ha acordado un sistema modular compartido, en el que cada casa se basa más o menos. Los elementos de techo, pared y techo son bloques de construcción; entrega y toma como materia prima. Lo mismo ocurre con las ventanas, puertas, etc. El único aspecto individual es el número de diferentes bloques de construcción y su apariencia. Lo mismo ocurre con nuestra sucursal. Incluso si pretende construir cada página individualmente, obedeciendo los requisitos establecidos por el cliente, la verdad es que cada uno de nosotros ha almacenado fragmentos para todo tipo de funcionalidades diferentes a lo largo de los años, y está feliz de usarlos una y otra vez. Esto no es nada de lo que avergonzarse, sino más bien una prueba de razón, especialmente viéndolo desde una perspectiva comercial.

Wireframing como método de concepción. (Foto: Depositphotos)

Esto ya empieza con el wireframing. El wireframing es un método de concepción que representa visualmente el enfoque del diseño atómico. En bloques de contenido aproximados, bosquejamos cómo se estructurarán las páginas y dónde se espera qué funcionalidad. Esto nos permite tener una idea del proyecto de arriba a abajo sin perdernos en los detalles del diseño. Se podría decir que el diseño atómico ayuda a los usuarios a mantener una visión general. Por supuesto, el otro enfoque mental ya ayuda con la creación de bloques de código reutilizables. Sin este enfoque, podría estar menos enfocado en este aspecto. Resumiendo las ventajas del método, ya sea que lo llame diseño atómico o no, obtenemos una lista ordenada con algún valor de uso:

Tiene una colección de módulos para ensamblar de la forma que desee

Si se apega estrictamente a este enfoque, tiene un arsenal de módulos de funciones listos para usar que puede armar de la forma que desee. Dentro de la jerarquía dada, eres libre de hacer lo que quieras, lo que permite la creación rápida de prototipos o más.

Su guía de estilo se crea prácticamente automáticamente

Dado que está diseñando en un nivel atómico, puede usar los componentes como una guía de estilo. O, dicho de otro modo, no necesita uno en absoluto, ya que el uso de los componentes pequeños da como resultado automáticamente un diseño consistente. El código base también es coherente por naturaleza, lo que contribuye a una comprensión más natural de los módulos de función.

Sus aspiraciones de diseño siguen siendo más prácticas

Si puede diseñar libremente, tiende a diseñar un diseño basado en páginas. Esto es normal ya lo que todo el mundo está acostumbrado. Cuando se apega al diseño atómico, se trata más de crear un diseño de trabajo que se vea bien con los componentes de construcción dados. Debido al enfoque de mosaico, «primero el móvil» es la máxima nativa. Lógicamente, la creación de prototipos, si así lo quieres llamar, también se acelera. Tus primeros borradores se harán mucho más rápido.

El diseño atómico y la construcción de tu casa no son tan diferentes. (Foto: Depositphotos)

Su sitio web es más fácil de cuidar

Si, en consecuencia, se apega a la jerarquía del diseño atómico, es fácil eliminar, reemplazar o reubicar bloques. Esto no hace que el cuidado activo de su sitio web sea tan fácil como 123, pero tampoco es ciencia espacial.

El enfoque se puede extender

Una vez que haya internalizado el enfoque atómico, notará que su marcado HTML no es lo único que puede beneficiarse de esto. CSS, JavaScript y otras tecnologías también permiten el mismo proceso. Especialmente JavaScript tiene cierto potencial aquí.

Conclusión: el diseño atómico en sí mismo es algo bueno

Como puede ver, el diseño atómico es algo bueno. Si así es como quieres llamarlo o no, depende de ti. Si vas a jugar con el concepto de Brad, echa un vistazo Laboratorio de patrones. Aquí, puede acostumbrarse al modelo de pensamiento. Si conoce Bootstrap, esto no será un desafío.

(Fuente de la imagen: la imagen de la publicación es una composición de esta ilustración de un átomo y esta imagen. El material fue tomado de Depositphotos.)

#Diseño #atómico #cómo #diseñar #sitio #web #modular

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *