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.

Lineales Maya Jerarquía Red o telaraña pura ESTRUCTURAS

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 Densidad Equilibrio Regularidad Simetria Economia Secuencia Homogenidad Cohesión Ritmo Unidad Orden y complejidad Proporcion Simplicidad

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.