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.