Please enable JavaScript.
Coggle requires JavaScript to display documents.
Diseño de Interacción, mocky_combined, 01-youtube-wireframe-example, color…
Diseño de Interacción
-
Patrones
de Arquitectura
-
-
-
Existen diferentes tipos de patrones, entre los que son, patrones de escritorio:
Wireframes
Es la representación gráfica de la arquitectura de la información de un producto digital, esta carece de colores e imágenes ya que su objetivo es mostrar la estructura y distribución de los elementos, no su apariencia.
Partituras de
Interacción
Representa a través de iconos las acciones que desea realizar el usuario final y que responden a sus objetivos, intenciones y emotividad, esta se puede realizar de la siguiente manera.
- En la fila de usuario redactar lo que este desea hacer.
- Crear una tabla de 5x3, en cada fila llevara los siguientes campos: Usuario, dialogo y sistema
- En la de dialogo anotar el mensaje que la interfaz desplegara.
- En la tercer columna, sobre dialogo escribir los pasos que seguirá el usuario.
- En la fila de sistema en la columna 3, las acciones que el sistema llevara a acabo.
- En la columna 3 los mensajes que la interfaz desplegara después de acceder.
- Por ultimo en la de usuario las actitudes que el usuario podría tener.
- Por ultimo en la ultima columna se registran los datos del usr
-
Retícula de
construcción
Con junto de columnas que funcionan como guía para organizar los espacios de las interfaces, se compone de diferentes elementos que son.
-
-
-
Uso de color
Es un elemento indispensable para el diseño de la experiencia ya que es capaz de afectar la percepción dell cliente hacia el producto, es por ello que deben utilizarse colores que sean aptos para el usuario y no sean incomodos.
-
Creación de
Mock ups
Es la representación grafica de la interfaz de un producto digita, incluye colores, tipografía e imágenes que se utilizaran en el sitio o aplicación web por lo que es considerado un prototipo de alto nivel, se basa en los wireframes hechos con anterioridad, para crear un Mock uo se deben seguir los siguientes pasos.
- Abrir nuestra herramienta de creación y crear un nuevo proyecto.
- Arrastrar el icono "Borwser window" hacia el lienzo, este funcionara como contenedor principal.
- Se ingresa un label en el que se escribirá el texto de la pagina web.
- Posterior a ello se inserta un menú de navegación web donde se ingresarán las opciones.
- Después se colocan las imágenes y se seleccionan las deseadas y se les da el tamaño requerido.
- Se colocaran los subtítulos para ofrecer los productos, servicios o indicar alguna acción.
- Por ultimo solo queda visualizar el mock up en el menú view de nuestra herramienta de creación.
Guía de Estilo
Es un documento que contiene directrices del diseño visual del proyecto para que diseñadores y programadores conozcan los elementos gráficos que se usan para maquetar, estás guía estandarizan todo, permiten que el proyecto siga una línea similar a otros.
-
-
-
-
-
-
-
-
-
