Versiones
Cada versión es una landing guardada tal como quedó en su momento. Las últimas son v94 (Geist Serif, la landing en curso) y v95 (Timeless Serif), dos variantes vivas. La publicada es v50. La portada local está en v52. Aparte: el brandbook y el manifiesto.
-
v95
Timeless Serif: manifiesto con párrafos más separados y kerning más suelto
-
v94
Geist Serif: manifiesto con párrafos más separados y kerning más suelto
-
v93
Titulares y wordmark en Timeless Serif W457. El resto, igual que v92
-
v92
Lista para publicar: formulario real, metadatos, todo alojado en casa y clip de motion propio
-
v91
La ventana retro sube con su sección, sin desfase ni textos encima
-
v90
«criterio» en la serif, gorda y apretada, y titulares con menos kerning
-
v89
Cada sección es una ventana retro que se maximiza. Titular en dos líneas y menú a la derecha
-
v88
Titular en dos líneas y tres transiciones para elegir
-
v87
Titular nuevo, se entra por el visor de Tino, ojos cerrados al dormir
-
v86
La página baja la luz, Tino del pie se despierta, bento en bucle y terminal en pixel art
-
v85
Refes de criterio.design con el mismo alto, fotos en marco retro y caras en los comentarios
-
v84
Refes en formatos distintos, secciones como hojas, equipo con hover y bento nuevo
-
v83
Fuentes en el medio, importar de todo y manifiesto otra vez con el scroll
-
v82
Manifiesto negro con fotos, Tino presenta y tramado píxel a píxel
-
v81
Marco discreto, Tino camina y bento tipo spacefs
-
v80
Navegador antiguo, curva real y escritorio
-
v79
Pantalla curva, Tino de cine y Tino en la esquina
-
v78
Orden nuevo, bento y pie negro
-
v77
Elegir las referencias de la cinta
-
v76
La cinta: hero a la manera de Deimos
-
v75
Calma y menos secciones
-
v74
Tercera vuelta sobre spacefs: la lista de Andoni
-
v73
Muy parecida a spacefs: Geist Serif, menú, arenilla y Tino callado
-
v72
A la manera de spacefs: arenilla, un titular por paso y lista numerada
-
v71
Fondo plano, Eric, Alberto y Andoni, bento vivo y visor 3D
-
v70
La landing entera: titular con Tino, importación con el scroll y quiénes somos
-
v69
La web, orientada a mito.ai
-
v68
Tino se mete las referencias en la cabeza
-
v67
Aire, titular en dos líneas y producto apaisado
-
v66
Fondo plano, correo compacto y titular en una línea
-
v65
Tres fondos para elegir
-
v64
La nube de Tino: el producto manda
-
v63
Cielo a la manera de Ryo Takemasa
-
v62
Fondo en calma
-
v61
Prado pixel art, caras de Tino y menú de pasos
-
v60
Producto al día, mundo pixel art, escaneo y ratón
-
v59
Ajustes antes del producto nuevo
-
v58
Fondo sutil, Tino de frente y transiciones entre pasos
-
v57
Retro: botones, fondo tramado, correo y Tino que te mira
-
v56
Hero limpio: la importación dentro del producto
-
v55
El producto de primeras sobre la onda
-
v54
Paso de la foto al producto
-
v53
Cabecera al estilo Frontify y la mesa de Tino
-
v52
Titulares en Instrument Serif
-
v51
El recorrido, cabecera y secciones 1 y 2. No se guardó la página.
-
v50
Isotipo nuevo, palabra en texto y proporción áurea. La última publicada
-
v49
La parte de abajo del Casco refleja un suelo gris en vez de hundirse en negro. El plástico pasa a mate, con un poro fino que se ve de cerca y se apaga de lejos. La arcilla, con poro más marcado. La landing no cambia (el peluche sigue igual).
-
v48
Tino se dibuja a la resolución real de la pantalla (antes a la mitad en retina), con curva tonal y sombra de contacto cocinada en el modelo. El visor ya no flota: va a ras de la cara, con el pliegue del pelo más hondo y, en los materiales lisos, un hueco tallado alrededor.
-
v47
Nuevo material «Casco»: cromo espejo como el casco de Daft Punk, con su propio estudio de reflejos. El visor ya no tiene puntitos en el borde ni bandas en el reflejo, y su contorno sale suavizado (también en la landing).
-
v46
El importmap de la landing va antes de cargar módulos, hay un polyfill para navegadores sin importmaps y, si el 3D falla, sale el isotipo plano. La página de Tino pasa de 13 lienzos 3D a 2. Con ?diag en la URL se ve por qué falla en un móvil concreto.
-
v45
En la página de Tino se elige cómo apoya: la base redonda de siempre, una media o una plana fiel al isotipo (lados casi verticales y esquina pequeña). Al cambiarla, Tino se pone de perfil. La landing no cambia.
-
v44
La página de Tino tiene zoom: botones, barra, pellizco y tamaños de referencia (favicon 16 px, icono 32, menú 48, landing 190) para ver cómo se lee en cada sitio. La landing no cambia.
-
v43
Las orejas se doblan a lo largo y no desde la base, y la cabeza deja de hacer bultos al moverlas (medido: de 14,4 a 1,2). Titulares en Mersad 600 con interletrado del −5 %.
-
v42
Titulares en Mersad 600 (−3 %). Tino lleva las orejas de cápsula por defecto y en toda la web es de peluche blanco. En modo oscuro, Tino se ilumina como en una habitación a oscuras, la luz del visor llega más lejos por el pelo y el haz suma luz cálida en vez de salir gris.
-
v41
La landing prueba Mersad en los titulares (solo en local) y estrena la palabra «criterio» dibujada al estilo matic en el menú y el pie. El isotipo y el favicon vuelven a las orejas de palo en todas las páginas, y todas comparten cabecera: Brandbook, Versiones y Mascota.
-
v40
Dentro del visor pasan cosas (revisando, mirada, ecualizador, texto, lluvia, latido, onda), y al pasar la mano aparecen ojos en vez de curvarse. La luz del visor depende del color del peluche y en plástico ilumina de verdad. Las orejas reparten su tirón por la cabeza. Visor más alto y estrecho. Brandbook con la palabra matic y Mersad en titulares (solo en local).
-
v39
En el panel de Tino se cambian el material, el color y el fondo, y hay seis estilos de visor (cristal, CRT ámbar, LCD, LED, espejo dorado y holográfico). Los clics en las fichas ya funcionan. En reposo, el visor está revisando. Aparte, una prueba de la palabra «criterio» dibujada al estilo de la referencia matic.
-
v38
Página propia de Tino con seis orejas y seis visores para elegir, cada uno en su ficha. Las orejas acompañan más el movimiento y el visor sube un poco y se estrecha (también en la landing).
-
v37
Tino pasa a blanco por defecto (#F7F5F0, un blanco de peluche con una pizca de calidez), también en el brandbook y el manifiesto.
-
v36
La impresora suena como una de etiquetas real (ajustada por espectro a una grabación). Modo claro por defecto. Fuente de 643 a 35 KB, capturas a la mitad, la silla solo si hace falta, three.js y Tino precargados: la página pesa 1,2 MB (antes 2,1) y carga en 0,6 s en escritorio.
-
v35
El sonido de la impresora pasa a ser el de un motor paso a paso real: miles de pasos por segundo que hacen resonar la carcasa, el zumbido de los engranajes, el roce del papel y el golpe de parada, siguiendo la velocidad de la tira.
-
v34
Sonido sintetizado, con un botón de altavoz en el nav: Tino balbucea al hablar, la impresora hace tic-tic al tirar del papel, el escaneo zumba y al concluir suena un ding. Apagado por defecto.
-
v33
La curva del papel sale continua: cada franja se deforma a su trapecio exacto en perspectiva y su sombra es un degradado, así que ya no hay rendijas ni escalones.
-
v32
La impresora pierde el naranja: cuerpo negro con luz, mando y nombre en blanco.
-
v31
La impresora pasa a negra y se acerca a la hoja que escanea Tino. La tira entra por la izquierda curvada, en un arco que se aleja en profundidad, y sale plana por la derecha.
-
v30
Las referencias salen de una impresora color ascua en una tira de papel continuo, con agujeros de arrastre y troquel, que avanza a golpes hacia la derecha; la hoja nueva se imprime a franjas al salir. Tino, algo a la derecha y en diagonal, escanea la que tiene delante.
-
v29
Las referencias entran en un monitor moderno de bisel fino y pie de aluminio, y Tino las escanea de tres cuartos, con el visor encendido a la vista. Tino algo más pequeño y sin etiqueta. El brandbook pasa a Switzer, con el isotipo en claro sobre el tablero y los materiales en dos filas.
-
v28
El visor abomba el doble, la pantalla queda a cierta profundidad bajo el cristal y el pelo monta sobre el canto, como cosido. Tino lleva en la espalda una etiqueta de tela con su nombre, que se ve en el hero. Fuera el botón del hero.
-
v27
El visor es más pequeño y abomba como una lente: se levanta un poco de la cara y su canto coge la luz. En reposo, un brillo dentro del visor mira hacia el cursor; y al sonreír se le sonrojan los mofletes.
-
v26
Sin ranura tallada: la cara es una superficie continua y el visor una piel pegada a ella que solo existe dentro de la forma del gesto. El pelo crece hasta ese borde, así que hueco y visor se mueven a la vez al cerrar, sonreír o partirse en tres.
-
v25
El hueco del visor se mueve con él: el pelo crece sobre el cristal fuera de la forma del gesto, así que al cerrar los ojos bajan y suben dos párpados de pelo a la vez. El isotipo sobre negro va en claro, también en el favicon. Los materiales sin pelo salen lisos, sin facetas en las orejas ni en las esquinas.
-
v24
El visor vuelve a ser una banda de cristal negro que rodea la cara: se cierra en una raya, se curva en sonrisa, se parte en tres lentes y piensa con segmentos ámbar. El brandbook enseña a Tino de peluche con sus siete materiales.
-
v23
Modo oscuro por defecto y claro con un botón; fuera el degradado de fondo. Tino sin silla y más grande. Orejas de conejo en el peluche y en el isotipo y el favicon. El visor vuelve a expresar: se cierra, sonríe, se parte en tres ojos y su luz tiñe el pelo.
-
v22
Tino pasa a ser un modelo de Blender con pelo por capas en three.js: una sola pieza, orejas que nacen de la cabeza y doblan en tres tramos, el visor metido en la cara con su pantalla animada, y su silla de carcasa también modelada.
-
v21
Tino pasa a crema, con textura de peluche, cúpula redonda como el isotipo y un visor más estrecho. El isotipo y el favicon van siempre en oscuro. El hero dice qué es y lleva su botón. Sin WebGL la página ya se ve, la entrada se puede saltar y no se repite en la misma visita, y las capturas pasan a AVIF.
-
v20
Tino solo cambia de lado al pasar de una sección a otra: delante de la tele en el centro, el producto abajo a la izquierda y del bento al pie a la derecha. Entre secciones se queda donde está.
-
v19
Al bajar, Tino se baja de la silla de un salto y sale directo a su sitio. En el producto y el bento se queda en un solo sitio, abajo a la derecha, y solo cambia de frase.
-
v18
La carga es Tino entrando a saltitos hasta su silla, que le espera vacía delante de la tele, mientras dice «Otro día más en el tajo…». Se sienta y entonces sale el hero y empieza a escanear. Al bajar, primero se levanta de la silla y luego va a su sitio; con el scroll apenas se sacude.
-
v17
Delante de la tele Tino se sienta en una silla de carcasa blanca con patas de nogal y cruceta de acero, dentro del mismo 3D, y da un saltito al sentarse. El menú baja 24 px y su píldora flotante toma el radio de sus botones más su margen; la misma regla se aplica al producto, al bento y al brandbook.
-
v16
El haz de rayos X nace en la ranura del visor de Tino y se abre en abanico hasta la pantalla, con bordes de luz, rayos que barren, polvo flotando y una raya caliente donde toca. Ya no se sale por las esquinas redondeadas de la referencia.
-
v15
La carga dura menos: Tino escribe más rápido y se posa antes. El subtítulo se acorta para quedar por debajo del titular. El nav ya no corta el fondo: arriba es transparente y, al bajar, se recoge en una píldora de cristal flotante y más estrecha.
-
v14
En el hero se ven tres referencias; la nueva entra por la izquierda y empuja a la del centro, y Tino las recorre por dentro. El fondo es de toda la página y se mueve al bajar. El modo oscuro del producto pasa a un musgo de noche y gana la vista Presentación. Tino ronronea dormido y estrena material de plástico.
-
v13
La carga es solo Tino: se presenta, se posa delante de la tele y entonces sale el hero, con fondo cálido y el nombre gigante detrás. Dice en voz alta lo que ve en cada referencia. El producto está calcado de la aplicación (Tablón, Pulido y Sistema). Un bento de tres pasos animados, un visor digital para pedir invitación y un pie tranquilo.
-
v12
La mascota te saluda al cargar y se sienta delante de la tele a leer referencias. Al bajar se apoya en el borde de la pantalla y va contando el producto con bocadillos que se escriben. El producto es una sola ventana con sus tres pestañas. Después, un bento con lo que hace, un visor para pedir invitación y un pie con el nombre a todo lo ancho. El manifiesto tiene página propia.
-
v11
Secciones independientes y mucho aire. En el hero la mascota tiene su banco: las referencias pasan por un marco, las lee con rayos X y salen con sus conclusiones. La carga es la propia mascota en 3D, que luego va a su sitio. Titular fino en PP Frama, también en el nombre. Brandbook y mascota en una sola página.
-
v10
El cyberbunny pasa a ser un volumen de verdad: gira, cabecea, tiene orejas con física, visor rehundido y materiales con reflejos. En el hero escanea referencias con rayos X y deja sus conclusiones. Al bajar, el producto cambia de un golpe y es la mascota la que va enseñándolo. Titular nuevo, PP Frama a prueba y pantalla de carga.
-
v9
En el hero el cyberbunny salta de referencia en referencia y las lee con el visor. Su visor tiene pantalla propia. Al pasarle el cursor se peina el terciopelo. Brandbook nuevo con banco de materiales: flocado, arcilla, cromo, cristal e iridiscente.
-
v8
La landing pasa al sistema de diseño de Criterio (papel, tinta, ascua, Bricolage Grotesque y Archivo). La mascota es ahora un cyberbunny de flocado naranja: dos orejas y un visor. En el cierre se sube a la tecla y ayuda a pulsarla.
-
v7
Del pulido se pasa al sistema en la misma ventana, sin texto entre medias: tablón, pulido, sistema y tecla son un solo recorrido. El texto del porqué va después, entero. El menú tiene un desplegable con las versiones, el brandbook y T-NO. La guía lleva el isotipo aprobado.
-
v6
El pulido se convierte en el sistema del producto y el sistema se encoge hasta ser una tecla enorme para pedir invitación. Las referencias del hero van cambiando. T-NO tiene nombre grabado, trece vistas y un corte interior. Titulares en Söhne, sin selector. Con brandbook.
-
v5
La v4 con la identidad del paquete «Criterio para Claude»: logo aprobado en SVG, paleta sin cremas (tinta, naranja, cielo, cian, lienzo neutro y oscuro de app) y Archivo servida desde el propio paquete. Tino, la mascota, pasa a blanco con el ojo en el cian de marca.
-
v4
Desde arriba se ven referencias reales del producto. Los cursores del equipo las meten en el tablón, donde se comentan con chinchetas y se clasifican; de ahí vuelan al pulido, se vota en equipo y la mayoría decide si van al sistema o al inbox. La mascota se ve desde siete ángulos y cruza la pantalla. Titular más pequeño y selector para probar tipografías.
-
v3
El pulido recrea la vista real del producto: una hélice de referencias en 3D que gira con cada voto. Botones retro con bisel, como en la lámina de componentes. La mascota cruza la pantalla y gesticula con el scroll. Colores reales de la marca, leídos del producto.
-
v2
Mascota nueva, hecha a partir de la imagen de Andoni: un robot-monitor con ocho estados que acompaña todo el recorrido desde la esquina. Capturas reales del producto en lugar de las piezas dibujadas.
-
v1
Primera prueba con el archivo tal cual. El agente tuvo que elegir fuentes, dibujar la mascota y escribir el texto de los bocadillos. Trece correcciones anotadas para el producto.
