Wireframe Diseño de Intefaces II

1. DISEÑO DE INTERFACES
MULTIMEDIA II
UNIDAD 01
SEMANA 01

2. Logro de la Unidad
Al finalizar la unidad, el alumno elabora Interfaces
Gráficas de Usuario (GUI), utilizando el IDE de
Eclipse y siguiendo las etapas de desarrollo de un
programa en Java.

3. Definición de la página web
 Un documento capaz de contener
texto, sonido, vídeo, programas,
enlaces, imágenes, y muchas otras
cosas, adaptada para la World Wide
Web, y que puede ser accedida
mediante un navegador.
 Esta información se encuentra
generalmente en formato HTML y
puede proporcionar navegación
(acceso) a otras páginas web
mediante enlaces de hipertexto.
 Las páginas web incluyen otros
recursos como hojas de estilo en
cascada CSS, guiones (scripts),
imágenes digitales, entre otros.
http://es.wikipedia.org/wiki

4. Estructura del diseño web
 La gran mayoría de las páginas web tienen divisiones o secciones
similares.
 Lo usual es que, en la parte superior de la página se encuentre un
encabezado, seguido de un cuerpo principal y al final de la
página por un pie de página.
PieCuerpoEncabezado

5. ENCABEZADO
CUERPO
PIE
ENCABEZADO
CUERPO
PIE

6. ENCABEZADO
CUERPO
PIE
ENCABEZADO
CUERPO
PIE

7. Elementos del Encabezado
LOGO BARRA DE NAVEGACIÓN
BANNER
CUADRO DE
BÚSQUEDA

8. Elementos del Encabezado
LOGO
BARRA DE NAVEGACIÓN
BANNER
Redes Sociales

9. Elementos del Cuerpo
ENLACES
LISTAS
SUBTITULOS
PÁRRAFOS
IMÁGENES

10. Elementos del Cuerpo SUBTITULOS
SUBTITULOS
PARRAFOS
SUBTITULOS
PARRAFOS
IMÁGENES
IMÁGENES
IMÁGENES
PARRAFOS

11. Elementos del Pie
El pie de página acostumbra a tener una gran importancia en las
estructuras de los webs actuales, donde se pueden repetir los menús de
navegación (para que el usuario no deba subir por la página), situar los
enlaces al aviso legal, copyright, redes sociales: facebook, RSS, twitter o
los datos de dirección y contacto.

12. Elementos del Pie

13. CREACIÓN DE WIREFRAMES
Fundamentos de un proyecto web

14. ¿Qué es un wireframe?
 Es una guía visual que representa el
esqueleto o estructura visual de un
sitio web.
 El wireframe esquematiza el diseño
de página u ordenamiento del
contenido del sitio web, incluyendo
elementos de la interfaz y sistemas
de navegación, y cómo funcionan en
conjunto.
 Los esquemas pueden ser dibujados
con lápiz y papel o esquemas en una
pizarra, o pueden ser producidos con
medios de diseño de aplicaciones de
software libre o comerciales.
http://es.wikipedia.org/wiki