04 Implementaciones

Web

La web ordena la experiencia principal de la marca

El entorno web actúa como un punto de referencia para comprender, explorar y relacionarse con Bader. Su identidad debe facilitar una lectura clara, una navegación coherente y una presencia digital reconocible.

15

BRAND SITE

WEB

03 Expresión de marca / Digital

Web

El diseño de la web y aplicaciones digitales deben estar acordes a lo establecido en este brandsite respecto a tipografía, uso de color, elementos gráficos y fotografía.

Tipografía

Usaremos unicamente las tipografías corporativas definidas en este manual.

Bader Sans para grandes titulares y destacados. La tipogafía es el elemento principal de la identidad de Bader por lo tanto debe tener un papel protagonista también en la web.

Helvética para cuerpo de texto y subtítulos mas pequeños.

Color

Debemos utilizar los colores corporativos con predominancia del blanco.

Usaremos el color verde claro y verde oscuro para dividir distintas secciones, crear destacados, diferenciar y destacar botones o determinada información.

Si por algún motivo fuera necesario añadir otra tonalidad, usaremos unicamente porcentajes de los colores corporativos.

Elementos gráficos y fotografía

En líneas generales, y para dar un aspecto de limpieza, no abusaremos de elementos gráficos en la pagina web, ya que tanto el uso adecuado del color, como la tipografía y la fotografía ya son suficientes elementos para generar un aspecto limpio y profesional.

Podemos servirnos en determinadas ocasiones de puntos para destacar las ofertas o novedades o de líneas para separar ciertas secciones. Cuando usemos estos elementos lo haremos dándoles una función y no sólo como elemento decorativo.

Utilizaremos la fotografía usando las pautas definidas en la sección fotografía de este brandsite.

fotografía

Escritorio

Móvil

DESCARGAR bader_web.pdf

Favicon

Para el favicon se utilizará la versión abreviada del identificador en verde claro, sobre fondo verde oscuro.

DESCARGAR bader_favicon.zip

Contenido trasladado desde brand.bader.es/expresion-digital-web.

documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_tipografia.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_tipografia.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_elemebtos.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_elemebtos.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_01.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_01.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_escritorio_01.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_escritorio_01.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_escritorio_02.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_escritorio_02.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_movil_01.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_movil_01.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_movil_02.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_web_movil_02.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_avatar_Mesa de trabajo 1 copia 2.png
documents/96c0d4e5329/1c8697b475d/2024_082_bader_avatar_Mesa de trabajo 1 copia 2.png
documents/96c0d4e5329/1c8697b475d/2024_082_bader_avatar_02.webp
documents/96c0d4e5329/1c8697b475d/2024_082_bader_avatar_02.webp