Liberman GonzalezProduct designer · Design engineer
ES / EN

Lab · Estudios de interacción

Desarmar, construir y llevar más allá

Cada estudio parte de una técnica que se ve en los sitios y productos que admiro. La desarmo, la escribo con mi propio código y la pruebo donde no nació: en un producto que alguien usa ocho horas al día o en una marca distinta.

Cómo está hecho cada estudio

  1. 01

    El patrón

    Dónde se ve, qué problema resuelve y por qué funciona.

  2. 02

    Cómo funciona

    Qué se anima, qué lo dispara y cuánto cuesta.

  3. 03

    Mi versión

    Código propio a partir del análisis, con la demo en vivo.

  4. 04

    Más allá

    Movimiento reducido, rendimiento y el traslado a otro contexto.

La ruta

  1. Bloque 1

    Scroll y movimiento

    La base: todo lo demás se apoya en cómo se mueve la página.

    1. 01Smooth scroll y parallaxPróximamente
    2. 02Texto que se revela con el scrollPróximamente
    3. 03Botón magnético y cursorPróximamente
    4. 04Transiciones de páginaPróximamente

    Sitio conceptoLanding de una marca ficticia

  2. Bloque 2

    Galerías e imagen

    Cómo se presenta el trabajo de otros: proyectos, productos, fotografía.

    1. 05Galería al pasar el cursor
    2. 06Zoom parallaxPróximamente
    3. 07Tarjetas que se apilanPróximamente
    4. 08Imágenes que se deslizanPróximamente

    Sitio conceptoSitio de un estudio creativo

  3. Bloque 3

    SVG

    Curvas y trazos: de la carga de una página a una gráfica.

    1. 09Curva de cargaPróximamente
    2. 10Morph de SVGPróximamente
    3. 11Trazo con el scrollPróximamente
    4. 12Menú curvoPróximamente

    Sitio conceptoLanzamiento con narrativa

  4. Bloque 4

    Pixel, canvas y 3D

    Lo que el DOM no alcanza: miles de puntos, shaders y objetos.

    1. 13Transición de pixelesPróximamente
    2. 14Distorsión de imagenPróximamente
    3. 15Shader de ondasPróximamente
    4. 16Objeto 3DPróximamente

    Sitio conceptoEl momento firma de este portafolio

Estudios

  1. 14 de oct de 20264 min de lecturaGalerías

    Atelier Umbral: una galería donde cada proyecto trae su luz

    Diseñé y programé el hero de un estudio de interiores que no existe: el título entra por una máscara, doce imágenes crecen en el centro y se reparten, y al pasar sobre cada proyecto la página toma su luz. Después lo llevé más allá: teclado, pantalla táctil, movimiento reducido y una intro que solo anima transform.