Contenido del curso
AutoLayout y Variants
Design Systems
Prototipado
Plugins
Despedida
Introducción a los sistemas de diseño
Contenido del curso
Introducción a los sistemas de diseño
Paradigma del diseño atómico
Definición de diseño atómico
El paradigma del diseño atómico es un modelo ideado por Brad Frost para crear los elementos que componen un Sistema de Diseño y está basado en la química.
Se trata de una nomenclatura que se utiliza para reducir la complejidad de los sistemas de diseño de interfaces y para definir jerarquías en los elementos. Esto ayuda a generar una mayor limpieza en la organización de los elementos utilizados en las interfaces, siendo útil tanto para las complejas como las más simples.
Elementos
El diseño atómico está compuesto por elementos organizados en la siguiente jerarquía, siendo de menor a mayor: átomos, moléculas, organismos y sistemas. Se pueden añadir más niveles jerárquicos si fuera necesario.
Son los elementos básicos de la construcción de una interfaz. Su característica principal es que carecen de sentido por sí mismos, por lo que necesitarán ser acompañados por otros átomos para tener un sentido.
Los átomos pueden ser: títulos, textos, colores, tipografías, espaciados, labels, inputs o botones, entre otros.
El átomo debe ser nombrado, definido y acotado con márgenes para conocer cómo se comporta al ser juntado con otros átomos y que no se cree un conflicto entre ellos.
Se obtienen juntando varios átomos diferentes, por lo que son el siguiente elemento en la jerarquía.
Las moléculas se pueden utilizar de forma independiente y aislada, ya que aportan suficiente información como para guiar una acción dentro de la interfaz.
Las moléculas pueden ser por ejemplo una cabecera, footer o post. Otro ejemplo de molécula puede ser un campo de recogida de datos, que estaría formado por una combinación entre un label y un input.
Deben ser definidas y acotadas para conocer cómo se comporta en convivencia con otras moléculas, de la misma manera que ocurre con los átomos.
Se obtienen juntando moléculas diferentes y forman una sección o parte de nuestro producto. Los organismos consiguen ofrecer una experiencia completa al usuario.
Pueden ser las páginas de home, contact o about que forman una web. Otro ejemplo de organismo es un formulario, que se crearía por la combinación de campos de recogida y botones.
Con varios organismos podremos formar sistemas que son los apartados esquematizados dentro de una página.
Los sistemas pueden ser: la web, aplicación, software o producto digital que estemos construyendo.
Con este modelo se consigue una mayor consistencia y estabilidad del sistema de diseño, lo que se traducirá en un código más consistente. Además, se alcanza una mayor velocidad de trabajo y una resolución de problemas de forma más efectiva.
Sistemas de diseño
Definición
Un sistema de diseño consiste en una serie de elementos y patrones de diseño, que son utilizados como reglas o decisiones de negocio que rigen la composición de un producto.
Librería de componentes de un sistema de diseño
Los componentes son cada uno de los elementos y herramientas utilizadas para que la persona usuaria logre cumplir sus objetivos.
Siendo los componentes cada una de las partes que nos van a ayudar a realizar el proyecto, es conveniente tenerlos recogidos en una librería de componentes, para poder trabajar con ellos de forma ágil:
No hace falta tener una gran librería de componentes de diseño, podemos tener solo los que más utilizamos.
Cursos
Finalmente, puedes encontrar otros cursos en Platzi para poder ampliar tus conocimientos.