lunes 10 de noviembre de 2008
lunes 22 de septiembre de 2008
WireFrames y MocKups
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.
Los elementos a considerar son:
Importante: Se trae corregida la pauta de Mapar de AI.
WireFrames
- Un Wireframe por cada estructura de página tipo. Esto quiere decir por cada instancia que sea replicable. (al menos 3)
- estas deben tener ancho y altura definidas por cada elemento.
-Los títulos y menúes deben ser cercanos a los definitivos.
MocKups
-Un modelo para el Homepage a tamaño en pixeles.
-Un modelo para un Interior a tamaño en pixeles.
http://issuu.com/marielasantelices/docs/wireframesymockups
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.
Los elementos a considerar son:
Importante: Se trae corregida la pauta de Mapar de AI.
WireFrames
- Un Wireframe por cada estructura de página tipo. Esto quiere decir por cada instancia que sea replicable. (al menos 3)
- estas deben tener ancho y altura definidas por cada elemento.
-Los títulos y menúes deben ser cercanos a los definitivos.
MocKups
-Un modelo para el Homepage a tamaño en pixeles.
-Un modelo para un Interior a tamaño en pixeles.
http://issuu.com/marielasantelices/docs/wireframesymockups
Proyecto Personal
Esta es la primera parte de la entrega de Proyección y desarrollo de aplicación.
Como hablamos en clases 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.
Lámina 1 (tabloide Impreso)
1 Se objetiva el tema Central. Se explica en un párrafo el propósito(Objetivos).
2 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 espciela, 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 (y siguientes si coprresponde)
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.
http://issuu.com/marielasantelices/docs/proyectopersonal
Como hablamos en clases 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.
Lámina 1 (tabloide Impreso)
1 Se objetiva el tema Central. Se explica en un párrafo el propósito(Objetivos).
2 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 espciela, 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 (y siguientes si coprresponde)
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.
http://issuu.com/marielasantelices/docs/proyectopersonal
domingo 21 de septiembre de 2008
Analisis de pág Web
Escoger y analizar 10 Sitios Web con los siguientes puntos:
1. Contenidos
* Coherencia en rótulos. Se refiere a los nombres de los títulos, enlaces.
* Lógica de navegación.(Como esta estructurada).
* Consistencia del contenido. Este presenta una estructura completa o hay quiebres o aspectos no abordados.
2. Diseño
* ¿La estructura visual(composición, espacio, color, contraste, matices, imagen) ayuda a una navegación fluída?. Testear el contraste para la lectura.
* Medir la unidad visual entre homepage e interiores. Crear gráficos para este punto.
Criterio de elección: Sitios de más frecuente Navegación personal. Segundo criterio son sitios asociados a diseño de importancia vital, sitios que manejan personas, muchos usuarios, que estén en el sector público o que sirvan a las necesidades del la población.
En el blog se hace un post en donde, sin formato de entrega, se analiza mas en profundidad los 10 sitios. Atención que el blog tiene un mecanismo para cortar la entrada que se traduce en un “leer más” con lo que no llenan a lo largo de texto el blog.
1. Contenidos
* Coherencia en rótulos. Se refiere a los nombres de los títulos, enlaces.
* Lógica de navegación.(Como esta estructurada).
* Consistencia del contenido. Este presenta una estructura completa o hay quiebres o aspectos no abordados.
2. Diseño
* ¿La estructura visual(composición, espacio, color, contraste, matices, imagen) ayuda a una navegación fluída?. Testear el contraste para la lectura.
* Medir la unidad visual entre homepage e interiores. Crear gráficos para este punto.
Criterio de elección: Sitios de más frecuente Navegación personal. Segundo criterio son sitios asociados a diseño de importancia vital, sitios que manejan personas, muchos usuarios, que estén en el sector público o que sirvan a las necesidades del la población.
En el blog se hace un post en donde, sin formato de entrega, se analiza mas en profundidad los 10 sitios. Atención que el blog tiene un mecanismo para cortar la entrada que se traduce en un “leer más” con lo que no llenan a lo largo de texto el blog.
Tipos Latinos
Tomando el tema de la "Bienal 2008" como eje central, crear un sistema de difusión de la Bienal que contenga datos relacionados de al menos 5 fuentes que se desprendan directamente de sus temáticas y que sean un complemento al eje central de información.
Cuando tengan esta información, que será trabajada independientemente(documentos de texto e imágenes distintos, bosquejar sus accesos en una pagina de inicio(homepage) en donde este ubicado el tema central más las 5 fuentes de información relacionada en una estructura colaborativa de conocimiento
http://issuu.com/marielasantelices/docs/tiposlatinos
Cuando tengan esta información, que será trabajada independientemente(documentos de texto e imágenes distintos, bosquejar sus accesos en una pagina de inicio(homepage) en donde este ubicado el tema central más las 5 fuentes de información relacionada en una estructura colaborativa de conocimiento
http://issuu.com/marielasantelices/docs/tiposlatinos
Suscribirse a:
Entradas (Atom)
