Mapa del sitio de la página principal

Plantilla de mapa del sitio para la página principal

Esta plantilla representa la navegación de nivel superior y el pie de página de la página principal en un diseño simple, codificado por colores. Está pensada para gerentes de producto, diseñadores UX/UI, mercadólogos e ingenieros que planifican la IA del sitio y la comunican a los stakeholders.

Desglose de la estructura

• Productos (coral/rojo #ff6464)

  • Icono circular con borde blanco (carrito de compras)

  • Encabezado “Productos”

  • Subtítulo “Página de inicio y filtros”

  • Tres cajas blancas de marcador de posición etiquetadas “Introduce texto aquí”

• Socios (amarillo/dorado #ffbe44)

  • Icono circular con borde blanco (apretón de manos)

  • Encabezado “Socios”

  • Subtítulo “Páginas de destino y filtros”

  • Tres marcadores de posición etiquetados “Introduce texto aquí”

• Empresa (verde azulado #5ec8b3)

  • Icono circular con borde blanco (ciudad/edificios)

  • Encabezado “Empresa”

  • Subtítulo “Página de inicio”

  • Tres marcadores de posición etiquetados “Introduce texto aquí”

• Contacto (cian #4fd8dd)

  • Icono circular con borde blanco (libreta de direcciones)

  • Encabezado “Contacto”

  • Sin subtítulo

  • Rectángulo con borde discontinuo con la etiqueta “TU LOGOTIPO” para ubicar la marca

Jerarquía de contenido

• Las secciones principales de navegación están en la parte superior con un título claro y una línea de subtítulo pequeña (excepto Contacto).

• Debajo de Productos, Socios y Comapny, tres cuadros rectangulares ofrecen espacios para subpáginas, filtros o enlaces profundos.

Sección del pie de página

• Un área de pie de página titulada “Pie de página (principal + navegación adicional)” contiene cuatro columnas separadas por divisores verticales:

  1) Detalles de contacto, Noticias, Ayuda

  2) Sectores (subrayados y en negrita): Sector 1, Sector 2, Sector 3

  3) Productos (subrayados y en negrita): Soporte, Accesorios, Equipamiento

  4) Boletín, Términos y Condiciones, Redes sociales

Elementos visuales

• Un destacado encabezado morado (#6631d7) con “Mapa del sitio de la página de inicio” en tipografía Georgia blanca.

• Las tarjetas de sección usan colores distintos como se indica arriba, cada una acompañada de un icono circular.

• Hay un área dedicada para el logo en la columna Contacto.

• Una delgada franja morada en la parte inferior unifica la paleta de colores.

Cómo utilizar

1) Reemplaza cada “Enter text here” por nombres de subpáginas o enlaces reales.

2) Actualiza los títulos y subtítulos de las secciones si es necesario (mantén la codificación de colores para mayor claridad).

3) Reemplaza los marcadores de posición de iconos por el conjunto de iconos de tu marca.

4) Coloca el logo de tu empresa en el área punteada “YOUR LOGO”.

5) Llena las columnas del pie de página con elementos de navegación definitivos y enlaces legales.

Prácticas recomendadas

• Usar durante la planificación inicial del sitio web, talleres de IA/UX, revisiones con stakeholders y la entrega al desarrollo.

• Mantén el número de secciones al mínimo; procura entre tres y cinco elementos por columna.

• Mantén la consistencia de colores para facilitar el escaneo visual.

• Ten en cuenta la etiqueta “Comapny” si vas a reproducir la plantilla tal cual, o corrígela antes de publicar.

¡Saludos!

Khawaja Rizwan