EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Elementos de identificación
            Elementos de identificación, navegación, contenidos e interacción
            04/08/2019
            Elementos conceptuales
            Elementos conceptuales: punto, línea, plano y volumen
            05/08/2019

            Componentes de una interfaz web

            Componentes de una interfaz web

            Componentes de una interfaz web

            Tabla de contenidos

            • 4. Componentes de una interfaz web
            • 4.1. Cabecera o header
            • 4.2. Cuerpo de la página
            • 4.3. Pie de página o footer
            • 4.4. Otros elementos
            • 4.5. Ejemplos

            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.

            componentes interfaz web
            Figura 4.1. Componentes de una interfaz 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.

            Compartir

            UD1. Planificación de interfaces gráficas

            • 1. Evolución del diseño web
            • 2. Interacción persona-ordenador
            • 3. Elementos de identificación, navegación, contenidos e interacción
            • 4. Componentes de una interfaz web
            • 5. Elementos conceptuales: punto, línea, plano, volumen
            • 6. Elementos visuales: forma, medida, color, textura
            • 7. Elementos de relación: dirección, posición, espacio, gravedad
            • 8. Elementos prácticos: representación, significado y función
            • 9. Guía de estilo: color, tipografía e iconos
            • 10. Prototipos web
            • 11. Mapas conceptuales y mapas de navegación
            • 12. Características: usable, visual, educativa y actualizada
            • 13. Gestores de contenido o CMS
            • 14. Pasos para crear una página web
            • 15. Referencias y recursos para la planificación de interfaces gráficas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results