BrBPO — Marca, sitio y Academy

Cliente

BrBPO

Servicios

institutional, branding

Año

2024 — 2026

Rol

Manual de marca, sitio y Academy

Stack

WordPress · Elementor · PHP · JavaScript · CSS3 · Moodle · GitBook

Dar a una empresa que actúa en varios sectores una marca que vale igual en cualquier pieza, y llevarla al sitio, donde clientes corporativos y gobierno conocen las soluciones, y a la Academy, donde los colaboradores se capacitan.

Qué hicimos

En el manual de marca, organizamos la identidad en cuatro capítulos: logo, con grilla de proporciones, área de respeto, tamaño mínimo y usos incorrectos; tipografía, con Roboto, Open Sans y Montserrat; colores, con el verde #346A61 y el grafito #2F3335 al frente de seis secundarios; y aplicaciones. El sitio institucional es WordPress con Elementor, con páginas de soluciones, socios y certificaciones y un formulario de contacto con consentimiento de privacidad; las páginas especiales, como la de blockchain, están escritas en código en un plugin propio que convive con Elementor. La BrBPO Academy funciona en Moodle con el tema Boost Magnific, en el verde y las fuentes del manual, con calendario, catálogo de cursos, acceso de visitante y manuales por perfil, de alumno, profesor y moderador, publicados en GitBook.

Elementor en las páginas institucionales, código en un plugin propio en las especiales, el verde del manual en Moodle.

Construcción del logo

Cada medida sale del propio logo: el área de respeto se cuenta en x, a partir del dibujo, y no de un margen fijo.

Identidad

Dibujamos el logo sobre una grilla: proporciones, área de respeto y un mínimo de 50 px, para sostenerse en cualquier pieza.

Tamaño mínimo
Tamaño mínimo50 px o 12 mm: el menor tamaño en que el símbolo se sostiene.
Usos incorrectos
Usos incorrectosSeis distorsiones que el manual prohíbe.

Sistema

Tres familias en tres niveles, Roboto, Open Sans y Montserrat, y dos colores al frente: verde #346A61 y grafito #2F3335.

TipografíaRoboto, Open Sans y Montserrat: primaria, secundaria y terciaria.
Roboto
RobotoRoboto, la tipografía primaria.
Tipografía en display
Tipografía en displayRoboto Black Italic en la apertura de capítulo.
PaletaVerde #346A61 y grafito #2F3335 como principales; seis secundarios y cuatro neutros.
El sistema en una hoja
El sistema en una hojaEl logo sobre su panel, Roboto, los colores principales y los secundarios.

Aplicaciones

Elegimos cerrar el manual con la marca en uso, del afiche al uniforme: cada regla de las páginas anteriores, aplicada.

AplicacionesAfiche, celular, flota, papelería y uniforme.
De la página al objeto
De la página al objetoSobres, membrete, calendario y uniforme.

Producto

En el sitio, cada solución tiene tarjeta y página; en la Academy, Moodle viste el verde y las fuentes del manual.

En el celular

En el celular

En el celular, la navegación pasa a un menú y el botón de contacto queda siempre a la vista arriba.

Soluciones en el celular

Soluciones en el celular

Las soluciones, de servicios gestionados a consultoría de TI, se vuelven tarjetas apiladas, cada una con su página.

La home completaLa home del hero al pie: diferenciales, la franja de blockchain, socios, soluciones y sectores atendidos.
BrBPO Academy

BrBPO Academy

La BrBPO Academy es la plataforma de capacitación de los colaboradores: Moodle con el tema Boost Magnific, en el verde #346A61 y en Montserrat y Roboto.

Calendario
CalendarioLínea de tiempo de actividades y calendario por curso.
Acceso
AccesoInicio de sesión con la marca de la Academy y acceso de visitante a los cursos que lo permiten.
Documentación
DocumentaciónManuales del alumno, del profesor y del moderador, publicados en GitBook.

Resultados

  • Manual de marca v1.3: logo, tipografía, colores y aplicaciones

  • Sitio en WordPress y Elementor, con páginas especiales en código en un plugin propio

  • BrBPO Academy en Moodle, con el verde y las fuentes del manual

  • Manuales de la Academy por perfil: alumno, profesor y moderador

Créditos

Manual de marca
Ressolv
Sitio
Ressolv
BrBPO Academy
Ressolv

Siguiente proyecto

Patrick Anderson — Portafolio del fundador