Conceptos relacionados con la interfaz gráfica Taller de diseño página Web.

Presentación del tema: "Conceptos relacionados con la interfaz gráfica Taller de diseño página Web."— Transcripción de la presentación:

1 Conceptos relacionados con la interfaz gráfica Taller de diseño página Web

2 La interfaz gráfica O conocida también como GUI, es un programa informático que actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz.

3 Los protocolos de Internet O Este conjunto de protocolos de red se conoce como TCP/ IP. Cada uno de ellos cumple funciones muy específicas, por ejemplo, O HTTP para navegar, O FTP para transferir archivos o O SMTP para el correo cliente/ servidor.

4 Diseño de UX O UX significa User Experience: como dice el nombre, es la experiencia que tiene cualquier usuario al interactuar con cualquier entorno, plataforma digital o dispositivo. En este caso hablaremos de páginas web o apps.

5 Diseño UI O UI significa User Interface: es el diseño de la interfaz gráfica, a menudo sobre la interfaz web o una app. Aunque si me apuras, podría también ser el diseño gráfico del entorno visual de cualquier software.

6 Tipos de interfaz O GUI o ZUI, además de las interfaces de pantallas táctiles o las naturales, NUI.

7 Características de la interfaz grafica O Facilidad de comprensión, aprendizaje y uso. O Representación fija y permanente de un determinado contexto de acción (fondo). O El objeto de interés ha de ser de fácil identificación.

8 Función O Permite que la comunicación entre ambas partes sea más sencilla. O La accesibilidad. O Permitir que el aprovechamiento de la tecnología sea algo al alcance de cualquiera entre el usuario y el equipo.

9 LA INTERFAZ ESTA COMPUESTA POR

10 Un control o componente O Es todo objeto visual del interfaz. Una interfaz gráfica se compone de varios de estos componentes.

11 O Una API (Application Programming Interface) es un conjunto de reglas (código) y especificaciones que las aplicaciones pueden seguir para comunicarse entre ellas

12 Elementos de identificación O Identifican un sitio web. El usuario al verlos sabe a qué sitio a accedido. Ejemplos de estos elementos son: logos, título de la página, nombre de dominio, banderas, etc.

13 Elementos de navegación O Estos elementos permiten a los usuarios del sitio navegar por todas las páginas web de dicho sitio. O Por lo que estos elementos deben estar presentes en todas las páginas web que conforman el sitio y deben ser muy intuitivos. O Habitualmente los elementos de navegación de un sitio se sitúan en la barra de navegación superior y/o en una barra de navegación lateral, y lo conocemos como menú de la web.

14 Elementos de contenidos O Son las zonas donde se muestra el contenido o información relevante de cada página web de nuestro sitio. Se subdivide en título y contenido propiamente dicho.

15 Elementos de interacción O Son las partes de la web en la que se ofrece interactuar al usuario. Por ejemplo: una caja de búsqueda, un selector de idiomas, un formulario de contacto, etc.

16 Proceso de diseño de sitios web O Definición: abarca aspectos como la definición de la finalidad del web, objetivos, expectativas y necesidades de los usuarios, estudio del sector y definición de audiencias, identificación y recopilación del contenido, definición de los servicios y funcionalidades.

17 O Estructuración: engloba todos los aspectos referidos al rotulado y organización de categorías; organización del sitio mediante un mapa, esquemas de organización y estructura de directorios

18 O Producción: abarca las cuestiones referidas al prototipado como el diseño de prototipos y patrones, al estilo y diseño de la imagen gráfica, a los aspectos relacionados con la usabilidad y accesibilidad.

19 Etapas para el diseño Web O Delimitación del tema: de qué va a tratar el sitio web. Delimitación de contenidos. O Recolección de la información: recopilar y seleccionar la información que se va a incluir. O Agregación: hacer un balance equilibrado entre linealidad y jerarquización. Creación de páginas, nodos, secciones y subsecciones.

20 O Estructuración de los contenidos: unión de los diferentes nodos y páginas teniendo en cuenta la jerarquización y ordenación de los contenidos O Creación de los sistemas de navegación y búsqueda

21 O Diseño y estilo gráfico: estilos y formatos textuales, coherencia gráfica, diseño de fondos y distribución de los elementos dentro de la página, inclusión de material multimedia, cantidad y tamaño de las imágenes, etc.

22 O Ensamblaje final: últimos enlaces, diseño de portadas y estilos gráficos, logotipos, enlaces sobre autoría, contacto, fechas de creación o de actualizaciones, etc. O Evaluación y test de uso: comprobación del funcionamiento, vínculos y páginas rotas, usabilidad, accesibilidad, últimos ajustes, etc.

23 En el diseño de una sitio web, podemos distinguir 2 aspectos diferenciados: O Diseño de la interfaz: para guiar al usuario por medio de un sistema visual e informativo adecuado. O Diseño de las páginas: disposición de los elementos dentro de las páginas para ser vistos en pantalla, esquemas de contenido, tipografía, rotulado, títulos.

24