Primera Proyección Personal (AI, Wireframes y Mockups)

Primera y segunda parte de la entrega de "Proyección y Desarrollo de Aplicación".

- Tema Seleccionado: "Juguetes de Diseño"
- Objetivo: Juguetes de Diseño (en inglés “Designer Toys”, “Art Toys” o “Urban Vinyl Toys”) podemos encontrar en algunos sectores de Santiago. Tiendas exclusivas, puntos específicos, que nos entregan tímidamente estos objetos de diseño.
El siguiente trabajo pretende dar a conocer los orígenes, características y mayores exponentes de este movimiento.

Primera Parte:

La pauta consiste en escoger un tema dentro del Diseño Gráfico que sea tomado de referentes personales. Este será desarrollado como tema central de una aplicación Web.
Además deberán abordarse al menos 3 temáticas de soporte u apoyo, que sean relacionados no directamente con el tema central. Aunque para este punto recomiendo 5 para darle coherencia a la aplicación".
Enlace al tema

Elementos a Considerar:
- Lámina 1

• Se objetiva el Tema Central. Se explica en un párrafo el propósito(Objetivos).


• Se caracterizan los temas adyacentes ( se explica como se relacionan con el principal, en que aportan).

En esta lámina todos estos elementos deben estar en un gráfico de relación, tomando en cuenta distancias (con el tema central por ejemplo) , tamaños de fuente, posición y tonalidades.

- Lámina 2
Se diagrama un Blueprint o Mapa de AI con la estructura de la aplicación web a manera de sugerencia. Esta deben incluir las principales secciones y elementos del sitio y como serán abordados. Este debe tener al menos 20 páginas web representadas. Plantear también páginas en donde la información se reordenará o juntará nuevamente con algún tipo de criterio especial, por ejemplo por tipo de archivos a mostrar(fotos) o documento o pdfs, etc.
Diferenciar cuando los links se produzcan a otro sitio.

- Lámina 3
Representa un Zoom a alguna zona de importancia del sitio en donde se describe no solo las páginas sino la operatividad del usuario: si se producen descargas, operatividad con video o imagen, etc.

Se sugiere para estructurar el trabajo, sacar ideas de operatividad, del trabajo de análisis web (clave) ya que se dieron el tiempo de mirar muchos sitios web, por ende estos debiesen haberles quedado ideas rondando.
El vocabulario visual lo sacan del Sitio de Jesse James Garret.

Segunda Parte:

Presentar los WireFrames que son los esquemas visuales de un sitio web. Esto quiere decir que se organizan y disponen los espacios, estilos de texto, pero sin llegar al detalle del color y contenidos. Usualmente solo se usan los títulos reales de páginas, secciones y menús.
También se traerán los MockUps que son los modelos visuales escalables. es decir, los modelos visuales que ya contienen la información de diseño como colores, estilos de texto, y detalles a un nivel esquemático."
Enlace al tema

Elementos a considerar:
- WireFrames

• Un Wireframe por cada estructura de página tipo. Esto quiere decir por cada instancia que sea replicable. (al menos 3)


• Ancho y altura definidas por cada elemento.


• Títulos y menúes deben ser cercanos a los definitivos.


• Sugerencia: Escala de Grises.

- Mockups

• Modelo para el Homepage a tamaño en pixeles.


• Modelo para un Interior a tamaño en pixeles.


• Sugerencia: Color a escala 100%.

Entrega: