Diseño de Producto Digital con WordPress

Gestión de Riesgos en Procesos Creativos

Abel SutiloDiseñador de Producto Digital

¡Hola!

Una breve introducciónal Diseño de Productos Digitales con WordPress

¿Producto Digital?

Multiples contextos

Diseño de Producto Digital con WordPress

Multiples formatos

/Introducción

Desktop, Tablet, Mobile WebApp, Ecommerce, Red Social, etc…

Diseño de Producto Digital con WordPress /Introducción

Estadísticas

$1,000 es lo que paga un cliente de media por un site con WordPress

(2014)

http://www.codeinwp.com/blog/wordpress-statistics/

$40 es el coste medio de un tema de pago

Avada es el tema más vendido, superando las 225.000 descargas

Diseño de Producto Digital con WordPress /Introducción

Estadísticas …España(2014)

https://ayudawp.com/como-usamos-wordpress-en-espana/

Diseño de Producto Digital con WordPress /Introducción

Riesgo del no diseño

Diseño propio (tema de WordPress a medida)

Diseño ajeno (tema de WordPress adquirido)

Objetivos mal definidos (UX)

Asumir la dedicación de correctivos

Desviación de la previsión original

Beneficio ínfimo o con pérdidas

Objetivos definidos

Fácil identificar “Bug” VS “feature”

Tareas en convergencia = mejores plazos

Gestión de riesgos

Propuesta de metodologíapara la Gestión de Riesgos de Procesos Creativos con WordPress

Diseño de Producto Digital con WordPress /Metodología

Espectro profesionaldel Diseño de Producto Digital

Diseño de la eXperiencia de Usuario

Diseño de Producto Digital con WordPress /Metodología

Seamos prácticosLa ejecución de la creatividad persigue el objetivo de

conceptualizar las ideas previas para alinear todas las visiones del producto (cliente, desarrollador, etc)

Diseño de la Interfaz de Usuario

Definición + Tiempo

Diseño de Producto Digital con WordPress /Metodología

Diseño UX

Wireframe PrototipoMockup

Seleccionamos el modelo estos dos parámetros:

Modelo de conceptualización gráfica:

Diseño de Producto Digital con WordPress /Metodología

Wireframe

Pros

Rápida ejecución

Bajo coste

Cons

Menor definición

Sin animación

Diseño de Producto Digital con WordPress /Metodología

Mockup

Pros

Alta definición

Reutilizable

Cons

Tiempo de ejecución

Sin animación

Diseño de Producto Digital con WordPress /Metodología

Prototipo

Pros

Alta definición

Con animación

Cons

Tiempo de ejecución

¿Reutilizable?

Diseño de Producto Digital con WordPress /Metodología

Herramientas

http://www.cooper.com/prototyping-tools

Diseño de Producto Digital con WordPress /Metodología

¿Y usar un “builder”?

Algunos de ellos:

Fusion (Avada)

Divi (Elegant Themes)

Upfront (WPMUDev)

Layers

Diseño de Producto Digital con WordPress /Metodología

¿Y usar un “builder”?

Cons

Orientado a objetos en lugar de flujos/tareas

Dependencias del tema

Solucionan herramientas, NO procesos

Perdida de control en la calidad del código

Diseño de Producto Digital con WordPress /Metodología

¿Y usar un “builder”?

Pros

Diseño de Producto Digital con WordPress /Metodología

Ventajas del Diseño UX

Definir objetivos y arquitectura de información

Llegados a este punto hemos conseguido:

Identificar funcionalidades (widgets, regiones de menú, plugins, CPT, ACF, etc)

Unificar la visión del producto

Preparar el producto para escalar

Diseño de Producto Digital con WordPress /Metodología

Trabajando la convergencia

Una vez validado el diseño UX, las tareas de diseño UI y desarrollo front-end transcurren en paralelo

Optimización de los tiempos de entrega

Gestionar los riesgos de los procesos creativos: Creatividad + Eficiencia

Diseño de Producto Digital con WordPress /Metodología

Diseño UI

Mockup

Objetivo que perseguimos

Modelo de conceptualización gráfica:

Diseño de Producto Digital con WordPress /Metodología

Diseño de interfaz orientado a objetos

We’re not design pages, we’re designing systems of components

—Stephen Hay

Diseño de Producto Digital con WordPress /Metodología

“Atomic design”

Objetos

Atomos

Moléculas

Organismos

Templates (UX)

Páginas

Diseño de Producto Digital con WordPress /Metodología

Aplicando la convergencia

CSS

Trasladamos el diseño UI al desarrollo front-end

Diseño de Producto Digital con WordPress /Metodología

Ventajas del Diseño UI

Validar el look and feel con el mínimo esfuerzo y coste

Llegados a este punto hemos conseguido:

Dotar al desarrollo front una idea precisa para representar (CSS)

Ganar tiempo con la convergencia de tareas

Liberar de las dependencias de tareas creativas a corto/medio plazo

Diseño de Producto Digital con WordPress /Metodología

¡Recuerda!

Diseño propio (tema de WordPress a medida)

Diseño ajeno (tema de WordPress adquirido)

Objetivos mal definidos (UX)

Asumir la dedicación de correctivos

Desviación de la previsión original

Beneficio ínfimo o con pérdidas

Objetivos definidos

Fácil identificar “Bug” VS “feature”

Tareas en convergencia = mejores plazos

Gestión de riesgos

¡Gracias!

¿Preguntas?

http://abelsutilo.com

Abel Sutilo

@abelsutilo

http://agenciaroot.es