Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Industry
Webdesign

Desarrollo para Diseñadores: Pensamiento del Diseño Atómico

by
Length:ShortLanguages:
This post is part of a series called Development for Designers.
Designers, We Need to Talk About Development

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

¡Bienvenido otra vez a la siguiente entrega del Desarrollo para Diseñadores! Si te perdiste el último artículo por favor leélo. En éste artículo discutiré mi opinión sobre una escuela de pensamiento que podría decirse cierra la brecha entre desarrollo y diseño.

La frase llamativa, palabra reservada o concepto con el que necesitas familiarizarte es "Diseño Atómico" El Diseño Atómico fue acuñado como:

!... una metodología para crear sistemas de diseño." - Brad Frost

Para mí, ésto fue un avance muy importante. Como desarrollador sé que la lógica se construye de los conceptos más pequeños; variables, arreglos, funciones, clases. Como diseñador, lo mismo aplica. Puedo crear algo complejo de seleccionar colores complementarios, fuentes, espacio positivo o negativo y forma. En efecto, es una gigante metáfora para nuestra propia existencia humana.

atomic design gonna be a book
Será un libro.

Esencialmente, el Diseño Atómica trabaja de ésta manera: átomos forman moléculas, moléculas forman organismos. Los organismos pueden ser simples o complejos. Una bacteria o un ser humano sentado detrás de ésta computadora escribiendo sobre el mismo concepto. Todos somos ejemplos de Diseño Atómico.

Ésta misma metodología se caracteriza perfectamente para las experiencias web, la IoT (Internet de las Cosas), o desarrollo móvil, pues proporciona una arquitectura que solidifica la sencillez para crear algo complejo. Después de todo, ¿no es la sencillez la sofisticación definitiva?

Sistemas, No Páginas

El Diseño Atómico es un sistema. Un sistema que funciona junto con múltiples partes para crear algo único. Es un sistema que puede entenderse si eres un diseñador o un desarrollador, y así, hace ambos trabajos fáciles de mantener, cambiar y avanzar. Por no mencionar, también libera la tensión y la presión, si, digamos, un dieñador o desarrollador clave necesita ser reemplazado o dejar a un equipo.

Aquí está una rápida visión general:

Átomos

Los átomos son los bloques de construcción básicos; entidades que no pueden romperse mientras siguen siendo funcionales. Son las etiquetas HTML como <p> , <label> , <input> , <span> .

Los átomos pueden también utilizarse para paletas de color o fuentes. Sería bueno notar, sin embargo, que los átomos pueden ser abstractos por si sólos sin contexto. Un átomo bien definido producirá una molécula bien formada.

Molécula

Las moléculas son combinaciones y arreglos de átomos. Esencialmente la columna vertebral de tu sistema de diseño. Una molécula sería algo como navegación o formulario de búsqueda conteniendo por ejemplo un átomo <input>, átomo <label>, y un átomo <button>. Junto con algunos más si quieres crear una molécula compleja.

Organismos

Un organismo construye aun más, dándonos una combinación de moléculas. El header entero de un sitio web puede ser considerado un organismo. Desde su estructura base, involucra un arreglo único de átomos y moléculas para crear un organismo complejo. Una sección footer sería considerada un organismo. Si lo miramos en contexto, la grilla de los productos dentro de una plantilla de WooCommerce sería considerada un organismo; repite la misma molécula con contenido diferente, o incluso los mismos átomos con diferentes valores para cada uno.

Grayson - A Stylish and Versatile Shop Theme
Grayson - Un Tema de Tienda con Aplicación de Estilo y Versátil

Plantillas

Aunque ésta sección realmente no tiene nada que ver con la analogía que Brad ha estado elaborando, las plantillas pueden ser utilizadas o reutilizadas para mostrar arreglos de organismos. En éste punto, el maquetado llega a ser realmente esencial. Los humanos comienzan como simples células, crecen hasta ser un feto, un bebé completamente formado, adolescente, adulto joven, y detendremos la analogía cuando llegamos a nuestra plantilla. La plantilla principal es un arreglo semántico estéticamente placentero de organismos, moléculas y átomos. Esencialmente, nos estamos refiriendo a prototipos que han sido desarrollados con el tiempo.

Páginas

Cuando una plantilla evoluciona,y la materializamos con imágenes, contenido y redacción etc, tenemos una página. Una página por ejemplo sería subida a una herramienta como InVision para que un usuario realice una prueba básica antes de su desarrollo.

Conclusión

Te dejaré con unos cuántos pensamientos finales. No hay una forma correcta para manejar la relación entre desarrolladores y diseñadores. Elaborar una experiencia web: sea un sitio web, plataforma, red SaaS o PaaS, implica combinar los talentos e ideas de diseñadores y desarrolladores. El uno, no puede vivir sin el otro. Así, ningún proyecto debería alguna vez ser invalidado para el diseñador ni para el desarrollador. Espero para el final de ésta serie que tengas un concepto más claro, y quizá te dará algunas ideas de cómo trabajar mejor con tus compañeros de equipo.

También me gustaría mencionar que como esta serie se enfoca en desarrolladores y diseñadores, no significa decir que no reconozco a los redactores o a los gestores de contenido; tu trabajo es realmente primordial cuando se trata de realizar una magnífica experiencia web.

Ahora que tienes una comprensión de Diseño Atómico, podemos realmente ponernos a trabajar materializando cómo trasciende al diseño y al desarrollo.

En los próximo artículos vamos a profundizar en los mundos respectivos del front y back-end. Si eres un diseñador, o incluso un desarrollador principiante, los próximos dos artículos te ayudarán a ganar conocimiento fundamental. Si vienes del mundo del diseño, o incluso los medios impresos, trasladándose hacia el desarrollo, los conceptos que explicaré te ayudarán a cerrar la brecha en la comprensión de la transición del diseño al desarrollo.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.