Segmentos

Definición

Los segmentos son los bloques estructurales en los que se descomponen las páginas con modelo de portada. Estos segmentos tienen una composición abierta y permiten adecuar la portada a los intereses de los usuarios de cada sitio web.

Funcionan como contenedores de contenido y funcionalidad que pueden organizarse de distintas maneras según las necesidades del sitio o los intereses del usuario.

Anatomía

Anatomía del componente Segmento

 Los segmentos se componen de:

  1. Título (opcional)
  2. Bloques de contenido: Destinado a incluir bloques o módulos de contenido como texto, imágenes, listas u otros componentes definidos en el sistema

Tipos

Segmento estándar

Los segmentos se dividen en bloques que se apilan en función del ancho disponible.

Las proporciones adecuadas son (sobre el 100% del ancho):

  • Tres bloques de ancho homogéneo (33-33-33)

    GRID
    GRID
    GRID

  • Un bloque principal y dos secundarios (50-25-25 o 25-25-50) 

    GRID
    GRID
    GRID
    GRID
    GRID
    GRID

  • Dos bloques de ancho homogéneo (50-50)   

    GRID
    GRID

  • Cuatro bloques de ancho homogéneo (25-25-25-25)

    GRID
    GRID
    GRID
    GRID

Segmento de ancho completo

El segmento ocupa el ancho completo del contenedor. En estos segmentos se incluye un único bloque de contenido que se corresponde habitualmente con los siguiente componentes:

Pautas de uso

Utiliza bloques principales para los componentes más complejos

Si vas a introducir en un segmento de portada un componente complejo (p.ej. un mapa, un vídeo o un gráfico), asegúrate de disponga de un espacio suficiente para interactuar con él. Inclúyelo en un bloque principal, que ocupe el 50% del segmento en la versión responsive de escritorio.

Apila los bloques en las versiones responsivas

En los segmentos estándar, apila los bloques verticalmente en función del ancho disponible. En el caso de los segmentos de ancho completo, ajusta la composición de manera que la experiencia de uso sea adecuada en las distintas versiones responsivas.

Modelo de bloques apilables

Diseña los segmentos definiendo un objetivo

  • Identifica claramente el objetivo del segmento y realiza el diseño en consecuencia.
  • El mensaje debe ser conciso y directo. Evita ambigüedades.
  • Evita sobrecargar el segmento con demasiados elementos visuales.

Componentes relacionados

Forma parte de:

Formado por:

Componentes ancho completo:

Control de versiones

FechaVersiónNotas
20/03/20261.3Se definen los tipos y se incluyen pautas de uso