DISEÑO DE LA INTERFAZ

¿Que es?◦ son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e

interactuar con .

◦ Para lograr que un usuario se quede y vuelva, el diseño de la interfaz es importante

¿Qué es la interfaz?◦ El concepto de interfaz es muy amplio y se refiere a todo sistema que permite el

contacto y la funcionalidad entre dos sistemas diferentes.

◦ la interfaz web, que es un sistema gráfico que permite a los usuarios acceder a los contenidos, realizar tareas, comprender las funcionalidades y navegar por las diferentes páginas del sitio.

Simplicidad y coherencia ◦ La facilidad y comodidad con que los usuarios acceden a los servicios que brinda

una web está fundado en dos principios fundamentales para el desarrollo de una interfaz efectiva: la simplicidad y la coherencia.

◦ La simplicidad con que se desarrolle esta interfaz es crucial para determinar que un usuario se sienta satisfecho y desee regresar a un sitio.

◦ La coherencia con que se desarrolle debe comprender el proceso lógico y dar congruencia a la información, imágenes, gráficos etc.

Calidad del diseño y estabilidad funcional◦ La primera impresión que un usuario recibe de un sitio web es extremadamente

importante, por lo que el diseño debe ser cuidado en extremo, de forma tal que logremos convencerlo de que se trata de un sitio ordenado, cuidado y profesional.

◦ Lo mismo sucede con el funcionamiento del sitio. Nada más desagradable que encontrarse con un sitio donde abundan los mensajes de error, tiene enlaces rotos, formularios que no funcionan, etc. La funcionalidad del sitio debe permanecer siempre en o cercana al cien por ciento.

Diseño arquitectónico◦ La arquitectura del contenido se

centra en la manera en la que objetos de contenido se estructuran para la presentación y navegación.

El diseño arquitectónico se lleva a cabo en paralelo con el de la interfaz, el estético y el del contenido.

Se centras en las actividades como:◦Interacción con el usuario◦Manejo de tareas de procesamiento interno◦Navegacion eficiente ◦Presentación del contenido.

ES

TR

UC

TU

RA

S◦Lineales◦Maya◦Jerarquía◦Red o telaraña pura

LINEALES

Se encuentran cuando es común en una secuencia predecible de interacciones (con cierta variación o diferencia)

EJEMPLOS:

MAYA

Se aplica cuando es posible organizar el contenido de una webapp en forma categórica en dos o más dimensiones

JERARQUÍA

Se diseña en forma tal que permite que el flujo del control sea en el sentido horizontal a través de las ramas verticales de la estructura.

EJEMPLO:

RED La pagina web se diseña de modo que la información pasa virtualmente el control (por medio de vínculos de hipertexto) a cada componente del sistema. Este enfoque permite una flexibilidad considerable de navegación

EJEMPLO:

ARQUITECTURA DE UNA WEBAPP

Describe una infraestructura que permite que un sistema o aplicación basados en web alcance sus objetivos empresariales.

Se sugiere una arquitectura del diseño en tres capas que desacopla la interfaz de la navegación y del comportamiento de la aplicación.

Para asi mantener separadas la interfaz, la aplicación y la navegación; por ende se simplifica la implementación y mejora la reutilización.

Diseño de la estética ◦ Es lo referido a la organización y forma de visualización de una interfaz web

Tipos de estéticas ◦ Estática: aquella que solo pose lo mas básico en información e imágenes sin la

interacción de otros elementos

◦Dinámica: aquella que deja interactuar con los elementos dentro de la pagina web mediante enlaces.

Parámetros estéticos Para que la interfaz del sitio sea agradable tiene que tener ciertos parámetros los

cuales son:

◦ Armonia

◦ Equilibrio

◦ Simetria

◦ Secuencia

◦ Cohesión

◦Unidad

◦ Proporcion

◦ Simplicidad

◦Densidad

◦ Regularidad

◦ Economia

◦Homogenidad

◦ Ritmo

◦Orden y complejidad

Diseño del contenido◦ Es la estructuración de la pagina en cuestión a la información (contenido que

llevara y abarcara) dentro de ella y sus enlaces.

3 generaciones en el desarrollo de las interfaces de la WWW◦ Webs de primera generación:

◦ estructura lineal◦ eventual inserción de fotografías y líneas de separación◦ baja definición

◦  Webs de segunda generación:◦ iconos en vez de palabras subrayadas con azul◦ menú de opciones◦ fondos coloreados o con imágenes◦ bordes azules alrededor de las figuras interactivas

◦  Webs de tercera generación:◦ hegemonía del diseño sobre la tecnología◦ utilización de metáforas◦ uso de un layout tipográfico y visual para la descripción de una página bidimensional◦ estructura entrada -área central- salida

Etapas para el diseño◦Delimitación del tema

◦ Recolección de la información

◦ Agregación

◦ Estructuración de los contenidos

◦ Creación de los sistemas de navegación y búsqueda

◦Diseño y estilo grafico

◦ Ensamblaje final

◦ Evaluación

Diseño de Navegación◦ Forma especializada de diseño de interfaces dirigida a presentar espacios de

información.

Puntos importantes.◦ La página de inicio.

Puerta principal de acceso a la página web.

◦Menú de navegación.

Herramienta de navegación que le podemos facilitar al visitante para que encuentre lo que busca. Los menús de navegación son básicamente listas de enlaces a las diferentes páginas o secciones de la web.

◦ Pie de página.

Poner enlaces importantes o que consideras que deben aparecer en todas las páginas de la web, por ejemplo información legal sobre tu empresa, direcciones de contacto, políticas de uso del sitio, etc.

◦ Ruta de acceso o ¿Dónde estoy?.

El camino que se sigue desde la página principal, pasando por las secciones (principales) hasta la página concreta en la que se encuentra el usuario. 

◦ Incluir un buscador.

Los buscadores mejoran la experiencia del usuario en el sitio web y le ayudan a ahorrar tiempo en su búsqueda de información.

Consejos para la navegación del sitio.◦ Enlaces volver:  Incluya poco enlaces “volver”. Describa al usuario hacia donde va a

“volver” por ejemplo “volver a inicio”.

◦Menú siempre visible: El usuario pueda acceder a el desde cualquier parte del sitio en el que se encuentre.

◦Describir situación actual en el sitio: Describa al usuario en que sección de nuestro sitio se encuentra (www.midominio.com/contacto).

◦ Rapidez: Evite crear sitios muy pesados, que impidan la rapidez de descarga.

Ejemplos:◦Dreamweaver

◦ Es una aplicación en programa de estudio que está destinada a la construcción, diseño y edición de sitios, vídeos y aplicaciones Web basados en estándares

◦ Es uno de los mas utilizados por que es muy practico y se apoya de  World Wide Web Consortium

kompozer◦ es un programa para editar códigos HTML, sin necesidad de tener mucho

conocimiento de este. 

◦ La interfaz de Kompozer es gráfica, de forma que las modificaciones se realizan como si se tratara de un diseño, evitando el escribir código.

◦No ocupa mucha memoria

NVU◦ La funcionalidad de NVU permite insertar imágenes, crear tablas o

modificar estilos CSS de manera sencilla.

◦ Es muy rápido como editor por su sencillez

WebFácil◦ Para diseñar una página web basta con combinar las funciones del programa, como

elegir colores de fondo, letras, imágenes.

◦ Esta completamente en español

Adobe edge◦ El programa para crear animaciones web con HTML5

◦Utiliza una interfaz visual basada en una línea de tiempo, de forma que no hay que saber mucho de programación.