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
Aprender las bases de un proyecto de Diseño de Interfaz y UX
Qué aprenderás sobre el diseño de interfaces UI y UX
¿Qué es user experience?
Qué implica ser un diseñador de interfaces
Básicos de Diseño
Principios de Gestalt y UX
Principios de Usabilidad y Heurística
Kickoff del proyecto del curso
Realizar la investigación inicial de un proyecto UI
Tipos de investigación
Entender el problema: ¿Qué queremos solucionar?
Benchmarking
User Research: Encuestas
User Research: Entrevistas
User Personas
User Journeys
Organizar la información y bocetar los primeros wireframes
Análisis de Interfaces
Introducción a la Arquitectura de la Información
Patrones de UI
Wireframes: comienza en papel
Guerrilla testing con Paper Prototyping
Wireframes digitales en Sketch
Diseñar los detalles de nuestra interfaz de producto
Mood Board
Diseñando interfaces con Sketch, empty states, mensajes de error y notificaciones
Diseño Responsivo y Adaptativo
Design System
User testing
Entregar el diseño de la interfaz e iterar
Cómo entregar para desarrollo: Zeplin
Cómo seguir probando tu interfaz: A/B Testing con Optimize y HotJar
Cierre del curso
Mentorías expert
Diseño UI en vivo
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Design System
24/29Recursos
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.
-
Molécula: la unión de dos o más átomos.
-
Organismo: El conjunto de átomos y moléculas, que ya dan un componente con cierto sentido o una función evidente.
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:
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
Recomendación: Curso de Sistemas de Diseño.
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 “Design 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
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:
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.
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
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.