Partículas de diseño elemental descubiertas

Honestamente, ya me da vergüenza volver a hablar sobre diseño atómico . Casi todo se ha dicho sobre el concepto de sistemas de diseño y, al parecer, no hay nada que agregar. Pero espera un momento! Después de todo, los átomos en el mundo real consisten en algo: protones, neutrones, electrones ... ¿Podemos comparar el diseño funcional con el que trabajamos con la estructura de un átomo? Estoy seguro de que la respuesta es sí y por eso ...

Estilos globales

El advenimiento de los estilos globales en las herramientas de diseño ( Figma y, más recientemente, Sketch ) como una entidad fusionable a cualquier objeto en una mesa de trabajo me impulsó con una metáfora. La composición de un átomo es equivalente a las acciones que aplicamos a un objeto de diseño: seleccionamos un color, agregamos un trazo, a veces también una sombra, y luego cortamos las esquinas si es un rectángulo.

Si consideramos, por ejemplo, un botón como molécula que consta de dos átomos: un fondo y una inscripción, entonces el fondo puede verse influenciado de la siguiente manera:

1. Añadir color (relleno) . Cualquier fondo se puede pintar o rellenar con textura.
2. Añadir un trazo (trazo) . Luego ajusta su grosor, hazlo punteado, cambia de color.
3. Esquinas redondeadas (radio de la esquina) . Los botones con las esquinas más redondeadas posibles parecen volver a ser populares en el futuro previsible.
4. Añadir sombra . Principalmente externo, pero a veces interno. Las herramientas modernas le permiten superponer varias sombras.

No incluí aquí la rotación del objeto y el cambio de tamaño, porque se trata más de cambios en el espacio

Por cierto, si usa Figma , le recomiendo que preste atención a nuestros sistemas de diseño listos para usar . Ayudan a los trabajadores independientes a completar más pedidos por mes, a los programadores se les permite crear hermosas aplicaciones por su cuenta, y el equipo lidera los "sprints" más rápidos utilizando sistemas de diseño listos para el trabajo en equipo.

Y si tiene un proyecto serio, nuestro equipo está listo para implementar un sistema de diseño dentro de la organización basado en nuestras mejores prácticas y adaptarlo a tareas específicas utilizando Figma. Web / escritorio y cualquier dispositivo móvil. También estamos familiarizados con React / React Native. Escribe a T: @kamushken

Partículas elementales de un átomo de diseño.

Eche un vistazo al diagrama de composición atómica antes de continuar:




Ahora la parte divertida. ¿Alguien ya ha adivinado qué propiedades de un objeto de diseño se pueden comparar con las partículas atómicas?

Los neutrones son un relleno. Al visualizar la estructura de un átomo, los neutrones están en el centro. La metáfora encaja perfectamente.

Protones : esquinas redondeadas. Sus ángulos atomizados se asocian inmediatamente con esta propiedad en el diseño.

Tengo muchas ganas de comparar nucleones con un derrame cerebral. Por desgracia, el nucleón no es una partícula, sino solo un nombre que combina protones y neutrones, ¡pero no importa! Entonces los nucleoles son una sombra. Porque el trazo reúne lo que hay dentro. Esto es exactamente lo mismo que la imagen de arriba.

Un electrón es una sombra. Wikipedia me muestra esta imagen que se asemeja a una sombra. Combinación perfecta en todos los aspectos.

Volver a diseñar sistemas

Esto es solo una adición a la teoría general del diseño atómico en el diseño de sistemas de diseño. El concepto de estilos globales es definitivamente adictivo para Figma (parece que Sketch recientemente ha ido de la misma manera). Y gracias a esta presentación, nosotros, diseñadores y desarrolladores obtuvimos aún más flexibilidad para la personalización si planificamos efectivamente la arquitectura del sistema futuro:



PD: El diseño requiere práctica, no teoría. Pero a veces vale la pena distraerse de la práctica por un corto tiempo para estructurar la experiencia acumulada en nuevas teorías.

PPS: la imagen de la publicación, por cierto, se puede aumentar . Lo hice yo mismo!