Consideraciones básicas durante el diseño para la Web.

1. Diseño web.
Conceptos básicos.
Taller de Proyectos 3.
Especialidad en Diseño Digital.
Verano 2009.
Mtro. Omar Sosa Tzec
http://www.tzek-design.com/blog

2. repaso de ideas.

3. arquitectura de información.

4. Elementos de AI
Sistemas de
Navegación
Sistemas de
Búsqueda

5. Elementos de AI
Sistemas de
Navegación
Sistemas de
Etiquetado

6. Elementos de AI
Sistemas de
Navegación
Sistemas de
Etiquetado
Sistemas de
Organización

7. Elementos de AI
Sistemas de
Navegación
Sistemas de Sistemas de
Etiquetado Búsqueda
Sistemas de
Organización

8. Elementos de AI
Arquitectura
de Información
Sistemas de
Navegación
Sistemas de Sistemas de
Etiquetado Búsqueda
Sistemas de
Organización

9. La pantalla: lo básico.

10. Modelo aditivo de color RGB
verde
azul rojo

11. Variación en las resoluciones en los monitores
1152 1024 800 640
480
600
720
768

12. La resolución

13. 72 dpi.

14. ¿Siempre pixeles?

15. GIF JPEG PNG SVG Canvas
(8 ó 24)

16. XHTML & CSS: separación de
contenido y forma.

17. ¿Qué es HTML?
¿Qué es XHTML?
¿Cuál es la diferencia?

18. ¿Qué es XML?
¿A qué se referiere el término web semántica?

19. Diseño para la web.
Página web básica
XHTML CSS

23. Diseño para la web.
Página/aplicación
web interactiva
básica
scripting
XHTML CSS

24. Diseño para la web.
Página/aplicación
web interactiva
base de
scripting
datos
XHTML CSS

34. Temas relacionados.

35. Lectura y discusión de temas en el blog:
La ley de Fitt en interfaces gráficas
http://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 inicio
http://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 papel
http://tzek-design.com/blog/2007/10/25/disenar-interaccion-con-
lapiz-y-papel/
Tutorial de Arquitectura de Información en Webmonkey
http://tzek-design.com/blog/2008/07/28/tutorial-de-arquitectura-de-
informacion-en-webmonkey/

36. Práctica de conceptos.

37. 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

38. 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.

39. 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.

40. 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.

41. Gracias.