Clase2 etapa2
-
Upload
capacitacion-web -
Category
Design
-
view
110 -
download
2
Transcript of Clase2 etapa2
![Page 1: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/1.jpg)
Instituto Superior de Electrónica Gamma
Etapa 2:Desarrollo de la estructura
![Page 2: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/2.jpg)
Etapa 2: Desarrollo de la estructura
• La estructuración de cualquier sitio implica ver el proyecto desde 3 puntos de vista.
– 2.1 Relativo al contenido– 2.2 Relativo al sitio– 2.3 Relativo a la página
![Page 3: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/3.jpg)
Etapa 2: Desarrollo de la estructura
• Cuando el diseño de la información no está bien pensada, la experiencia del usuario puede resultar confusa.
• Mientras la arquitectura de la información esté bien estructurada, el diseño visual dirigirá la experiencia del usuario.
![Page 4: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/4.jpg)
2.1 Relativo al contenido
• El contenido de un sitio es fundamental.• Sin un buen contenido, su tecnología y sus
gráficos son contenedores vacíos.
• No solo hay que tener un buen contenido, es necesario saber organizarlo.
![Page 5: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/5.jpg)
2.1 Tips de lectura en pantalla
• No leemos linealmente
• No tenemos el todo• Somos flojos
![Page 6: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/6.jpg)
2.1 Como adaptar un texto para web
• Recorta el texto en 50%
• Practica la pirámide invertida
• Las palabras claves al inicio del párrafo
• Formatea el texto
• Agrega acción al texto
![Page 7: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/7.jpg)
2.1 Preguntas para escribir noticias
• ¿Que?• ¿Cuando?• ¿Como?• ¿Donde?• ¿Quienes?
![Page 8: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/8.jpg)
2.2 Relativo al sitio: Mapa de sitio
• Un mapa de sitio es la columna vertebral del proyecto.
• Es una representación visual de la estructura, organización, el flujo y el agrupamiento del contenido y la información del sitio.
• Es una representación de la totalidad del proyecto.
![Page 9: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/9.jpg)
2.2 Estructuras de mapas de sitio: Lineal
![Page 10: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/10.jpg)
2.2 Estructuras de mapas de sitio: Jerárquica
![Page 11: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/11.jpg)
2.2 Estructuras de mapas de sitio: Radial
![Page 12: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/12.jpg)
2.2 Estructuras de mapas de sitio: Red
![Page 13: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/13.jpg)
3.1 Relativo a la página: Wireframes
• Son bocetos no orientados al diseño.• Muestran jerarquía de información.• Son la base del diseño visual y de la
producción HTML.• Deben incluir una representación de todos
los elementos principales de la página.
![Page 14: Clase2 etapa2](https://reader035.fdocuments.net/reader035/viewer/2022081816/559704ba1a28ab624f8b4821/html5/thumbnails/14.jpg)
3.1 Relativo a la página: Wireframes