šŸ’¾ Apuntes de ISI

DiseƱo de Interfaces Web

Dentro del DiseƱo de Entradas y Salidas, las interfaces web estƔn orientadas al internet y a la world wide web.

Las pƔginas web son documentos con texto, programas, audio, etc. Un conjunto de pƔginas forman un sistema o sitio web. Hay pƔginas:

  • EstĆ”ticas: la informaciĆ³n no cambia en el tiempo.
  • DinĆ”micas: la informaciĆ³n se construye en el servidor web al solicitarla.

El diseƱo de GUI web es un proceso que nos permite construir experiencias de usuario web. Un diseƱador web adapta los diseƱos grƔficos estƔticos al dinamismo y versatilidad de la web.

Web tiene varias diferencias con un escritorio de PC:

  • Variedad de dispositivos: conviene diseƱar para los mĆ”s populares.
  • Control de navegaciĆ³n.
  • Tiempo de respuesta: se utilizan iconos o barras que dicen ā€œCargandoā€¦ā€.
  • Capacidad (hardware): acceso a recursos limitados.
  • Seguridad y confiabilidad.

Proceso de diseƱo:

  1. Establecer objetivos de la pƔgina.
  2. Identificar requerimientos.
  3. Alcanzar las expectativas de usuarios.
  4. Establecer objetivos de Usabilidad.
  5. Optimizar la bĆŗsqueda (SEO).

Accesibilidad: que los sitios web sean usables por la mayor cantidad de personas con necesidades especĆ­ficas, que utilizan lectores de pantalla, navegaciĆ³n por teclado, o contenido alternativo. Se recomiendan las guĆ­as WCAG.

PƔgina de inicio:

  • Debe ser accesible desde cualquier lugar (ej: haciendo click en el logo).
  • Muestra opciones mĆ”s relevantes.
  • Comunicar propĆ³sito con expresiĆ³n positiva (siendo breve).

DistribuciĆ³n del contenido:

  • DiseƱo responsivo.
  • Espacios blancos.
  • Alinear los elementos.

NavegaciĆ³n:

  • NavegaciĆ³n agrupada a la izquierda.
  • Siempre permitir al usuario ubicarse.
  • Paginado vs scrolling.

Links:

  • Mostrarlos claramente (subrayado azul).
  • Usar etiquetas descriptivas.
  • Diferencias entre links internos y links externos.

Vista GrƔfica