passer.app
El encargo
Una app de buses, sin marca todavía.
Cliente
Startup de Costa Rica. Una app para ver el bus en tiempo real, con pago digital del pasaje.
Problema
Partían de cero. No había logo, color ni tipografía. Sin eso no podían diseñar la app ni presentar el producto.
Entrega
Logo, isotipo, paleta, tipografía, componentes de interfaz, plantillas de redes. Todo reunido en un manual de marca en línea.
01 — Concepto
Tu ciudad, en un toque.
Passer conecta a cada pasajero con su bus en tiempo real. El nombre nace de pasar: el flujo constante de gente que se mueve por la ciudad. El isotipo —una P de trazo continuo— dibuja ese recorrido: una ruta que sale, gira, llega. Cercana, rápida, confiable.
02 — El símbolo
Un ícono, todo un sistema.
El isotipo es la P de Passer resuelta como ícono de app: el ojal superior sugiere una parada, un giro de ruta, un punto en el mapa. Funciona en sólido, en degradado, en monocromo, siempre reconocible en la pantalla de inicio.
App
Sólido
Acento
Oscuro
Claro
Mono
03 — Construcción y logotipo
Isotipo y logotipo, corregidos.
La P tenía tres grosores distintos. La r subía sobre la altura común. Reconstruí las dos piezas con un solo módulo.
Isotipo: la P.
Antes contra después. Lila: el archivo original. Línea: trazado nuevo.
Construcción. Retícula de módulo u. Dos elipses con el mismo centro.
Final. Dos arcos, el resto rectas.
Un solo grosor
Asta 60,7. Barras 59,7 y 59,5. Ahora todo mide u = 62.
Lienzo
5⅛ u de ancho por 6 u de alto. Barras en 0, 3½ y 4½ u.
Ojal
Elipse exterior 2⅛ u × 2¼ u. Contraforma u × 1¼ u. Antes eran curvas a pulso.
Compensación óptica
La panza mide 1⅛ u en su punto más ancho. El original ya la engordaba: 71 contra 60. Se conserva.
Logotipo.
Antes contra después. Lila: el anterior. Línea: trazado nuevo, con línea base y altura de x.
Antes. La r sube 1,65 u sobre la altura de la P.
Después. P y r comparten altura y línea base.
Sólido. Púrpura sobre claro.
Negativo. Blanco sobre Púrpura.
Gradiente fondo. Púrpura a magenta, a 135°.
Gradiente logotipo. El gradiente recorre la palabra completa.
P nueva
La misma del isotipo reconstruido, a escala del logotipo. Módulo u = 44,6.
Espaciado
23,2 u entre todas las letras. Antes iba de 22,8 a 23,5.
Sin tocar
La a, las s y la e quedan como estaban.
Gradiente
#5F1B87 a #CC0D5A, a 135°. El mismo del manual.
Área de respeto.
Altura de x. El aire alrededor del isotipo equivale a la altura de x. Se lee desde un favicon de 16 px hasta una valla.
04 — Paleta
Cromática
Color principal
Púrpura
#5F1B87
Magenta
#CC0D5A
Oscuro
#2E2E2E
Claro
#F7F7F7
Papel
#FFFFFF
05 — Tipografía
Aa
Roboto Condensed
Titulares · Interfaz
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz 1234567890
Moverse en tiempo real.
Aa
Ubuntu
Texto · Párrafos
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz 1234567890
Tu bus, siempre a la vista.
06 — Aplicaciones
La marca en la app.
El sistema aplicado a la experiencia real: buscar una ruta, seguir el bus en vivo, abordar con el boleto digital. Color, tipografía, iconografía trabajando juntos en pantalla.
9:41
Hola, Ana
¿A dónde vamos hoy?
Origen
Mi ubicación
Destino
Terminal Norte
CasaTrabajoRecientes
Próximas salidas
Ruta 42
Centro → Norte
Ruta 18
Sur → Centro
Ruta 7
Este → Terminal
9:41
Av. Libertador · 12 paradas
Ruta 42 · En camino
Tu parada: Av. Libertador
4
min
CentroPlazaTúNorte
9:41
Boleto digital
Centro
08:30
Norte
09:05
PSR · 42 · 8F3K9
App de transporte urbano
hola@passer.app · passer.app
+58 424 000 0000
+58 424 000 0000
Buses · Rutas · Boletos
Iconografía
07 — UI Kit
Elementos base.
Componentes fundamentales de la interfaz de Passer: botones, campos, chips, switches, badges.
Botones
Buscar busesVer rutasCancelar
Campos
Origen
Mi ubicación
Destino
Terminal Norte
Chips
CasaTrabajoRecientes
Switches
Badges
En vivoNuevo4 min
Progreso
08 — Social media
La marca en redes.
Un sistema de plantillas para feed: logo, degradado, tipografía condensada, mensajes cortos. Una misma voz en cada pieza.
Passer
Tu bus,
en tiempo
real.
en tiempo
real.
passer.app
Llega
a tiempo,
siempre.
a tiempo,
siempre.
Moverse
es la ciudad.
es la ciudad.
Gracias
Diseño por dequisna · dequisna.uno