Col3

Del story board al MVP de alta fidelidad

AndrĂŠs CuĂŠllar @iamcuellar

Preguntas del cliente al emprendedor

Vamos a validar

Landing Page y redes sociales

Radiogra(a de una landing page

Ya no leen,

escanean.

Esquema de lectura

Triangulo de oro

Sobre el scroll

https://qualaroo.com/ Â

h<p://www.clicktale.com/ Â

h<p://www.ipercepAons.com/en/4q Â

www.crazyegg.com Â

h<p://mogotest.com/ Â

h<p://www.labsmedia.com/clickheat/index.html Â

h<p://ďŹ vesecondtest.com/ Â

Landing Page y redes sociales

MulA tarea y MulA pantalla

Sobre las 4 pantallas

Darwinismo Digital

Guiones gráﬁcos

Storyboard

Metodologías desarrollo de so-ware

Una startup es una organización temporal en búsqueda de un modelo de negocio escalable y replicable

Storytelling for User Experience

Elementos del dibujo •  Área parAcular •  Elementos especíﬁcos •  Situación espacial •  Dinámica de elementos o interacciones con el Aempo.

Storytelling Â

Elementos del dibujo •  Áreas parAculares del dibujo: 1,2,3,4, 4.1 •  Elementos especíﬁcos: opciones en el 2 y 3. •  Situación espacial: personas en el trabajo 1.

h<p://stripgenerator.com/ Â

h<p://www.storyboardthat.com/ Â

Indigo Studio

h<ps://www.toonboom.com/products/ storyboard Â

Planos: SegĂşn estructura

Si alguien Aene la potestad de caliﬁcar algo como "user friendly" este es únicamente el usuario, quien tendrá interacción con el sistema.

Bocetos Â

Se trata sólo de una selección de ideas iniciales

También conocidos como Sketch

2 x 1

ProtoApos en papel

Prototipos en papel

h<p://pencil.evolus.vn/ Â

h<p://cacoo.com Â

Wireframe

También conocidos como maquetas digitales

h<ps://gomockingbird.com/mockingbird/ Â Â

h<p://www.mockﬂow.com/apps/

h<p://www.axure.com/

h<p://www.jusAnmind.com Â

h<p://www.balsamiq.com

h<p://www.napkee.com

h<p://www.mockﬂow.com/apps/

¿Qué son los wireframes y cómo generarlos?

Herramientas ideales para..

Storyboard o Historia de Usuario

Historia de usuario

Estructura de un storyboard Título'' Iniciar sesión

Prioridad' '

Requerimiento' ' ' 'Ingresar con los datos registrados o con su cuenta de cualquier red social ' Razón' ' ' Es necesario realizar el logueo para acceder a los datos y funciones del ' aplicaAvo ' Autor' Fecha' Tania Vergel Mayo 03 de 2014 ' '

Las 3 Cs de Ron Jeffries

ConversaAon

ConﬁrmaAon Card – User story

Formato de la historia

Â

Formato de la historia Una historia no se resuelve con un solo método de un API. Debemos implementar todos sus aspectos: interfaz de usuario, código de cliente, servidor, base de datos, etc

Descomprimiendo Conectar a la BD Construir GUI Registrar

Buscar

Administrar Usuarios Editar

Borrar

Lógica del servidor Validación de datos

Henrik Kniberg

Modelo INVEST •  •  •  •  •  •

Independiente Negociable Valiosa EsAmable Pequeña (small) Testeable Bill Wakes

Roles de usuario

Â

Mapas de historia de usuario

Jeﬀ Pa<on

En tĂŠrminos sencillosâ&#x20AC;Ś.

Iniciandoâ&#x20AC;Ś

El proceso

Lo que buscamos.

En resumen

Así es como iniciamos.

A mitad del proceso

Esto es lo que deseamos

Mi compañía: Nombre de la compañía Está desarrollando: Oferta definida Para ayudar a: Mercado objetivo A resolver el problema Toque secreto

Flow Chart

Â

El producto mínimo viable, término que popularizó Eric Ries

Producto mĂnimo viable

Prototipo de alta fidelidad

Tabla comparaAva

Antropometría la ciencia que estudia las medidas del cuerpo humano con el ﬁn de establecer diferencias entre individuos, grupos, razas, etc

AntropometrĂa

Dise単o amigable

Dise単o adaptable

Y el estรกndar?

Reutilizar soluciones Usar dise単os de plantillas que ya resolvieron el problema http://getbootstrap.com/2.3.2/#examples

Según estructura h<p://www.layouAt.com/ h<p://jquerymobile.com/

Responsive Web Design

Interfaz grรกfica

MEDIA QUERIES •  h<p://mediaqueri.es

Mi compañía: Nombre de la compañía Esta desarrollando: Oferta definida Para ayudar a: Mercado objetivo A resolver el problema Toque secreto

Muchas gracias @iamCuellar

Andrés Cuéllar

Turn static files into dynamic content formats.

Create a flipbook