Componentes de una interfaz web

4. Componentes de una interfaz web

En prácticamente todas las páginas web hay elementos que son comunes. Algunos ejemplos son: la cabecera, el menú de navegación, el cuerpo o el pie de página. Conocer el nombre de cada una de las partes de un sitio web es esencial ya que forma parte del vocabulario utilizado por los desarrolladores y diseñadores. La siguiente figura muestra la estructura general de un sitio web.

4.1. Cabecera o header

La cabecera o header es la zona de la interfaz web situada en la parte superior y que sirve para identificar la empresa o marca. Normalmente se utiliza para mostrar el logotipo de la empresa o su nombre. Además, este espacio da cabida a textos descriptivos, imágenes, paneles de acceso o banners publicitarios, entre otras cosas. Aunque la cabecera no es obligatoria, es utilizada en prácticamente todos los desarrollos de sitios web.

Debido a nuestra lectura visual, de arriba a abajo y de izquierda a derecha, el primer elemento que vemos en toda interfaz web es la parte superior izquierda de la página. Por este motivo, no es de extrañar que se aproveche este espacio para posicionar el logotipo y el nombre de la marca. Aunque también es posible encontrar el logotipo en la parte central de la cabecera o en otras ubicaciones.

4.2. Cuerpo de la página

El cuerpo de la página es donde se muestran los contenidos. Puede verse acompañado de uno o varios sidebars (o menús laterales de navegación). Se sitúa bajo de la cabecera o header o bajo del navbar (o menú de navegación principal). Generalmente, el cuerpo de la página cuenta con un título descriptivo. Todos los elementos del cuerpo de página deben seguir la guía de estilo del resto de la web.

4.3. Pie de página o footer

El pie de página o footer se sitúa en la parte inferior de una interfaz web, bajo el cuerpo de la página. Generalmente, suele utilizarse para para mostrar enlaces a servicios, formulario de contacto, banners publicitarios, políticas de privacidad y cookies, entre otras cosas.

4.4. Otros elementos

Además de los 3 componentes principales que hemos estudiado, hay una serie de elementos que suelen ser muy habituales en las páginas web. Aunque no vamos a entrar en la explicación de cada uno de ellos, conviene conocerlos ya que forman parte del vocabulario técnico que todo diseñador de interfaces web debe conocer.

• Acordeón.
• Anuncio, banner o ad.
• Ayudas flotantes o tooltip.
• Barra de acciones o action bar.
• Barra de búsqueda o search bar.
• Barra lateral o sidebar.
• Barra de progreso o progress bar.
• Botones o buttons.
• Carrito de compra o cesta.
• Carrusel o carousel.
• Deslizador o slider.
• Cuadro de diálogo o modal.
• Formulario de contacto o contact form.
• Inscripción al boletín de noticias o newsletter.
• Llamada a la acción o Call to action.
• Menú de navegación o navbar.
• Menú hamburguesa o toggle.
• Migas de pan o breadcrumbs.
• Paginado.
• Pestañas o tabs.
• Políticas de privacidad y cookies.
• Redes sociales o social media.
• Rosco de carga o spinner.
• Selector de idiomas.
• Tarjetas o cards.
• Ventana emergente o popup/popover.

4.5. Ejemplos

Veamos ahora el siguiente tablero de Pinterest en el que se han recogido diferentes páginas web con la descripción de sus componentes.