Portfolio web en 3D: cuatro formas de tener uno y qué poner dentro
Un portfolio web en 3D es un portfolio cuya página es una escena 3D en tiempo real —una galería que se recorre, una sala, un escritorio— y en la que encuentras tus proyectos. La escena la dibuja el navegador de quien lo visita con WebGL, así que responde al scroll y al puntero.
Actualizado el
Le va bien a quien vende su trabajo con el trabajo: diseñadores, ilustradores, arquitectos, fotógrafos, estudios. Y tiene un coste, porque quien lo mira suele ir con poco tiempo. Aquí verás las cuatro formas de tener uno, qué poner dentro y las tres cosas que hacen que un portfolio 3D juegue en contra del trabajo que enseña.
Cuatro formas de tener un portfolio en 3D
Programándolo con three.js. Construyes tú la escena: la librería es gratuita (licencia MIT) y su manual empieza por crear una escena. Es el camino si sabes JavaScript y quieres el 3D como habilidad; también es el que más tarda, y lo difícil —cargar modelos, móviles, memoria— está en hacer una web 3D por tu cuenta.
En un creador de webs. Spline diseña la escena sin código y un creador como Framer o Webflow la coloca en la página. Llegas antes, con menos control sobre cómo carga en el móvil.
Con un kit. Un kit de Promti es la escena y la página ya hechas, y tú pones tu trabajo. Para un portfolio, Studio es una galería blanca en 3D que se recorre, con cada proyecto enmarcado e iluminado con su pie de foto, y después tus servicios, tu equipo, tus clientes y un formulario. Añades de tres a ocho proyectos como imágenes o fotogramas, tus textos y tus colores, y te llevas todos los archivos. Cuesta 500 €, una sola vez.
A medida. Si quieres tu propia escena —tu sala, tu objeto—, una web 3D a medida se hace desde cero y empieza en 750 €, con el precio cerrado antes de empezar.
Qué poner dentro
Menos proyectos, mejor enseñados. De tres a ocho basta: quien visita recuerda la última pieza que vio, no la vigésima. Elige los que te gustaría que fueran el próximo encargo.
De cada proyecto: cuál era el encargo, qué hiciste y el resultado. Un cuadro colgado dice «bonito»; una línea debajo dice para qué sirves.
Quién eres, en pocas frases, con una cara o un nombre. Y al final una sola forma de contactar —un formulario, un correo, un enlace de reservas—, no cinco.
Servicios, si trabajas con clientes. Si buscas empleo y no clientes, cámbialos por aquello en lo que te gustaría trabajar.
Tres cosas que juegan en tu contra
Que no te encuentren. Si todas las palabras del portfolio viven dentro del canvas 3D, Google no las indexa: su propia guía dice que no indexa el contenido que se muestra en un canvas. Deja el nombre, los títulos, los nombres de los proyectos y los textos en HTML, sobre la escena, para que buscar tu nombre te encuentre. Velocidad, SEO y 3D explica lo que eso exige.
Que el scroll pelee con quien mira. En las pruebas de NN/g sobre el scrolljacking —páginas que cambian el ritmo o la dirección del desplazamiento—, la mayoría de los participantes acabaron al menos algo desorientados, y en el móvil fue peor. Un portfolio se abre en el móvil desde un mensaje o un perfil más a menudo de lo que querrías; pruébalo en uno.
Que no se pueda bajar el movimiento. La guía del W3C cita mareos y náuseas entre las reacciones de las personas con trastornos vestibulares. Un portfolio que respeta la opción de reducir el movimiento del sistema de quien lo visita le deja bajarlo. En los kits de Promti se mantiene el scroll propio del navegador en pantallas táctiles y siempre que se pide reducir el movimiento.
¿Te compensa un portfolio en 3D?
Sí, si tu campo es visual o espacial y la manera de enseñar el trabajo forma parte de lo que vendes: un estudio, un arquitecto, un motion designer, quien vende 3D. La página demuestra algo antes de abrir el primer proyecto.
Menos, si tu trabajo es sobre todo texto o código, si quien entra busca un dato rápido o si necesitas aparecer en muchas búsquedas distintas: una web normal de varias páginas lo hace mejor, y una página o varias lo explica.
Es frecuente un término medio: la página 3D como puerta de entrada y, detrás, páginas normales para cada caso, con su dirección y su título para Google.
Antes de publicarlo
Ábrelo en un móvil de gama media, con datos móviles. Mira la primera pantalla: ¿está tu nombre como texto y pasa algo en los primeros segundos?
Ponle un título y una descripción que digan quién eres y qué haces —la guía de inicio de Google pide que sean específicos— y una dirección real, mejor con dominio propio: comprar un dominio y publicar gratis lo explican.
Pide a alguien ajeno a tu sector que encuentre tu correo en diez segundos. Si no puede, la escena estorba.
Preguntas
- ¿Qué es un portfolio web en 3D?
- Un portfolio cuya página es una escena 3D en tiempo real, dibujada por el navegador de quien lo visita con WebGL —una galería, una sala, un objeto—, por la que se enseñan tus proyectos, normalmente al hacer scroll.
- ¿Puedo hacer un portfolio 3D con three.js?
- Sí. three.js es gratuito y de código abierto (licencia MIT) y su manual empieza por crear una escena. Tendrás que resolver tú la carga de modelos, la memoria y los móviles; hacer una web 3D por tu cuenta cuenta lo que se complica.
- ¿Cuántos proyectos debe tener un portfolio 3D?
- De tres a ocho es un buen rango: suficiente para mostrar variedad y poco como para que se vean todos. En el kit Studio, es justo lo que admite la galería.
- ¿Un portfolio 3D sale en Google?
- Solo si sus textos son HTML de verdad. Google dice que no indexa lo que se muestra en un canvas, así que el nombre, los títulos y los nombres de los proyectos tienen que ser texto sobre la escena. Para muchas búsquedas distintas, añade páginas normales para cada proyecto.
- ¿Cuánto cuesta un portfolio en 3D?
- Hacerlo tú cuesta tu tiempo. Un kit Studio de Promti cuesta 500 €, de una vez y sin cuota mensual, y una web 3D a medida de Promti empieza en 750 €. Los caminos para comparar están en cuánto cuesta una web 3D.
Así es una web hecha con Promti
Un kit para cada tipo de negocio, cada uno con su demo en vivo. Tus textos, tus colores y tus fotos van en su lugar.
ProductUna web inmersiva para un solo producto, rodada como una película.
ForestUna web inmersiva para un lugar, contada como un día allí — con tus propias fotos, en 3D.
AppUna web inmersiva para una app, contada con sus propias pantallas.
StudioUna web inmersiva para un estudio, presentada como una exposición de su trabajo.
CasaUna web inmersiva para una vivienda en venta, construida a partir de su plano.
BodaTu invitación de boda, como una web que abre cada invitado.
MúsicaUna web para un lanzamiento que lo reproduce, y la canción mueve la escena.
ModaUna web para una colección de moda, con sus fotos impresas en tela que se mueve.
EventoUna web para un evento, con su día vivido en su propia pantalla LED.