Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Niveles de Sistematización

5/23
Recursos

El Design System Workflow nos ayuda a entender mucho mejor cómo entra, por dónde sale y por cuáles puntos pasa nuestro trabajo cuando trabajamos con sistemas de diseño.

En este workflow o flujo de trabajo comenzamos diseñando y documentando para después hacer deploy (un término de programación para los momentos en que pasamos nuestro trabajo a producción, una versión funcionando en vivo), en esta etapa de deploy debemos tener muy claro para cuál plataforma o entorno estamos trabajando, así tendremos mucho más claro todo lo que vamos a necesitar construir (por ejemplo, cuando construimos páginas web trabajamos en archivos .css con los estilos de nuestros productos).

Pero el trabajo no termina aquí, después de hacer deploy entramos a la etapa de testing para evaluar la efectividad de estos estilos y seguirlos mejorando.

También vamos a aprender sobre Building Design Systems, donde construimos herramientas para que todos puedan usar e implementar las guías y los estilos que estamos trabajando. Para organizarnos y sistematizar estos procesos podemos implementar el modelo solitario, dónde tú, el diseñador haces todo el trabajo para que alguien más lo consuma, pero existen otros modelos como el centralizado o el confederado donde trabajamos con otras personas o incluso otros equipos y pedimos feedback dependiendo de la organización de nuestras empresas.

Aportes 107

Preguntas 11

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

• Solitario: tú construyes, los demás consumen
• Centralizado: tú consultas a los demás departamentos y construyes un SD
• Confederado: varios equipos dentro de varios departamentos y todos construyen el sistema

Un sistema de diseño NO es el uso de las tecnologías aplicadas a los procesos del diseño, son equipos que transforman diseños, pensamientos e ideas en productos reales de software.

#EPIC!

Los sistemas de diseño tiene niveles y cada nivel abarcan diferentes partes del equipo.
Un sistema de diseño es un equipo que convierte lo que se esta pensando se convierta en software. No importa todo lo que tenemos en ui kit, wireframe, prototipo, si al final no es creado en software.
En un sistema de diseño intervienen todo tipo de perfiles (Ux, User research, frontend, backend, etc).

Design System Workflow
En este punto me parece interesante trabajar junto al equipo de “Procesos” de la empresa ya que tendremos que definir el Workflow de trabajo, desde que llega la necesidad hasta que la solución se convierte en Software. tendríamos un modelo Centralizado.

Building Design System: En este punto es darle la capacidad a los demás para poder construir. Para organizarnos podemos utilizar el Modelo solitario nos puede ayudar a impulsar de manera mas rápida la construcción dentro de nuestros equipos. Consiste en que una persona construye y los demás consumen.
También tenemos el** Modelo Centralizado** este modelo es conveniente cuando contamos con un equipo.

Modelo Confederado, contamos con equipos de otros departamentos y todos construyes el sistema hacia dentro.

Para armar estos flujos de trabajos podemos utilizar la herramienta ( https://coggle.it/) .

Martín Coronel
Diseño UX/UI

Web: http://martincoronel.com/
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel

TIPOS DE MODELO organizativos
Solitario: Tu construyes, los demás consumen.
Centralizado: Tu tienes un equipo siendo tú el diseñador. Puedes consultar a otras partes o a otros dptos construyendo un sistema de diseño.
Confederado: Disponer de varios equipos en diferentes dptos y entre todos se construye el sistema hacia adentro y posteriormente se itera (CEO, clientes…). Aunque en última instancia la responsabilidad es nuestra como diseñadores en tomar decisiones.

Normalmente los diseñadores trabajamos diseñando pantallas para los clientes de las agencia o para los productos internos de una compañía 🏥🏨🏦, pero no entendemos el cómo, el por qué o el para qué de lo que estamos haciendo 🤔, y cuando trabajamos con plataformas o productos más grandes y robustos nos encontramos con procesos mucho más complejos como recibir feedback, trabajar con versiones diferentes, iteraciones, etc 😕😰.

🎉 Gracias a los sistemas de diseño vamos a organizar y sistematizar estos procesos y hacernos la vida más fácil y ágil 😎👌.

👌 Por aquí dejaré la sistematización del portafolio personal que deseo desarrollar en los próximos días. 😉

Me quito el sombrero ante todos los que aprenden diseño, es algo demasiado loco y teórico, espero no decaer en el proceso porque desde ya me ha roto la cabeza todo esto, creo que esto solo es hasta adquirir un poco de teoria y adaptarme.

Niveles de sistematización:
.
Los sistemas de diseño tienen niveles que abarcan distintas partes del equipo. No tienen que ver con el uso de las tecnologías, un sistema de diseño es un equipo.
.
La construcción de un producto se puede volver muy compleja si hay muchas partes involucradas, por lo que hay que establecer claramente los niveles y la razón por la cual estos existe.
.
Estos vendrían siendo unos buenos ejemplos de niveles:
.

  • Design System Workflow: Es un flujo de trabajo que tiene como objetivo conocer que recibimos de inicio (el input que con el que empezaremos a trabajar) y establecer todos los pasos por los que pasará para convertirse en nuestro resultado de salida.
    .
  • Building Design Systems: Es la construcción de herramientas para que todos puedan usarlas e implementarlas. Es darle la capacidad a los demás para construir.
    .
    Este nivel se subdivide en el modelo solitario que es donde una sola persona crea las herramientas para que los demás puedan trabajar de forma más eficiente.
    .
    El modelo centralizado donde es un equipo el que se encarga de construir las herramientas para los demás.
    .
    El modelo confederado es donde tienes varios equipos dentro de varios departamentos todos creando el sistema que será utilizado.

Documento: Enlace

⚡Pueden ver todas las notas de la clase en este Notion, además le agregué recursos extras, espero les guste.

✔También escribí el siguiente tutorial 8 atajados de teclado para ser un máster en Notion.

Esto convierte a los diseñadores en hacedores de proyectos, no solo en creadores de logos o gráficos.

  • nadie.
  • el perico:

Para este tipo de flujos en nuestra unidad de negocio de UX, utilizamos la herramienta miró, antes llamada real timeboard.

Aquí les dejo el enlace
https://miro.com/

Tu mamá el perico y la vecina jajaja

“Back edns, CEO, UX, tu mamá” jajajaja este curso está genial…
y con respecto a la visión mixta, siempre se ha dicho que la intersección de conocimiento nos permite llegar más lejos y ver lo que otros no ven. Definitivamente enamorado del diseño y de la programación 💪🏼

Este curso es para programadores y diseñadores. Ayudaría a evitar muchos problemas

jajajajaja

  • Tu mamá
  • El perico
  • La vecina
  • Tu abuelita
  • El tendero
  • ¿Quién da más?

No entendí nada 😃

Tu mamá, el perico, Dios! Cómo estoy amando este curso!!

Pienso que todos deberíamos saber un poco de todo.

Todos los programadores deberíamos saber un poco de diseño, todos los diseñadores deberían saber algo de programación.

Ambos conocer lo básico de marketing, ofimática, escritura, etc…

¿Es recomendable utilizar un sistema de diseños para hacer una pagina web?

En los productos digitales, sucede que el diseño entra en el workflow del desarrollo, del marketing, del soporte y de otras fases, por lo tanto ha de difundirse en los diferentes equipos, adaptándose a sus distintas lógicas, léxicos, conocimiento y procedimientos. Es un sistema que afecta de manera transversal al producto, a su servicio asociado y a la marca que lo respalda.

Tú cada vez que lanzas algo:

Normalmente los diseñadores trabajamos diseñando pantallas para los clientes de las agencia o para los productos internos de una compañía 🏥🏨🏦, pero no entendemos el cómo, el por qué o el para qué de lo que estamos haciendo 🤔, y cuando trabajamos con plataformas o productos más grandes y robustos nos encontramos con procesos mucho más complejos como recibir feedback, trabajar con versiones diferentes, iteraciones, etc 😕😰.

🎉 Gracias a los sistemas de diseño vamos a organizar y sistematizar estos procesos y hacernos la vida más fácil y ágil 😎👌.

05. Niveles de Sistematización

  • Sistema de diseño busca una forma de disminuir el trabajo y hacer al equipo más efectivo, desde el punto de vista del diseño
  • Los SDD tienen niveles
  • SDD no es el uso de las tecnologías aplicadas al diseño
  • SDD es un equipo que trabaja lo que se está planeando y pensando sobre un sistema
  • Niveles
    • DS design workflow
      • Diseñar
      • Documentar
      • Desplegar
      • Desarrollo / wireframes L, M, H
      • Prueba
      • Iteración
    • Building DS
      • Modelo solitario
        • Tu construyes los demás consumen (Desarrollan lo que haces)
      • Modelo centralizado
        • Equipo de diseño con diferentes equipos
      • Modelo confederado
        • Varios equipos dentro de varios departamentos y cada equipo construye dentro de su departamento
  • El DS debe otorgar facilidad al desarrollador a la hora de construir el sistema
  • Cuando creas un DS creas procesos y flujos de trabajo
  • Es la ingeniería del proceso de trabajo
  • Flujo de trabajo DS
    • Herramienta: diagramas de flujo para ver los procesos de trabajo dentro del equipo
    • Nuevo proceso / requerimiento / necesidad en DS
      • Tener un nombre de proyecto
      • Descripción
      • Objetivo
      • Deadline
    • Pasa que creas tu propio proceso y ninguno del equipo sabe tus deadlines y objetivos
    • Ver de quién necesitas aprobación y feedback interna
    • Proceso de versionar los archivos
      • Component specs bank
      • UI kit documentation
      • Documentation

Que buena vibra da 😄

La base del Design System es la buena comunicación de el equipo, un grupo de personas que hacen realidad una idea o producto para resolver un problema.

Que chill este profe, me cae super bien!

<h3>Niveles</h3> <h4>SD Design Workflow</h4>

Es tener una nocion particular de como entra algo, como sale, y porque puntos pasa.

Ej.

diseña - documenta -deploy- css o mobile - test - iteration

Un sistema de diseño va hacia algun lugar puede ir por ejemplo a una pagina web o a un dispositivo mobile. El test nos sirve para medir la efectividad, hay que poner alguna forma de calificar el exito, ej. cuanta gente lo uso, cuanta gente le dio like.

<h4>Building Design Systems</h4>

Tu diseñas pero en algún momento se construye, esto es un paso para construir herramientas para que otro haga algo que tu estas haciendo. Como lo sistematizas?

Puedes usar modelo solitario. Tu les das a los demás… viii, y los demás consumen.

O usar modelo centralizado, tienes un equipo, puedes consultar a otros departamentos del proyecto.

O modelo confederado, tienes varios equipos dentro de departamentos diferentes, y luego desarrollan el sistema hacia adentro despues lanzan la info hacia ceo o cliente, pero tu eres el lider como departamento de diseño y guias al resto.

Podemos usar https://coggle.it

TIPOS DE MODELO organizativos
Solitario: Tu construyes, los demás consumen.
Centralizado: Tu tienes un equipo siendo tú el diseñador. Puedes consultar a otras partes o a otros dptos construyendo un sistema de diseño.
Confederado: Disponer de varios equipos en diferentes dptos y entre todos se construye el sistema hacia adentro y posteriormente se itera (CEO, clientes…). Aunque en última instancia la responsabilidad es nuestra como diseñadores en tomar decisiones.

Se puede de programador a diseñador?

Hola aquí pueden encontrar y descargar el mapa mental enseñado:

https://mm.tt/map/2338341623?t=JTEdis4vD8

El Design System es una forma de sistematizar o darle estructura secuencial al proceso de diseño. No es el uso de tecnologías aplicadas a los procesos de diseño, sino que es un equipo, un grupo de personas que hacen posible lo que se está diseñando o pensando en un producto real de software, sin romper la comunicación de la idea concebida en el diseño a cuando llega al área de programación.

**Formas de construir Design System: **

  • Modelo solitario. Tu construyes como único diseñador y los demás reciben para construir en base a tu diseño.

  • Modelo centralizado. El diseñador está en equipo y consulta a otros departamentos o áreas del proyecto para construir el DS.

  • Modelo confederado. El diseñador tiene varios equipos dentro de varias áreas o departamentos del proyecto o empresa, y todos construyen el DS de manera interna, y después lo lanzan hacia el CEO y los usuarios, para la iteración. El diseñador y/o departamento de diseño es el líder, dirigiendo los principios y normas de funcionamiento del DS.

A quien le sirva les dejo el flujo de la clase:

Gran clase!!

Un sistema de diseño no es le uso de las tecnologías aplicadas a los procesos de diseño, un sistema de diseño es un equipo que transforma el diseño en un producto real.

Building Design System, es dar la capacidad a los demás de construir.

Aquí estoy, tratando de entener de mejor manera el proceso de diseño, planeo entender un poco tanto del UI/UX como del backend (pienso trabajar en Frontend).

Fundamentaciones + proceso diseño + flujos + sistematización == modelo organizativo de sistema de diseño y creación de producto.

wow, con respecto al trabajo entre equipo me gustó mucho la frase que dice algo así: ‘debes dar a los demás la capacidad de construir’ para que los sistemas se hagan más fuertes. Claro, no queremos un diseñador dictador y haciéndose el indispensable, sino más bien el responsable, quien administra el recurso.

Sistema de Diseño>>Buscamos un proceso para hacer mas productivo el equipo enfocada en el diseño…
Es un Equipo que hace posible un Software, pensamientos e ideas en productos reales de software.

Deploy>>Pasas de lo que estas construyendo hacia un lugar>>CSS o Mobile

Niveles
-Building Design System>>Construir herramientas para que los demas puedan hacer lo que estes haciendo.
-Modelo Solitario>>Diseñador impulsa la Construccion, Tu construyes los demas Consumen.
-Centralizado>>Tienes un Equipo para consultar.
-Confederado>>Tienes varios equipos con departamentos.

++Es como si fueras a bailar todo el mundo sabe cuales son los siguientes pasos que vas a tomar y ellos hacen el ritmo…

Modelos de Sistematización: Solitario, Centralizado, Confederado

Todo lo que he visto hasta ahora es básicamente, correcta gestión de las cosas, se complementa muchísimo con los cursos de marketing la verdad, yo estoy usando mi conocimiento adquirido en este curso para adaptarlo a mis procesos como Diseñador Gráfico, y la verdad que si es bastante útil.

Gracias

El ***Design System Workflow*** nos ayuda a entender mucho mejor cómo entra, por dónde sale y por cuáles puntos pasa nuestro trabajo cuando trabajamos con sistemas de diseño. En este *workflow* o flujo de trabajo comenzamos diseñando y documentando para después hacer deploy *(un término de programación para los momentos en que pasamos nuestro trabajo a producción, una versión funcionando en vivo)*, en esta etapa de deploy debemos tener muy claro para cuál plataforma o entorno estamos trabajando, así tendremos mucho más claro todo lo que vamos a necesitar construir *(por ejemplo, cuando construimos páginas web trabajamos en archivos* `.css` *con los estilos de nuestros productos)*. Pero el trabajo no termina aquí, después de hacer deploy entramos a la etapa de testing para evaluar la efectividad de estos estilos y seguirlos mejorando. También vamos a aprender sobre ***Building Design Systems***, donde construimos herramientas para que todos puedan usar e implementar las guías y los estilos que estamos trabajando. Para organizarnos y sistematizar estos procesos podemos implementar el modelo solitario, dónde tú, el diseñador haces todo el trabajo para que alguien más lo consuma, pero existen otros modelos como el centralizado o el confederado donde trabajamos con otras personas o incluso otros equipos y pedimos feedback dependiendo de la organización de nuestras empresas.

Además de seguir el Design System Workflow, es crucial integrar una comunicación efectiva y colaboración continua en todo el proceso. Asegurarnos de que la documentación sea clara y accesible para todos los miembros del equipo, incluso aquellos que pueden no estar directamente involucrados en el diseño, promoverá una comprensión más amplia y una implementación más consistente.

Niveles de sistematización

Los sistemas de diseño tienen niveles que abarcan diferentes partes del equipo

Un sistema de diseño es una equipo

Design system workflow

  1. Diseñar
  2. Documentar
  3. Deploy; CSS ó prototipo
  4. Test
  5. iteración

Building Design System

  • Modelo solitario: tu construyes, los demás consumen
  • Centralizado: Crear en base a un equipo, con la posibilidad de interactuar con otros departamentos
  • Confederado: Tienes varios equipos de varios departamentos y todo a la vez contruyen el sistema hacia dentro

Salute professor, this course it’s too cool. Thaks.

Vaya con Coggle quedo claro

Todos son parte de la construccion, eso es importante tenerlo en cuenta

Design System Workflow

Que clase tan brutaaaaa!!! 😍🔥
Me está encantando este curso

Clave de un Sistema de Diseño.

Un sistema de dieño son personas

Diseño Colaborativo

✨ Concepto clave
Un Sistema de Diseño debería ser considerado como una actividad iterativa, donde le equipo(s) involucrados centralizan para mejorar su alcance según la experiencia adquirida.

.
Así como en el desarrollo de software, establecer un modelo colaborativo y workflow permite que todo sistema de diseño se alimente y crezca con base en el aprendizaje que se va teniendo sobre el modelo de negocio.
.
Como equipo, debemos encontrar un lenguaje en común donde particularmente se cumplan objetivos sin causar estragos con cada cambio o bola de nieve.
.
Al definir los niveles de sistematización de nuestro sistema de diseño, permitirá crear una estructura que podrá ser llevada al desarrollo mismo.
.

ℹ️ Definición
Atomic Design es una metodología para crear sistemas de diseño basadas en 5 distintivas capas (átomos, moléculas, organismos, plantillas y páginas).

.

Atención a la experiencia de desarrollo XD

La definición y abstracción de las múltiples piezas que puede conformar Atomic Design, dependerá en medida de su escalabilidad en desarrollo, es decir, en su lugar de pensar en un lenguaje abstracto como Atomic Design, pensar en una jerarquía de estilos flexible y traducible.
.

ℹ️ Definición
Utility First es un paradigma que establece el foco de construcción de aquellos elementos que conforman nuestro sistema de diseño basado en su función visual aplicable a componentes.

.
Los frameworks modernos de desarrollo, como Tailwind, permiten persistir y añadir complejidad al desarrollo de nuestro sistema de diseño, impidiendo que la deuda técnica sea el primer pretexto frente a la mutabilidad de un sistema de diseño.
.

Construyendo un flujo de trabajo

Ampliando la visión del impacto que genera un cambio a todo un sistema de diseño creado, podemos crear un workflow claro entre un diseño y los desarrolladores:
.

  1. Generando un prototipo visual (por ejemplo, Figma o Sketch)
  2. Podrá ser estructurado como un sistema de estilos (por ejemplo, Tailwind)
  3. Componetizado mediante una librería o framework de frontend (por ejemplo, React o Vue)
  4. Guiado y validado a través de herramientas colaborativas (por ejemplo, Storybook y Chromatic)
  5. Publicado en repositorios privados o entre los colaboradores (por ejemplo, bit o npm)

.

💎 Justo hace unos días vi algo muy parecido a lo que el profe mencionaba, solo que acá lo hacían mucho más centrado para el diseño de la interfaz UI les dejo Esta imagen que hace parte de la construcción de la interfaz de una app muy bien hecha, si quieren y de paso miran todo el proyecto, es genial. ⭐

Tu mamá JAJAJAJA tqm Rulótico.

No existe una manera de universal de trabajo, esta se tiene que adaptar a la manera de trabajar de la organización y a las necesidades que se tiene, puede ser más simple y sencilla o puede necesitar mayor complejidad como aprobaciones del CEO o Marketing antes de hacer el deploy.

No nos olvidemos que nosotros no trabajamos en solitario, si no que, trabajamos con un equipo y con diferentes áreas de la empresa lo cual puede llegar a complejizarse si no se tiene definido el Design System Workflow

Un diseñador al llegar a una empresa, tiene que hacer tareas que en parte son hasta cierto puntos rutinarias, como crear botones, pantallas y así, esto para proyectos muy grandes y creándolo 1 a 1, puede llegar a ser muy complicado para una sola persona. Así que se crearon los sistemas de diseños.

Un sistema tiene niveles, estos abarcan diferentes partes del equipo. Un Sistema De Diseño es un grupo de personas que hacen posible lo que se esta diseñando en un producto real en software, es un equipo. Todos en la empresa tienen injerencia dentro del producto. Por esto, es mejor dividirlo en estos niveles:

  • Design Workflow: Es que tu tengas una noción particular de como entra algo y como sale y porque procesos pasa.
  • Building Design System: Es hacer herramientas para que todos en el equipo puedan construir.

Pero para organizarnos hay diferentes modelos, estos son:

  • Solitario: Yo construyo y las demas personas consumen.
  • Centralizado: Tenemos un equipo y podemos consultar a todos los departamentos del proyecto.
  • Confederado: Tenemos varios equipos dentro de varios departamentos y todos construyen el sistema hacia adentro.

En Coggle nos permite hacer flujos de programación o diagramas. Esto nos ayudara a crear flujos de procesos para que todo el equipo este enterado de los procesos por haber y así tener mejor comunicación.

⚙ CONSTRUCCIÓN DE SISTEMAS DE DISEÑO: CREAR HERRAMIENTAS para que los demás puedan hacer lo que nosotros como Diseñadores estamos haciendo.
Nosotros los Diseñadores no solo desarrollamos material visual, sino que además de forma invisible permitimos a los demás generar cosas nuevas bajo un lenguaje unificado.

no se puede ver uno de los enlaces compartidos por el profersor 😦

Los Systems Design Teams construyen productos a partir de pensamientos e ideas.

Muy buena clase!

Interesante el mantener este orden, pensé que los UX lo hacían al tanteo

Qué interesante estuvo esta clase, aprendí un par de cosas que no conocía, ¡gracias! 👏🏼

WorkFlow:
-Diseño + Documentación + Deploy - (CSS o Mobile) + Test + Iteración

El diseño busca solucionar problemas y me encanta que por fin encuentro dentro de platzi alguien que comunique de forma tan acertada la importancia de que los diseñadores sepamos y entendamos de programación.

Entender que un Design System es en pro para toda una organización y que cualquiera que este involucrado pueda entenderlo y aplicarlo sin problemas es la clave para lograr un SD muy genial.

Un sistema de diseño es un grupo de personas que hace posible lo que se está diseñando

Un SD es un equipo que hace posible que lo que se está pensando sea un producto real.

SD Design Workflow: diseñas, documentas y publicas (lo pones en vivo para ser visto), luego de publicar se debe probar para calificar el éxito de ese producto, luego iteramos.

Baya que genial y cual seria el proceso de test más efctivo

Design System Workflow

¿En esta parte entran las metodologías agiles? ¿no?

Construir un Flow con Coggle

Niveles de Sistematización

Building Design Systems

Con cada clase me doy cuenta que no solo es diseñar y ya, hay mucho detrás de este proceso.
Gracias por este tremendo curso y mas que Rulotico es muy agradable para dar las clases!

Cuando te apasiona programar y diseñar

Profesionalizar el diseño

Tu mamá, el perico… me hiciste reír.

El perico ⛄⛄⛄

¡Tipos de Modelos!

- Solitario!: Tú sólito y los demás consumen!
- Centralizado!: Tienes un equipo y puedes consultar a otros departamentos. Ah, y construyes un sistema de diseño!
- Confederado!: Tienes varios equipos dentro de varios departamentos de la empresa en donde todos construyen el sistema! Peeero, tu eres el lider… Eres el responsable!

la persona que aprende de los dos mundos de programación y diseño tendrá una visión más ampliada de lo que quiera hacer, genial me gusta mucho este curso !

Cómo diseñar un sistema

dff

Y si soy programador y no diseñador?

Me encanta la manera de enseñar de Rulótico.

Se parece a los diagramas de PERT, una herramienta para administrar los tiempos y trabajos de un proyecto

Aquí puedes ver el diagram de flujo que se presentó en la clase.

• Solitario: tú construyes, los demás consumen
• Centralizado: tú consultas a los demás departamentos y construyes un SD
• Confederado: varios equipos dentro de varios departamentos y todos construyen el sistema

Niveles de Sistematización.
En los sistemas de diseño se está buscando un proceso o alguna forma que haga reducir el trabajo, hacer más productivo al equipo pero desde la perspectiva del diseño. Esto es importante, porque por lo general un diseñador se centra en crear diseños de pantallas pero no entiende su trasfondo, y entonces la mayoría de estos se ven en la necesidad de hacer feedback, versiones, etc. Esto genera estrés y al final no se logra alcanzar un camino correcto, y es ahí donde surgió la necesidad de tener un sistema de diseño, ya que se necesitaba una forma de sistematizar todo este proceso que se tiene, ya que resulta complicado que lo haga una persona.

¿Qué pasa con los sistemas de diseño?

Los sistemas de diseño tienen niveles, estos niveles abarcan diferentes partes del equipo, entonces un sistema de diseño no es el uso de las tecnologías aplicadas a los procesos de diseño, un sistema de diseño es un equipo, es un grupo de personas que hacen posible que lo que se está pensando en un producto real.

Eso es lo importante, porque no importa si haces un UI kit o lo que sea, si al final del día no se llega a convertir en software, y lo mas importante: que no se convierta en el software que tu estabas pensando. No se tiene romper la comunicación con lo que querías cuando llega a programación, pero debes construir las herramientas que permitan hacer eso.

Ahora, ¿qué pasa cuando entramos en un sistema de diseño?

En un sistema de diseño intervienen varios actores, ya sean front-ends, content managers, CEO, Marketing, etc. Y esto es porque básicamente todos tienen injerencia dentro del producto cuando está todo el equipo, y si no fuera poco, se tiene que hacer iteración y feedback contra el usuario, lo cual vuelve complejo la construcción de un producto. Ejemplo: usted puede construir una pantalla, pero a eso que esa pantalla sea la correcta, siga los principios y que todos los actores estén de acuerdo se vuelve un rollo.

Por eso se tiene que dividir en estos niveles:
SD Design Workflow: es básicamente que tu tengas una noción muy particular de cómo entra algo, el cómo salga y por cuales puntos pasa. Ejemplo, se tiene el siguiente Workflow de diseño:

  1. Diseñas.
  2. Documentas.
  3. Haces Deploy. Deploy significa lanzar un producto para su uso.

Ahora, ¿a dónde voy a hacer Deploy? Un sistema de diseño tiene que ir hacia algún lugar, en este ejemplo puede ir a un CSS file o a un archivo Mobile. Esto es importante saberlo desde el inicio ya que esto va a afectar el diseño de nuestro sistema, y además nos permite anticipar que cosas se necesitan en el proyecto.
Continuando con el mismo Workflow:

Ya que hiciste Deploy, se debe tener un proceso de Test, esto va a permitir evaluar la efectividad de lo que se está haciendo, porque no podemos diseñar algo simplemente porque si, tenemos que ponerle alguna forma de calificar el éxito de ese elemento, componente o proceso, esto se puede evaluar con las siguientes preguntas:
• ¿Cuántos usuarios lo utilizaron?, ¿Cuántas compras se hicieron?, ¿Cuánta gente dio Like por esa funcionalidad?

Algo debe de calificar de que lo qué estás haciendo está bien y es correcto, porque a partir de ahí es cómo tu vas a evaluar. En un campo real, los diseñadores UI, por ejemplo, no simplemente proponen y ahí acabo la cosa, esto no es así, es con base en la experiencia y a conocer a nuestro usuario el éxito esperado.
Entonces en el Workflow anterior, una vez que se hizo el Test, se empieza a iterar, tanto para hacer Test, Deploy y hasta para diseñar debe haber procesos, el Workflow de ejemplo es una forma muy básica de verlo, pero realmente este Workflow tiene muchísimas cosas.
Ahora, otro de los niveles es Building Design System:
Cuanto tu diseñas algo, en algún momento se tiene que construir, pero ¿qué significa esto?, ¿no ya se está estaba construyendo un sistema de diseño?, si y no. Esto es porque hasta este momento tú puedes documentar todo, construir un UI kit pero esto es cómo un proceso o paso hacia algo más grande, porque cuando lo construyes es literal construir herramientas para que los demás puedan hacer lo que tu estás haciendo. Imagínate que le pasas un montón de elementos al CEO, y el CEO construye bloques y demás, esto está mal porque debes de darle la capacidad a los demás para que puedan construir, porque esto va a hacer mucho más poderoso tu sistema de diseño.

Ahora, ¿cómo me organizo y sistematizo para hacer todo esto?
Uno de los modelos más comunes es el Modelo Solitario, esto es tu solito y le das a los demás que consumen. Muchos equipos no pasan del modelo solitario a otros modelos más complejos pero este es el inicio de cómo el diseñador impulsa la construcción de manera más rápida dentro de su equipo.

En el Modelo Centralizado tu tienes un equipo y puedes consultar a otras partes del proyecto, y construir un sistema de diseño. Este es uno de los sistemas más ricos porque tiene varias visualizaciones.

También puedes tener un Modelo Confederado que significa que tienes varios equipos dentro de varios departamentos de la empresa, y todos a su vez construyen el sistema hacia dentro, después lanzan la información hacia el CEO o hacia el cliente y ahí se genera la iteración. Aquí tu eres el líder como departamento de diseño de cómo se lleva este sistema y que reglas se deben cumplir para que el sistema pueda funcionar, tú eres el responsable.

-Cuando tu haces un sistema, estás generando procesos y flujos de trabajo, y eso te vuelve parte, cómo diseñador, pues básicamente cómo de la mesa directiva-
Un sistema de diseño, a pesar de ser ambiguo (porque es nuevo), tiene muchos impactos importantes hacia el perfil del diseñador, esto es porque nos permite profesionalizar y hacer más importante de lo que estamos haciendo. Entonces, muy probablemente estás empezando en un modelo solitario donde tu estás proponiendo cosas, necesitas fundamentaciones, procesos y flujos para hacer esto.
Ahora se va a haber cómo construir un flujo muy sencillo utilizando Coggle. Empieza el vídeo el minuto 9:23 para la explicación.
Al final un flujo de diseño es complejo porque requiere de muchos conocimientos al mismo tiempo. Pero se vuelve mucho más emocionante cuando comprendes toda la complejidad y puedes crear cosas mucho más grandes y robustas.

“Tu mamá, el perico, la vecina” JAJAJA me encanta tomar cursos con Rulótico. 10 de 10

Apuntes de la clase:

¿Por qué se llama “Sistema de diseño”? Porque buscamos alguna forma en que reduzcamos el trabajo, hacer más productivo al equipo… desde la perspectiva del diseño.

Diseñar va más allá que solamente “hacer pantallas bonitas”.

Un sistema de diseño es un equipo 🤝🏻. Un grupo de personas que hacen posible que la idea se convierta en software.

Niveles:

  • SD Design Workflow: Tener noción de cómo entra algo y cómo sale.
  • Bulding Design System: Construir herramientas para que los demás puedan hacer lo que tú estás haciendo. Debes de darle a los demás la capacidad de que ellos puedan construir, esto hará mucho más poderoso tu sistema de diseño.

Modelos:

  • Modelo solitario: solito.
  • Centralizado: tienes un equipo.
  • Confederado: varios equipos dentro de varios departamentos. Todos construyen el sistema.

Cuando haces un sistema, estás generando procesos, estás generando fluyos de trabajo y eso te vuelve parte, como diseñador, de la mesa directiva. - Rulótico González

Coggle es un sitio web para hacer hacer flujos de trabajo o mapas conceptuales.

Un sistema de diseño es complejo porque requiere de muchos conocimientos al mismo tiempo sobre todo si lo estás construyendo.

Si eres diseñador no es necesario que aprendas a programar. Pero si lo aprendes tendrás superpoderes, comprenderás mucho más todo el sistema, podrás crear cosas más robustas.

4. Niveles de Sistematización

Los sistemas de diseño tienen niveles:

Un equipo de diseño hace que sea posible a nivel de software:

Todos entran al sistema de diseño, porque tienen injerencia dentro del producto, y se debe hacer iteración y feedback con el usuario:

Para eso existe el Design System Workflow.

Por ejemplo, luego de diseñar, documentar, y luego se hace deploy.

¿Cómo sistematizamos?

  1. El primer modelo, es el “modelo solitario”, estamos solos y entregamos a los demás (tú construyes los demás consumen).

  2. Tenemos el modelo centralizado, se puede consultar a otros equipos:

  3. Finalmente tenemos el modelo confederado, donde varios equipos trabajan, pero el departamento de diseño es el responsable:

👌

Se utiliza el termino maquetar para definir pasar un diseño a codigo, ya que en muchas ocasiones este es el trabajo de los frontend cuando una pagina no tiene interactividad. Por eso no deberian ofenderse cuando les dicen que tiene que maquetar una pagina, porque algunos les sucede esto cuando se utiliza este termino.