Portafolio web de diseño gráfico: páginas, casos de estudio y checklist
Cómo crear un portafolio web de diseño gráfico: cuántos proyectos mostrar, las páginas clave, una plantilla de caso de estudio y una lista de lanzamiento.
Preguntas frecuentes
¿Cuántos proyectos debe tener un portafolio web de diseño gráfico?
Apunta a entre 6 y 10 proyectos, con los dos o tres más fuertes al principio. No existe un número oficial. Lo importante es que cada proyecto se gane su lugar y que el conjunto muestre el tipo de trabajo por el que quieres que te contraten. Si una pieza es más débil que las demás, quítala. Una selección breve transmite mejor criterio que una lista larga.
¿Necesito un dominio propio para mi portafolio de diseño gráfico?
No es obligatorio, pero un dominio con tu nombre (tunombre.com o tunombre.design) se ve más profesional en el currículum y en la firma del correo, y te acompaña si algún día cambias de plataforma. Consulta la disponibilidad y el precio de renovación con tu registrador antes de comprar, porque los precios varían.
¿Debo mostrar solo diseños terminados o también el proceso?
Muestra ambos, en su justa medida. Abre cada proyecto con el resultado final y añade después una mirada breve a bocetos, borradores o alternativas que descartaste. El proceso enseña cómo piensas, algo que pesa mucho en puestos internos y de agencia. Para que la página de exploración se lea rápido, deja el proceso en la página de cada proyecto y no en la de inicio.
¿Puedo incluir proyectos de estudiante, personales o conceptuales?
Sí, si estás al inicio de tu carrera. Indica con honestidad que son proyectos de estudiante, personales o conceptuales para que nadie los confunda con trabajo para clientes. Los briefs que te escribiste tú mismo valen siempre que expliques con claridad el problema y las limitaciones. Reemplázalos por trabajo real de clientes a medida que lo consigas.
¿Qué formatos de archivo y tamaños de imagen debo usar en el portafolio?
Exporta imágenes listas para la web: normalmente JPEG o WebP para mockups fotográficos, y PNG o SVG para gráficos planos y logotipos. Ajústalas al ancho con el que se van a mostrar y comprímelas para que las páginas carguen rápido. Guarda aparte una versión en PDF de alta resolución de tu portafolio para las postulaciones por correo.
¿Es mejor un portafolio web o uno en PDF?
Cumplen funciones distintas. Un sitio web se comparte fácilmente con un enlace, aparece en los buscadores y se puede actualizar en cualquier momento. Un PDF sirve cuando una postulación pide expresamente un archivo adjunto. La mayoría de los diseñadores tiene los dos: el sitio web como principal y un PDF hecho con los mismos proyectos.
Respuesta corta: un portafolio web de diseño gráfico necesita entre 6 y 10 de tus mejores proyectos, cada uno presentado como un caso de estudio breve (problema, tu rol, proceso, resultado), más cuatro páginas: Inicio, Trabajos, Sobre mí y Contacto. Abre con tus tres mejores proyectos, muestra solo el tipo de trabajo que quieres recibir más y haz que tus datos de contacto sean imposibles de pasar por alto. La plantilla y la checklist de abajo cubren el resto.
Qué necesita realmente un portafolio de diseño gráfico
Un portafolio tiene una sola misión: ayudar a un desconocido a decidir en uno o dos minutos si te escribe o no. Todo lo que hay en el sitio debe servir a esa decisión. Quien lo visita suele ser una de estas tres personas:
- Un cliente que quiere saber si puedes resolver su tipo de problema (branding, packaging, redes sociales, impresión).
- Un responsable de contratación o reclutador que busca pruebas de criterio estético, versatilidad y capacidad de trabajar en equipo.
- Un colaborador o una agencia que necesita ver tu especialidad rápidamente.
Decide quién es tu lector principal antes de elegir los proyectos. Un portafolio pensado para clientes freelance de branding no se parece a uno pensado para un puesto junior en un equipo interno.
Cuántos proyectos mostrar
Apunta a entre 6 y 10. Con menos de 6 puede verse escaso, a menos que cada uno sea un caso de estudio a fondo. Más de 10 suele significar que algunas piezas le restan fuerza a las mejores.
Una forma sencilla de decidir qué se queda:
- Haz una lista de todos los proyectos de los que te sientes orgulloso.
- Marca los que coinciden con el trabajo que quieres recibir más. Descarta el resto, aunque te lo hayan pagado.
- Ordena lo que queda por calidad. Pon los tres mejores primero.
- Revisa que haya variedad dentro de tu nicho: por ejemplo, un sistema de logotipo, una pieza de packaging y una pieza editorial o de campaña.
- Si dos proyectos demuestran la misma habilidad, quédate con el mejor.
Las páginas que debes crear
Con cuatro páginas llegas lejos. Añade otras solo si tienes contenido real para ellas.
| Página | Propósito | Qué lleva |
|---|---|---|
| Inicio | Orientar al visitante en segundos | Una frase que diga qué haces, de 3 a 6 proyectos destacados y un enlace de contacto claro |
| Trabajos (o Proyectos) | La galería completa | Miniaturas con el nombre del proyecto y la disciplina, enlazadas a cada caso de estudio |
| Páginas de casos de estudio | Demostrar cómo piensas | Una página por proyecto, hecha con la plantilla de abajo |
| Sobre mí | Mostrar a la persona detrás del trabajo | Biografía breve, foto, habilidades o herramientas, servicios o disponibilidad |
| Contacto | Eliminar fricción | Correo electrónico, formulario si quieres uno y enlaces a tus perfiles profesionales |
Extras opcionales: una página de Servicios si trabajas como freelance, una página de Currículum si buscas empleo y una página breve de Proceso si sigues los mismos pasos en cada proyecto.
Plantilla de estructura para casos de estudio
Copia este esquema para cada proyecto. Mantén cada sección corta. La mayoría de los visitantes lee en diagonal, así que deja que los títulos y las imágenes cuenten la historia.
La plantilla
- Título del proyecto y resumen en una línea. Nombre del cliente o del proyecto, disciplina y año. Ejemplo: "Harbor Coffee Roasters, packaging e identidad de marca, 2025".
- El brief. Dos o tres frases sobre lo que el cliente necesitaba y por qué. Menciona la limitación (presupuesto, plazo, público) si la hubo.
- Tu rol. Qué hiciste tú y qué hicieron otros si fue un trabajo en equipo. Sé preciso: "Diseñadora principal, con una redactora y un impresor" resulta más creíble que "Lo diseñé todo".
- Proceso. De tres a cinco imágenes o textos breves: bocetos, moodboards, primeras direcciones y el razonamiento detrás de la decisión que tomaste.
- El trabajo final. Las imágenes más grandes y limpias de la página. Muestra el diseño en contexto con mockups o fotos reales del trabajo impreso.
- El resultado. Qué cambió, usando solo lo que puedes afirmar con verdad: el cliente lo lanzó, reemplazó una identidad anterior, ya está en las tiendas, se imprimió a cierta escala. Si no tienes cifras, no las pongas. No inventes métricas.
- Enlace al siguiente proyecto. Mantén a la gente recorriendo tu trabajo.
Ejemplos de redacción que puedes adaptar
- Brief: "La clienta, una pequeña panadería de barrio, quería un logotipo y un packaging con aspecto artesanal, pero que se pudieran reproducir a bajo costo en una sola tinta."
- Rol: "Me encargué de la investigación, el diseño del logotipo y el sistema de packaging. La clienta redactó los textos de los productos."
- Pie de imagen del proceso: "Tres direcciones iniciales. Descartamos el logotipo en letra manuscrita porque perdía legibilidad en tamaños pequeños."
- Resultado: "El nuevo packaging se lanzó en primavera y hoy se usa en todas las líneas de producto."
Diseña el sitio para que el trabajo sea el protagonista
- Limita la navegación a cuatro o cinco elementos. Inicio, Trabajos, Sobre mí y Contacto bastan.
- Usa fondos neutros y mucho espacio en blanco. Tus proyectos ponen el color. Una plantilla recargada compite con ellos.
- Elige una o dos tipografías. Como diseñador, tu propio sitio es una muestra de tipografía. Mantenla coherente y legible.
- Haz las imágenes grandes. Las miniaturas deben verse nítidas y las páginas de proyecto deben dejar que las imágenes clave ocupen todo el ancho.
- Pon tu nombre y tu disciplina arriba en la página de inicio. "Maya Chen, diseñadora de marca y packaging" funciona mejor que un eslogan ingenioso que nadie entiende.
- Pruébalo en el móvil. Muchos visitantes abrirán tu enlace desde el teléfono. Revisa la galería, el menú y el enlace de contacto.
- Comprime las imágenes. Los archivos pesados ralentizan las páginas, lo que perjudica tanto a los visitantes como a la visibilidad en buscadores.
Paso a paso: de cero a publicado
- Elige tu enfoque y a tu lector. Una frase: "Diseño [qué] para [quién]".
- Selecciona de 6 a 10 proyectos con el filtro de arriba.
- Escribe cada caso de estudio con la plantilla, empezando por tu mejor proyecto.
- Exporta imágenes listas para la web al tamaño con el que se mostrarán y ponles nombres claros.
- Elige un constructor y un diseño que pongan las imágenes primero y tengan pocas distracciones. Si quieres un punto de partida, la página del creador de sitios web para diseñadores gráficos y la plantilla de portafolio de diseñador con IA muestran cómo se ve un diseño ya preparado.
- Crea las cuatro páginas principales y añade tus casos de estudio.
- Conecta un dominio con tu nombre.
- Revisa todo y luego pídele a un amigo o excolega que encuentre tu correo en el sitio. Si le cuesta, arregla la página de contacto.
- Publica y comparte el enlace en la firma de tu correo, tu currículum y tus perfiles profesionales.
Si estás comparando herramientas, el plan gratuito de We.Inc te permite publicar hasta tres sitios a partir de plantillas prediseñadas; el constructor con IA que redacta un sitio a partir de una descripción arranca con el plan Starter, a $20 al mes. Puedes registrarte aquí. Si vienes de otra plataforma de portafolios, consulta esta lista de alternativas a Portfoliobox.
Checklist de lanzamiento
Cópiala y ve marcando cada punto antes de compartir el enlace.
Contenido
- [ ] De 6 a 10 proyectos, con los tres más fuertes primero
- [ ] Cada proyecto tiene brief, tu rol, proceso, trabajo final y resultado
- [ ] Los proyectos de estudiante, personales y conceptuales están indicados con honestidad
- [ ] No se muestra trabajo de clientes que no tienes permiso de compartir
- [ ] La página Sobre mí tiene foto, una biografía breve y lo que ofreces
- [ ] El correo electrónico es visible en la página de Contacto y en el pie de página
Diseño
- [ ] La navegación tiene cinco elementos o menos
- [ ] Se usan una o dos tipografías de forma coherente
- [ ] El texto se lee bien sobre su fondo
- [ ] Las imágenes son grandes, nítidas y de tamaño uniforme en la galería
- [ ] Cada imagen tiene un texto alternativo descriptivo
Técnico
- [ ] Se ve bien en móvil, tableta y escritorio
- [ ] Las imágenes están comprimidas y las páginas cargan rápido
- [ ] Todos los enlaces funcionan, incluidos los de "siguiente proyecto"
- [ ] Los títulos y las descripciones de página están configurados para la página de inicio y para cada proyecto
- [ ] El dominio propio está conectado y el sitio carga por HTTPS
- [ ] Hay una imagen de vista previa para redes sociales, para que los enlaces compartidos luzcan bien
Después del lanzamiento
- [ ] El enlace está en la firma de tu correo, tu currículum y tus perfiles profesionales
- [ ] Hay un recordatorio para revisar el portafolio cada pocos meses y sustituir piezas por trabajo nuevo
Errores comunes que debes evitar
- Mostrar todo lo que has hecho. Seleccionar es parte de la habilidad que estás demostrando.
- Imágenes sin contexto. Un mockup precioso sin brief no le dice nada al visitante sobre cómo piensas.
- Esconder el enlace de contacto. Si cuesta más de un clic, pierdes consultas.
- Afirmar resultados que no puedes respaldar. Describe con exactitud lo que pasó. Un resultado honesto y modesto es más creíble que una promesa grande y vaga.
- No actualizarlo nunca. Reemplaza las piezas antiguas por otras recientes y más sólidas.
Siguientes pasos
Cuando el sitio esté en línea, el mismo portafolio puede sostener un negocio freelance. Estas guías cubren los pasos siguientes: cómo conseguir clientes de diseño web y cómo hacer crecer un negocio de diseño web son útiles para diseñadores que empiezan a ofrecer sitios web además de diseño gráfico.
Empieza gratis · Sin tarjeta de crédito
Fundador de We.Inc
Umair es el fundador de We.Inc. Escribe sobre la creación de sitios web con IA, las agencias y el negocio de gestionar un estudio web.
¿Listo para crear algo grande?
Únete a los 15,000+ negocios que usan We.Inc para lanzar, crecer y automatizar, todo desde una plataforma.
Empieza gratisSin tarjeta de crédito · Habla con ventas
Relacionado: Blog
- Colores verdes para web
- 25 ideas de marketing de guerrilla para negocios locales
- Web para peluquerías
- HighLevel SaaS Mode o creador web con marca blanca
- Hocoos cerró
- ¿Cuánto se tarda en crear un sitio web? (2026)
- ¿Cuánto cuesta un dominio? Precio inicial y renovación
- Costo de Squarespace 2026
Producto
Para quién es
- Para agencias
- Para freelancers
- Para proveedores de hosting
- Para plataformas SaaS
- Para startups
- Servicios financieros
- Soluciones para salud
Funciones
Recursos
- Blog
- Centro de Ayuda
- Herramientas gratuitas para empresas
- Free UI Components
- Plantillas
- Colecciones de plantillas
- Ejemplos de webs
- Guías
- Comparativas
- Alternativas
- Los mejores
- Reseñas
- Guías de precios
- Casos de uso
- Glosario y guías
- Integraciones
- Desarrolladores
- Benchmark
- Windows App