01
Identidad para pantallas
Cómo se comporta el logotipo en cada tamaño, área de respeto y versiones para favicon y cabecera.
Diseño · 02.4
Identidad que sobrevive a la pantalla.
La mayoría de las identidades se crean para imprenta y solo las revisa quien tiene que llevarlas a una web. Nosotros diseñamos la marca donde va a vivir: en tamaños pequeños, sobre interfaces oscuras, dentro de componentes y en movimiento.
64px
40px
24px
16px
ease-in-out · 400ms
01 / En qué trabajamos
En qué trabajamos.
Identidad y motion, siempre diseñados sobre una superficie real.
02
Sistemas de tipografía y color
Una escala tipográfica que funciona en web y en interfaz, con el color definido por función.
03
Dirección de imagen y arte
Reglas escritas para fotografía, ilustración e imagen generada que otros puedan seguir.
04
Motion
Transiciones, apariciones y microinteracciones especificadas con duración y curva.
02 / incluido
Qué incluye el trabajo de marca.
Todo se prueba en una pantalla real antes de aprobarse.
Probado a tamaño real
Revisado a tamaño de favicon, en cabeceras, sobre fondos oscuros y junto a texto, en un dispositivo real.
Color por función
Colores de fondo, superficie, borde, texto y señal.
Tipografía que rinde
Elegida por su rango de pesos, su legibilidad en tamaños pequeños y su coste de carga.
Motion con reglas
Duraciones y curvas con nombre, reutilizables.
Alternativa de movimiento reducido
Una versión estática de cada animación.
Aplicado, no solo especificado
Se entrega funcionando en páginas reales.
03 / qué vigilar
Dónde falla el trabajo de marca en pantalla.
Cinco problemas habituales en identidades que nunca se diseñaron para un navegador, y cómo los evitamos.
×Un logotipo ilegible por debajo de 40 px.
Una versión reducida diseñada para tamaños pequeños.
×Una paleta sin superficie oscura definida.
Una paleta completa para modo oscuro desde el inicio.
×Una tipografía display con un solo peso, de modo que la jerarquía depende solo del tamaño.
Familias con rango suficiente para titulares, interfaz y texto.
×Motion descrito como una sensación en lugar de una duración y una curva.
Una duración en milisegundos y una curva con nombre para cada animación.
×Un manual en PDF que nadie abre, en lugar de componentes utilizables.
Las reglas viven junto a los componentes donde se usan.
04 / cómo funciona
Cómo funciona.
Así trabajamos normalmente. El presupuesto fija las fechas reales antes de empezar.
Dirección
Dónde debe situarse la marca, con qué compite y dos o tres direcciones mostradas sobre una página real. Entregables: opciones de dirección y una decisión.
Sistema
Marca, tipografía, funciones de color, reglas de imagen y vocabulario de motion como recursos utilizables. Entregables: sistema de marca y biblioteca de recursos.
Aplicación
Aplicado a las superficies clave (web, producto, redes sociales) para demostrar que las reglas se sostienen. Entregables: diseños aplicados y set de exportación.
Directrices
Escritas junto a los componentes, no en un documento aparte. Entregables: guía de uso y archivos fuente originales.
05 / preguntas
Preguntas
Hacemos trabajo de identidad para resolver problemas de pantalla, no naming, investigación de posicionamiento ni estrategia desde cero. Para eso le recomendamos un estudio especializado.
Normalmente sí. El objetivo es ampliarla hasta convertirla en un sistema que funcione en pantalla. Si el problema es la propia identidad, se lo diremos antes de que pague por implementarla.
Entregamos lo necesario para imprenta, como vectores y especificaciones de color, pero diseñamos para pantalla. Packaging, señalética y gran formato quedan fuera del alcance.
Entregamos prototipos, especificaciones y exportaciones Lottie cuando encajan. El motion complejo suele salir más barato construido en código a partir de una especificación.
Cuando la gente se fija en la animación en lugar de en el mensaje. Cada página tiene una idea de motion clara y el resto permanece quieto.
06 / también en diseño
El resto de Diseño.
Enséñenos qué está diseñando.
Descríbanos el proyecto en unas líneas. Le respondemos con un plan, un calendario y un presupuesto cerrado, en un día laborable.