⚡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.
¿Qué es un Sistema de Diseño?
Lo que aprenderás sobre los sistemas de diseño
¿Qué es un Sistema de Diseño?
Bonus: Utilizando Notion
Quiz: ¿Qué es un Sistema de Diseño?
Principios del Sistema de Diseño
Principios del Sistema de Diseño
Niveles de Sistematización
Bonus: Utilizando Coggle
Quiz: Principios del Sistema de Diseño
Paradigmas de Sistemas de Diseño
Paradigmas: Diseño atómico, diseño procedural y DRY
Bonus: Utilizando Adobe XD
¿Qué es un componente?
Foundations
Quiz: Paradigmas de Sistemas de Diseño
Estilos para tu Sistema de Diseño
Tipografía
Bonus: Cómo evitar colores constrastantes
Paleta de colores
Quiz: Estilos para tu Sistema de Diseño
Reglas de espaciado, Animación, Voz y Tono
Reglas de espaciado
Animación
Consejos para empezar a animar usando After Effects
Voz y tono
Quiz: Reglas de espaciado, Animación, Voz y Tono
Icon System y UI Kit
Iconografía
Hitos
Bonus: UI Kit
Quiz: Icon System y UI Kit
Un sistema basado en personas
Un sistema basado en personas
Iteremos
Cierre
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Los principios del diseño son la base fundamental de los paradigmas y metodologías que aplicaremos en nuestro sistema. Todas las decisiones que tomemos deben tener en cuenta y fundamentarse en estos principios, así evitamos cometer errores o generar conflictos, ya que todos los caminos serian correctos.
Principios del sistema de diseño:
Podemos añadir otros principios que se adecuen correctamente a nuestra empresa, pero debemos tener cuidado de que todos estos principios sean compatibles entre sí.
En nuestro caso, añadiremos los principios de User Control (el usuario debe tener la sensación de control sobre el producto), Forgiveness (debemos permitir que el usuario pueda cambiar de opinión o volver a empezar algún proceso) y Perceived stability (aún con plataformas robustas y complejas, el usuario debe percibir los procesos tan simples y familiares como sea posible).
Aportes 117
Preguntas 10
⚡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.
¡Excelente clase! Podemos complementar todo lo que aprendimos sobre sistemas de diseño con este artículo de Marcin Treder, el creador de UXPin:
Otros principios:
“La combinación y creación de estos principios son los que nos permitirán crear elementos gráficos para nuestro software 🚀”
Si no tenemos principios sólidos para construir nuestros sistemas de diseño, todos los caminos son correcto. (Es muy difícil tomar decisiones sin estos)
Para tomar decisiones tenemos que tener en cuenta nuestros principios.
Primeros principios:
**Accesibilidad: **Todos los usuarios puedan utilizar la plataforma. Debe ser perceptible, operable (Debe poder ser utilizada), Entendible (En este punto tener en cuenta el lenguaje, más si el producto se exporta a otros países). Robusto (Debe darle oportunidad a todos los tipos de usuarios, por ejemplo a los daltonicos).
Consistencia: Siempre hablarle de una misma manera al usuario, de manera escrita, visual, en procesos. Esto permitirá al usuario menos esfuerzo utilizar nuestro producto.
Reusable: Es importante que cada hora de trabajo que inviertamos tanto en diseño, desarrollo, etc. Sea reutilizable.
Shareable: Toda la documentación debe ser compartido.
La plataforma puede ser restrictiva ( Guiar siempre al usuario para cumplir un objetivo), permisiva ( perdona ciertos errores) Forgiveness (Perdonar al usuario si hace algo mal, darle la posibilidad de volver atrás, etc)
Los principios lo tenemos que decidir nosotros, es como crear una personalidad. Un buen punto de partida para definir los principios pueden ser las 10 reglas Heurísticas.
Martín Coronel
Diseño UX/UI
Web: http://martincoronel.com/
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel
Súper bien esta herramienta para tomar notas de todos los cursos que tomemos, no? 😄
Aquí pueden encontrar muchos ejemplos de principios https://principles.design/
¿Los sistemas de diseño podrían llegar a contener elementos tan específicos como por ejemplo bloques de código?
Buena a todos, estoy volviendo a hacer el curso, pero esta vez, en vez de usar Notion, estoy usando “zeroheight”, que lo acabo de descubrir ayer, lo buneo es que exporta muchas cosas desde Adobe XD: colores, botones, componentes. . . ¿Tienen expericia con “zeroheight”? ¿Recomiendan alguno parecido?
Fantástico Rulótico, sobre los principios entiendo que hay unos universales y en ocasiones esos principios “universales” de tu producto adquieren unos matices por el carácter del producto o incluso por los valores y maneras de abordar el diseño por parte del equipo.
Con esto me surgen dudas acerca de cómo estructurar esos principios. Por ej
en los principios de iOS Human Interface Guideliness tenemos “Consistency” y “Aesthetic Integrity” por separado, también en Lightning Design System de Salesforce proponen “Consistency” y “Beauty” por separado.
¿Qué crees que puede aportar al Sistema el que estos principios sobre lo estético tomen su lugar fuera de Consistency?
Perceptible
Operable
Entendible
Robusto
-Consistencia>>Todo sea siempre de la misma manera
-Reusable>>Cada boton que hagas debe ser reutilizado
-Shareable>>Como Notion
*TIENES CREAR TUS PROPIOS PRINCIPIOS COMO GUIAR TU PRODUCTO
😃 Me gustaría recibir feedback de los Principios y cualidades de mi sistema de diseño del portafolio personal que deseo crear.
Los Principios de diseño son los siguientes
Accesibilidad. Nuestro producto debe ser usable para cualquier usuario. Debe ser:
Perceptible. Que los usuarios puedan percibir.
Operable. Que se pueda utilizar por los usuarios.
Entendible. Los usuarios deben entender el contenido.
Robusto. Tiene que tener capacidades configurables para poder aceptar a cualquier persona.
Consistencia. Todo el equipo deben tener los mismos objetivos y principios. Para que los usuarios no les cueste interactuar con la aplicación.
Reusable. Cada hora que invirtamos trabajando en algún componente debe servir para construir otros componentes y evitar que se gaste tiempo en crear otra vez.
Sharable. Debemos construir y trabajar con herramientas que nos permiten compartir todo nuestro trabajo.
User control. El usuario debe de tener la sensación de que inicia las acciones y solo el puede terminarlas. Es darle la sensación al usuario de que tienen el control de la plataforma.
Forgiveness. Es perdonar al usuario de una acción que haya realizado, permitiendo que pueda cambiar de decisión y comenzar un proceso nuevamente.
Perceivded Stability. Debemos transmitir que los procesos como los elementos sean familiares y predecibles. Esto hace que la curva de aprendizaje de nuestro producto sea mas corta.
Jajajajajaja me agrada la actitud que tiene Rulótico, las despedidas son lo divertido xD
En fin, yo pensaba que los Human Interface Guidelines como lo que tiene Apple eran lo más innovador y quedé 🤡 cuando dijo que eso es cosa del pasado.
¡Excelente clase!
Aun no entiendo cual es el punto del sistema de diseño, de hecho no entiendo que es. Si es una seria de reglas que puedes aplicar en una aplicacion, si es un método de como llevar un programa, Si es un programa. Alguien me ayudaría?
Dato interesante:
Si todos mis elementos son reusables, aumentará la consistencia en mi producto.
Si no tenemos principios solidos que fundamente lo que estamos haciendo, realmente todos los caminos son correctos, necesitamos estos para tomar decisiones.
Estos son algunos principios:
Usualmente se tienen que crear los principios, ya que estos son como una personalidad, aunque hay unas globales.
Hola, creo que estoy medio que enamorándome de estos cursos de sistemas de diseño. Una consulta eso sí, aún no rompo mi chanchito para comprarme el mac. Puedo hacer este curso y el para desarrolladores con Windows??
A mi me encatan como spotify presenta sus principios al leerlos es imposible no tener referencias que digas a siii eso se ve claro en su app
El principio más importante de todos :
El principio KISS!
- Del inglés Keep It Simple, Stupid!: ¡Mantenlo sencillo, estúpido!
Hola!, les linkeo los principios del Sistema de Diseño del Gobierno de UK, bien orientado a sitios de gobiernos donde la tarea fundamental es de completar trámites y servicios: https://www.gov.uk/guidance/government-design-principles
Principios de los System Design
Accesibilidad: Que todos los usuarios puedan usar tu plataforma.
Perceptible: Que tu plataforma se perceptible a los usuarios.
Operable: Que sea funcional para los usuarios.
Understandable: Que los usuarios puedan entender tu contenido.
Robust: Que tenga las capacidades para aceptar a cualquier usuario.
Cualidades de un System Design:
Consistencia: Que el producto sea consistente en todo su recorrido, para que sea más fácil para el usuario.
Reusable: Que el trabajo del equipo sea eficiente y reusable para no repetir las tareas en el futuro.
Shareble: Que tu contenido de diseño sea accesible para todos los implicados.
Modo oscuro. COMMAND + SHIFT + L
Que lo disfruten 😄
Excelente clase!!
Me parece que muchos principios vienen de imaginar la historia de un usuario usando nuestro producto y que estas historias podrían ayudarnos a elegir que principio usar en caso de que se contrapongan
Principios
Nosotros creamos los principios, es muy importante tener conocimiento en ux para que los principios que creemos no atenten contra la experiencia de los usuarios
Los principios de un Sistema de Diseño son la base fundamental de las metodologías y paradigmas que se aplican dentro de éste. No tienen un fundamento visual, sino que son una forma de estructurar el funcionamiento integral del sistema, le dan lógica. Con ellos, se designan reglas y conceptos para después poder pasarlos a la parte visual del software, la aplicación o plataforma que se crearán. Estos principios del Design System planteado para cada caso, darán la pauta para materializar el resultado visual en un UI kit, un proceso de pantallas, un flujo de información o software de calidad.
Gran clase 🙌 definitivamente en mi caso, fue estar diseñando web/apps sin Principios y pasar a trabajar CON PRINCIPIOS, hay un cambio descomunal de flujos de trabajo y hasta de estética. Las reuniones se optimizan y no hay un desgaste de desiciones en reuniones 🙄. Con unos lineamientos establecidos ya hay una “defensa” para que las miles de opiniones que puedan surgir hagan una mezcla exótica y por el contrario realmente se logre algo realmente profesional y de alguna manera se respete nuestro trabajo.
Les comparto también otra herramienta alterna a Notion, que la conocí precisamente gracias a un comentario de un compañero aquí en el curso:
ZEROHEIGHT: https://zeroheight.com/
Los principios son la base tanto de los paradigmas como de las metodologías que vamos aplicar dentro de nuestro sistema.
Literalmente amo a este profesor
El sistema de diseño es un paradigma, es una forma de pensar. Crear los principios es uno de los puntos más importantes, como siempre lo digo, comencemos por el principio.
Estamos acostumbrados a querer pasar directo a lo visual y al diseño sin tener una base, esto genera esas discusiones infinitas donde todos y nadie tiene la razón por que todos discuten su manera de pensar desde cómo cree que el sistema de diseño es mejor según como YO utilizo el producto o servicio.
⇒ Siempre tiene que ser todo de la misma manera para no confundir al usuario
⇒ Debemos hacer que nuestro diseño nadie más lo tenga que volver a hacer, si ya existe un botón para la función que buscamos hay que hacerlo que se pueda usar otra vez.
⇒ Podemos compartirlo y cualquiera los puede consultar
Los principios deben ser como monedas , tu tienes monedas y se las vas poniendo conforme avanza el proyecto.
principios …
¿puedo verlo como defectos de las plataformas? y convertirlos en todo lo contrario
Diseñar tambien es designar ciertas reglas y conceptos para despues hacerlos visuales. La combinacion de estos principios va a ser el resultado visual que tu crees, en un UI kit, en un proceso de pantalla o en flujo de registro, porque vas a guiar tus decisiones en base a estos
yo al tomar este curso me esperaba que empezaríamos a diseñar y nos darías consejos de buenas practicas.
Pero me estoy llevando un buen aprendizaje y como bien lo dices.
Los principios nos permitirán construir eso de manera efectiva y no tener conflictos con las diferentes ideas del equipo!
Por un momento pense que notion tenia que ver con lo principal de la clase, pero solo es una herramienta que nos recomienda para poder tomar notas de forma efectiva, debí haber parecido un idiota jaja
Tantos dolores de cabeza que se pueden evitar si solo se planearan las cosas un poquito.
“Esto es diseñar” 👏🏽👏🏽👏🏽 Pensar primero y marcar la pauta.
Esto se puede interceptar con las Heurísticas de Nielsen y las Leyes del UX, y así complementar los principios a generar.
https://www.nngroup.com/articles/ten-usability-heuristics/
https://lawsofux.com/
Mi Pequeño resumen de esta clase.
Los principios del diseño son la base fundamental de los paradigmas y metodologías que aplicaremos en nuestro sistema.
Todas las decisiones que tomemos deben tener en cuenta y fundamentarse en estos principios, así evitaremos cometer errores o generar conflictos, ya que todos los caminos serian correctos.
<h3>Principios del sistema de Diseño:</h3>Gracias
“…eso es para viejitos…” ¿? 4:45
Accesibilidad: Nuestro producto debería ser usable para cualquier usuario, debemos construir productos perceptibles, operables, entendibles y robustos. Consistencia: Todo el equipo deben tener los mismos objetivos y deben hablarle de la misma forma a los usuarios, sea visualmente o por escrito. Reusabilidad: Cada hora que invirtamos trabajando en algún componente debe servir para construir otros componentes y evitar que tu o alguien más tenga que reconstruir nuestro trabajo. Shareable: Debemos cons
El enfoque en principios sólidos y la adaptación consciente a las necesidades específicas son aspectos positivos. Sin embargo, se debe tener cuidado para asegurar la coherencia y la compatibilidad entre los principios, y reconocer que la toma de decisiones en diseño a menudo implica un equilibrio complejo entre múltiples consideraciones.
Los principios del diseño son la base fundamental de los paradigmas y metodologías que aplicaremos en nuestro sistema. Todas las decisiones que tomemos deben tener en cuenta y fundamentarse en estos principios, así evitamos cometer errores o generar conflictos.
Accesibilidad se refiere a la práctica de crear y diseñar sitios web de manera que sean utilizables y comprensibles por una amplia gama de personas, incluyendo aquellas con discapacidades o limitaciones físicas, sensoriales o cognitivas.
La accesibilidad en el diseño web implica considerar y abordar aspectos como:
La consistencia en el contexto del diseño se refiere a la cualidad de mantener un enfoque uniforme y coherente en la apariencia, el comportamiento y la experiencia general de un producto, servicio o entorno.
💡 La consistencia es esencial en el diseño porque:
La consistencia se puede lograr a través de varios aspectos del diseño, como el uso de patrones de diseño, el lenguaje visual coherente, la estructura y organización consistentes del contenido y la aplicación uniforme de normas y estándares
.
En diseño, la reusabilidad implica crear elementos que sean flexibles y adaptables, de modo que puedan ser fácilmente implementados en varias situaciones sin requerir una reconstrucción completa.
💡 La reusabilidad es una práctica valiosa en el diseño por varias razones:
Compartible se refiere a la cualidad de un elemento, diseño o contenido que está diseñado de manera que sea fácilmente compartido entre usuarios o a través de diversos medios y plataformas. Un diseño compartible se crea teniendo en cuenta la forma en que será presentado y compartido, optimizando su apariencia y formato para que sea atractivo y efectivo en su distribución.
💡 En el diseño, la compartibilidad implica considerar aspectos como:
Podemos añadir otros principios que se adecuen correctamente a nuestra empresa, pero debemos tener cuidado de que todos estos principios sean compatibles entre sí. En nuestro caso, añadiremos los principios de:
Los principios son un conjunto de valores fundamentales que guían la toma de decisiones y el comportamiento de una organización. Estos valores son la base sobre la cual se construyen las políticas y prácticas de la organización. Los principios pueden incluir la integridad, la responsabilidad, la equidad y la transparencia, entre otros. Al adherirse a principios sólidos, una organización puede construir una cultura de confianza y respeto, y trabajar para lograr sus objetivos de manera ética y efectiva.
Resumen 📖
Los principios también se diseñan 👩🏻💻
Es la base fundamental para todo lo que harás, serán los fundamentos para tomar decisiones.
✨Principios claros, Diseño claro. ✨ De esa manera no hay inconsistencias en la página/ en el producto porque todas las decisiones van alineadas a un principio.
Debemos tener cuidado de que todos los principios sean compatibles entre sí. 🔍
Tremendos estos principios 😄
Accesibilidad
Consistencia
Reusabilidad
Shareable
Control del usuario
Perdón
Predecible
Me encanta la dinámica de este curso y la forma en la que explica este profe. ¡Un 10!
Este profesor me cae muy bien jaja se nota el entusiasmo por enseñar
✨ Concepto clave
Los principios de diseño son definiciones del rumbo y propósito que se rige un desarrollo basado en desiciones de creación.
.
En definición, existen múltiples principios de diseño, los cuales poseen atributos como:
.
ℹ️ Definición
Un sistema de diseño es el resultado de diferentes decisiones que marcan la pauta de una guía, del cual clarifica el trabajo entre los diferentes miembros de un equipo persistiendo su propósito y consistencia.
.
.
1. Encuentra analogías
Encuentra la inspiración que permita respirar a nuestro producto, identificando los objetivos nucleares muestren, naturalmente, el valor a sus usuarios.
.
2. Encuentra principios cercanos
Encuentra las cualidades que describen al producto como único, listando sus cualidades mediante conceptos concisos.
.
3. Encuentra el usuario final
Conecta la razón con la elección de tu usuario. Empieza definiendo los porqués para complementar con los cómos.
.
4. Construye valores
Prioriza las emociones de los usuarios permitiendo un umbral de valores creíbles y honestos.
Podemos decir entonces que los principios de un sistema de diseño van en función del objetivo del proyecto. 😄
Rulótico no ma había parecido el mejor profesor en el antiguo curso de HTML/CSS práctico (que creo que ya no existe). Pero sin duda en este curso me parece un gran profesor.
Saben? Haciendo mis lineamientos me di cuenta q no existe necesariamente un “manual de terminos de principios”.
Sino q pueden llegar a ser terminos q surjan segun la necesidades de tu sistema por lo q tu puedes definir esos principios con tus propias palabras y despues ir iterando para hacerlo mas entendible.
La manera de despedir el video es tan cool, jajaja
Principios de los sistemas de diseño
-Accesibilidad
Los principios no tienen fundamento visual necesariamente, el fundamento esta en los paradigmas (forma de pensar, de estructurar el conocimiento). Luego esto se aplica al diseño de la plataforma. Se designan reglas y conceptos para luego hacerlos visuales.
es Peruano el profesor?
A partir de hoy cambio mi libreta de apuntes por Notion.
3. Principios del Sistema de Diseño
Debemos tener Accesibilidad:
Debe poder percibirse:
Debe ser operable, la gente debe poder operarla:
Debe ser entendible
Debe ser robusto (Debe tener capacidades configurables):
Cualidades de un sistema de diseño:
Debe ser reusable:
Un sistema de diseño debe ser “shareable”:
Yo hacía mis apuntes en cuaderno, luego pasé a word y ahora a Notion. Gracias Platzi!
👌
Y Por que no veo estos principios en la plataforma de Platzi?
Me gusta notion
Design Principles are a set of considerations that form the basis of any good product. Nos ayuda a tomar decisiones rápido, a lo hora de crear un producto.
JAJAJ Me encanta las buenas vibras que nos refleja nuestro profesor Rulo, al terminar cada clase me da una sensación positiva y me anima a seguir co nel curso! ❤️
PREGUNTA:
¿Para crear un “buen” sistema de diseño lo tiene que hacer un equipo (dos o mas personas)? o ¿lo puede crear una sola persona?.
Es decir ¿tienen que estar involucrados un diseñador y un programador (en caso de ser un producto digital)?
Principios del Sistema de Diseño
Construyendo Sistemas de Diseño en Notion
La reusabilidad es uno de los aspectos claves en el proceso de diseño (y desarrollo) y que sin ser considerado puede significar pérdida de tiempo.
Muy interesantes estos principios, sobre todo el de perdonar al usuario, a veces como creadores de sitios, apps o ‘contenedores’ en sí, creemos que el usuario se la debe saber toda y que si yo lo entendí el usuario también. Me ha cambiado por completo la mente.
Diseñar es pensar primero hacer después
El diseño no se limita a lo visual. Empieza por definir los principios o reglas sobre cuales nos vamos a basar en nuestro proyecto
Que parametro o se tienen que tomar en cuenta para crear los principios y cuanto tiempo llevaria desarrollar principios dependiendo de la experiencia?
El mundo del diseño me parece algo realmente fascinante.
Nunca pense que fuera así.
¿¿Para la carrera de diseño de productos, se necesita haber tomado algun otro curso tipo UX o UI??
Ayudaaaaaaaaaaa!
cuales son los mejores programas de diseño o apps que sean mas faciles y me puedan ayudar a mejorar cada vez mis diseños
Software de calidad
Increíble que Notion tenga tanta utilidad!
En general podemos aplicar estos mismos conceptos de principios en todos nuestros desarrollos, agregando algunos nuevos cuando lo amerite?
Se puede decir que, es toda la Arquitectura de la información (AI).
Sabiendo esto se me ocurren múltiples casos de uso en muchos productos o workflows donde puedo aplicar los principios
Siendo el sistema un conjunto de reglas que mutan y se adaptan, el sistema debería adaptarse dependiendo el proyecto y los usuarios objetivos del mismo? Ejemplo si tengo un sistema pensado para web, reglas como tamaño de fuentes o botones deberían adaptarse si lo llevo a una app o a un dashboard? O estas reglas deberían ser universales para diferentes proyectos en un mismo sistema?
Principios del sistema de diseño:
.
Son la base fundamental de los paradigmas y las metodologías que aplicaremos dentro de nuestro sistema.
.
Son importantes porque estas metodologías deben tener principios sólidos que fundamenten las cosas que estamos haciendo. Sobre todo para evitar choque de opiniones en el camino.
.
Ejemplos de Principios:
.
Les anexo texto de Notion:
La idea principal de este principio es que todos los métodos de usos de esta plataforma, los pueda usar en cualquier aplicación de la misma,
Nuestro software debe de ser accesible a diferentes niveles o capacidades del usuario y buscaremos la manera de que cualquier persona pueda sentir el control dentro de nuestro software.
El usuario debe tener la sensación de que inicia las acciones y solo él puede terminarlas, nada pasa sin que el usuario tenga el control.
Las acciones deben representar el perdón de un camino iniciado y permiten volver a pensar al usuario si es que la acción correcta fue o quiere cambiar de opinión.
Debemos transmitir que aún en una plataforma los procesos como los elementos sean familiares y predecibles.
No conocía notion Pero esta increíble
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?