Definición de patrones en tu sistema

Curso de Patrones y Componentes en Sistemas de Diseño

Contenido del curso

Introducción

1
Patrones y Componentes en Sistemas de Diseño
02:33 min

Patrones en los SSDD

Componentes en los SSDD

UI Kit y SSDD

Tomar examen

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

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?

Comentarios (20)20 comentarios

Luzdelia Alba

Hace 5 años

Erwin Frias

Marta Monterde Alonso

Profesor

Felipe Bernardo González Barranco

Octavio Cuellar Vargas

Usuario anónimo

User

Hace 4 años

Alejandro Perafán

Betzaida Flores

Hace 3 años

Nidia Carrillo

Hace 2 años

Juan Ortega

Vladimir Benitez

Pedro Isaac Aguilar

Diego Perdomo

MARIA TERESA PANIAGUA RIVERA

Hace un año

David Antonio Garcia Saaib

Emmanuel García

Laura Milena Guauque Castañeda

Gabriela De la Torre

Elizabeth Vega Rosas

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

Definición de patrones en tu sistema

Progreso del curso

Introducción

Patrones en los SSDD

Componentes en los SSDD

UI Kit y SSDD

Recursos

Recursos