Una introducción al diseño atómico para diseñadores web

Los átomos no son simplemente los elementos HTML sino También sus estilos de pertenencia.: fuentes, colores, dimensiones y otras reglas de estilo CSS. Con las propias palabras de Brad, los átomos. “Demuestra todos tus estilos básicos de un vistazo.”.

Átomos - Ejemplo

Aquí hay un ejemplo de nuestro sitio web. Los titulares de los puestos recomendados pueden dar cuenta de un tipo de átomo; usan el mismo código HTML y CSS y puede ser fácilmente distinguido del resto del contenido.

Tenga en cuenta que Hongkiat.com no fue diseñado teniendo en cuenta el diseño atómico, aquí solo se usa para propósitos de demostración.

La esencia del diseño atómico es Diseñe la interfaz de usuario de abajo hacia arriba utilizando estas cinco etapas., No identificar los componentes del diseño atómico después..

2. Moléculas

UNA molécula se forma por un grupo de átomos. Las moléculas constituyen la siguiente etapa en la jerarquía de diseño atómico. Piense en elementos de la interfaz de usuario más simples que ya están hecho de más de un elemento HTML, como un formulario de búsqueda o una publicación recomendada en la barra lateral.

Estar organizado en una molécula. da un propósito a cada átomo. En un grupo más grande (molécula), los átomos deben apoyo y complemento entre ellos, ellos deben trabajar bien juntos Para crear un diseño utilizable..

Por ejemplo, el título (un átomo) debe obtener más énfasis (fuentes más grandes, más peso, etc.) que el nombre del autor (otro átomo) en el bloque de publicación recomendado. De esta manera, los dos átomos son. “significaba” a trabajar en equipo para obtener el mejor resultado.

Moléculas - Ejemplo

Usando nuestro ejemplo anterior, puedes ver que en la barra lateral de Hongkiat, un bloque de publicaciones recomendadas podría verse como una molécula. Una post molécula recomendada es constituida por tres átomos: una miniatura, un título y el átomo del nombre de un autor.

3. Organismos

Los organismos se componen de una grupo de moléculas, átomos (y aveces otros organismos). En diseño web, los organismos son componentes de interfaz de usuario más complejos que representan secciones definitivas de la página, como un encabezado, un pie de página o una barra lateral.

Los organismos pueden estar compuestos por diferentes tipos de moléculas, por ejemplo, una barra lateral puede constar de una barra de búsqueda y diferentes tipos de widgets, o de La misma molécula repetida varias veces., por ejemplo, un puñado de bloques de puestos relacionados uno debajo del otro. Y, puede ser la combinación de estos dos..

Organismos - Ejemplo

En el sitio web de Hongkiat, la barra lateral podría ser un organismo. Se compone de un barra de búsqueda (un tipo de molécula, que se muestra una sola vez) y varias publicaciones recomendadas (Otro tipo de molécula, mostrada muchas veces).

Sin embargo, el organismo de la barra lateral también puede verse como la composición de un molécula (la barra de búsqueda) y otro organismo (El widget de publicación recomendado con varias publicaciones recomendadas). El diseño atómico es un modelo flexible, Las reglas no son muy estrictas, por lo que en este caso podemos definir el mismo bloque de construcción tanto como una molécula como un organismo..

4. Plantillas

La siguiente etapa en la jerarquía de diseño atómico son plantillas. Como se puede ver, esto es cuando el diseño atómico. Deja de usar la analogía química. Brad se abstiene de la terminología en este punto ya que cree que es menos comprensible para los clientes y otras partes interesadas, y son esencialmente las dos últimas etapas (plantillas y páginas) que los diseñadores necesitan vender.

Plantillas Se construyen de organismos. Son objetos a nivel de página pero sin el contenido final. El propósito de las plantillas es representar la estructura del contenido subyacente.

Las plantillas muestran cómo diferentes átomos, moléculas, organismos. “Funcionan juntos en el contexto de un diseño”. Básicamente representan la esqueleto de una página.

Plantillas - Ejemplo

Por ejemplo, piensa en un plantilla de página de inicio Con imágenes de marcador de posición y bloques de texto lorem ipsum..

A continuación, puede ver un ejemplo del libro de Diseño Atómico. Es la plantilla de la página de inicio de la revista TimeInc. Los átomos, las moléculas y los organismos están todos en su lugar, pero solo con contenido esquematico.

5. Páginas

Páginas Representa la última etapa de la jerarquía de diseño atómico. Las páginas son “instancias específicas de plantillas”. En la etapa de la página, las plantillas obtienen poblado con contenido real (copia, microcopia, imágenes, videos, etc.), tal como aparecerán en la interfaz de usuario real.

Las páginas permiten a los diseñadores ver cómo experiencia del usuario final se verá como a prueba el diseño con usuarios reales, y para medir qué tan bien se desempeña en términos de usabilidad, conversión, accesibilidad y otras métricas.

Páginas y variaciones de plantillas

El otro objetivo de la etapa de la página es hacer variaciones de plantilla posible. Hablamos de variaciones de plantilla cuando el subyacente. la plantilla es la misma pero la poblacion el contenido es (ligeramente) diferente. Por ejemplo, si desea mostrar contenido diferente a diferentes grupos de usuarios (por ejemplo, para visitantes frente a usuarios registrados), o cuando un título es mucho más largo que los otros.

Usar variaciones de plantilla es crucial si queremos crear. consistente y resistente interfaces de usuario. Los componentes más pequeños (átomos, moléculas, organismos) deben Funcionan bien en diferentes escenarios..

Por ejemplo, un botón debe parecer cliqueable con cualquier elemento que lo rodea. Si no parece accionable en una cierta variación, necesita rediseñar el átomo del botón hasta que se adapta a todos los casos de uso.

Páginas - Ejemplo

A continuación, puede ver la etapa de la página de la plantilla de la página de inicio anterior de TimeInc. Se ve diferente, ¿eh? Esto es simplemente una variación de plantilla, aunque. Para tener una interfaz de usuario efectiva, el equipo de diseño tiene que pensar mucho lo que puede cambiar en el sitio real. Luego, también deben probar el diseño para esa variación de plantilla (página).