Cursos Empresas Blog Live Conf Eventos Precios

0:009:29

Definición de patrones en tu sistema

Curso de Patrones y Componentes en Sistemas de Diseño

Clase 7 de 16

Clase 7 / 16

Comentarios (20)20 comentarios

Luzdelia Alba

Hace 5 años

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

Hace 5 años

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).

Jose David Albarran Velasquez

Hace 7 meses

Ntas del curso: Por que es importante definirlos?

Evita duplicar componentes y procesos
Elementos que necesitas para resolver el problema mas rapidamente

A medida que nuestro proyecto evoluciona los patrones evolucionan tambien, aunque el comportamiento y el objetivo final sea siempre el mismo. Por eso es tan importante establecer cuales son esos patrones desde el principio, porque de esta manera evitaremos duplicar componentes y procesos, ya que si hemos establecido los patrones core de nuestro producto y los tenemos documentados sera mucho mas simple ir a buscarlos y adaptarlos al problema que estamos intentando resolver.

Ademas cuando no establecemos desde el principio esos patrones clave se puede caer en la tentacion de ir improvisando con multiples formas de resolver un mismo problema, con el coste de mantenimiento de cada uno de esos elementos que ello conlleva.

Patrones funcionales:

Mapa de patrones

Claridad en comportamientos generales y acciones a reforzar del producto.

Para comenzar: Tener claros los comportamientos generales y las acciones que queremos reforzar en nuestro producto.

Conocer a la clientela:

Sus necesidades
Sus metas
Sus motivaciones.

Como cuando hacemos un “customer journey”

A veces perdemos la conexion entre los comportamientos y los patrones exactos a traves de los que se manifiestan; por eso es tan fundamental establecer un mapa, porque es el lugar en los que dejamos claros los aspectos claves de la plataforma y los relacionamos con los patrones y los componentes que los representan. No hace falta ir al detalle, pero si trabajar con los bloques mas relevantes.

Aspectos claves del producto
Patrones y componentes.

Ejemplo:

Las motivaciones de nuestros usuarios son:

Analisis: Tablas, KPIS y graficas
Exploracion: Buscadores, filtros e iconos
Logros: etiquetas de estado, mensajes de aviso, descargas.

Cuales patrones funcionales representarian estos elementos?

Este mapa ayudara a relacionar cada elemento del sistema con uno de los patrones funcionales generales de la plataforma

ASIGNAR ACCIONES.

Se puede entender el propósito de un patrón (lo que hace y lo que no), focalizandose en lo que hace el elemento en si y no en lo que es.

Se trata basicamente de encontrar acciones que describan el comportamiento para el que esta generado ese patron y de que le asignemos siempre un proposito sin que este sea especifico para un unico caso.

Ejemplo:

Nombre de header, podemos llamar a este elemento “imagen del header” pero hace que sea especifico en exceso y podemos acabar generando elementos muy parecidos para otros lugares de la pagina web. Es mejor si le asignamos el proposito que tiene a modo de accion, como puede ser: promocion de articulos.

De esta fomra tendremos como beneficio:

La comprension del proposito del patron
Generalizar los casos de usos
Evitar duplicidades o patrones muy similares

DIBUJAR LA ESTRUCTURA DE CONTENIDO.

Wireframming - Sketching de baja fidelidad - Patrones

Dibujar todo lo que debe contener nuestro patron, para funcionar de forma efectiva y representar el comportamiento de tus usuarios

Que elementos necesita tu patron para funcionar de forma mas efectiva?

Genera una lista del contenido

Ejemplo: imagen representativa, titulo descriptivo impactante y boton CTA

Ahora que ya se sabes lo que se necesita...

Hay que definir la jerarquia
Dibujar varios formatos
Elegir el que mejor encaje con los principios de tu sistema

GENERAR UNA ESCALA DE PATRONES.

A veces si que es interesante definir varios elementos que resuelvan el mismo problema.

Importante definir la jerarquia entre ellos y en que caso utilizaremos cada uno.

Ejemplo:

Puedes tener varias formas de representar un dato relevante, dependiendo de donde nos encontremos en la interfaz.

Objetivo principal

Definir bien el caso de uso de cada variante de ese patron.

Patrones perceptivos:

En algunos casos, y sobre todo dependiendo de la magiìnitud del proyecto o de la empresa en la que estamos trabajando varios de estos patrones pueden venir definidos desde:

Departamento de Marketing: como podrian ser los logotipos, colores, tipografias, y tono
Segun la necesidad del producto, como el espaciado y el layout.

De cualquier manera para nuestro caso, vamos a establecer todos lo elementos por nuestra cuenta y para ello tambien podremos utilizar diferentes tecnicas.

GENERAR UN USER PERSONA.

Pero no sera cualquier “User-persona” “Designing for emotion, Aaron Walter - Este tipo de persona sera especial porque tendra las cualidades clave que deseariamos que tuviera nuestra marca , esto nos ayudara a presentar fisicamente la personalidad de nuestro producto

A la hora de elegir nuestra imagen representativa, debemos plantearnos por ejemplo que queremos que nuestro producto sea

Ejemplo:

Producto serio, pero no aburrido.

Completo, pero no complicado

Que persona representaria estas cualidades?

Erwin Frias

🧩 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

Profesor

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

Felipe Bernardo González Barranco

:clap: :clap: :clap:

Octavio Cuellar Vargas

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

Gracias!

Usuario anónimo

User

Hace 4 años

Gracias

Betzaida Flores

Hace 3 años

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

Alejandro Perafán

¿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.

Nidia Carrillo

Hace 2 años

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.

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.

Juan Ortega

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.

Vladimir Benitez

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

Pedro Isaac Aguilar

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

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

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

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

Hace un año

David Antonio Garcia Saaib

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

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

Los articulos no concuerdan con lo que se vio en clase

Laura Milena Guauque Castañeda

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

Elizabeth Vega Rosas

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

Progreso del curso

Introducción

Patrones en los SSDD

Componentes en los SSDD

UI Kit y SSDD