(Marca y web)
Vanguard Academy
Marca y web para una escuela de ciberseguridad en español.
El reto
Una academia nueva que tenía que sonar cercana en un sector técnico y frío, sin perder rigor.
La solución
Una marca que recuerda a un videojuego, con niveles, retos y estética cyberpunk, sobre un sistema ordenado que aporta el rigor.
El resultado
Una marca que se entiende de un vistazo y una web que ya recoge la lista de espera de los primeros alumnos.
(01)
Identidad
Una etiqueta rota que firma como un atacante.
La estética sale de los neones, los glitches y los terminales hackeados. El símbolo es una etiqueta de cierre rota, la firma que deja quien entra en un sistema, y en su espacio negativo se esconden la V y la A.
Entregables Dirección de arte · Logotipo y versiones · Paleta y tipografías · Iconografía · Manual de marca
Un fondo casi negro y un verde que solo aparece donde hay acción. Los acentos ordenan el resto.
Principales
- Matrix GreenAcción#03E21D
- Carbon BlackFondo#0B080C
- Carbon WhiteTexto#FAFAFA
Acentos
- Electric BlueAcento#3B9EFF
- Cyber PinkAcento#EC4899
- Amber OrangeAcento#E36B02
- Edgerunner PurpleAcento#8B5CF6
Titulares
Orbitron
Para los que entran primero
Interfaz
Barlow Semi Condensed
Ciberseguridad aplicada al mundo real
Texto
Exo 2
Laboratorios, retos y un portfolio verificable
Código
Courier New
> acceso: ok
(02)
Aplicaciones
La marca fuera de la pantalla.
Tarjetas y merchandising para el equipo y la comunidad, siempre sobre oscuro y con el verde justo.
Entregables Tarjetas de visita · Merchandising
(03)
Web
Una landing hecha para convertir.
Es estática, sin CMS, y todo el recorrido lleva al formulario de acceso anticipado. Como es una academia de ciberseguridad, la web también tenía que ser segura, así que revisamos sus vulnerabilidades. Y es accesible: se puede agrandar el texto o cambiar a una fuente para dislexia.
Entregables Landing page · Diseño UX/UI · Desarrollo web · Captación de leads · Seguridad · Accesibilidad
1 objetivo
Que quien llega deje sus datos en el formulario de acceso anticipado.
Únete
Siempre a mano en el menú y en la portada, y lleva directo al formulario.
Segura
Revisión de vulnerabilidades, cabeceras de seguridad estrictas y formulario protegido contra bots.
Estática
HTML, CSS y JavaScript propios, sin CMS ni plantillas.
Dislexia
Tamaño de texto ajustable y fuente Sylexiad en todas las páginas.
100
Accesibilidad
Nota de Google Lighthouse: contraste, etiquetas y teclado en orden.
Desplázate dentro de cada pantalla
Ver web en vivo ↗ (se abre en otra pestaña)“El branding nos ha sorprendido. Habéis conseguido que algo visualmente simple tenga un trasfondo muy potente. Lo del closing tag roto, la V y la A escondidas en el espacio negativo, el concepto de la firma del atacante… todo encaja y tiene mucho sentido con lo que es Vanguard.”
Blanca Amorim, CEO y cofundadora · Vanguard Academy
Equipo y créditos
| Servicio | Lidera | Apoyo |
|---|---|---|
| Logotipo e iconografía | Odei Siruela | — |
| Branding | Odei Siruela | — |
| Diseño del manual de marca | Jota Reyes | — |
| Dirección de arte | Odei Siruela | Xuri FentonOddity |
| Diseño y desarrollo web | Odei Siruela | — |
¿Hablamos?
Cuéntanos tu proyecto.
Puede ser una marca, una web, fotos o todo a la vez. Te escuchamos y te decimos cómo lo haríamos.