Definición de patrones en tu sistema

Clase 7 de 17 • Curso de Patrones y Componentes en Sistemas de Diseño

Clase anteriorSiguiente clase

Luzdelia Alba

student•

Patrones funcionales:

MAPA DE PATRONES. Claridad en comportamientos generales y acciones a reforzar del producto.
ASIGNAR ACCIONES. Se puede entender el propósito de un patrón (lo que hace y lo que no).
DIBUJAR LA ESTRUCTURA DE CONTENIDO. Sketching de baja fidelidad
GENERAR UNA ESCALA DE PATRONES. Para definir varios elementos que resuelvan el mismo problema.

Luzdelia Alba

student•

Patrones perceptivos:

GENERAR UN USER PERSONA. Cualidades clave que deseas tenga la interfaz, ayuda a dar cualidades físicas.
MOOD BOARD. Recoge ideas e inspirar, se crea a mano o en digital, complementa al anterior. Se puede hacer de todo el sistema o solo de un patrón.
STYLE TILES. Para evaluar variaciones cuando ya se tiene una idea general (contiene color, tipografía).

Erwin Frias

student•

🧩 Definición de Patrones de diseño

Evita duplicar componentes y procesos.
Elementos que necesitas para resolver el problema más rápidamente.

🏗 Patrones Funcionales
- Mapa de patrones
  - Ncesidades.
  - Metas.
  - Motivaciones.
  - Aspectos claves del producto.
- Asignar acciones
  - Entender el propósito del patrón.
  - Generalizar los casos de uso.
  - Evitar duplicaciones o patrones similares.
- Dibujar estructura de contenido
  - Define jerarquía.
  - Dibujar varios formatos.
  - Elije el que mejor encaje con los principios de tu sistema.
- Generar una escala de patrones
  - Definir bien el caso de uso de cada variante de ese patrón.
🎨 Patrones Perceptivos
- User Persona
  - Cualidades clave que deseas que tenga la marca.
- Mood board
  - Recoger ideas e inspiración.
  - Complementario a un user persona.
- Style tiles
  - Creada por Samantha Warren.
  - Colores, tipografía y componentes relevantes de la interfaz.

Marta Monterde Alonso

teacher•

Buen resumen! Ayudará mucho a tus compañeros y compañeras ;)

Felipe Bernardo González Barranco

student•

:clap: :clap: :clap:

Octavio Cuellar Vargas

student•

Comparto el enlace del curso que se menciona en el segundo 0:25

Felipe Bernardo González Barranco

student•

Gracias!

Usuario anónimo

user•

Gracias

Alejandro Perafán

student•

¿Cómo definir los ++patrones funcionales++ de mi sistema de diseño?

Entiende las necesidades, metas y motivaciones del usuario y luego enuncia qué patrones responden a dichas necesidades, metas y motivaciones.
Asigna acciones a los patrones mencionados. Es importante que te enfoques en lo que hace o soluciona el patrón y no en lo que es. Ejemplo: "Banner principal" , mejor usa ++"Promoción de nuevos artículos" ++
Crea un wireframe de baja calidad y enuncia los elementos que consideras debe tener ese patrón para que funcione. Luego define la jerarquía de esos elementos.
Ahora ten en cuenta si ese patrón va a replicarse en otros lugares dentro de tu producto, si es así, es importante que generes diferentes escalas del patrón.

Betzaida Flores

student•

Me gustaria mas que lo explicara desde su experiencia y no solo leer terminos de su presentación, mejor lo descargo

Nidia Carrillo

student•

Me gustó el contenido de esta clase. Aunque tuve que volver a ver las clases varias veces porque me pareció díficil de seguir, pesado y que en general la forma pareciera que solo está leyendo un script. Resulta pesado de seguir el ritmo con esta manera de presentar. Presenta mucho contenido en cada clase.

Juan Ortega

student•

Así defini el user persona y las caracteristicas del producto, si bine es de tipo general da bastantes pistas hacia donde se crearian los patrones de diseño del portal a desarrollar.

Nidia Carrillo

student•

Tuve que volver a ver las clases varias veces proque siento que la forma en cómo lo explica la profesora pareciera que solo está leyéndolo. Resulta pesado de seguir el ritmo con esta manera de presentar.

Vladimir Benitez

student•

Me encantó este capitulo, sabía que era el User persona pero no había escuchado esta manera de crearlo.

Pedro Isaac Aguilar

student•

Style tiles

Técnica creada por Samantha Warren
Ya existe una idea general de cómo va a ser el estilo, pero quieres evaluar variaciones entre los diferentes elementos que la componen
Estos tiles contienen elementos como el color, la tipografía, y algunos de los componentes más relevantes de la interfaz, los cuales se colocan unas al lado de otras para comparar y valorar qué tile refleja mejor los principios de nuestro producto digital

Juan Ortega

student•

Esta es la forma como empece a aplicar el nombre del patron con sus necesidades, sin embargo hace parte de mis notas del curso.

Juan Ortega

student•

En cuanto al moodboard de inspiración en la lectura de recursos suguieren 4 pasos:

1)Titulo del mood 2) Palabras clave 3) Brainstrom de imagenes 4) Selección de las mismas

En mi caso lo hice así

Diego Perdomo

student•

Los comentarios de las notificaciones del Sistema de Diseño que muestra la profesora son muy buenos.

Aquí el archivo donde está el proyecto.

MARIA TERESA PANIAGUA RIVERA

student•

Gracias

David Antonio Garcia Saaib

student•

Donde encuentro ejemplos de lo que se vio en esta clase?

Marta Monterde Alonso

teacher•

Hola Adrian! En el apartado de recursos de la clase tienes algunos enlaces con información sobre lo que se ve en ésta clase. Espero que te sean de ayuda. ;)

Emmanuel García

student•

Los articulos no concuerdan con lo que se vio en clase

Laura Milena Guauque Castañeda

student•

Cuando se trabaja con una marca que tiene múltiples tipos de user personas y productos diferentes, es recomendable crear user personas específicas para cada segmento del público. Esto permite personalizar la experiencia del usuario según las necesidades y expectativas de cada grupo.

En cuanto al sistema de diseño, no es necesario diseñar uno completamente nuevo para cada producto, pero sí se debe adaptar el sistema existente mediante el uso de componentes y patrones que reflejen la diversidad de las user personas. Esto asegura consistencia visual y funcional mientras se mantiene la flexibilidad necesaria para abordar diferentes productos.

Gabriela De la Torre

student•

Elizabeth Vega Rosas

student•

Designing for Emotion - Libro que se menciona en el min 7:00 de la clase. Aaron Walter (Author)

Definición de patrones en tu sistema

Introducción

Patrones y Componentes en Sistemas de Diseño

Patrones en los SSDD

Diseño Atómico: Creación de Patrones y Componentes Eficientes

Principios de Diseño para Sistemas Digitales

Patrones de Lenguaje en Diseño de Interfaces

Patrones Funcionales en Productos Digitales: Definición e Importancia

Patrones perceptivos

Definición de patrones en tu sistema

Documentación de los patrones

Componentes en los SSDD

¿Para qué utilizar los componentes?

Tipos de componentes

Requisitos mínimos

UI Kit y SSDD

Consejos para el UI Kit

Documentación del UI Kit

Design Tokens

Resumen y despedida

Autoevaluación del Curso de Patrones y Componentes en Sistemas de Diseño