Introducción a los sistemas de diseño
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.
Paolo Carrion
Estudiante
Edhu Nuñez Alvarado
Estudiante
Jose Domingo Diaz Perez
Estudiante
Julio Servan
Profesor
Art Michel
Estudiante
Laura Acevedo
Estudiante
Pedro Isaac Aguilar
Estudiante
Dario Espinosa
Estudiante
Alexis Acosta
Estudiante
María Luisa Barboza Restrepo
Estudiante
Jeisson Espinosa
EstudianteHola comunidad 👋🏻, les recomiendo leer la documentación de Material Design para que puedan darse una mejor idea de cómo es que podrían estructurar los elementos de sus sitios web 😉.
Gracias compañero
De verdad, muchísimas gracias Julio. Este curso marca una duración de 2 horas, pero en realidad ya llevo casi 8 horas tratando de entender todo y de verdad que estoy sumamente satisfecho.
Gracias a ti Jose Domingo, me alegra que te esté gustando! Ya ti tu aporte en la comunidad!
Por aquí les dejo el sistema de diseño de Atlassian , hace un par de años lo conocí y lo siguen manejando de una manera impecable 👌
Excelente resumen. Me recordó el curso de Sistemas de Diseño que da Rulótico. De manera que ahora que estoy tomando este curso, veo que ambos se complementan muy bien, puesto que éste curso es la aplicación en el software Figma de todo lo visto en el curso de Rulótico.
Siendo el** 2022 el diseño atómico a tenido su update**,y todo se debe a cuando tenemos productos digitales que tienen una misma base de organismos pero se usan para crear nuevos productos por ejemplo o en el caso contrario que empezamos a hablar de incluso fragmentos antes de lo átomos , los design tokens, checate este articulo: https://uxdesign.cc/atomic-design-2022-what-we-can-learn-from-eames-and-other-design-giants-4d8e2f579daa
Muy interesante esta explicación, ahora me queda más claro cómo funciona un sistema de diseño y sus componentes.
Es muy emocionante como cada definición crea sentido en la práctica. Muchas gracias por la lectura
Información resumida de esta clase #EstudiantesDePlatzi
Este paradigma es creado por Brad Frost, se utiliza para crear los componentes que se encuentran en un sistema de diseño y es basado en la química
Este paradigma nos ayuda a generar una mayor limpieza en la organización de los elementos
El diseño atómico tiene las siguiente jerarquía, empezando de menor a mayor: Átomos, moléculas, organizamos y sistemas
Átomos: Son los elementos más básicos en el diseño de la interfaz como por ejemplo los títulos, textos, colores, Etc.
Es importante que el átomo tenga nombre y este acotado por margenes
Moléculas: las obtenemos juntando varios átomos y podemos utilizarlas de manera independiente, un ejemplo de molécula puede ser un header, footer o post
Estas moléculas pueden ser definidas y acotadas
Organizamos: Los creamos juntando varías moléculas y son una parte de nuestro producto como por ejemplo: Páginas enteras o formularios
Sistemas: Se crean uniendo varios organismos y estos son los apartados esquematizados dentro de una página
Un sistema puede ser una web, App o un Software
Entender y saber aplicar todo esto nos ayuda con la consistencia, estabilidad, velocidad en la creación de nuestro producto y con el sistema de diseño
Sistema de diseño: Este 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
Para esto debemos tener una librería de componentes de un sistema de diseño, allí es donde encontramos todos los componentes que nos ayudara a crear nuestro producto mucho más fácil
Existen cursos en Platzi para aprender a gestionar correctamente estas librerías de componentes