WIREFRAMES Y MOCKUPS

PROTOTIPADO CLASE 03

DIPLOMADO ARQUITECTURA DE INFORMACIN Y EXPERIENCIA DE USUARIO 2016

INTRODUCCIN IXD
DISEO DE INTERACCIN

El Diseo de Interaccin(IxD)define la estructuray

comportamientode los sistemas interactivos.Los diseadores de
interaccinse esfuerzan en crear relaciones significativasentre las
personas ylos productos yservicios que utilizan, desde los
ordenadoresa los dispositivos mviles a otros aparatos y ms all.
DISEO DE INTERACCIN
DISEO DE INTERACCIN

SERVI IXD PROD

Ir a la Plaza
Silla

Conversar
Telfono

Vender Autos
Aplicacin

Encontrar Casa
Web

Grabar un disco Software.

DISEO DE INTERACCIN

ESTRA PERS AI IXD UI PROD TES

La complejidad de un proyecto de desarrollo Web requiere de

una metodologa escalonada que normalmente es abordada por
un equipo multidisciplinario. Dentro de este proceso podemos
distinguir:
DISEO DE INTERACCIN

WF

ESTRA PERS AI IXD UI PROD TES

A lo largo de este proceso, los lenguajes de representacin y

formalizacin (mapas de navegacin, wireframes, esquemas de
datos, diagramas de flujo, etc.) van marcando cada etapa pero
carecemos de un sistema que permita transversalizar el
producto final: la experiencia del usuario.
DIAGRAMA DE FLUJOS
(FLOW)
DIAGRAMA DE FLUJOS

Este diagrama es una representacin grfica de los pasos de un proceso y / o los

procesos de un sistema. El diagrama de flujos concretamente es una conexin de
smbolos que representan operaciones, posibilidades, etc.
DIAGRAMA DE FLUJOS

Este diagrama se compone de una serie de smbolos especficos con un significado,

es decir, tiene smbolos universales de flujos que han sido normalizados para evitar
las diferencias entre un diagrama y otro, para que puedan ser entendido por
cualquiera que tenga conocimiento de esta simbologa bsica.
DIAGRAMA DE FLUJOS

En los diagramas de flujo se deben cumplir los siguientes aspectos:

Existe siempre un camino que permite llegar a una solucin
(finalizacin del algoritmo).

Existe un nico inicio del proceso.

Existe un nico punto de fin para el proceso de flujo (salvo del

rombo que indica una comparacin con dos caminos posibles).
 ELEMENTOS DEL
DIAGRAMA DE FLUJOS
DIAGRAMA DE FLUJOS

1. Rectngulo de lados redondos: Esta figura representa el inicio o el fin de

un proceso (claro que el fin de un proceso tambin puede ser el comienzo
de otro).
2. Rectngulo: esta forma representa (a diferencia del mapa de navegacin)
un evento o un proceso determinado, que en general es parte de una
secuencia.
3. Parelelgramo: Este smbolo grafica un campo de entrada o salida de
informacin del sistema, se utiliza generalmente en los formularios.
4. Rombo: Esta figura (al igual que en los mapas de navegacin) significa un
punto de decisin. Una accin del usuario puede tomar distintos caminos
dependiendo de la situacin; se entiende como una decisin del sistema.
5. Crculo: Representa un punto de conexin entre procesos. Se utiliza
cuando es necesario dividir un diagrama de flujo en varias partes, ya sea por
razones de espacio o simplicidad. En esos casos, se debe dar referencia para
distinguirlo de otros.
6. Flecha Gruesa: Esta flecha denota la direccin del flujo directo, la
trayectoria ptima del proceso de informacin.
7. Flecha Delgada: Esta flecha representa otras vas que puede tomar llevar a
cabo un proceso, que no llegan a una solucin ptima.
http://wiki.ead.pucv.cl/index.php/Lenguajes_Visuales_para_la_Interacci%C3%B3n
DIAGRAMA DE FLUJOS

Rectngulo de lados redondos: Esta figura representa el inicio o el fin

de un proceso (claro que el fin de un proceso tambin puede ser el
comienzo de otro).
DIAGRAMA DE FLUJOS

Rectngulo: esta forma representa (a diferencia del mapa de

navegacin) un evento o un proceso determinado, que en general es
parte de una secuencia.
DIAGRAMA DE FLUJOS

Parelelgramo: Este smbolo grafica un campo de entrada o salida de

informacin del sistema, se utiliza generalmente en los formularios.
DIAGRAMA DE FLUJOS

Rombo: Esta figura (al igual que en los mapas de navegacin)

significa un punto de decisin. Una accin del usuario puede tomar
distintos caminos dependiendo de la situacin; se entiende como una
decisin del sistema.

http://wiki.ead.pucv.cl/index.php/Lenguajes_Visuales_para_la_Interacci%C3%B3n
DIAGRAMA DE FLUJOS

Crculo: Representa un punto de conexin entre procesos. Se utiliza

cuando es necesario dividir un diagrama de flujo en varias partes, ya
sea por razones de espacio o simplicidad. En esos casos, se debe dar
referencia para distinguirlo de otros.
DIAGRAMA DE FLUJOS

Flecha Gruesa: Esta flecha denota la direccin del flujo directo, la

trayectoria ptima del proceso de informacin.
DIAGRAMA DE FLUJOS

Flecha Delgada: Esta flecha representa otras vas que puede tomar
llevar a cabo un proceso, que no llegan a una solucin ptima.
DIAGRAMA DE FLUJOS

http://tools.jboss.org/features/bpmn2.html
DIAGRAMA DE FLUJOS

http://tools.jboss.org/features/bpmn2.html
PROBLEMTICA
PROBLEMTICA LINEAL

Pensamiento Lineal .
PROBLEMTICA LINEAL

Pensamiento Lineal .
PROBLEMTICA EN ENTORNOS DE TRABAJO

La interaccin en una plataforma web es tan importante como su estructura de

contenidos y diseo. Sin embargo, no existen muchas herramientas para trabajarla ni
un modo de comunicacin estndar para la industria del diseo y desarrollo web.
PROBLEMTICA EN ENTORNOS DE TRABAJO

Por otro lado, la gran cantidad de profesionales involucrados en la creacin de un sitio web
demanda la existencia de ms y mejores objetos (modelos o diagramas) que comuniquen de forma
efectiva las ideas desde el comienzo del proyecto, etapa caracterizada por ser altamente abstracta.
PARTITURA DE INTERACCIN

Es en este contexto es que surgieron las partituras de interaccin, como un lenguaje

visual para modelar la interaccin en proyectos digitales. Concretamente, lo que
busca esta notacin grfica es articular la relacin entre el usuario, la interfaz grfica
y el sistema que responder a las acciones ejecutadas por el usuario.

FLUJO CON WIREFRAMES

(WIREFLOW)
WIREFLOW
WIREFLOW

Es una manera de representar en un diagrama de flujos las

interacciones que podemos visualizar en un set de wireframes
WIREFLOW
WIREFLOW

http://wireframes.linowski.ca/2009/12/omnigraffle-wireflows/
WIREFLOW

http://grahamtodman.co.uk/blog/category/wireflow/
 WIREFLOW
-I- Esta animacin comprende una analoga de
presentar al lector un uno a uno dandole una
pincelada desde la cromtica hasta las
divisiones principales a modo de
reconocimiento posterior en su primera mirada
del interfaz.
El Proyecto Contel consta de 3 miradas:
"visualizacin"; "Diseo de Interfaz" y
"Diseo de Interaccin", tres miradas
distintas en el quehacer de concebir
contel desde cada uno de estos
continentes. En esta presentacion
procuramos no presentar tres miradas
distintas sino que 3 profundizaciones de
temas especificos, que se unen
tcnicamente y semanticamente para
proponer un modo de navegar,utilizando
una forma grfica y sintxica acorde a los
propositos del proyecto. Para aunar fuerzas
se construye un Prototipo funcional de
contel, el cual tiene como funcion ser un
ejemplo beta de contel para el
entendimiento interno y externo del
proyecto. As este prototipo cuenta con un
mapa modelado [visualizacin], una
interfaz xhtml/css2 [Diseo de
Interfaz] y el modo de navegar [Diseo
de Interaccin].
Estas tres miradas de Contel pretenden
fundirse y dar paso a una interaccin
global, donde cada una de estas
profundizaciones se hacen presentes en los
momentos que lo requieren y dan paso a
un entidad mayor, que es un prototipo
funcional uno a uno, basado en los datos
estudiados y propuestos para momento o
vista en que se navega.
roceso que ha
icial. Desde el
os han debido
tiempo.<br/>
presentacin
o). A nivel de
iones y notas)
do generar un
go vestirlo con
ente de que la
legido AJAX,
r-gimen de
riencia dismi-
3 / Fax: 056 32 274421 / http://www.arquitecturaucv.cl/constel/ email: constel@arquitecturaucv.cl </ref><ref> Equipo contel: Dir.: Herbert Spencer, Manuel Sanfuentes e.[ad] PUCV / Ttulo III-D. Grfico e[ad] PUCV: Daniela Abad Rodrigo Vera Julio Tapia / Dr. Hernn Astudillo; post-grado UTFSM / Magister UTFSM Pablo Inostroza / Colaboradores: Arturo Mena IMA, PUCV - Jorge Barahona AV. Carlos Hurtado CIW, U de Chile Ricardo Espinoza, Inst. Filosofa PUCV.</ref>
--------
------------------------------------------
1 3
---------
---------------------------------------------
Temporalidad -I- Las textools son parte importante en el diseo de interfaz porque es por medio Traves[a]
1 [a]n espacio / tiempo de ellas que se generan algunas de sus distintas vistas del sistema, es asi como se
presentan en pantalla los formularios de nuevo documento, se pueden marcar los
Usuario marcador y anotador
mapa de aes El mapa construye su propia textos por medio de los conceptos al desplegar un texto completo y tambien
eccin global [TF]
temporalidad en el espacio / puede tanto mostrar como ocultar las marcas aadidas por los diferentes usuarios
[a]n an
nueva seccin
1 456 an
ver marcas
tiempo; desde un centro que hace a cada texto cargado.
Usuario marcador, anotador, new doc
aparecer las palabras, de una en 1
2 nuevas [a]es
una, regenera el aire de la ([a][a'])
2 3 [a] [a]
[a] nuevas notas
[TF]
seccines constelacin en el espacio cada
screen layout 01 screen layout 02
vez, as contina hasta completar --------
Usuario administrador
el ciento de [a]es. Un aire en
El mapa como la zona de interaccin primera, desde constante tensin, generado por
3
donde se desencadenan todos los pasos posteriores,
desde la exploracin del mapa y el clikeo de una
[a] asociadas
[TF] documento completo
las distintas relaciones de posicin
y de atraccin que ejercen unas
palabr[a], hasta la inclusin de una nueva [a] al mapa. 456 con otr[a]s. Luego de un tiempo
transcurrido las atracciones
comienzan a encontrarse,
acotando cada vez ms el aire que
Poes[a]
--------
existe entre las palabras.
El usuario debe elegir un punto del mapa, as con esta accin se despliegan o aparecen Luego se elige la Ultima palabra de la seccin elegida, desapareciendo todo el texto que
------------------------------------------------------------------------------------------------------------------------ Al hacer click en marcar el texto completo del cual proviene la seccion que leiamos, o el segua a esta palabra, creandose la seccin que el usuario desea. Asi a continuacin de la
Grafico ejemplo de lo que ocurre cuando definimos que existe
------------------------------------------------------------------------------------------
Mapa: se explica la dimisin del Mapa y se muestra su superficie. Mapa de Relaciones en pantalla configuradas todas las reas de Interaccin. Este fenmeno determina el atributo de distancia entre los pares en el texto completo que leiamos se hipervincula, en su totalidad. seccin aparece un imput, para titular la seccin con un conceptp clave {a}. Por ejemplo
Xplica: Es una explicacin de la estructura Contel. una intereccin, es decir cuando se marca una nueva [] entre espacio, as; mientras ms elemento[] estn en la interseccin de los pares
los pares simtricos [a]----[a], ya que existe Amereida
Contel, Un modo de presentar al Usuario la asociados [a]------[a'], menor ser la distancia entre las partculas asociadas.
forma en que la pantalla se divide, y la funcin [a]-----[]----[a]
EJ.
de cada divisin, es un recurso estructura que -I- Se presenta un primer
asiste al que ingresa antes de ingresar, aclara,
formulario complejo donde se [a] = {007 ,025 ,067 , 075, 088, 654}
acota y sita al usuario.
presentan los datos de modo de [a'] = {075 ,088, 023}
crear una concordancia y calce
entre label e input dicho de [a] [a'] = {075 ,088,}
otro modo entre etiqueta y
campo de formulario, con lo cual
establece formularios, estndar
bien formados y sin la utilizacin
de tablas que puedan ensuciar
el cdigo de los documentos
Html. Mantiene una lnea
acorde a los dems formularios
que se presentarn compuestos
por un orden claro de alineacin 21.png
Al hacer lcick en Nuevo Ucuario se desplegara la interfaz constel con el formulario de Nuevo Usuario cargado en Textarea de las etiquetas como de los
campos y de los ttulos y
subttulos.
Metamapa / Secciones : Se explica la dimension y funcion del Metamapa.
Division que muestra secciones de una {a} elegida
Al llenar el fomrilario el Usuario habra ingresado a Contel, donde como primera medida
tenemos el Prologo como una manera de acostumbrarnos a la Divisin y a la lectura en Al elegir una seccin de la lista que su {a} elegida trae, se despliega la secion
Nuevo Documento
Se permite agregar un Nuevo documento a la Red, esta accin se desarrolla en 2 momentos dentro de el rea de lectura, se reemplaza la
2 4
Contel. Es un estado previo es la pre- navegacin de Contel -I- Posible imgen para la imagen Cada seccion tiene Autor, que es el usuario que s eloggea, y quien marca y secciona, este lectura, primero por un Formulario donde ingresamos los datos del texto a ingresar, como su titulo, autor, edicin, etc.; para luego en un
logotpica del proyecto, partiendo como un Autor tiene una ficha personal y datos de Historial en Constel, tales como datos numericos segundo momento ingresar el texto en un editor WYSIWYG (what you see is what you get lo que ves es lo que tienes), donde podremos
reconocimiento en la barra como favicon, acerca de marcas, notas y Textos Completos. dar formato a nuestro texto, aplicando caractersticas graficas como tipografas, prrafos, alineacin de texto, color, etc.
migrando luego a presentar este pie de Se elige la primera palabra de la seccin a marcar. Al hacer esto el texto que preceda a esta En una interfaz como la de Contel y con acciones un tanto mas complejas a Luego de haber titulado la seccion, si esta seccin ya contaba
pagina en una medida acorde a este estilo seccin desaparece, siendo la palaba elegida la primera del texto ahora. las de un sitio normal es necesario ubicar al lector, guiarlo en su camino, es asi con otras titulaciones de otros usuarios, nuestra tituacion se
pondra al final de la lista, y al hacer click en ella podrmeos
para la imagen de constel. como se decide implementar instrucciones que acercan la interfaz a un
programa de edicin como los de la familia Microsoft Office como Word
donde la instruccin acompaa el quehacer del novato, la instruccin no busca
crear una nota si lo deseamos.
hacer el trabajo del usuario, sino uqe hacer patente lo visible adecuar al lector
y guiar su accionar.
------------------------------------------
--------
--------
-I- Imgenes para las delimitaciones de una marca o titulacin o seccin
tanto para el inicio como el final de la nota, pudiendo esto ser cambiado
mediante cascadas de estilo sacandole el background a alguno de ellos
+ asgdhd.,muytrt
-I- Iconos para los mens desplegables,
asgdhd.,muytrt
si fuese necesario.
asgdhd.,muytrt
asgdhd.,muytrt
+ asgdhd.,muytrt
-I- Una primera instancia con el
asgdhd.,muytrt + asgdhd.,muytrt + asgdhd.,muytrt + asgdhd.,muytrt + asgdhd.,muytrt
intentando mantener el aspecto general entre asgdhd.,muytrt + asgdhd.,muytrt
asgdhd.,muytrt
asgdhd.,muytrt
texto esto es en cuanto se los botones, los campos de formularios, y la
ingresa al sitio, presenta cromtica, siendo parte importante de la Al hacer una nueva [a], los atributos del
desplegado en el texto un interaccin producida en los textos, en cuanto a mapa cambian sus valores, los rangos de
documento con los estilos agregar notas, y agregar concepto {a}. ordenacin y posicionamiento en el
determinados para la espacio cambian; generndose un nuevo
presentacin de algun calculo en las operatoria para regenerar
documento en esta zona del el espacio. Las operatorias que
interfaz. cuantifican los atributos grficos, han de
ser de carcter dinmico, y dan la
posibilidad de que el espacio este en
Marcar
constante tensin y muestre las
relaciones entre la [a]es cada vez.
Metamapa / fichas : Se explica la dimension y funcion del Metamapa. Division Tecnica para
tener los datos de secciones y textos.
Ver Marcas
Al hacer click en ver marcas, usted podra ver las marcas o secciones de un texto
determinado. As podra enterarse en que lugar del texto descansan las secciones y cuantas
En Contel la unidad semntica esencial es la seccin, retazo de texto de un documento mayor anotado a propsito de
una idea transversal, concepto {a}.Esta accin permite marcar un trozo de texto de la Red. Esto se hace y desarrolla en
la misma rea de lectura del texto, se marca un texto desplegado.
El usuario podr al hacer clic en marcar ir al texto completo de la cual proviene la seccin que lea, y decir desde
donde hasta donde quiere su seccin, para eso elige mediante un clic su palabra inicial y luego su palabra final.
La seccion vendra acompaada de {n} notas, que se veran al hacer click en la palabra {n}otas secciones este texto tiene
o en algunas de las {a}dozadas, otras secciones con las que otras personas han titulado a la
misma seccin. Al hacer click se despliega una lista
1 3
Textarea : Se explica la dimension y funcion del Textarea. Lugar para la lectura en Contel, se EL Usuario podra navegar en un principio por distintos prologos adentrando en la Despues de Ingresar los datos del nuevo Autor, la ventana del formulario
Las notas se despliegan y se pueden leer, en la misma ventana, y cerrar haciendo click en la Luego de Ingresar su nuevo documento, usted podra marcarlo y seccionarlo, asi al hacer
desplegaran las Secciones, notas y textos completos. problematica y fundamentos del Proyecto. En el sector de la ficha el Usuario podra acceder a de nuevo documento se restaurara con el nuevo autor en la lsita de Luego se elige la Ultima palabra de la seccin elegida, desapareciendo
palabra indice para esconder las notas. click en anotar usted podra marcar una seccion de su texto.
los otros prologos. En la ficha de la seccion se puede acceder a la ficha del texto del cual proviene la seccion, imputs. Y el usuario podra seguir llenando el formulario todo el texto que segua a esta palabra, creandose la seccin que el
Del Texto fundamental, podemos ingrasar tanto al texto completo como a la ficha de su Usted podra activar y desctivar las marcas de un texto al hacer click en el usuario desea. Asi a continuacin de la seccin aparece un imput, para
Autor En este caso Godo. botn ver marcas as usted podra leer o no las secciones de un Texto titular la seccin con un conceptp clave {a}. Por ejemplo Amereida
fundamental determinado.
--------
------------------------------------------
------
2 4
Al elegir un punto del mapa el Usuario
navegara por el universo textual de
Contel. Al elegir un Concepto {a} podra
ver las secciones pertenecientes a esta
{a}
-
-
---
-
--------
--------- --
-
-
-------
--------
--------
[a]+ scale drag
Herramientas implementadas
[a]+: Botn de control del numero
de [a]es
S l i d e r d e e s c a l a : C o n t ro l
proporcional de la escala que va de
100% a 255% de la pelcula de [a]es
Mientras ms ecciones contenga una [a], Luego de haber titulado la seccion, si esta seccin ya contaba con otras titulaciones de otros
-I- Paleta de colores utilizada en la interfaz, pretende promover un bajo contraste, y una (zoom) Se elige la primera palabra de la seccin a marcar. Al hacer esto el texto que preceda a esta
--- --- usuarios, nuestra tituacion se pondra al final de la lista, y al hacer click en ella podrmeos crear
Luego en la zona de Edicion el autor
---
-I- Determinacin iconogrfica para el mayor ser su cuerpo tipogrfico, es decir la seccin desaparece, siendo la palaba elegida la primera del texto ahora.
---
Al final de cada lsita de notas se encuentra un pequeo editor para agragarle notas a la interfaz basada en la levedad, aligual como la tranversalidad de los textos, que se presenten a podra Ingresar el texto y darle editor de textos, en cuanto est una nota si lo deseamos.
-I- En un primer momento aparecen 3 medidas de diseo de Al hacer Click en Loggin se desplegara el campo de -I- Los elementos de listas permiten diferenciarse, seccion que se lee. travs de esa levedad. Botn de drag: Control de fomrato grafico y tipograafico operatoria a cuantificar estara dada por el
botones para las acciones que se presentaran a lo largo de la Usuario y contrasea. implementado, manteniendo el aspecto
Al Ingresar sus datos el Usuario Ingresa a Constel
marcandolo como un datos distinto entre extradatos y posicionamiento de la pelcula en cromtico clculo de todos los contenedores que
navegacin, es as como ac aparecen en primer lugar uno grs- metadatos, los primeros son aquellos que son agregados o
oscuro que estable un color grs por ser no indicativo a una en una Ventana con el Prologo. aadidos en el acccionar de la plataforma, haciendo que
360 de movilidad. existan v/s todas las secciones que existan
nueva instancia sino continuador de la misma, en segundo lugar este contenido en si cambie o mas bien crezca como los en cada uno de ellos.Verificanco la 0
un boton gris-claro que establece un nivel de importancia marcas, titulaciones, anotaciones; y los metadatos con operatoria basica que sera:
mayor el cual confirma una decisin, un aceptar o estar de aquellos por lo cuales se nombra algn documento son de (# [a]), luego:
acuerdo; y un tercer botn que presenta un tercer nivel que origen como autor, edicin, ao, etc.
As se piensa una operatoria
presenta un cambio en el transcurso un corte hacia otra dinmica, donde las unidades
direccin.
cuantificadoras pueden seguir
generndose adaptndose al rango de
escala que se tenga, cualquiera que
sea, es decir una operatoria general,
verstil a la orgnica natural que El mapa se modela a partir
debera generarse en la red de los 28 Textos
Fundamentales, leidos, 728
00. Constante de escala = (mx.fuente-min.fuente) / (mx. #) [a] marcacione[] y 100[a]es
50
titul[a]das
---
01. Cuerpo [a] = (# [a]) * Constante de escala
---
--- ---
[Taller de Titulo III]/ Diseo Grafico [Profesores] : Herbert Spencer / Manuel Sanfuentes [Alumnos Titulantes]: Julio Tapia/ Daniela Abad/ Rodrigo Vera
WIREFLOW

Al deslizar el dedo sobre la cancin aparecen dos

DISEO DE INTERACCIN / DISEO DE INTERFAZ Al deslizar el dedo sobre la cancin aparecen dos
opciones: guardar en favoritos y mixear.
opciones: guardar en favoritos y mixear.
La opcin de mixear aparecer dependiendo de que
La opcin de mixear aparecer dependiendo de que Al presionar sobre Mis Canciones se
si la cancin ha sido pensada para ser mixeada. despliegan las canciones que el usuario
si la cancin ha sido pensada para ser mixeada.
ha creado en la aplicacin mixer.

FALTAN LAS OTRAS OPCIONES

El men de tres lneas, comnmente

llamado hamburguesa permite
Una vez terminado el formulario desplegar las opciones de usuario.
de ingreso de datos se le da la
bienvenida al usuario.

Al iniciar sesin con facebook por

primera vez aparecen preguntas
para identificar el tipo de usuario.

Al preseionar sobre la cancin se despliega la Al presionar sobre el cono de

vista de detalle de la cancin donde se puede grabacin se despliega la
escuchar y ver en detalle la composicin. interfaz de grabacin de audio

Si los usuarios ya tienen

cuenta pueden ingresar con
su correo y contrasea

El botn permite dirigirse al mixer de la

aplicacin, que permite crear composiciones
con pistas dede artista de la plataforma.

Al pusar se inicia la accin de

Toda cancin cuenta con una x grabar en la aplicacin.
cantidad de accinoes que se puede
Las Instrucciones in-app permiten realizar sobre ella, estas se desplie-
al usuario poder identificar las gan al hacer click en botn (+)
Las Instrucciones in-app permiten caractersitcas mas importantes de
al usuario poder identificar las la plataforma.
caractersitcas mas importantes de Al presionar en empezar el usuario
la plataforma. puede ingresar sin completar todas
las ventanas de introduccin

FALTA FLUJO GUARDAR

Una vez en el mixer aparece una
bienvenida, al hacer click en
siguiente comienza la experiencia
del mixer.
Al presionar sobre una pista pode- Las pistas de audio tienen la facultad de Al deslizar la pista se abren las opciones
El mixer contiene una cantidad
mos ver el detalle de la misma y mostrar la letra de la cancin, al preseionar avanzadas de la misma, pudiendo modificar el
variada de pistas mara mezclar,
escucharla, y si queremos agregarla sobre ellas muestran el texto de las mismas tiempo y tono de la misma.
basta deslizar los dedos para repa-
sar toda la base de pistas. a nuestra sesin
CMO HACEMOS UN WIREFLOW

Iniciar el flujo en una pantalla principal.

Por ejemplo la portada.
Desarrollar la mayor cantidad de
interacciones correspondientes.
Se plasman desiciones.
Se anotan comentarios
correspondientes.
Se hacen todos los wireframes posibles.
Si no hay pantallas desarrolladas se deja
un espacio para completar.
ACTIVIDAD
ACTIVIDAD

Desarrollar un flujo de interaccin de su Agente

Desarrollar el Wireflow de su Agente

Dibujar la mayor cantidad de Wireframes y subir a Marvel.

FIN CLASE