Post on 14-Jul-2015
Diseño web.Conceptos básicos.
Taller de Proyectos 3.Especialidad en Diseño Digital.Verano 2009.
Mtro. Omar Sosa Tzechttp://www.tzek-design.com/blog
repaso de ideas.
arquitectura de información.
Elementos de AI
Sistemas deNavegación
Sistemas deBúsqueda
Elementos de AI
Sistemas deNavegación
Sistemas deEtiquetado
Elementos de AI
Sistemas deNavegación
Sistemas deEtiquetado
Sistemas deOrganización
Elementos de AI
Sistemas deNavegación
Sistemas deEtiquetado
Sistemas deOrganización
Sistemas deBúsqueda
Elementos de AI
Sistemas deNavegación
Sistemas deEtiquetado
Sistemas deOrganización
Sistemas deBúsqueda
Arquitecturade Información
La pantalla: lo básico.
Modelo aditivo de color RGB
verde
azul rojo
Variación en las resoluciones en los monitores
64080010241152
600
480
720768
La resolución
72 dpi.
¿Siempre pixeles?
GIF JPEG PNG(8 ó 24)
SVG Canvas
XHTML & CSS: separación de contenido y forma.
¿Qué es HTML?
¿Qué es XHTML?
¿Cuál es la diferencia?
¿Qué es XML?
¿A qué se referiere el término web semántica?
XHTML CSS
Diseño para la web.
Página web básica
XHTML CSS
Diseño para la web.
Página/aplicación web interactiva básica
scripting
XHTML CSS
Diseño para la web.
Página/aplicación web interactiva
scripting base dedatos
Temas relacionados.
Lectura y discusión de temas en el blog:
La ley de Fitt en interfaces gráficashttp://tzek-design.com/blog/2008/03/12/la-ley-de-fitt-en-interfaces-graficas/
El “síndrome Tv y Novelas” en una página de iniciohttp://tzek-design.com/blog/2008/08/08/el-sindrome-tv-y-novelas-en-una-pagina-de-inicio/
Diseñar interacción con lápiz y papelhttp://tzek-design.com/blog/2007/10/25/disenar-interaccion-con-lapiz-y-papel/
Tutorial de Arquitectura de Información en Webmonkeyhttp://tzek-design.com/blog/2008/07/28/tutorial-de-arquitectura-de-informacion-en-webmonkey/
Práctica de conceptos.
Ejercicio: Da estructura a la información antes que decorarla.
Existe un tema base: dinosaurios. La información básica será tomada de wikipedia.
http://es.wikipedia.org/wiki/Dinosauria
1. Define la meta del sitio. Pueden ser diversas metas pero de preferencia sólo una. Es decir, ¿qué se desea alcanzar con este sitio?
2. Piensa en el nivel de tus usuarios. De principiante, avanzado y experto, considera si vas a cubrir los tres o sólo por esta ocasión restringirás la “utilidad” de tu sitio de acuerdo con tu meta definida.
3. Establece primero la estructura de navegación. Fíjate de armar las “páginas” adecuadas. Igual de importante, no olvides de “seleccionar” los nombres adecuados para cada una.
4. Para cada “página” determina cuáles serán los chunks de información.
5. Después define en qué orden van a ir las cosas. De ahí tomarás una decisión: Resumir o dejar en texto o bien, qué se puede transformar en algo gráfico: infografía, esquema, fotografía, ilustración, etc.
6. Establece jerarquías a través del puntaje aplicado en títulos, subtítulos y textos en general.
7. Deberás armar “pantallas” del sitio web resultante sin ninguna decoración aparente (o “diseño” como le dicen). Deberá identificarse el título del sitio (equivalente a un H1), el menú de navegación (asumiendo que está horizontal) y demás contenido de cada una de las páginas.
El “ancho” de tu “información” deberá estar pensado para una resolución mínima de 800x600; por lo tanto, tus “pantallas” serán de 600px de alto.
Gracias.