Aquí hay 20 de los mejores sitios web de portafolio en línea en este momento: diseñadores, desarrolladores, un fotógrafo y un arquitecto presentando su propio trabajo, estudios y agencias vendiendo el suyo, más algunos sitios de proyectos como un libro de marca e informe de industria. El gusto no decidió la lista. Saqué los 20 al azar de 23 sitios de portafolio en vivo y revisados manualmente, verificué que cada uno cargue, lo medí en teléfono y registré qué podrías adaptar para tu sitio propio. La sorpresa: ninguno de los 8 sitios con suficientes datos de visitantes reales pasa las tres Core Web Vitals de Google, y la puntuación mediana de Lighthouse móvil es 61.5. Este es el rayo de 64 sitios web hermosos, verificados en vivo y probados de velocidad.
Cómo se seleccionaron y probaron estos 20
La mayoría de listas de los mejores sitios web de portafolio son favoritos curados. Eso no dice nada sobre qué costarían esas elecciones en tiempo de carga, así que usé un sorteo al azar en su lugar.
- El grupo: 23 sitios web de portafolio en vivo de una base de datos de diseño curada que mantengo. Cada uno fue revisado manualmente, tiene capturas de escritorio y móvil, y pasó una verificación de disponibilidad en los últimos 30 días.
- El sorteo: 20 sitios en un orden aleatorio fijo, con no más de dos de ningún estudio. Ninguno necesitó cambio. Nada aquí es mi trabajo de cliente, y nadie pagó para ser incluido.
- La verificación en vivo: cada sitio se abrió en un navegador (Chromium) el 31 de octubre de 2026 y cargó el mismo sitio para el que se enumeraba.
- La prueba de laboratorio: una ejecución de Lighthouse móvil por sitio entre el 12 y el 20 de octubre de 2026, registrando la puntuación de rendimiento, Largest Contentful Paint y peso de página.
- Los datos de visitantes reales: cifras de Chrome UX Report para teléfonos, que Google recopila de usuarios reales de Chrome. Una página solo aparece una vez que tiene suficientes visitantes (Chrome UX Report), que muchos portafolios personales nunca alcanzan, así que 11 de los 20 muestran "sin datos".
- No es una clasificación: el orden a continuación es el orden del sorteo.
Lo que 20 sitios web de portafolio cuestan en velocidad
Google marca una página como buena cuando su Largest Contentful Paint (LCP) es de 2.5 segundos o menos, su Interaction to Next Paint (INP) es de 200 milisegundos o menos y su Cumulative Layout Shift (CLS) es de 0.1 o menos, medido en el percentil 75 de las cargas de página. Una página aprueba Core Web Vitals solo cuando cumple los tres (web.dev).
| Hallazgo | Resultado |
|---|---|
| Puntuación mediana de rendimiento de Lighthouse móvil | 61.5 |
| Puntuación 90 o superior | 1 de 20 |
| Puntuación menor a 50 | 5 de 20 |
| Peso mediano de página | 3.4 MB |
| Páginas mayores a 10 MB | 5 de 20 |
| Páginas menores a 2 MB | 7 de 20 |
| Sitios con datos de visitantes reales (CrUX) | 9 de 20 |
| Aprueba los tres Core Web Vitals, de los 8 con suficientes datos para juzgar | 0 |
| LCP de visitantes reales dentro de 2.5 segundos | 2 de 9 |
Para comparación, el informe de Chrome UX de septiembre de 2026 de Google coloca la participación de orígenes con buenos Core Web Vitals en 55.9% entre 18,376,044 orígenes (notas de lanzamiento de Chrome UX Report). Ninguno de los 8 portafolios juzgados aquí aprueba. De esos 8, 7 no alcanzan el objetivo de LCP de 2.5 segundos, 5 responden demasiado lentamente a toques y 2 mueven demasiado su maquetación.
Una página ligera no garantiza una buena puntuación, y una página pesada no garantiza una mala. El portafolio de Karl Barnard pesa 0.7 MB pero obtiene 37 en el laboratorio, donde la prueba registró 908 ms de tiempo de bloqueo mientras se ejecutaban scripts. Glitch&Grit pesa 47.4 MB y obtiene 66. La página más pequeña del sorteo, GØDN.studio con 0.2 MB, es también la única en obtener 90 o superior.
El laboratorio y los visitantes reales tampoco están de acuerdo aquí. Gionatan Nese obtiene 37 en el laboratorio, pero los visitantes reales ven el contenido principal en 1.2 segundos; el sitio falla solo en capacidad de respuesta, con 232 ms contra la línea de 200 ms de Google. Lighthouse es una ejecución en un teléfono emulado, y cuando entra en conflicto con el Chrome UX Report, web.dev dice que los datos de visitantes reales son probablemente la vista más precisa (web.dev).
Con qué están construidos estos 20
Next.js ejecuta 6 de los 20. Nuxt y Webflow ejecutan 2 cada uno, y Framer, SvelteKit y WordPress ejecutan uno cada uno. Para los otros 7, la pila no se pudo leer desde el HTML. El portafolio de fotografía de Félix Péault en SvelteKit obtiene 76 en una página de 1.4 MB. Si estás eligiendo un marco para tu propio sitio, Astro vs Next.js cubre la compensación.
Lo que los 20 tienen en común
Cada sitio en la base de datos recibe etiquetas de estilo durante la revisión, y la pila se detecta desde el HTML activo, así que estos son conteos, no impresiones.
- El tipo grande es la firma. 11 de los 20 establecen un nombre o un titular en tipo muy grande, la etiqueta más común en el grupo. En un portafolio el nombre a menudo es toda la primera pantalla.
- Interacción sobre decoración. 7 están etiquetados como interactivos, más que cualquier otro estilo: escenas 3D, fondos que reaccionan al cursor y anillos de proyección que puedes reorganizar. Minimalista y tipográfico vienen después con 6 cada uno.
- El trabajo hace la venta. 9 comienzan con fotografía y 8 con ilustración, y los mejores de ellos muestran una pieza grande en lugar de diez pequeñas.
- El movimiento no es lo que los ralentiza. 6 cargan una biblioteca de desplazamiento suave o animación como GSAP o Lenis. Su puntuación de laboratorio mediana es 77, contra 57.5 para los otros 14, así que en este sorteo la animación sola no explica las puntuaciones lentas.
Los 20 sitios web de portafolio
Los 20 aparecen a continuación en orden de sorteo, con mediciones primero, luego una mirada más cercana a cada uno con una captura de inicio, el patrón que vale la pena tomar prestado y la compensación que debes entender. Las cifras de visitantes reales son de teléfonos; "sin datos" significa que Google tuvo muy pocos visitantes para reportar. Para tu propio sitio, consulta diseño web de portafolio.
| # | Sitio | Lighthouse (móvil) | LCP, visitantes reales | INP | CLS | Peso de página | Construido con |
|---|---|---|---|---|---|---|---|
| 1 | Hobro Digital | 60 | 2.7 s | 282 ms | 0.06 | 6.1 MB | No detectado |
| 2 | Valentin Gassend | 46 | sin datos | sin datos | sin datos | 1.7 MB | Next.js |
| 3 | Vivien's Creative | 57 | sin datos | sin datos | sin datos | 2.2 MB | Next.js |
| 4 | Oimachi | 47 | sin datos | sin datos | sin datos | 35.4 MB | Webflow |
| 5 | Squarespace Foundations | 56 | 4.5 s | 217 ms | 0.00 | 62.8 MB | Nuxt |
| 6 | AI in Design Report 2026 | 63 | 6.4 s | 98 ms | 0.36 | 7.9 MB | Framer |
| 7 | Julia Stafi | 55 | sin datos | sin datos | sin datos | 9.8 MB | No detectado |
| 8 | Studio K95 | 58 | 5.5 s | 245 ms | 0.00 | 2.3 MB | Nuxt |
| 9 | Direct Design | 78 | sin datos | sin datos | sin datos | 7.5 MB | Webflow |
| 10 | House of Honey | 74 | 3.0 s | sin datos | 0.00 | 1 MB | Next.js |
| 11 | Félix Péault | 76 | sin datos | sin datos | sin datos | 1.4 MB | SvelteKit |
| 12 | Karl Barnard | 37 | sin datos | sin datos | sin datos | 0.7 MB | No detectado |
| 13 | Gionatan Nese | 37 | 1,2 s | 232 ms | 0.00 | 14.4 MB | Next.js |
| 14 | SUSO Digital | 79 | 2.8 s | sin datos | 0.00 | 2.7 MB | WordPress |
| 15 | Nordpixel | 79 | sin datos | sin datos | sin datos | 4.1 MB | No detectado |
| 16 | Alvara House | 79 | sin datos | sin datos | sin datos | 1 MB | Next.js |
| 17 | Haoqi Wen | 28 | 9.7 s | 238 ms | 0.15 | 15.4 MB | No detectado |
| 18 | Warm & Fuzzy | 76 | 2,4 s | sin datos | 0.00 | 1.1 MB | Next.js |
| 19 | Glitch&Grit | 66 | sin datos | sin datos | sin datos | 47.4 MB | No detectado |
| 20 | GØDN.studio | 90 | sin datos | sin datos | sin datos | 0.2 MB | No detectado |
1. Hobro Digital
El nombre está en una sans serif muy pesada y ancha en blanco, estirada casi de borde a borde sobre un rostro borroso y recortado en rojo profundo y ámbar. El color cálido se mantiene dentro de una sola familia, así que las letras blancas se leen de inmediato. Una pequeña línea monoespacio debajo ofrece el descriptor de la agencia y el lugar, y el contraste entre el tipo de pantalla grueso y el texto al estilo máquina de escribir ligero mantiene la jerarquía clara.
Toma prestado esto: Coloca el nombre de tu estudio en una sola cara de pantalla pesada a ancho completo sobre una fotografía borrosa con tono cálido o un fotograma de vídeo, y combínalo con una pequeña línea de descriptor monoespacio.
Ten cuidado con: La página es más pesada que el promedio y obtiene una puntuación en el medio de los resultados del laboratorio. Los visitantes reales también ven una carga lenta del contenido principal y una respuesta lenta a toques y clics, lo que se ajusta a un telón de fondo de pantalla completa con animación con script.
Diseñado internamente. Visita hobro.digital.
2. Valentin Gassend
El nombre hace el trabajo. Una sans condensada pesada y alta en negro se apila en un bloque ajustado, y la G y la N final cambian a un script de pincel verde, lo que le da algo de personalidad a un wordmark simple. Las líneas de cuadrícula verde delgadas dividen el terreno rosa pálido en celdas, mientras que pequeños títulos en mayúsculas se sientan en las esquinas y dejan el centro despejado.
Toma prestado esto: Coloca tu nombre en un tamaño enorme en una sola tipografía pesada, cambia un par de letras por una cara de script en un color de acento, y repite ese color en líneas de cuadrícula delgadas detrás de él.
Ten cuidado con: La prueba de laboratorio calificó la página como lenta a pesar de su peso ligero, y Google tiene muy pocos datos de visitantes reales para confirmar cómo funciona para usuarios reales.
Diseñado internamente. Visita valentingassend.com.
3. Vivien's Creative
Una fotografía de dunas pálidas a sangre completa llena la pantalla, con dos caminantes en abrigos oscuros pequeños contra la arena, dando a la página escala y calma. La intro se sienta en una serif ligera y erudita sobre el cielo gris verdoso, mientras que el nombre a continuación usa una sans blanca enorme y pesada que va de borde a borde. Los pequeños enlaces de menú capitalizados se mantienen fuera del camino, así que la imagen y el nombre llevan la pantalla de apertura.
Toma prestado esto: Combina una fotografía a sangre completa con un wordmark agrandado recortado al borde inferior e una breve intro serif arriba, para que un estudio pequeño obtenga una pantalla inicial segura de una buena imagen y un par de tipografías.
Ten cuidado con: La página es ligera, pero el resultado del laboratorio es solo medio, y Google no tiene suficientes datos de visitantes reales para juzgar cómo funciona para personas reales.
Diseñado por Christopher Doyle & Co.. Visita vivienscreative.com.au.
4. Oimachi
El titular establece un grotesco grande y simple contra una sola palabra serif itálica, dando a la página una voz clara antes de que alguien lea el cuerpo del texto. Un terreno gris pálido, márgenes ajustados y un panel oscuro grande con dos formas redondeadas color crema mantienen la paleta tranquila, mientras que una columna estrecha de tarjetas postales a la derecha añade fotografía y un acento naranja. En móvil, el mismo titular se apila ordenadamente encima de una cuadrícula de iconos negros audaces dibujados sobre cuadrículas de construcción tenues.
Toma prestado esto: Empareja un titular sans simple con una sola palabra serif itálica para dar a un héroe dirigido por texto una voz reconocible, luego muestra trabajo de proceso como iconos en cuadrículas de construcción tenues.
Ten cuidado con: La prueba de laboratorio encontró la página lenta y muy pesada, con movimiento GSAP detectado junto a Webflow, y no había suficientes datos de visitantes reales de Google para decir cómo funciona para usuarios reales.
Diseñado internamente. Visita oimachi.co.
5. Squarespace Foundations
Un campo casi negro sostiene una declaración breve y centrada en una sans serif limpia de peso uniforme, sin nada que compita con ella. Pequeños mosaicos de imagen, sesgados en una inclinación isométrica, se sitúan alrededor de los bordes como una órbita suelta, mezclando una marca de logo blanca, una jarra de cerámica en sombra cálida y una franja metálica pálida. La contención y el espaciado amplio hacen que la página se sienta tranquila y segura, y los mosaicos inclinados implican movimiento.
Toma esto prestado: Empareja una única oración breve en una sans serif limpia con un puñado de mosaicos de imagen sesgados sobre un fondo plano oscuro, que necesita solo unas pocas imágenes recortadas y un CSS transform.
Ten cuidado con: Este es un libro de marca inmersivo en lugar de una página de ventas, y su imaginería crea una descarga grande: los visitantes reales esperan más tiempo del que Google establece como objetivo para el contenido principal y para que los toques respondan.
Creado por Resn. Visita brand.squarespace.com.
6. AI in Design Report 2026
Una fotografía de flor invertida y desvanecida en gris y durazno se sitúa detrás de un dispersión de tarjetas de gradiente granulosas en naranja, lila y verde. Cada tarjeta lleva una pequeña etiqueta monoespaciada que nombra un rol de trabajo, dando al collage un orden editorial tranquilo. El panel central negro con una marca de wordmark sans geométrica blanca pesada ancla la composición, y la vista móvil mantiene la paleta con un bloque de logo negro junto a una barra de menú naranja brillante.
Toma esto prestado: Empareja un titular sans grande con espaciado ceñido con pequeñas etiquetas monoespaciadas, y construye el collage hero a partir de un puñado de imágenes de gradiente granulosas en capas sobre una única fotografía teñida.
Ten cuidado con: La página es más pesada que el promedio, y los visitantes reales ven carga lenta del contenido principal y algún cambio de diseño, así que el collage grande es lo primero que hay que inspeccionar.
Creado por ++hellohello. Visita stateofaidesign.com.
7. Julia Stafi
La página es casi todo espacio en blanco, con una marca de wordmark centrada en una serif de alto contraste y una introducción breve establecida en una serif de texto más ligero. Las líneas de introducción avanzan por la página en un patrón escalonado y diagonal, dando movimiento a un párrafo simple sin decoración. Debajo, un retrato alto del arquitecto en negro contra una pared desgastada y moteada añade el único tono fuerte, así que la imagen oscura y la página pálida se equilibran mutuamente.
Toma esto prestado: Escalonea las líneas de tu introducción por la página con simples sangrías izquierdas, y emparéjalas con un retrato alto sobre un fondo blanco simple.
Ten cuidado con: La página es más pesada que el promedio y solo intermedia en la prueba de laboratorio, lo que se ajusta a un diseño construido alrededor de una fotografía grande, y no hay suficientes datos de visitantes reales de Google para decir cómo funciona para usuarios reales.
Creado por Sasha Khudova. Visita juliastafi.com.
8. Studio K95
Un azul plano y saturado llena la pantalla, y una rosa pixelada construida a partir de bloques pálidos y similares al vidrio se sitúa en el medio sin nada que compita con ella. Pequeñas tarjetas de proyecto flotan alrededor en anillos, y los carteles rojo y crema destacan contra el azul en la vista móvil. La navegación usa tiny uppercase sans serif en blanco, así que la obra de arte lidera y la interfaz permanece tranquila.
Toma esto prestado: Usa un bloque plano de color fuerte como el escenario y añade un pequeño toggle de estilo Rings and Spiral que reorganice tus miniaturas de proyecto, para que el mismo trabajo pueda explorarse en un diseño diferente.
Ten cuidado con: La página en sí es ligera, pero la prueba de laboratorio es solo intermedia y los visitantes reales ven carga lenta del contenido principal y respuesta lenta a toques y clics, así que la escena 3D es lo primero que hay que revisar.
Diseñado internamente. Visita k95.it.
9. Direct Design
Un semáforo renderizado y brillante se sienta contra un gradiente amarillo suave, con una lámpara smiley verde y un letrero de diamante que convierten la idea de dirección de la agencia en una sola imagen. El titular usa una sans grotesca grande y apretada en negro sobre blanco, por lo que se lee de una vez junto a la imagen. Una barra de navegación redondeada negra y un pequeño botón de contacto amarillo mantienen la paleta en negro, blanco, amarillo y verde.
Toma esto prestado: Empareja un único objeto renderizado a medida con un titular muy grande, luego lleva sus colores a la barra de menú y al botón para que la página se sienta marcada sin necesitar muchos recursos.
Ten cuidado con: La página es más pesada que el promedio y solo mediocre en la prueba de laboratorio, lo que se ajusta a las imágenes renderizadas y las bibliotecas de animación detectadas, y no hay suficientes datos de visitantes reales de Google para decir cómo funciona para los usuarios reales.
Construido por COSMOFLOW Agency. Visita wearedirect.co.
10. House of Honey
El wordmark corre de borde a borde en una sans negra pesada y ancha, con una delicada serif itálica "of" cortándolo en contraste. Configurado en un rosa rubor plano en marrón chocolate oscuro, se lee de una vez y se siente cálido. El lema se asienta en pequeñas mayúsculas serif en ambas esquinas, y la fotografía interior a sangre completa debajo repite los rosas y naranjas de la paleta.
Toma esto prestado: Empareja un wordmark sans muy pesado con una sola palabra serif itálica delicada, luego mantén la paleta a un color de fondo plano y una tinta oscura para que la fotografía lleve todo lo demás.
Ten cuidado con: La página en sí es ligera, pero los visitantes reales ven carga lenta del contenido principal (LCP), un costo común cuando una gran fotografía a sangre completa es lo primero en pantalla, y el resultado de laboratorio es solo mediocre.
Creado por Edoardo Lunardi. Visita houseofhoney.com.
11. Félix Péault
La página es poco más que un gradiente que corre de azul profundo a través de un verde claro hasta un blanco cálido apagado, y ese lavado maneja todo el color. Un par de letras oscuras de gran tamaño, una F y una P, se sientan en las esquinas como un monograma, mientras que una sans serif condensada alta lleva el lema y el pequeño menú. En móvil, una fotografía de personas vistas desde arriba, con sombras largas, agrega la única imagen.
Toma esto prestado: Configura tus iniciales como letras de gran tamaño en esquinas opuestas y rellena el fondo con un gradiente suave, para que la página tenga una identidad sin ninguna imagen pesada.
Ten cuidado con: La prueba de laboratorio resultó mediocre, aunque la página en sí es ligera, y no hay suficientes datos de visitantes reales de Google para decir cómo funciona para los usuarios reales.
Diseñado internamente. Visita felixpeault.com.
12. Karl Barnard
El titular usa una serif de alto contraste, con una palabra cambiada a una itálica verde que lleva todo el énfasis. Todo lo demás permanece tranquilo: tierra blanca cálida apagada, líneas de cuadrícula tenues, y una cara monoespaciada pequeña para etiquetas. El retrato se construye a partir de caracteres mecanografiados, por lo que la imagen refleja el tipo y la página se siente como una idea en lugar de un montón de partes.
Toma esto prestado: Elige una palabra en tu titular, configúrala en una itálica y un único color de acento, y deja el resto de la paleta a tonos neutros.
Ten cuidado con: La prueba de laboratorio clasificó la página como lenta aunque la página en sí es ligera, y no había suficientes datos de visitantes reales de Google para decir cómo se siente para los usuarios reales.
Diseñado internamente. Visita karlbarnard.co.za.
13. Gionatan Nese
Una página blanca, un pequeño grupo de imágenes de productos, pósters y objetos dispuestos en un anillo suelto, y casi nada más. El pequeño menú en la parte superior empareja una sans plana para las iniciales con una serif refinada para Creative Space, colocada en pestañas gris claro, lo que crea un contraste tranquilo. Las imágenes se superponen en diferentes tamaños, así que el ojo se mueve alrededor del círculo, y los márgenes blancos vacíos hacen que cada miniatura parezca una exposición.
Toma esto prestado: Organiza un pequeño conjunto de tus mejores miniaturas de proyecto en un anillo suelto sobre una página blanca plana, con superposiciones y tamaños variados, para que el trabajo hable por sí solo sin una imagen destacada ni un titular.
Ten cuidado con: El test de laboratorio encontró la página lenta y muy pesada, y los visitantes reales ven respuestas lentas a los toques (INP), aunque el contenido principal en sí llega rápidamente.
Diseñado internamente. Visita gionatannese.com.
14. SUSO Digital
El hero permanece en un campo blanco tranquilo con un único brillo de gradiente suave de durazno, lila y azul pálido detrás de una forma de estructura alámbrica blanca delgada. El titular usa una sans serif limpia y uniforme en un tamaño grande, con una pequeña etiqueta monoespaciada encima y dos botones en píldora claros debajo. El espaciado es generoso, así que la página se lee rápidamente y el gráfico único hace la decoración.
Toma esto prestado: Empareja un titular sans serif limpio con pequeñas etiquetas y botones monoespaciados, luego coloca un gráfico de gradiente suave detrás del texto para que la página se sienta diseñada sin necesidad de fotografía.
Ten cuidado con: La página es ligera, pero los visitantes reales ven problemas con la velocidad de carga del contenido principal (LCP), y es probable que el gráfico de gradiente grande en el hero sea lo primero que debas revisar.
Construido por Fhoke. Visita susodigital.com.
15. Nordpixel
Una fotografía de montaña brumosa y oscura llena toda la pantalla, con una cabaña con frente de vidrio iluminada débilmente en la esquina inferior derecha. La marca de palabra se sitúa en el medio con mayúsculas geométricas en negrita y espaciado amplio, terminando en un punto azul que se repite en el logo y los botones. Una barra de menú redondeada blanca flota sobre la imagen, así que el acento azul y las letras pálidas proporcionan todo el contraste.
Toma esto prestado: Empareja una fotografía de sangrado completo, oscurecida con una superposición, con una marca de palabra en negrita con espaciado amplio y un único color de acento usado solo para el punto y los botones.
Ten cuidado con: La página es más pesada que el promedio y solo regular en el test de laboratorio, lo que es lo que una fotografía de pantalla completa tiende a costar, y no hay suficientes datos de visitantes reales de Google para decir cómo funciona para los visitantes actuales.
Creado por Michael Schnyder. Visita nordpixel.ch.
16. Alvara House
Una fotografía de sangrado completo de una casa de techo plano al atardecer se sitúa bajo una marca de palabra sans serif blanca enorme y ancha, y la palabra HOUSE pasa semitraparente sobre la línea del techo para que el tipo y el edificio se lean como una sola imagen. El cielo azul proporciona espacio limpio y tranquilo para pequeñas etiquetas en las esquinas, y el brillo cálido en las ventanas contrasta con el fondo frío. Un botón en píldora y una tarjeta esmerilada son los únicos elementos en competencia.
Toma esto prestado: Empareja una fotografía fuerte con una marca de palabra de gran tamaño que se superponga al sujeto, y mantén todos los demás elementos pequeños y escondidos en las esquinas.
Ten cuidado con: El test de laboratorio resultó regular aunque la página es ligera, así que la gran fotografía del hero es el lugar más probable para buscar mejoras, y no había suficientes datos de visitantes reales de Google para decir cómo se siente en la práctica.
Construido por Visuvate Studio. Visita alvara.visuvate.com.
17. Haoqi Wen
Un guión azul brillante e inflado que dice hello se asienta sobre un campo azul cielo pálido, y es el único objeto suave en una página que por lo demás está gobernada por líneas de cuadrícula finas y pequeñas marcas de cruz. El titular sans pesado y ancho en negro ancla la esquina inferior izquierda, mientras que una tipografía monoespaciada maneja la navegación y la biografía. Ese contraste entre lo lúdico y lo técnico se ajusta bien a un ingeniero de diseño.
Toma esto prestado: Empareja un objeto táctil y renderizado con una cuadrícula de líneas finas rigurosa y una sola cara monoespaciada para texto pequeño, para que un sitio personal se sienta tanto cálido como preciso.
Cuidado con: La prueba de laboratorio encontró la página lenta y muy pesada, y los visitantes reales ven problemas con la carga, la capacidad de respuesta y la estabilidad del diseño, que es el precio habitual de un héroe renderizado grande y detalles en vivo.
Diseñado internamente. Visita haoqi.design.
18. Cálido y Acogedor
Un fotograma de película suavemente desenfocado y sin márgenes llena la pantalla completa, y sus rosa caramelo, amarillos mostaza y verdes hojosos llevan la apertura. Las letras de burbuja brillante se sientan en el medio, mientras que la pequeña navegación se mantiene fuera del camino en un sans serif simple. Un lema grotesco audaz en el borde inferior ancla la página y establece un tono amigable y seguro.
Toma esto prestado: Usa una imagen en movimiento de pantalla completa como toda la apertura, luego mantén el logo, algunos enlaces cortos y una sola línea de texto audaz como el único mobiliario en la parte superior.
Cuidado con: La prueba de laboratorio salió regular aunque la página en sí es ligera, por lo que el fondo en movimiento de pantalla completa es el costo probable, y no hay suficientes datos de visitantes reales de Google para decir cómo se siente para usuarios reales.
Construido por Neutral Studio. Visita warmnfuzzy.tv.
19. Glitch&Grit
La página divide la pantalla por la mitad, con una mitad negra plana a la izquierda llevando una silueta de flor gris grande y una mitad de carbón ligeramente más clara a la derecha. Sobre ambas se sienta un encabezado enorme en un sans serif audaz y abierto en verde lima suave, que se mantiene legible contra el gris y el negro por igual. La navegación y el nombre del estudio se sientan en pequeñas mayúsculas blancas metidas en las esquinas, para que el centro se mantenga claro.
Toma esto prestado: Empareja un encabezado enorme en un solo color de acento con un fondo plano dividido y una forma recortada, para que la página se sienta distintiva sin un presupuesto de fotografía.
Cuidado con: La página es muy pesada y solo regular en la prueba de laboratorio, y Google tiene muy pocos datos de visitantes reales para decir cómo se siente en la práctica, por lo que los visuales grandes son el primer lugar donde buscar ahorros.
Visita glitchandgrit.com.
20. GØDN.studio
Un campo casi negro lleva una declaración enorme en mayúsculas grotescas pesadas y apretadas, y la última palabra cae en un serif cursivo ligero que cambia la voz de inmediato. Una marca granulosa y punteada se sienta detrás del tipo como estática, añadiendo profundidad sin fotografía. Pequeñas etiquetas monoespaciadas ampliamente espaciadas se mantienen tranquilas alrededor, para que el titular se lea primero.
Toma esto prestado: Empareja un titular sans pesado con una palabra en un serif cursivo ligero, y mantén todo lo demás en pequeñas mayúsculas monoespaciadas espaciadas sobre un fondo oscuro.
Cuidado con: La página se probó rápida en el laboratorio y es ligera, lo cual es bueno dado que ejecuta GSAP y Three.js, pero no había suficientes datos de visitantes reales de Google para decir cómo se desempeña para usuarios reales.
Creado por Bruno Godinho. Visita studio.godn.pt.
Cómo hacer un portafolio que sea hermoso y rápido
Los 20 anteriores demuestran que un portafolio puede verse distintivo en casi cualquier stack. Los más rápidos se diferencian de los más lentos en cómo cargan el trabajo en sí.
- Muestra tres a cinco proyectos correctamente. La encuesta del Nielsen Norman Group a 204 profesionales de UX que contratan recomienda elegir 3 a 5 proyectos como estudios de caso detallados, calidad sobre cantidad (NN/g).
- Hazlo escaneable. La misma investigación encontró que los gerentes de contratación muy rara vez leerán un portafolio completo de principio a fin (NN/g), así que coloca el problema, tu rol y el resultado donde caiga la vista al ojear.
- Carga la primera imagen temprano. Nunca establezcas loading="lazy" en la imagen que llena la primera pantalla, mantenla en el HTML de la página en lugar de añadirla con JavaScript, y asígnale fetchpriority="high" (web.dev).
- Carga perezosamente todo lo que está debajo, con tamaños establecidos. Usa loading="lazy" solo para imágenes fuera de la primera pantalla, y añade width y height a cada imagen para que el diseño no salte (web.dev).
- Vigila el total. En el percentil 90, los sitios ya envían más de 5 MB de imágenes (web.dev), y 5 de estos 20 portafolios pesan más de 10 MB en total.
- Mide visitantes reales tú mismo. Un portafolio pequeño puede no recibir nunca suficiente tráfico para aparecer en el Chrome UX Report, y web.dev recomienda fuertemente configurar tu propio monitoreo de usuarios reales (web.dev).
Si quieres un portafolio que gane trabajo en lugar de solo verse bien, diseño web de portafolio es cómo los construyo: rápidos, encontrados en búsqueda y escritos alrededor del trabajo. Si tu sitio actual solo necesita una apariencia fresca y una primera pantalla más rápida, un rediseño de sitio web es el lugar por donde empezar.
Preguntas que la gente hace
¿Qué hace un buen sitio web de portafolio?
Muestra el trabajo grande y temprano, con suficiente contexto para explicarlo. Dentro de estos 20, las primeras pantallas más sólidas hacen una cosa: un nombre en tipografía muy grande, un único proyecto o una única fotografía. La investigación del Nielsen Norman Group añade la parte que gana empleos: algunos proyectos redactados como estudios de caso, no una pared de imágenes terminadas (NN/g).
¿Cuántos proyectos debe mostrar un portafolio?
El Nielsen Norman Group recomienda elegir 3 a 5 proyectos como estudios de caso detallados, con calidad sobre cantidad (NN/g). Menos proyectos, pero más profundos, también significa menos imágenes grandes en la página.
¿Cuál es la mejor plataforma para un sitio web de portafolio?
Estos datos no dan una victoria a un stack. Next.js ejecuta 6 de los 20, Nuxt y Webflow 2 cada uno, y Framer, SvelteKit y WordPress uno cada uno, mientras que 7 están construidos de formas que no pudieron ser detectadas. Next.js solo tiene tanto un 79 como un 37 aquí, así que elige uno que puedas mantener actualizado y dedica el esfuerzo a cómo cargan tus imágenes.
¿Por qué mi sitio web de portafolio es lento?
La causa suele ser el trabajo en sí: imágenes de tamaño completo y vídeo en la primera pantalla, o una primera imagen que carga tarde porque está cargada perezosamente o añadida por JavaScript (web.dev). En este sorteo, 7 de los 8 portafolios juzgados por Google pierden el objetivo de 2.5 segundos de LCP.
¿Por qué mi portafolio no tiene datos de Core Web Vitals?
El Chrome UX Report solo incluye páginas y sitios con suficientes visitantes para formar una muestra estadísticamente significativa (Chrome UX Report). 11 de estos 20 portafolios no tienen datos de visitantes reales en absoluto. Usa una prueba de laboratorio como Lighthouse mientras tanto, y añade tu propio monitoreo de usuarios reales si quieres números de campo.
¿Dónde puedo ver más sitios web hermosos?
El pilar de 64 sitios web hermosos cubre ocho categorías con las mismas pruebas. Para restaurantes y marcas de alimentos, consulta los 20 mejores sitios web de restaurantes y alimentos, y para galerías para explorar, la colección de sitios de inspiración en diseño web.