Diseño atómico: tomar en el aire lo que creía que sabía sobre el diseño web

Es una creencia ordinaria de que la flexibilidad es la misma que sin restricciones, que para ser creativo, debes estar inacabado. Sin embargo, para completar un proyecto, especialmente uno que sea tan complicado como el diseño web, crear la estructura en realidad puede darle más flexibilidad. Necesita un marco, es negociable. La flexibilidad de los músculos artísticos y creativos donde realmente tienes la libertad de dar lugar a modelos inspirados 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.
Los sistemas de diseño de diseñadores ya no crean páginas web; Crean sistemas de diseño. Los sistemas de diseño incluyen:
Color
Parrilla
Textura
IMPRESIÓN
Y así
Me gusta 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 una forma de traducir una experiencia consistente y un lenguaje visual en un producto cuando se trabaja en diferentes puntos de contacto. ”
Los elementos de diseño pueden ser subjetivos y pueden volverse rápidamente abrumadores y caóticos. Para clasificarlos, el diseño debe verse de una manera más metódica. Así lo hizo el diseñador web Brad Frost. El nacimiento del diseño atómico Así es como Brad vino con el diseño atómico: “Buscando inspiración y paralelo, 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. Estas unidades atómicas están vinculadas entre sí para formar moléculas, que a su vez se combinan en organismos más complejos para finalmente crear todo el asunto en nuestro universo. Continúa explicando que las interfaces están formadas por componentes que se pueden clasificar en bloques. Aquí está el pedido de la más pequeña a la más grande:
átomo
Moléculas
cuerpos
Modelo
página
Fuente: Bradfrost.com

Los elementos básicos del diseño atómico La principal atracción del diseño atómico es que promueven la consistencia. Muchos de los elementos que crea se pueden reproducir, reutilizar o escalarse fácilmente. Y para hacer un seguimiento de todos, los diseñadores pueden construir una biblioteca sola en la que pueden ver todos sus elementos y estilos en un solo lugar. También hay espacio para la personalización, pero solo a medida que los elementos básicos se vuelven más complejos y amplios como dominio. Entremos en los cinco bloques:
1. Átomos Debido a que los átomos deben contar en el mundo natural, las etiquetas HTML son para interfaces web. Importancia: 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 su cuenta, se les pide que construyan la interfaz web. Moléculas Las moléculas son más complejas que los átomos, pero generalmente no son complejas. Cuando agrupa átomos que no son tan útiles, tiene moléculas más útiles: formulario de búsqueda de etiquetas + botón de entrada + (átomos) = formulario de búsqueda completo (molécula)
3. Organismos Cuando agrupa las moléculas, obtienes organismos, que son más complejos que sus predecesores: logotipo + navegación + forma de búsqueda + iconos sociales (moléculas) = ​​masthead completado (cuerpo)

Idealmente, podrá reutilizar los organismos en el sitio o en diferentes sitios web, manteniendo el aspecto general y personalizándolo con diferentes textos e imágenes. Por ejemplo, puede usar el mismo tipo de cabecera en todos los sitios web que diseña o crear un producto específico para el producto (imagen + título + precio) que repite en la página del producto. Este es el momento en que la interfaz web realmente comienza a contornearla de una manera única y personalizada. Antes de que su interfaz sea solo una colección de artículos simples. Durante la etapa de los organismos, el sitio se vuelve más visual.

Si compartiera su proceso con un cliente, esta es la parte a la que irían: “Oh, entiendo”. Este es el momento de comenzar a Wireframing o para armar modelos para que el cliente pueda darle comentarios antes de ir más allá. 4. Plantillas Cuando agrupan los organismos juntos, tienen plantillas. Este es el momento en que se encuentra la apariencia real de la página. Si bien las moléculas y los organismos tienen sus propias estructuras internas, la etapa de las plantillas es el momento en que comienzas a ver cómo se completan e interactúan entre sí; donde se colocan entre sí; y la forma en que fluyen como un todo. La plantilla ofrece el contexto de moléculas y organismos. Tenga en cuenta que las plantillas han contenido sustituyentes, no personalizadas o originales. Fuente: bradfrost.com


5. Las páginas llevan las plantillas al siguiente nivel reemplazando el contenido sustituyente con contenido real. Probablemente no será el contenido final, pero será más representativo para el diseño y el contenido final. Agregar contenido permanente de alta calidad en este momento podría ser un desperdicio, porque el sitio web aún debe ser probado, revisado y modificado. Dicho esto, es posible conectarse al contenido completo: depende de dónde se encuentre en este proceso. Esta es la etapa en la que el sitio web será el más controlado. Dependiendo de las revisiones y comentarios que reciba, se deben cambiar las moléculas, organismos y plantillas. Este también es un buen momento para probar las variaciones de diseño.

Pensamientos finales Lo que sobre el diseño atómico es que no es nuevo, el verbo lo es, pero la teoría no. Así es como se han diseñado los sitios web durante mucho tiempo. Hablar en términos de diseño atómico no lo hará automáticamente un gran diseñador o desarrollador; No es un reemplazo para un 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 el proceso de sus clientes. Y para el desarrollador organizado, es una forma de compartimentar proyectos. Podrá describir en un componente o un pequeño grupo de elementos que no funcionan. Puede ayudarlo a ver el bosque de los árboles en lugar de decir: “Todo el asunto está defectuoso”. El diseño atómico le permite adoptar la creatividad sin perderla. Hay elementos básicos y sistemas de diseño de una manera que lo hace comenzar un proyecto más rápido, por lo que puede pasar tiempo donde su arte y sus habilidades son los más necesarios: hacer adaptaciones complicadas, resolver problemas, satisfacer las necesidades de los clientes y finalmente crear un Sitio web más allá de la norma. Mantenga este impulso de diseño web y vea 10 reglas para una buena interfaz de IU para seguir en cada proyecto de diseño web. Imagen presentada por Shadedesign / Shutterstock.com