No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Design System

24/29
Recursos

Se refiere a una colecci贸n de componentes reusables (botones, im谩genes, colores鈥) que ayudan a ahorrar tiempo y a mantener la consistencia dentro de las interfaces al momento de trabajar colaborativamente. La forma m谩s sencilla de hacer un sistema de dise帽o es con el paradigma atomic design.

Dise帽o at贸mico

Aqu铆, los componentes se dividen en:

  • 脕tomo: Siempre es el elemento m谩s b谩sico del dise帽o, como un campo de texto, un bot贸n, un 铆cono.
    2022-05-29T14_04_30.png

  • Mol茅cula: la uni贸n de dos o m谩s 谩tomos.
    (1).png

  • Organismo: El conjunto de 谩tomos y mol茅culas, que ya dan un componente con cierto sentido o una funci贸n evidente.
    51.png

De esta manera, se constituyen los sitios web desde m铆nimas instancias que pueden ser modificadas sin alterar todo el dise帽o y evitar contratiempos, adem谩s de mantener todos los cambios archivados.

Dentro de un buen sistema de dise帽o, se integran todos los elementos y sus variantes, con una impecable documentaci贸n. As铆, cualquier persona que desee acudir a la referencia principal no tendr谩 problema para encontrar cada componente para su consulta r谩pida.

Aportes 67

Preguntas 11

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Lus comparto este link que refuerza lo que la profe explic贸.
https://blog.prototypr.io/how-to-implement-atomic-design-in-your-current-project-368005f5c044

DESIGN SYSTEM o SISTEMA DE DISE脩O

Es una herramienta muy importante al dise帽ar una interfaz. Es una colecci贸n de componentes reusables como botones, im谩genes, colores, tama帽o de texto, entre otros. Nos sirven para mantener la consistencia dentro de nuestro producto, nos ayudan a ahorrar tiempo y colaborar con otros dise帽adores.

Una forma sencilla de iniciar un design system es con Atomic Design.

Atomic Design: Se divide en 脕tomos, Mol茅culas y Organismos.

脕TOMOS: El elemento mas b谩sico de interfaz(Bot贸n, 铆cono, campo de texto.)

MOL脡CULAS: Es la uni贸n de dos o mas 谩tomos que funcionan como una unidad (Caja de B煤squeda simple, tambi茅n una mol茅cula puede ser una imagen con texto que puede servir para mostrarle contenido al usuario

ORGANISMOS: Es el conjunto de varios 谩tomos y mol茅culas que empiezan a formar componentes un poco mas complejos; Puede ser un Header que incluye Logotipo, caja de b煤squeda y un sistema de navegaci贸n.

Otra manera es repitiendo muchas veces una mol茅cula como para ver una lista de resultados o una parrilla.

Es importante hacer un design system para mantener consistencia en el producto y nos ayudar谩 a agilizar nuestro proceso de dise帽o.

Hola, les comparto mi design system.

Hay dos cursos muy buenos que se enfocan en Design System, les recomiendo ver primero el de Sistemas de Dise帽o y luego el de Curso de Sistemas de Dise帽o para Desarrolladores.

Este es mi trabajo 馃槂


Design System
Este es una colecci贸n de componentes reusables, como botones, im谩genes, tama帽os de texto, colores entre otros que nos sirven para mantener la consistencia dentro de nuestro producto, tambi茅n nos ayudan a ahorrar tiempo y a colaborar con otros dise帽adores.

Una forma de empezar a hacer design system es con atomic design, en este se dividen los componentes en 谩tomos mol茅culas y organismos.

脕tomo: Es el elemento m谩s b谩sico de la interfaz (bot贸n, icono, campo de texto)

Mol茅culas: Son la uni贸n de dos o m谩s 谩tomos que funcionan como una unidad (Capo de b煤squeda simple caja de texto - Bot贸n b煤squeda), tambi茅n podemos tener una mol茅cula como imagen con un texto que muestra contenido al usuario.

Organismo: El conjunto de varios 谩tomos y mol茅culas que forman componentes un poco m谩s complejos (Ejem: Header), otra forma de crearlos es repitiendo muchas veces una mol茅cula (Ejem: Lista resultado - Parrilla).

De esta manera podemos acomodar nuestro design system, este puede tener:

  • 脕tomos
  • Paleta de colores
  • Botones en diferentes estados
  • Tipograf铆a
  • Estilos tipogr谩ficos
  • Variantes de logotipo
  • Ejemplos de formularios
  • Diferentes tama帽os de im谩genes

Este es importante para poder mantener consistencia en nuestro producto y tambi茅n nos ayudara a agilizar nuestro proceso de dise帽o.

脕tomo


Mol茅cula


Organismo

Hola!
Les comparto mi reto:

Si quieren saber un poco mas de Atomic Design, aqui esta el libro del creador de esta metodologia https://shop.bradfrost.com/

Pienso que el Design System es muy importante para equipos colaborativos, puesto que permite estandarizar los diferentes elementos de la interfaz cuando se crea un proyecto grande.

At贸mos (B谩sicos del dise帽o):

  • Paleta de colores
  • Tipografia
  • Botones en diferentes estados
  • Variantes de la marca (tama帽os y colores)
  • Ejemplo de formularios
  • Tama帽o de im谩genes
  • Iconograf铆a
  • Estilos tipogr谩ficos

Atomic Design
脕tomo: Elemento m谩s b谩sico de la interfaz.
Mol茅cula: Conjunto de dos o m谩s 谩tomos que funcionan como una unidad.
Organismo: Conjunto de varios 谩tomos y mol茅culas o repetici贸n de mol茅culas.

Reci茅n estoy comenzando y veo que hay much铆simo que aprender! eso motiva mucho!!

Es incre铆ble lo que he estado aprendiendo con el dise帽o de interfaces 鉂わ笍 wao

Hola, olvidaron adjuntar el archivo de sketch que dijeron que subir铆an con el design system que se mostr贸 en esta clase

Es esto por lo que se deber铆a empezar antes de llegar a mockups?

Atomic Design - Se divide en 脕tomos, Mol茅culas y Organismos.

脕TOMOS - El elemento mas b谩sico de interfaz(Botones鈥)
MOL脡CULAS - Es la uni贸n de dos o mas 谩tomos que funcionan como una unidad(Caja de B煤squeda)
ORGANISMOS - Es el conjunto de varios 谩tomos y mol茅culas que empiezan a formar componentes un poco mas complejos(Header, Logotipo)

Hola Tannia, esta clase esta repetida, ya sali贸 este video

Estos son todos mis elementos

Aca les comparto un ejemplo de Atomic Design 馃槃

Me gustar铆a compartirles una parte de un sistema de dise帽o que realice

Les comparto mi design system

Hola鈥
Les comparto mi Design System

Dios! que buen curso 馃槀 de verdad se aprende bastante. Ya depende de cada quien profundizar, pero de primeras :3 esta genial ver el desarrollo que conlleva una app o un sitio, antes de salir al mercado.



Un Sistema de Dise帽o es una herramienta colaborativa, creada por componentes re-utilizables y guiada por est谩ndares. Dicho de forma m谩s f谩cil: es todo lo que hace a la construcci贸n de un producto.
Estos sistemas nos permiten poder administrar el caos, logrando crear mejores productos. Como UX Designer hay que tener en cuenta la importancia de los sistemas de dise帽o y su implementaci贸n para poder llevar acabo un proceso.

Design System: reutilizar patrones de dise帽os.
Se puede empezar con Atomic Desing. 1. 脕tomo: Elemento m谩s b谩sico., 2. Mol茅culas: Uni贸n de dos 谩tomos, ejemplo: Caja de b煤squeda y bot贸n. Organismo: Conjunto de varios 谩tomos y mol茅culas

UI kit

Les comparto este link:https://youtu.be/LON8IjAPEu4 donde pueden aprender mas sobre Atomic Design. Tiene ejercicios y explica muy bien el tema.

Una herramienta importante para dise帽ar una interfaz, es una coleccion de componentes reusables, definir los colores, la tipografia, los estilos de imagenes que vamos a usar, las iconografia, todo el lenguaje visual que tenga nuestro producto.
Atomic design es un metodo muy sencillo para empezar a crear un 鈥淒esign System鈥.
Esto es importante para mantener consistencia en nuestro producto y nos ayuda agilizar nuestro proceso de dise帽o.

Mart铆n Coronel
UX/UI Design

Web: https://martincoronel.com/

Hola Tania!
Nos podr铆as compartir el link del ejemplo de Design System que mencionas en el video por favor o en d贸nde lo puedo encontrar?

Gracias!

here is mine:

Basics:

Molecules/Organism

Un ejemplo valioso es el DS de Atlassian https://atlassian.design/ donde no solo tiene elementos visuales sino los fragmentos de c贸digo. Con eso se hace escalable a desarrollo, fases del proyecto y nuevos integrantes del equipo.

脕tomo.
.

.
Mol茅cula.
.

.
Organismo.
.

Este curso est谩 muy bueno.

El design system es de suma importancia porque nos permite mantener consistencia en nuestro producto asi como nos concede acelerar el proyecto de dise帽o

Biologia + Dise帽o: Design System

Design System: colecci贸n de componentes reusables.

Qu茅 maravilla este curso, la verdad.

Gracias

este libro es buenisimo si quieren profundizar un poco m谩s https://atomicdesign.bradfrost.com/chapter-2/

隆Excelente clase! Hasta el momento el mejor curso que me he encontrado en la escuela de product design, los invito a tomar el curso de design systems que ampl铆a mucho este tema y es genial para documentar el proceso. adem谩s les comparto el siguiente ebook que me ha sido muy 煤til:

https://www.amazon.com/-/es/Alla-Kholmatova-ebook/dp/B076H49W1G/ref=sr_1_2?__mk_es_US=脜M脜沤脮脩&dchild=1&keywords=design+systems&qid=1632763720&sr=8-2

Esta bien bonito el Design System, se creo para darle homogeneidad cuando varios dise帽adores trabajaban en un mismo proyecto. Es como la documentaci贸n de una librer铆a para los programadores.

Aqu铆 mi Design System

Comparto mi Design system

Comparto mi dise帽o.

馃槂

Este es mi DS

Listo aqu铆 est谩 mi design system.

Design System

  • Herramienta importante que consiste en una colecci贸n de componentes reutilizables, como botones, im谩genes, colores, 铆conos, tama帽os de texto, etc. que sirven para mantener la consistencia del producto. Adem谩s de que ayuda a ahorrar tiempo y a colaborar con otros dise帽adores.

  • Una forma sencilla de hacer un sistema de dise帽o es con Atomic Design, que subdivide los elementos en 谩tomos (b谩sicos, como un bot贸n o un campo de texto), mol茅culas (uni贸n de dos o m谩s elementos b谩sicos que funcionan como una unidad. Ej: una imagen con texto o una caja de b煤squeda, que une un bot贸n a un campo de texto), y organismos (grupo de elementos b谩sicos y combinados que empiezan a formar componentes m谩s complejos, como listas de resultados, un header o un footer).

Ejemplo Design system

Un design system es mas que crear los patrones de dise帽o visuales del sitio web o aplicaci贸n. un design system incluye voz y tono de marca, tambi茅n branding, desde luego el uikit documentaci贸n de casos de uso, etc. les dejo un link de un repositorio de los mejores design systems de grandes marcas, donde podemos aprender a fondo lo que un DS incluye.

https://designsystemsrepo.com/design-systems

muy bien explicado, me quedo claro. gracias

脕tomo.
.

.
Mol茅cula.
.

.
Organismo.
.

Guaw鈥! desconoc铆a estos t茅rminos en Design System (Atomic Design: 脕tomo, Mol茅cula, Organismo).

Les comparto nn design system que realice