Sitio web

Slogan

Es imperativa la sincronía en el slogan para las páginas web de cada país. Este puede variar según el idioma principal de cada uno, es decir:

La intención no es sobrecargar el sitio con el slogan, pero este puede ubicarse estratégicamente en distintas secciones del sitio web donde sea pertinente y coherente, como en los banners o en páginas como ‘Misión’ o ‘Sobre Nosotros’.

Favicon

Los favicons deben contener el imagotipo de Argos, compuesto por el símbolo y la palabra “Argos”. Este elemento es indivisible, por lo que no es posible poner únicamente el isotipo como favicon.
El imagotipo debe ser de color azul sobre fondo verde, reflejando los colores primarios de la marca. El fondo debe ser cuadrado, no circular.

El favicon tiene unas medidas predeterminadas de 16×16 píxeles. Para mantener la integridad del imagotipo, el área de distanciamiento entre este y el margen externo corresponde a la altura de la letra A del imagotipo de Argos, tal como se ve en el gráfico. La medida “A” debe ser respetada a cada uno de los cuatro lados del imagotipo.

Aunque el favicon estándar es de 16×16 px, es recomendable incluir versiones en diferentes tamaños en el archivo. Esto garantizará que se vea bien en distintas plataformas y dispositivos, especialmente en pantallas de alta resolución. A continuación, se especifican las medidas según las necesidades del sitio:

- Favicons de navegador: 16×16
- Iconos de acceso directo a la barra de tareas: 32×32
- Iconos de acceso directo de escritorio: 96×96
- Iconos táctiles de Apple: 180×180
- Tamaño de WordPress: 512×512
- El formato del archivo puede ser .png, .svg o .ico.

URL

Las URLs deben reflejar de manera directa el contenido de la página, incluyendo términos clave relacionados con los productos o servicios, pues esto ayuda al posicionamiento SEO y mejora la experiencia del usuario. (1)
Aunque técnicamente los navegadores pueden manejar URLs de aproximadamente 2.000 caracteres, se establece un máximo de 100 caracteres para asegurar que sean legibles, compartibles y fáciles de manejar.
Las URLs deben estar en minúsculas para evitar confusiones y errores al escribirlas. Los espacios deben reemplazarse por guiones (-). (2)

Las URLs deben ser breves, pero lo suficientemente descriptivas para ser entendidas fácilmente. A menos que se trate de la URL de un blog, en cuyo caso se vale que tenga el nombre completo del titular. (3)
A menos que sea indispensable, las URLs no deben incluir parámetros como “#”, “?”, “&”, o “=” que dificulten su recordación. (4)
El idioma de las URLs debe coincidir con el idioma del contenido de la página. (5)
No usar palabras como “el”, “la”, “de” si no son indispensables para el contexto. (6)
Se deben implementar redirecciones permanentes en caso de actualizar URLs para no perder tráfico orgánico ni dañar el SEO.
Todas las URLs deben comenzar con “https://” para garantizar seguridad y confianza al usuario.

Headers

Para sitios web donde haya múltiples páginas y se requieran, a su vez, diferentes secciones:

El header debe estar compuesto por dos líneas color verde (#C4D600) sin opacidad. La primera línea debe contener como elementos básicos el selector de países, el selector de idiomas (cuando se requiera) y el buscador, de izquierda a derecha.

– Selector de países: Debe incluir el nombre del país junto a su bandera correspondiente (bordes rectangulares), organizados alfabéticamente. Su visualización en el header consta del ícono de ubicación, ubicado al lado izquierdo, y el nombre del país seleccionado, al lado derecho. La tipografía a emplear es la Trebuchet MS, tamaño 1 REM, interlineado de 1.5, color azul oscuro (#071D49) y fondo blanco (#FFFFFF) para el desplegable, con el fin de facilitar la lecturabilidad. Al pasar el mouse sobre las opciones del selector, cambia el color de fondo pasando de blanco al azul oscuro con opacidad al 30 %.

– Selector de idioma: Dado que este selector es opcional y responde a las necesidades que tenga el sitio, el nombre del idioma debe estar organizado según la relevancia, es decir, si estamos en Colombia priorizar en la lista el español y dejarlo como idioma predeterminado. La tipografía a emplear es la Trebuchet MS, tamaño 1 REM, interlineado de 1.5, color azul oscuro (#071D49) y fondo blanco (#FFFFFF) para el desplegable, con el fin de facilitar la lecturabilidad. Al pasar el mouse sobre las opciones del selector, cambia el color de fondo pasando de blanco al azul oscuro con opacidad al 30 %.

– Buscador: Este elemento, a diferencia del selector de idiomas, es un campo mandatorio. Debe estar representado por un ícono minimalista de lupa en color azul (#071D49), con un tamaño de 24×24 px. Al hacer clic sobre él (y no al pasar el cursor por encima), se desplegarán hacia el lado izquierdo los elementos del menú, dejando un espacio para la barra de búsqueda, que tendrá un tamaño de 20 px de alto en escritorio, un máximo de 400 px en resoluciones grandes para evitar que se vea desproporcionada, y ocupará el 40% del ancho de la pantalla, aunque puede ser más flexible dependiendo del diseño responsive. En pantallas pequeñas, la barra podría ocupar entre el 80% y el 100% del ancho para mayor facilidad de uso. En esta barra se mostrará la leyenda con un llamado a la acción, por ejemplo, “Buscar…” o “Escribe lo que estás buscando”, con la tipografía Trebuchet MS, tal como se ilustra en el gráfico siguiente.

Se recomienda que esta primera línea del header tenga una altura de 30 px para escritorio (esta línea debe ser más delgada porque su contenido es funcional pero menos prominente visualmente). Asimismo, se sugiere que el espaciado interno, o padding, sea de 2 % para la parte superior e inferior; y un ancho máximo de 1.140 px en los contenedores. El ancho debe ser el 100 % de la pantalla (responsive). En el caso de los móviles debe tener un zona de resguardo del 3 % a cada lado.

La segunda línea contiene el imagotipo y el menú principal. Estos elementos son clave para la navegación. Su línea más gruesa facilita la jerarquía visual y da espacio suficiente para interacciones táctiles (en dispositivos móviles). La altura total de la barra debe ser entre 35 y 40 px, esto asegura que haya suficiente espacio para el imagotipo y las opciones desplegables, manteniendo una apariencia limpia y legible; mientras que el ancho será nuevamente del 100% de la pantalla y responsivo para cualquier dispositivo. Dentro de la barra, se sugiere que la margen superior e inferior sea del 2 %; y un ancho máximo de 1.140 px en los contenedores. En el caso de los móviles debe tener un zona de resguardo del 3 % a cada lado.

– Imagotipo: Este elemento es crucial en cualquier header y, por UX, deberá ubicarse al lado izquierdo respetando el borde del contenedor y separarse del primer menú desplegable con un espacio de 15 px a 20 px. El tamaño recomendado para este elemento es del 85% de su contenedor, con el fin de asegurar su notoriedad y relevancia en el header. Tal elemento deberá colocarse en color azul (#071D49) y fondo transparente en PNG para compatibilidad. Debe funcionar como botón para redirigir al inicio del sitio, ya que esta es una convención aceptada en UX, lo que evita confusión y mejora la experiencia de usuario.

– Opciones del menú principal: Debe contener un máximo de 6 opciones. Esto se basa en la regla de Miller, que sugiere que las personas tienen dificultad para procesar más de 7 elementos en un solo vistazo, por lo que tener menos opciones facilita la navegación y reduce la fatiga visual. Las opciones deben representar las secciones más importantes y útiles para el usuario y la marca (por ejemplo, “Productos”, “Servicios”, “Contacto”). Se recomienda que la distancia entre las opciones sea de 20 px entre cada una, para evitar saturación visual. Deben estar en Trebuchet MS, mayúscula sostenida, con un tamaño de 0.9 REM (negrita), color azul (#071D49). La interacción al pasar el mouse (hover), será cambiando el fondo, pasando de verde (#C4D600) a blanco (#FFFFFF).

– Opciones desplegables del menú: Se recomienda un número máximo de 8 opciones por submenú para evitar scroll excesivo. Las opciones del submenú deberán escribirse en Trebuchet MS con mayúscula inicial sin negrita (para subtítulos será con mayúscula sostenida y negrita), tamaño de fuente en 1 REM y color azul (#071D49). El espaciado interno será de 10 px para la margen superior e inferior de cada opción, y de 15 px para el espaciado entre opciones. Al pasar el mouse sobre las opciones del selector, deberá cambiar el color de fondo pasando de blanco al azul oscuro con opacidad al 30 %.

Cuando hay más de 8 elementos en un submenú, se deben emplear los megamenús en una visual horizontal, distribuyendo en un máximo de 3 columnas visibles para escritorio, 2 en tablets y 1 en celulares. Se deben agregar subtítulos con la misma tipografía y tamaño, aunque en mayúscula sostenida y negrita, para diferenciar las categorías que lo componen. Para estos se recomienda un ancho máximo del 80 % del viewport en pantallas grandes (con un máximo de 1200 px) y no debe exceder el 70 % de la pantalla, respecto a la altura. El espaciado entre cada categoría (subtítulo o sección del megamenú) será de 20 px; entre opciones dentro de una misma categoría, 10 px; para el padding superior e inferior, 12 px; y para el padding izquierdo y derecho, este será de 15 px. Además, se sugiere que la distancia entre columnas sea de 30 px, para mejorar la lecturabilidad.

– Imágenes en el desplegable del menú: Es posible ubicar alguna imagen silueteada en los desplegables del menú principal, para enriquecer la visual y mejorar la experiencia del usuario. Es importante tener en cuenta que podrán usarse solo en menús específicos donde estas añadan valor. Por ejemplo: algún producto o proyecto destacado. Se recomienda que las fotografías empleadas sean del banco de imágenes de Argos y que tengan un tamaño coherente con el menú desplegable, alineadas a la derecha de las opciones de texto (si se usan).

En dispositivos móviles, el header puede adaptarse a una sola línea con el menú comprimido en un ícono de hamburguesa, y los selectores se pueden agrupar en un desplegable para optimizar espacio. El tamaño de este ícono debe ser de 1.5 REM.

Para sitios web con menor cantidad de páginas y secciones:

Se recomienda mantener la simplicidad del header, estructurándolo de la siguiente manera:
– Franja: El header deberá ser color verde (#C4D600). Se recomienda que tenga 30 px de alto y el 100 % de la pantalla de ancho.
– Imagotipo: Deberá ubicarse al lado derecho respetando el espacio del contenedor y su tamaño debe de ser del 85%. Este elemento irá en su color principal, es decir, azul (#071D49).
– Selector de idiomas o país: Si se requiere ubicar este elemento, pueden seguirse las indicaciones previamente dadas.

En el caso de Argos ONE, una vez se dé clic sobre el país, en el lado derecho del header debe visualizarse la bandera correspondiente, en un tamaño de 40 px x 24 px. Esta no debe tener bordes redondeados.

Para e-commerce:

El header debe estar compuesto por una línea principal color verde (#C4D600) sin opacidad, con tamaño de 70 px de alto y 100 % de la pantalla de ancho. Debe contener como elementos básicos el imagotipo, buscador, selector de ubicación, selector de idioma (si se requiere), botones clave como “Mi cuenta” y “Carrito de compras” (se recomienda el empleo único de íconos reconocibles; sin embargo, si se considera necesario, se sugiere acompañar el ícono del texto correspondiente, ubicándolo en la parte inferior con mayúscula inicial.

– Imagotipo: Debe estar ubicado en centrado a la izquierda, actuando como un acceso rápido a la página de inicio. Tamaño máximo de 120 px de ancho x 40 px de alto, y espaciado interno de 10 px a la izquierda del contenedor y altura centrada respecto al alto del header. Color principal azul (#071D49).
– Buscador: La barra de búsqueda debe estar situada dentro de un recuadro blanco con bordes rectos, sin esquinas redondeadas. Su tamaño deberá ser de 300 px de ancho y 40 px de alto en vista de escritorio. Se deberá respetar un margen interno de 20 px en el ancho y 1 % en el alto, para que dentro de este se ubique en el lado izquierdo un ícono de lupa minimalista en color azul (#071D49). A la derecha de la lupa, se mostrará un texto con un llamado a la acción, como por ejemplo, “Buscar…” o “Escribe lo que estás buscando”, utilizando la tipografía Trebuchet MS.

– Selector de ubicación o idioma: Para el caso del selector de ubicación, este deberá contar con un ícono minimalista relleno de ubicación color azul (#071D49) y tamaño de 16 px de alto; este elemento deberá estar situado a la izquierda del texto, como se ve en la siguiente imagen. Tanto para el selector de ubicación como para el selector de idioma, el tamaño del texto será de 1 REM (para el texto principal, ya sea el lugar específico o el idioma) y de 0.9 REM (para algún texto secundario); espaciado entre elementos de 8 px; color azul (#071D49).

– Botones clave: Estarán ubicados en el extremo derecho. Tamaño recomendado de 24×24 px, color azul (#071D49). Para el carrito de compras se debe poner un indicador del número de productos añadidos (círculo azul con texto blanco de 1 REM). El estilo de estos íconos serán en estilo minimalista rellenos en color azul (#071D49).

Para mejorar la experiencia de usuario, se recomienda implementar un pop-up (32o x 180 px) que recuerde a los usuarios verificar su ubicación. Este debe tener un diseño atractivo y minimalista, con la forma de una burbuja de texto estilo cómic, sin bordes y con fondo blanco. Las esquinas deben ser ligeramente redondeadas para suavizar su apariencia. El “pic” (1o x 20 px) de la burbuja debe apuntar hacia el texto “Cambiar ubicación”. En su interior, se deberá incluir una X gris (707372) de 6×6 px en la esquina superior derecha, que permita al usuario cerrar el pop-up fácilmente.

El texto principal debe ser claro y conciso: “¿Estás en (nombre de la ciudad)?”, en color azul oscuro (#071D49) con un tamaño de 1 REM. Debajo de esta pregunta, alineado a la izquierda, se debe agregar la frase explicativa: “Según tu ubicación verás los productos disponibles y los tiempos estimados de entrega” en el mismo tono de gris que la X con un tamaño de 0.9 REM. Finalmente, en el centro de la burbuja, debe aparecer un botón con fondo verde (#C4D600) y texto azul “Cambiar ubicación” en 1 REM.

Para la barra de opciones desplegables, se presentan dos opciones. La primera es ubicarla en el header, cuando se trata de un número de categorías y subcategorías reducido (máximo 7 y 3, respectivamente); otra opción es ubicarlo en la parte izquierda de la pantalla, cuando se trata de un sitio con un número mayor, para aprovechar el espacio y permitir una organización más profunda mediante la navegación vertical. Para el caso de las opciones del menú principal en el header, quedaría así:

Opciones del menú principal: Esta barra se unificaría con el color de la barra principal, por lo que quedaría color verde (#C4D600); tamaño de 40 px de alto. Se recomienda que la distancia entre las opciones sea de 30 px entre cada una, para evitar saturación visual. Deben estar en Trebuchet MS, mayúscula sostenida, tamaño de fuente en 1.1 REM (negrita), color azul (#071D49). La interacción al pasar el mouse (hover), será cambiando el fondo, pasando de verde (#C4D600) a blanco (#FFFFFF).

Opciones desplegables del menú: Las opciones del submenú deberán escribirse en Trebuchet MS con mayúscula inicial sin negrita (para subtítulos será con mayúscula sostenida y negrita), tamaño de fuente en 1 REM y color azul (#071D49). El espaciado interno será de 10 px para la margen superior e inferior de cada opción, y de 5 px para el espaciado entre opciones. Al pasar el mouse sobre las opciones del selector, deberá cambiar el color de fondo pasando de blanco al azul oscuro con opacidad al 30 %.

Para el caso de las opciones del menú principal en el lateral izquierdo, quedaría así:

Se recomienda que el ancho de la barra lateral sea de 250 px en color blanco (#FFFFFF). La altura del encabezado dentro del menú lateral (con el botón de cerrar) será de 60 px sugeridos, con el fin de que sea visible sin ocupar demasiado espacio. El espaciado entre categorías principales será de 15 px, mientras la altura de cada categoría será de 40 px. Para las categorías principales se tendrá un tamaño establecido de 1.1 REM, Trebuchet MS, con mayúscula sostenida, en negrita, color azul (#071D49), mientras que para las subcategorías se manejará un tamaño de 1 REM, misma tipografías, aunque con mayúscula inicial, color gris (#707372), y una interacción de cambio de fondo al pasar el mouse, cambiando de blanco a azul con opacidad al 30 %.
Se tendrá como indicador visual de despliegue, un ícono de semitriángulo al lado de las subcategorías, con el fin de ampliar el submenú, el cual cambiará de color pasando de gris (#707372) a azul (#071D49) cuando se pone el mouse sobre la opción. Las subcategorías deben poder expandirse y contraerse al dar clic en la categoría principal. La animación debe ser suave (200-300 ms).

*En dispositivos móviles, ambos tipos de menú deben adaptarse para ser accesibles desde un botón de menú hamburguesa.

Banners

La cantidad de banners debe estar entre 3 y 5, asegurando que se mantengan actualizados para garantizar la relevancia y frescura del contenido.
La resolución mínima recomendada es de 1920×470 px para pantallas de alta calidad, y de 800×600 px para dispositivos móviles, es decir, deben ser responsivos.
El peso máximo de cada banner debe ser de 150 KB, utilizando formatos optimizados como WebP o JPEG.
Se sugiere que el primer banner sea un video para captar la atención de manera dinámica, respetando las mismas dimensiones que los demás banners. Este debe ser ligero y optimizado para una carga rápida, con un tamaño máximo de 3-5 MB y codificación H.264. Además, se recomienda que no incluya audio para evitar una experiencia invasiva para el usuario.
Las transiciones automáticas entre banners deben durar entre 4 y 6 segundos, con animaciones suaves como fade-in o deslizamientos laterales.
Incluir flechas de navegación y puntos indicadores visibles para permitir al usuario cambiar manualmente entre los banners, para el caso de la página de inicio, donde se requieren varios banners. Dichas flechas deben tener una altura de 30 px y una tonalidad gris (#D7D2CB). Su ubicación debe ser centrada respecto a la altura total del banner y estar a 20 px de los bordes laterales.
Para el diseño de los banners, se sugiere seguir las siguientes indicaciones:
– No incluir logotipos o elementos redundantes en los banners, ya que se sobreentiende que forman parte del sitio web de la marca.

– Usar buen contraste entre las imágenes de fondo y las tipografías utilizadas (se puede jugar con las 2 tipografías principales de la marca para jerarquizar y dar dinamismo). Los textos deben ser legibles, con colores sólidos y variando entre frases con mayúscula sostenida y frases con mayúscula inicial, para una lectura cómoda y jerarquizada.

– Mantener una jerarquía visual clara, con textos principales de 1.3 a 1.5 REM y subtítulos de 1 a 1.1 REM, asegurando que los textos estén alineados de forma estratégica para mejorar la legibilidad.

– Usar la paleta de colores de la marca, generando contrastes.

– Los banners deben incluir llamados a la acción claros, como botones con textos específicos y colores contrastantes. Los CTAs deben tener un tamaño mínimo de 1 REM.

– De ser posible, no poner bloques de texto dentro de recuadros. Se puede optar por difuminados o contraste entre el fondo y la tipografía empleada.

– Si se desea generar la sensación de tridimensionalidad, se puede hacer gracias a la superposición de planos. Se recomienda dejar un borde del mismo color del fondo del sitio, con el fin de que la imagen quede superpuesta y genere la sensación que hay un elemento que “se sale del banner”. Es un uso ideal para situaciones en donde queremos dar una sensación de potencia y robustez.

En el caso de los ecommerce, el banner principal puede incluir un contador dinámico que genere un sentido de urgencia, dependiendo de las campañas que se estén empleando.

Tipografías

La tipografía es un pilar esencial en la identidad visual, destacándose por transmitir modernidad, funcionalidad y robustez en sus comunicaciones. A continuación se detalla la aplicación de las fuentes Integral y Trade Gothic LT Std, especificando los tamaños y estilos para encabezados (H), subtítulos y cuerpos de texto en entornos digitales.

H1 o encabezado principal: Integral CF: tamaño de 2.5 REM; el interlineado se debe reducir para crear bloques robustos, para todas las tipografías este se calculará usando la fórmula de la siguiente imagen; peso Demi; el color no se especifica, ya que si bien, este deberá ser de la paleta primaria, la elección dependerá del color de fondo en el que sitúe.

A: puntaje de la tipografía (ej.50pt)
A x 0,90= B puntaje del interlineado
50 x 0,90= 45pt
Uso: Titulares principales que requieren máxima visibilidad y jerarquía.
Observación: Evitar largos bloques de texto; ideal para mensajes cortos y contundentes.
H2 o subencabezado principal: Trade Gothic LT Std; mayúscula inicial o sostenida según la finalidad del texto en la web; tamaño de 2.2 REM e interlineado de 2em; peso bold; el color no se especifica, ya que si bien, este deberá ser de la paleta primaria, la elección dependerá del color de fondo en el que sitúe.

Uso: Títulos secundarios que acompañan al H1 en páginas clave o introducciones de sección.
H3 o títulos terciarios: Trade Gothic LT Std; mayúscula inicial; tamaño de 1.8 REM interlineado de 1,8em; peso regular; el color no se especifica, ya que si bien, este deberá ser de la paleta primaria, la elección dependerá del color de fondo en el que sitúe.

Uso: Destaca subtítulos, encabezados de subsecciones o llamadas a la acción en sitios web.
H4 o encabezado complementario: Trade Gothic LT Std; mayúscula inicial; tamaño de 1.5 REM e interlineado de 1,5em; peso regular; el color no se especifica, ya que si bien, este deberá ser de la paleta primaria, la elección dependerá del color de fondo en el que sitúe.

Uso: Textos secundarios con menor jerarquía, como subtítulos explicativos o encabezados de widgets.
H5 o subtítulos adicionales: Trade Gothic LT Std; mayúscula inicial; tamaño de 1.3 REM e interlineado de 1,3 REM; peso regular; el color no se especifica, ya que si bien, este deberá ser de la paleta primaria, la elección dependerá del color de fondo en el que sitúe.

Uso: Complementa gráficos, pies de página o textos menores.
H6 o encabezados pequeños: Trade Gothic LT Std; mayúscula inicial; tamaño de 1.1 REM e interlineado de 1,1em; peso regular; el color no se especifica, ya que si bien, este deberá ser de la paleta primaria, la elección dependerá del color de fondo en el que sitúe.

Uso: Menús de navegación, etiquetas o encabezados auxiliares.
Cuerpo de texto: Trade Gothic LT Std; mayúscula inicial; tamaño de 1 REM e interlineado de 1em; peso regular; color gris oscuro (#54585A).

Uso: Textos generales en secciones principales.
Párrafos secundarios: Trade Gothic LT Std; mayúscula inicial; tamaño de 0.9 REM e interlineado de 1em; peso regular; color gris oscuro (#54585A).

Uso: Detalles de productos, explicaciones o textos secundarios.

Testimonios: Estos textos deberán escribirse en itálica siempre y cuando sean citas textuales, haciendo uso de las comillas y atribuyendo la frase a la persona en cuestión. Para citas indirectas o paráfrasis, el texto deberá escribirse como el resto del cuerpo, sin empleo de comillas y con atribución a la persona que realizó la alocución. Cuando la cita textual se enuncia en un título, se omitirá la itálica y adoptará la tipografía de acuerdo a la jerarquía antes mencionada.

A continuación, se brindarán unas especificaciones generales:

Alineación: Todo el texto debe estar alineado a la izquierda. En caso de los banners, infográficos u otros elementos puntuales, es posible usar otro tipo de alineación con el fin de que la visual y experiencia de usuario sea cómoda, siempre y cuando no se trate de la tipografía Integral CF, pues su objetivo robusto es formar visualmente bloques, por lo que se debe limitar su alineación a la izquierda, y solo en casos excepcionales de diagramación, podrá ser justificada a la derecha.
Jerarquización: Crear altos contrastes en tamaños y pesos.
⁠Paleta de colores: Priorizar los colores de la paleta primaria: verde (#C4D600) para títulos más llamativos, azul (#071D49), y blanco (#FFFFFF) cuando se trate de fondos de color oscuro; así como de la paleta terciaria.
No saltar niveles: Si se utiliza H3, se debe haber utilizado previamente H2 y H1, esto permite jerarquizar y mantener la semántica.
Un solo H1 por página: Cada página debe tener un único encabezado H1.
Contraste: Se debe asegurar un contraste adecuado entre el texto y el fondo.

Énfasis o destacados: Aunque se cuenta con una familia tipográfica y jerarquización definida para mantener la coherencia y la identidad visual de la marca, entendemos que, en ciertas situaciones, como es el caso de los blogs o artículos, es necesario resaltar elementos específicos como frases, números o palabras clave.

Para este fin, se puede hacer uso de los siguientes estilos tipográficos adicionales:

– Negrita: Utilizada para destacar términos o frases importantes. Es ideal para enfatizar palabras clave o llamados a la acción.
– Cursiva: Perfecta para resaltar citas, referencias, extranjerismos o para dar un toque de diferenciación a ciertos elementos sin perder legibilidad.
– Tamaño de tipografía: Utilizado para destacar términos o frases importantes.

Es importante recordar que estos estilos deben usarse con moderación y consistencia para no perder la armonía y el balance visual que caracteriza a la marca Argos. El uso excesivo de negritas, cursivas o cambios de tamaño puede comprometer la legibilidad y la estética general del diseño.

El uso no autorizado de las tipografías y la jerarquización se considera incorrecto; no obstante, a continuación se destacan otras especificaciones importantes:

No modificar el interletrado ni aplicar efectos como sombras o texturas dentro de la tipografía que afecten la lecturabilidad.
No justificar los textos.
No usar Integral CF en cuerpos extensos de texto.

Colores

Es relevante buscar combinaciones de alto contraste en los colores. Se debe evitar el uso de tipografías blancas sobre fondos verdes, ya que, aunque visualmente puede alinearse con la identidad de la marca, la falta de suficiente contraste dificulta la lecturabilidad. Lo mismo ocurre cuando se sobreponen elementos verdes (#C4D600) en tonalidades verde azul o aguamarina, y viceversa.

Es necesario dar jerarquía al uso del color. La paleta primaria, que fortalece la identidad visual, será usada mayoritariamente en fondos principales, tipografías de encabezados y botones destacados.

Por su parte, la paleta secundaria se empleará como complementaria, destinándose principalmente a gráficos y tablas, separadores y divisores en el diseño, iconos de navegación, pictogramas, detalles decorativos o elementos menores.

Se recomienda priorizar ciertas tonalidades, es decir, dar preferencia a colores secundarios que se alineen visualmente con la paleta principal (verdes y azules). Estos colores deben integrarse de manera sutil y funcional, evitando que compitan con los colores de la identidad central.

La paleta terciaria puede emplearse para textos, acentos (aspectos clave) y lugares donde se requiera mayor sobriedad, teniendo siempre presente la contrastabilidad en los tonos seleccionados.

Iconografía

Los pictogramas refuerzan la comunicación de manera directa y visualmente atractiva, promoviendo un mensaje coherente con los valores de la marca, por lo que deben estar alineados con dos conceptos clave: simpleza y claridad.

Los íconos a usar deben tener un estilo gráfico sencillo. Si se requieren íconos adicionales a los disponibles en el Brandcenter, estos deben seguir el mismo estilo gráfico minimalista, garantizando que sean fácilmente reconocibles, ya sean de color sólido o en línea, como se evidencia en la siguiente imagen.

Deben emplearse los colores primarios y secundarios de la paleta, siempre asegurándose de que haya un buen contraste entre el ícono y el fondo.

El tamaño, la forma y la proporción de los íconos deben ser consistentes en todo el sitio para evitar disonancia visual.
Los íconos son figuras ilustrativas, debe controlarse el uso de estos para evitar la sobresaturación.
En cuanto al tamaño, se debe respetar un mínimo de 24 x 24 px y un máximo de 64 x 64 px, a menos que se especifique un tamaño diferente en otras secciones, como en los encabezados. Para los íconos lineales se tendrá como rango de grosor un mínimo de 2 px y un máximo de 4 px.

A continuación, se detallan algunos usos incorrectos de los mismos:

Usar estilos rústicos, caricaturescos o infantiles. A excepción de que el público objetivo sean niños, niñas o jóvenes y el tema a comunicar requiera un diseño gráfico diferente.
Aplicar efectos realistas como sombras, degradados o texturas.
Diseñar íconos con líneas extremadamente delgadas o extremadamente gruesas.
Crear pictogramas tridimensionales o multicolores.
Utilizar íconos predeterminados de librerías genéricas sin adaptación.

Imágenes

Las imágenes juegan un papel fundamental en la experiencia visual y el rendimiento del sitio web, por lo que es crucial mantener una alta calidad sin comprometer la velocidad de carga. Para ello, se recomienda:

Formatos: Estos se pueden elegir según el tipo de imagen, permitiendo una adecuada optimización y compatibilidad con la web:

– WebP (.webp): Este es el formato recomendado para la mayoría de los casos, ya que ofrece alta calidad con un peso reducido (hasta un 30% menor que JPEG o PNG).
– JPEG (.jpg): Es ideal para fotografías e imágenes con muchos detalles. Permite buena compresión sin pérdida de calidad perceptible.
– PNG (.png): Es útil para imágenes con fondo transparente o con detalles precisos (como ilustraciones). Sin embargo, tiene mayor peso que el JPEG.
– SVG (.svg): Perfecto para íconos, logotipos y gráficos vectoriales escalables sin pérdida de calidad.

Para mantener una carga rápida del sitio, se sugiere usar imágenes en tamaños reducidos que aseguren de igual manera buena calidad (hasta dos megabytes, pero alrededor de 500 kilobytes):
– Fondos grandes e imágenes hero: 200 KB – 400 KB.
– Imágenes de contenido: 100 KB – 250 KB.
– Thumbnails e íconos: Menos de 50 KB.

Asegurar la correcta adaptación en responsive, permitiendo que las imágenes se ajusten dinámicamente en móviles y tablets con un ancho de la pantalla del 100%.
Para evitar distorsiones, mantener siempre la proporción original (aspect-ratio).
Para evitar recortes indeseados en la imagen se recomienda el uso de object-fit: cover o contain según el diseño:
– Cover: Recorta la imagen para llenar el espacio sin deformarla.
– Contain: Ajusta la imagen sin recortar, pero puede dejar espacios vacíos.

El modo de color deberá de RGB para web y un perfil de color sRGB para asegurar uniformidad en la mayoría de los dispositivos.
En cuanto al SEO y la accesibilidad se recomienda:
- Emplear textos alternativos (alt text):
  – Se debe describir la imagen de forma clara y concisa.
  – No usar “imagen de…” o “foto de…”.
  – Usar palabras clave de forma natural.

- Emplear atributos title. Si bien este es un elemento opcional, se recomienda dejar el texto ya que permite mostrar información adicional cuando el usuario pasa el mouse sobre la imagen.

- Evitar imágenes decorativas en el código. Para imágenes sin importancia funcional, se sugiere usar background-image en CSS en lugar de <img>.
- Habilitar caché de imágenes para que los visitantes recurrentes no las vuelvan a descargar.

Videos

Todos los videos, antes de embeberlos en los sitios web, deben subirse a YouTube, asegurando una correcta optimización para buscadores, mediante palabras claves en títulos, descripciones y etiquetas.
Para sitios web se recomienda el formato estándar de YouTube, es decir, 1280 x 720 píxeles (relación de aspecto 16:9), Sin embargo, para videos que se tomen desde redes sociales o sección de Shorts en YouTube, estos deberán guardar una relación 9:16, es decir, 1080 x 1920 px.
Es necesario asegurar que las miniaturas se vean completas y sin cortes en la página web, deben ser atractivas y relacionadas con la temática del video, por lo que en ningún caso se recomienda que sea el imagotipo de la empresa. Esta portada se debe traer de la carga en YouTube; pero si no se cuenta con ella en esa red social, se podrá subir directamente desde el gestor de contenidos del sitio.

Se deben usar elementos visuales de la marca, como los colores de la paleta principal (#C4D600 y #071D49), e incorporar un texto breve en Integral CF que indique el tema del video.

La resolución mínima deberá ser de 1080 px (Full HD) para asegurar una experiencia visual óptima en todos los dispositivos. Se recomienda hacer uso de la funcionalidad de carga diferida para evitar que los videos afecten la velocidad del sitio.
La duración óptima de un video se contempla entre los 30 segundos y 2 minutos, para captar y mantener la atención del usuario. Estos deberán reflejar mensajes claros e incluir textos, imágenes y/o gráficos que refuercen los mensajes clave del video.
Utilizar música de fondo profesional y neutra. Para ello, es recomendable seleccionar las pistas disponibles en la sección de Descargables del Brand Center. En caso de no contar con estas opciones, se pueden emplear pistas similares, asegurándose de mantener la coherencia con los valores de la marca.
Respetar la línea visual robusta y profesional de la marca, evitando gráficos caricaturescos o estilos que no se alineen con la identidad de Argos.
Es importante que los videos tengan subtítulos, ya que garantizan accesibilidad para personas con discapacidades auditivas, mejoran la comprensión en entornos ruidosos o sin sonido, y permiten que el contenido llegue a una audiencia más amplia. Para esto se recomienda utilizar la tipografía Trade Gothic LT Std en 1.2 REM para videos horizontales y 1 REM para videos verticales.

Si se desea incluir una animación con el imagotipo de Argos, esta deberá estar ubicada como cierre del video, nunca como introducción, manteniendo la sencillez y la unificación de los elementos que lo componen. Algunas pueden ser:

- Desvanecimiento (fade in/fade out): Transiciones suaves entre escenas o elementos.

- Desplazamiento sutil (slide-in/slide-out): Movimiento horizontal o vertical de los elementos para generar dinamismo sin ser intrusivo.

- Escalado progresivo (scale-up/scale-down): Entrada o salida de elementos con un crecimiento o reducción progresiva.

- Barrido de color (color wipe): Transición con una franja de color corporativo que puede integrar el sistema visual de la marca.

PDF

Tener un tamaño de archivo inferior a 10 MB para su uso en la web y a 5 MB para dispositivos móviles, especialmente si el documento es descargable.
En el caso de que el archivo contenga imágenes, se recomienda utilizar una resolución de 72 a 150 dpi. Para lograr estos tamaños, el archivo puede comprimirse en herramientas como Adobe Acrobat, SmallPDF o I Love PDF, ya que no afectan significativamente la legibilidad del texto ni la calidad de las imágenes.
Se recomienda dividir los documentos. Por ejemplo, en lugar de tener un solo archivo de 100 páginas, se puede optar por varios documentos de 20 o 30 páginas, asegurando que mantengan la continuidad y se dividan por temáticas o capítulos.
Si se requiere, incluir enlaces internos, para que el usuario pueda saltar directamente a las secciones que desee, o enlaces externos, que redirijan a información adicional fuera del PDF.
Al igual que los sitios web, los archivos PDF pueden incluir metadatos que optimicen su posicionamiento en los motores de búsqueda. Para añadirlos, se puede utilizar Adobe Acrobat. En el menú Archivo > Propiedades > Descripción, es posible incorporar información como el título, el autor, las palabras clave y la fecha de creación.
Usar FTP (File Transfer Protocol) es fundamental para la gestión de archivos en un servidor web, ya que su visualización se hace online sin necesidad de descargas. Por lo tanto, es importante seguir una serie de pasos para subir los archivos de manera eficiente y segura:

1. Contar con un servidor que permita el almacenamiento adecuado de los documentos. En el caso de los archivos PDF, se recomienda crear una subcarpeta específica para su organización. Por ejemplo, si la subcarpeta se llama “PDF”, la ruta desde el servidor sería www.argos.com/pdf/.

2. Una vez que el archivo se haya subido a la carpeta correspondiente, es fundamental verificar que la ruta de acceso o el enlace directo al documento funcione correctamente.

3. Para asegurarte de que el PDF se abra directamente en el navegador, solo necesitas enlazarlo correctamente en la página web. Para esto, se requiere crear el enlace HTML, por ejemplo:

href=”…”: Aquí se coloca la URL completa del archivo PDF.
target=”_blank”: Esto hace que el archivo PDF se abra en una nueva pestaña del navegador, permitiendo al usuario ver el documento sin abandonar la página actual.

4. Finalmente, antes de publicar el documento, es preciso revisar nuevamente que la URL funcione correctamente.

Botones

Botones primarios: son los más importante en la jerarquía visual y debe destacarse en la interfaz, ya que representa las acciones más relevantes para el usuario, como “Enviar”, “Compra ahora”, “Regístrate”, entre otros.
Botones secundarios: debe ser visualmente más discreto que el primario, pero igualmente claro para el usuario. Se utiliza para acciones de menor prioridad, como “Ver más detalles”, “Añadir a favoritos” o “Cancelar”.
A continuación se despliegan algunas indicaciones a tener en cuenta:

Botones laterales: Es posible que se quieran priorizar algunos canales, como plataformas de valor para el usuario o redes sociales. Para esto, se presenta la opción de emplear botones en el lateral derecho de la pantalla, Estos elementos deben ubicarse de forma fija en el lateral derecho de la pantalla, centrados verticalmente, y visibles durante la navegación para mejorar el acceso a recursos clave sin interrumpir la experiencia del usuario, manteniendo un mínimo de 3 botones y un máximo de 5. Para esto se recomienda:
- Color del botón: Azul (#071D49).
- Forma: Rectángulo con bordes redondeados al lado izquierdo (radio de 8 px).
- Dimensiones: 48 x 48 px
- Ícono: centrado, con un tamaño máximo de 24 px por 24 px.
- Animación: Cambio de tamaño al pasar el mouse (hover/expandido), cambiando el ancho, hasta 160 px en una duración sugerida de 0.3 segundos. De esta manera, aparecerá un texto visible: CTA o nombre de la plataforma, empleando la tipografía Trade Gothic LT Std, 14 px, color blanco (#FFFFFF).
- Espaciado interno: Horizontal de 12 px y vertical de 8 px.

En dispositivos móviles, su tamaño debe reducirse a 40 x 40 px con un tamaño de ícono de 20 px. Al dar clic sobre el botón, se desplegará su animación y, al hacer clic nuevamente sobre el mismo, se abrirá el link de redirección. Si se da clic sobre otro botón, el anterior se contraerá y el nuevo se desplegará.

Se recomienda que todos los botones del sitio web mantengan una apariencia gráfica coherente a lo largo de toda la plataforma. Estos deben tener una forma rectangular con bordes redondeados (radio de 8 px). Además, es fundamental garantizar su usabilidad y funcionamiento, asegurando que siempre redirijan correctamente a otras secciones o páginas del sitio.

Footer

Esta sección del sitio web ofrece mayor flexibilidad en su diseño en comparación con otras, ya que permite establecer un orden específico de los elementos según las necesidades de cada país. Por ejemplo, se puede priorizar la información de contacto o los accesos rápidos. A continuación, se presentan algunas recomendaciones a tener en cuenta durante su construcción:

Su diseño debe garantizar claridad, jerarquización y alineación visual con el resto de la identidad digital. Se recomienda tener dos líneas: una línea principal que concentre lo más relevante como contacto, información de la empresa, enlaces importantes, y accesos rápidos para el usuario; y una línea secundaria para ubicar información legal como Términos y condiciones y Política de Tratamiento de datos. La primera línea contará con las siguientes características:

Altura y dimensiones: 200 px para footers básicos con pocas columnas y 400 px para footers con múltiples columnas e información extensa (dimensiones aproximadas, ajustables según contenido). El ancho deberá ser del 100% de la pantalla, con un margen interno de 24 px en dispositivos móviles y 48 px en escritorio.
Colores: El fondo será gris (#707372); y el texto estará en color blanco (#FFFFFF) con un cambio a verde (#C4D600) al pasar el mouse encima de las opciones con hipervínculo.
Tipografía: Trade Gothic LT Std con alineación a la izquierda. Para títulos (por ejemplo, “Información Corporativa”, “Líneas de atención”), se utilizará un peso bold, tamaño 1.1 REM e interlineado de 1 em; mientras que las opciones contarán con un peso regular, tamaño de 1 REM e interlineado de 1 em.
Columnas: Se sugiere dividir el contenido en un máximo de 5 columnas, dividiendo la información por subtítulos, si es necesario, dejando un espacio entre las mismas proporcional al ancho de la pantalla, con el fin de aprovechar el espacio. Los textos que tengan como propósito dar la información en otra página web, así como los botones de redes sociales, deberán estar hipervinculados. Ejemplo de distribución de columnas:

- Soporte y contacto: Esta es la información que más se debe priorizar en esta sección, mostrando los principales canales de comunicación.
  – Preguntas frecuentes
  – Contacto
  – Localización de puntos de venta
- Información corporativa:
  – Quiénes somos
  – Únete a nosotros
  – Sostenibilidad
  – Noticias
- Sitios de interés
  – Argos ONE
- Redes sociales:
  – Botones interactivos para Facebook, Instagram, X, LinkedIn, TikTok, o las plataformas vigentes. Estos botones serán de 24×24 px con una separación entre íconos de 16 px, y estarán en color verde (#C4D600) con un cambio a blanco (#FFFFFF) al pasar el mouse.

Imagotipos: La columna de la derecha del footer se podrá destinar a ubicar imagotipos clave. En el caso de Colombia, se debe incluir el logotipo de Grupo Argos, indicando que Cementos Argos es una empresa que pertenece a esta filial, se sugiere que tal elemento contenga 120 px de ancho por 30 px de alto como medida estándar.

El logotipo de Dow Jones, que reconoce a la empresa como miembro del Índice de Sostenibilidad S&P Global, deberá ubicarse al lado derecho de la franja, con un tamaño de 300 px x 300 px de alto aproximadamente (estos tamaños pueden variar según las indicaciones de Dow Jones y su manual de marca, asimismo, su diseño deberá actualizarse anualmente, dependiendo de los resultados obtenidos en el índice). En el caso de Colombia, este estará ubicado abajo del imagotipo de Grupo Argos.

Para la segunda línea se tendrán en cuenta las siguientes características:

Altura y dimensiones: 60 px de alto y 100% de la pantalla de ancho, con un margen interno de 24 px en dispositivos móviles y 48 px en escritorio.
Colores: El fondo será blanco (#FFFFFF); y el texto estará en color gris (#707372).
Tipografía: Trade Gothic LT Std, regular, tamaño de 1 REM y alineación a la izquierda.
Contenido: Esta franja se destinará para mencionar principalmente textos legales como el copyright (“© 2025 Cementos Argos. Todos los derechos reservados”), Términos y condiciones, Política de tratamiento de datos, entre otros que puedan interesar al usuario. No debe superar las 5 opciones. Se dejará un espaciado horizontal de 30 px entre cada opción. Se sugiere el empleo de una línea vertical de 1 px de ancho en color gris claro (#E0E0E0) con una altura del 100% del texto, para garantizar una buena separación visual sin perder compactación. En caso de emplearse, la separación entre el texto y la línea divisoria será 10 px de margen interno a cada lado de la línea.

Optimizaciones

La optimización web no se trata solo de hacer que el sitio funcione rápido, sino también de asegurar que sea accesible, fácil de navegar, seguro y relevante para los usuarios.

Títulos: es uno de los factores más importantes para el SEO. Es lo primero que ve el usuario en los resultados de búsqueda y también es uno de los primeros elementos que los buscadores analizan para determinar la relevancia de la página, por lo que estos deben ser lo suficientemente descriptivos y contener las palabras clave que se desean posicionar en cada página. Se recomienda que estos tengan entre 50 y 60 caracteres, ya que los buscadores cortan los títulos más largos en los resultados de búsqueda.
Metadescripciones: son importantes porque son el texto que aparece debajo del título en los resultados de búsqueda. Un texto atractivo puede aumentar el CTR, o tasa de clics, lo que indirectamente mejora el SEO. Por esto, se recomienda:

- Describir el contenido de la página de manera clara y atractiva, incluyendo palabras clave relevantes.
- Debe tener entre 150 y 160 caracteres para no ser cortada en los resultados de búsqueda.
- Es recomendable usar frases de llamado a la acción, como “descubre”, “compra ahora”, “aprende más” para motivar al usuario a hacer clic.

Contenido de calidad: Este es uno de los factores más importantes para el SEO, ya que los buscadores valoran los sitios que proporcionan información útil y de calidad para los usuarios. En ningún caso deberá ser plagiado o copiado de otros sitios. Se recomienda incorporar más contenido multimedia dinámico, como videos e infografías, para facilitar la comprensión de temas complejos.
Actualización de plugins:

- Estos deben mantenerse actualizados, así que siempre que haya una nueva versión es recomendable actualizarla de inmediato, ya que estas incluyen mejoras de seguridad y correcciones de errores.
- Es importante que antes de actualizar un plugin se verifique que este sea compatible con la versión actual del CMS y con otros plugins ya instalados. Para esto se pueden realizar pruebas en un entorno de desarrollo para evitar problemas en el ambiente productivo.
- Si un plugin ya no se utiliza, debe eliminarse, pues cuantos más plugins se tengan, mayor es el riesgo de conflictos y puede aumentar el tiempo de carga del sitio.
- Siempre se debe realizar una copia de seguridad del sitio antes de realizar actualizaciones importantes, especialmente si los plugins afectan áreas clave como formularios de contacto o pagos.
Adaptabilidad a dispositivos móviles: Dado que la mayoría del tráfico web hoy en día proviene de dispositivos móviles, es fundamental una experiencia en celulares y tabletas, como se ha mencionado en otros capítulos de manera superficial. Para esto deben seguirse las siguientes recomendaciones:
- Las imágenes deben adaptarse al tamaño de la pantalla sin perder calidad, por lo que se sugiere usar el atributo srcset en HTML, el cual permite que el navegador cargue diferentes tamaños de una misma imagen según la resolución de la pantalla. Además, la carga diferida de imágenes y videos ayuda a que solo se carguen cuando sean visibles en pantalla.

- Los botones y menús deben ser lo suficientemente grandes y fáciles de tocar, evitando elementos interactivos que resulten difíciles de usar en pantallas táctiles.

Otras recomendaciones

Información nacional e inclusiva: Se debe promover el contenido que haga referencia a cada regional en los sitios web de cada país, resaltando las particularidades culturales, proyectos nacionales y logros destacados a nivel local. Esto no solo refuerza la identidad nacional, sino que también genera un vínculo emocional con los usuarios; por ejemplo, a través del empleo de uso de imágenes y videos realizados en la regional. Asimismo, deberán promoverse recursos e imágenes que apelen al factor inclusivo de la empresa, visualizando a personas de diferentes géneros, etnias, razas y capacidades diversas.

Animaciones: Podrían incorporar animaciones en elementos clave como clics, desplazamiento (scroll) y el cursor para hacer la experiencia más dinámica, sin comprometer la velocidad de carga del sitio. Para esto, pueden utilizarse técnicas de animación CSS y verificar la funcionalidad con herramientas como el análisis de Google Lighthouse.

Diseño inclusivo y accesible: Se debe procurar que los sitios web tengan un diseño inclusivo y accesible, garantizando que todo el contenido sea fácil de usar para personas con diferentes capacidades, sin importar su dispositivo o medio de navegación.
Las siguientes opciones son recursos que permiten tener un mayor grado de accesibilidad; se pueden incorporar como botones que faciliten agrandar texto, cambiar contraste, resaltar enlaces, ajustar el espaciado del texto, detener o reproducir animaciones, ocultar imágenes, ajustar tipografía que sea apta para dislexia, cambio de cursor, modificar altura de la línea, la alineación o la saturación.
Además, se pueden incluir herramientas como narración de texto (lector de pantalla), subtítulos en videos y opciones de traducción o adaptación de contenido.
Para el caso de la visualización en “Modo oscuro” se sugiere usar CSS variables para definir colores flexibles; asegurar que las imágenes, logotipos y textos sean legibles en ambos modos, implementar @media (prefers-color-scheme: dark) para cambiar dinámicamente y evitar invertir colores automáticamente, ya que puede afectar la calidad de imágenes.

Uso de inteligencia artificial y asistentes virtuales (chatbots): Los avances realizados por cada una de las regionales deben ser compartidos para que, en caso de ser útiles para otras, puedan ser aprovechados de manera efectiva.

Por ejemplo, en Colombia se dispone de un asistente virtual denominado Arturo. Aunque se podría mantener la misma interfaz gráfica para conservar la coherencia, el tono, el lenguaje y las respuestas pueden adaptarse según el contexto cultural y las necesidades locales de cada región.

Este tipo de herramientas resulta muy atractivo para los usuarios, ya que facilita la búsqueda de información y mejora su experiencia. Además, se pueden aprovechar las últimas tendencias en inteligencia artificial para optimizar la interacción, ofreciendo respuestas más precisas y naturales, e incluso integrando capacidades de voz para una mayor accesibilidad y comodidad.