Caso · Proyecto propio
La identidad, decidiéndose.
Identidad de marca y diseño de movimiento. Símbolo, wordmark y la animación que los explica.
El reto
Una marca que se llama Webland tenía que explicarse sin un párrafo que la explicara. El símbolo ya era una red de nodos, pero quieto no dice nada: hay que verlo formarse para entender que la W es el resultado de unas conexiones y no un dibujo bonito. El encargo real no era animar un logotipo —eso es decoración— sino encontrar qué historia contaba la marca cuando se movía, y contarla en menos de seis segundos.
Tres decisiones
Cada una dice qué se descartó y por qué. Aquí es donde el criterio se demuestra en lugar de declararse.
-
Los nodos son la marca, no un adorno encima de la marca.
Los cinco puntos que se acomodan no se colocaron a ojo: son los centros reales de los cinco círculos que forman el símbolo, extraídos del propio archivo del logotipo. Por eso la red no aterriza cerca de la W: aterriza sobre ella, con desviación cero, y la resolución se lee como que la figura estaba ahí desde el principio y no como una coincidencia afortunada.
Se descartó dibujar los nodos a mano sobre una captura del logotipo. Habría bastado para que se viera bien en una pantalla y habría fallado en todas las demás, porque el símbolo escala y los puntos inventados no.
El símbolo con sus cinco centros. Las coordenadas están en unidades del propio SVG. Si el logotipo cambia, hay que volver a extraerlas.
-
Primero se quita. Después se acomoda.
La versión larga empieza como empieza cualquier proyecto: un mar de cosas conectadas con todo y nada en su sitio. De ahí sale algo que sirve, y sale porque alguien decidió qué se queda. Por eso el acto que manda no es el acomodo sino el descarte, y arranca 150 ms antes. Entre que el mar se apaga y aparece el primer trazo hay un instante en que no quedan más que los cinco, sin línea todavía. Ese silencio es la pieza.
Se descartó el orden natural —acomodar y después limpiar— porque cuenta otra cosa: que la W ya estaba y solo había que quitarle el polvo de alrededor. Es justo lo contrario de lo que hacemos.
- El mar 0.00–1.25
- Descarte 1.25–1.95
- Acomodo 1.40–2.30
- Los cinco solos 2.30–2.40
- Conexión 2.40–2.95
- Resolución 2.95–3.60
- Respiro 3.60–4.05
- Firma 4.05–5.92
Los ocho tiempos, a escala. El descarte empieza antes que el acomodo y los dos se solapan. En rojo, los dos momentos que sostienen la lectura; en gris, los dos silencios.
-
La W se construye. El nombre se asienta.
El armado va en tiempos de 450 a 660 ms: es mecánica, es trabajo, y cada acto para en seco. El nombre entra en 1.45 s —más del doble que el acto más lento— con una curva de cola muy larga y después de un respiro de 450 ms. Esa caída de ritmo es lo único que le da el protagonismo al wordmark, y tiene que ser obvia: si hay que fijarse para notarla, no está haciendo su trabajo.
Se descartaron las curvas con rebote. Ninguna de las cuatro de la marca rebasa su destino: el rebote se lee como aplicación simpática y esta marca no lo es. Viven en la hoja como
--mov-independiente,--mov-atraccion,--mov-resoluciony--mov-firma, y valen para cualquier pieza futura, no solo para esta.- Dispersión 450 ms
- Atracción 540 ms
- Conexión 660 ms
- Resolución 640 ms
- Firma 1450 ms
La firma contra el armado. 2.2 veces el acto más lento. Es la diferencia que convierte una secuencia de entradas en una frase con final.
Lo que se entregó
- Símbolo, wordmark y lockup en vector, con sus variantes en blanco, negro y negativo
- Familia de iconos y favicon derivados del símbolo reducido
- Cuatro curvas de movimiento como tokens de la hoja de estilos, no como ajustes de una pieza
- Dos versiones de la animación: una de 4.8 s para la retícula y una de 5.9 s que abre «Cómo trabajamos»
- Un archivo suelto y autónomo para compartir por correo o proyectar, sin dependencias
El resultado
La animación no está en el hero, y esa fue la última decisión. Abre «Cómo trabajamos», donde el copy que la rodea ya le dio el significado: el titular dice «primero se decide, después se dibuja» y la pieza lo hace en pantalla con nuestra propia marca. En el hero se habría visto bonita y no habría dicho nada, porque el wordmark entra en el segundo cuatro y ahí ya nadie está mirando.
Cualitativo por ahora, como el otro caso. Lo que sí es medible: la pieza pesa 2 kB comprimidos sobre el resto del sitio y no arrastra una sola dependencia.