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 el diseño web no son más que palabras vacías. El término «Diseño Atómico» es uno de ellos. Todo lo 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 estado rondando la web durante casi media década. Inventado por Brad Frost y apoyado por un libro electrónico completo, todavía está esperando su triunfo. ¿O es eso? Esto depende de cómo mire el fenómeno.

Si aún no ha oído hablar del «diseño atómico», ha venido al lugar correcto. Explicaré brevemente el enfoque teórico, por lo que todos estamos 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. Empieza 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. Este 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, pie de página completo o el área con noticias recientes. Creo que puedes imaginar lo que quiero decir.

Aquí donde Frost deja la analogía química. El organismo es seguido por el plantilla, una 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 deben colocar estos contenidos.

Y eso es todo.

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

Eh, algunos diseñadores web se darán cuenta de que nunca han hecho esto de otra manera. Sin embargo, nunca hubieran pensado en usar estos términos para describirlo. Si estás en el mismo barco, te doy la bienvenida. Esta es también mi comprensión de la situació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 crear 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: Josh Duck)

Por lo tanto, está justificado decir que el diseño atómico es 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ógico. Al hablar de diseño atómico, creamos una mentalidad que nos apunta en la dirección correcta. Esto da como resultado que nos centremos 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 obliga a adoptar 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; entregado y toma como materia prima. Lo mismo ocurre con las ventanas, puertas, etc. El único aspecto individual es la cantidad de bloques de construcción diferentes y su apariencia.

Lo mismo ocurre con nuestra rama. Incluso si pretendes construir cada página de forma individual, 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 estamos felices de usarlos una y otra vez. Esto no es nada de lo que avergonzarse, sino más bien una prueba de la razón, especialmente mirándolo desde una perspectiva empresarial.

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

Esto ya comienza 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 aproximado, esbozamos 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 tener 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 concentrado 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 adhiere 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, puede hacer lo que quiera, lo que permite la creación rápida de prototipos o más.

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

Dado que está diseñando a nivel atómico, puede utilizar los componentes como guía de estilo. O, dicho de otra manera, no necesita uno en absoluto, ya que el uso de componentes pequeños da como resultado automáticamente un diseño consistente.

La base del código también es coherente por naturaleza, lo que contribuye a una comprensión más natural de los módulos de funciones.

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 y a lo que todo el mundo está acostumbrado. Cuando se apega al diseño atómico, se trata más de crear un diseño funcional que se vea bien con los componentes de construcción dados. Debido al enfoque de mosaico, «móvil primero» es la máxima nativa.

Lógicamente, la creación de prototipos, si así lo quiere llamar, también se acelera. Tus primeros borradores se realizarán mucho más rápido.

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

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

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

El enfoque puede ampliarse

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 eso es lo que quiere llamarlo o no, depende de usted. 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.