Download - Principios básicos de diseño web
![Page 1: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/1.jpg)
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
![Page 2: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/2.jpg)
repaso de ideas.
![Page 3: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/3.jpg)
arquitectura de información.
![Page 4: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/4.jpg)
Elementos de AI
Sistemas deNavegación
Sistemas deBúsqueda
![Page 5: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/5.jpg)
Elementos de AI
Sistemas deNavegación
Sistemas deEtiquetado
![Page 6: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/6.jpg)
Elementos de AI
Sistemas deNavegación
Sistemas deEtiquetado
Sistemas deOrganización
![Page 7: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/7.jpg)
Elementos de AI
Sistemas deNavegación
Sistemas deEtiquetado
Sistemas deOrganización
Sistemas deBúsqueda
![Page 8: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/8.jpg)
Elementos de AI
Sistemas deNavegación
Sistemas deEtiquetado
Sistemas deOrganización
Sistemas deBúsqueda
Arquitecturade Información
![Page 9: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/9.jpg)
La pantalla: lo básico.
![Page 10: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/10.jpg)
Modelo aditivo de color RGB
verde
azul rojo
![Page 11: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/11.jpg)
Variación en las resoluciones en los monitores
64080010241152
600
480
720768
![Page 12: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/12.jpg)
La resolución
![Page 13: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/13.jpg)
72 dpi.
![Page 14: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/14.jpg)
¿Siempre pixeles?
![Page 15: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/15.jpg)
GIF JPEG PNG(8 ó 24)
SVG Canvas
![Page 16: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/16.jpg)
XHTML & CSS: separación de contenido y forma.
![Page 17: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/17.jpg)
¿Qué es HTML?
¿Qué es XHTML?
¿Cuál es la diferencia?
![Page 18: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/18.jpg)
¿Qué es XML?
¿A qué se referiere el término web semántica?
![Page 19: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/19.jpg)
XHTML CSS
Diseño para la web.
Página web básica
![Page 20: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/20.jpg)
![Page 21: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/21.jpg)
![Page 22: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/22.jpg)
![Page 23: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/23.jpg)
XHTML CSS
Diseño para la web.
Página/aplicación web interactiva básica
scripting
![Page 24: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/24.jpg)
XHTML CSS
Diseño para la web.
Página/aplicación web interactiva
scripting base dedatos
![Page 25: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/25.jpg)
![Page 26: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/26.jpg)
![Page 27: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/27.jpg)
![Page 28: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/28.jpg)
![Page 29: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/29.jpg)
![Page 30: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/30.jpg)
![Page 31: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/31.jpg)
![Page 32: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/32.jpg)
![Page 33: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/33.jpg)
![Page 34: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/34.jpg)
Temas relacionados.
![Page 35: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/35.jpg)
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/
![Page 36: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/36.jpg)
Práctica de conceptos.
![Page 37: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/37.jpg)
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
![Page 38: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/38.jpg)
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.
![Page 39: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/39.jpg)
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.
![Page 40: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/40.jpg)
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.
![Page 41: Principios básicos de diseño web](https://reader034.vdocuments.co/reader034/viewer/2022051016/55a4f3131a28ab24188b45f4/html5/thumbnails/41.jpg)
Gracias.