Kiyoshi Flores
El sitio de un diseñador tiene que estar a la altura de lo que muestra
De los nueve trabajos que enseñamos, este es el único que nos encargó un cliente de verdad. Kiyoshi Flores Cruz es diseñador digital y necesitaba lo más difícil de hacerle a un creativo: un sitio que no le compita a su obra y que igual se note que está bien hecho.
- Construido con
- Astro + Tailwind 4 + GSAP
- Páginas
- 1
- Piezas exhibidas
- 18
Este sí es un cliente
Kiyoshi Flores Cruz existe, nos contrató, el sitio está publicado y lo usa. Es el único caso así entre los nueve trabajos que mostramos: los otros ocho son ejemplos nuestros, con marca inventada, y cada uno lo dice en su ficha. Hacemos la diferencia explícita porque un portafolio lleno de trabajos propios disfrazados de clientes es exactamente el tipo de cosa contra la que escribimos todo este sitio.
El problema que resuelve
Un diseñador que busca trabajo o encargos se juega todo en un enlace. Quien lo abre no lee: mira treinta segundos y decide. En esos treinta segundos tienen que caber su obra, su nivel y su manera de mirar, y el sitio tiene que desaparecer para que eso se vea.
La tentación con un cliente creativo es al revés: llenar el sitio de efectos para demostrar que sabemos. Aquí la decisión fue la contraria. Fondo oscuro que hace que los renders y los empaques brillen, tipografía con carácter para los títulos y nada más, y el movimiento puesto al servicio de ir descubriendo la obra a medida que se baja. El sitio es el marco; los cuadros son de él.
Qué se construyó
Una sola página larga con ocho secciones numeradas, que se recorre de arriba abajo como quien pasa las hojas de una carpeta.
Cinco piezas de 3D que pasan solas
La sección se queda fija mientras se baja y los cinco trabajos se van cambiando uno tras otro, con su contador y su barra de avance. Es la vitrina, y ocupa el mejor lugar del recorrido.
Doce piezas de identidad y material gráfico
Una grilla de alturas desiguales con los trabajos de marca: empaques, carteles, identidades. Cada pieza dice para quién es y qué es.
Un cortometraje con su propio reproductor
"Ladders", su corto de suspenso, con un reproductor construido a mano: barra de avance con el indicador de lo que ya se descargó, control de volumen, pantalla completa y los controles que se esconden solos mientras se ve.
Siete momentos de trayectoria
De 2016 a 2025: estudios, experiencia y reconocimientos, en una línea de tiempo que alterna de lado a lado.
Contacto directo, sin formulario
Correo y teléfono como enlaces que abren la aplicación del visitante. Para una persona sola es lo correcto: un formulario agrega un paso y un lugar donde los mensajes se pierden.
El trabajo invisible: las imágenes
Un portafolio de diseño es, técnicamente, un problema de imágenes. Si se resuelve mal, la obra tarda en aparecer y el visitante se va antes de verla.
- Imágenes en la página
- 19Imágenes en la página
- Versiones generadas de esas imágenes
- 59Versiones generadas de esas imágenes
- Que se sirven a la medida de la pantalla
- 19Que se sirven a la medida de la pantalla
- Peticiones a servidores de terceros
- 0Peticiones a servidores de terceros
Por qué esos números importan
Cada imagen del sitio existe en varios tamaños, y el navegador elige el que le sirve: un celular no descarga la versión pensada para un monitor grande. Son diecinueve imágenes y cincuenta y nueve versiones en total, generadas al publicar, sin que nadie las recorte a mano. Además, sólo las primeras se piden al entrar; el resto espera a estar cerca de la pantalla.
Y no hay una sola petición a un servidor ajeno: las tipografías viven en el propio sitio en vez de pedírselas a Google. Eso hace el sitio más rápido y, de paso, evita mandarle a un tercero la dirección de todo el que lo visita.
Hay un detalle más, de los que no se ven pero se sienten en el teléfono: el fondo animado de estrellas deja de dibujarse cuando el visitante cambia de pestaña. Una animación que sigue corriendo en una pestaña que nadie está mirando gasta batería a cambio de nada.
Qué demuestra
Demuestra lo más difícil de demostrar con una demostración: que un cliente real nos encargó su sitio, que está publicado y que sigue en uso.
Así trabajamos las páginas web para negocios: diseño, hospedaje y administración.