Ir al contenido principal

17 ejemplos de portafolio de desarrolladores web + qué debes incluir

Construye un portafolio de desarrollador web que te ayude a conseguir trabajos con esta guía de Mailchimp que presenta 17 ejemplos de desarrolladores excepcionales.

Como diseñador web, necesitas tener un portafolio que muestre tu trabajo. Un portafolio web te permite mostrar a un posible cliente que tienes las habilidades y la experiencia para completar un encargo. Y tener un portafolio impresionante puede ayudarte a conseguir el contrato a pesar de la competencia.

Pero, ¿qué es lo que hace que un portafolio web sea excelente? Hemos recopilado algunos ejemplos de portafolios de diseñadores que están bien ejecutados.

Cuando veas esta lista, piensa en lo que te llama la atención y en lo que harías de forma diferente. A continuación, puedes utilizar estos ejemplos para ayudarte a elaborar un portafolio web único que te ayude a conseguir nuevos trabajos.

17 ejemplos de portafolios de desarrolladores web

Vamos a ver algunos ejemplos de páginas web de diseñadores web, lo que los hace especiales y por qué deberías intentar emularlos. Mira estos diseños y pregúntate:

  • ¿Qué es lo que más te llama la atención?
  • Si fueras un empresario, ¿en qué te fijarías?
  • ¿Cómo los mejorarías?

Pero no nos limitamos a lo mejor de lo mejor, sino que también echamos un vistazo a lo que podría no funcionar. De este modo, podrás navegar por el proceso de diseño del portafolio con una idea más clara de lo que quieres y no quieres incluir.

1. Max Bock

El portafolio de diseñador web de Max Bock va directo al grano. Él hace sitios web. Encontrarás este estilo de introducción directa en muchos portafolios.

La verdad es que es fácil hacer algo complicado, es más difícil hacer algo bonito y sencillo. No se limita a ofrecer un portafolio, sino una serie de herramientas y consejos para los que pertenecen al sector, mostrando claramente su experiencia.

¿Qué deberías aprender de este portafolio?

  • Ir directamente al grano en lugar de divagar.
  • Muestra tu experiencia lo antes posible.
  • Un sitio web atractivo no tiene por qué ser complicado.

2. Olaolu

El portafolio de Olaolu para el desarrollo front-end presenta colores brillantes, formas geométricas y un diseño excitante y conmovedor. Es atractivo y, sobre todo, no se toma demasiado en serio a sí mismo. Hoy en día, la web está evolucionando hacia algo significativamente menos recargado y corporativo. Este portafolio se adapta perfectamente a ese concepto.

Los ejemplos de páginas web de diseñadores deberían:

  • Arriesgarse: a veces está bien ser divertido, emocionante y estar a la moda.
  • Expresar tu personalidad.
  • Experimentar con nuevos diseños.

3. Jason Lengstorf

Jason Lengstorf tiene, aparentemente, muchas ideas. Con colores brillantes, hermosos y audaces, su sitio web es una muestra de sus habilidades de diseño incluso antes de llegar a sus trabajos. No solo tiene publicaciones específicas del sector, sino que también participa en un boletín de noticias y recopila y comparte una serie de casos de uso y elementos de diseño.

El contenido de un sitio web de un diseñador podría incluir:

  • Posts en el blog sobre elementos de diseño interesantes.
  • Proyectos que has dirigido en el pasado.
  • Opiniones sobre las tendencias de diseño actuales.

Prueba el Gestor de contenido de Mailchimp para ayudarte a empezar.

4. Oluwakemi Adeleke

Otro sitio web divertido, en este caso personalizado con un "Me-moji" de Apple. Este es un portafolio muy personal que realmente muestra a la persona detrás de los diseños, otra táctica que puedes usar cuando estás desarrollando un portafolio que seguramente causará impresión. Ten en cuenta que si eres un diseñador de UI/UX, tu portafolio también debe mostrar la accesibilidad.

Las cosas que podrías compartir en tu sitio web incluyen:

  • Una foto de ti haciendo algo que te gusta.
  • Información biográfica sobre tu carrera.
  • Algunas cosas sobre tus aficiones y cosas con las que disfrutas.

5. Robb

"Hola, me llamo Robb." Otro portafolio muy personal.

La gente contrata a otras personas, no a diseñadores; puede parecer una abstracción, pero cuanto más puedas mostrar tu personalidad en el portafolio, mejor. Este es especialmente notable porque es animado, emocionante y atractivo. A medida que te desplazas hacia abajo, todos los elementos se animan y se mueven sobre ese fondo verde menta tan chulo.

Por supuesto, no es conveniente animar todo en tu página web. Incluso el parallax puede resultar recargado y desconcertante si se utiliza demasiado.

¿Cuándo deberías animar tu portafolio?

  • Cuando ya se esté desplazando.
  • Con moderación, cuando quieras llamar la atención.
  • Solo para cosas muy importantes.

6. Cassie Codes

Un sitio web interactivo y caprichoso con animaciones explosivas. El portafolio de Cassie Codes es único en la medida en que está diseñado intencionalmente para ser lúdico. La página muestra la carrera de Cassie y sus aspiraciones futuras; no es solo una programadora y diseñadora, sino también una líder de pensamiento.

Tu portafolio debe ir más allá de ti mismo, mostrando también lo que quieres para tu carrera en el futuro.

¿Qué demuestra realmente que eres un líder en tu sector?

  • Enlaces a cuentas de redes sociales reconocidas.
  • Publicaciones en revistas de tu sector.
  • Charlas o paneles que hayas realizado en el pasado.

7. Jhey Tompkins

No es necesario tener una página web llamativa o llena de movimiento. El portafolio de Jhey solo tiene unos pocos elementos en movimiento. En su lugar, se apoya en los testimonios: citas sobre su trabajo de quienes lo conocen. Este es otro método muy potente para desarrollar una reputación, pero alguien que ha trabajado para Google, probablemente no necesita demasiada validación.

Métodos para recopilar testimonios de la cartera:

  • Ponte en contacto con clientes anteriores.
  • Pregunta a tus colegas lo que piensan de ti.
  • Habla con tus supervisores.

8. Lynn and Tonic

El portafolio de Lynn es una increíble muestra de tecnología front end, depende del tamaño de tu ventana cuando la ves. Se trata de una idea muy extravagante; de hecho, puede que ni siquiera funcione con claridad para la mayoría de la gente. Pero como se arriesga, es memorable. Demuestra un excelente dominio de la tecnología al tiempo que hace algo poco convencional.

¿Hasta qué punto deberías arriesgarte con tu desarrollo web?

  • Si buscas trabajos de alto nivel, puedes ir más allá de los límites.
  • La mayoría de los solicitantes de empleo de nivel inicial no quieren probar nada que se salga de lo normal.
  • Puedes arriesgarte con un elemento (por ejemplo, un elemento del portafolio) en lugar de con todos ellos.

Solo ten en cuenta que con cada riesgo hay una posibilidad de fracaso, así que asegúrate que cualquier cosa fuera de lo común funcione muy bien.

9. Gift Egwuenu

Este es otro gran ejemplo de personalización. Puedes obtener prácticamente todo lo que necesitas saber sobre Gift en su página web. Esto enlaza directamente con las cuentas en redes sociales de Gift y las cuentas de desarrollador, como su Github, lo que demuestra aún más su experiencia, sus habilidades y la amplitud de su carrera.

Pero, por supuesto, no todo el mundo es un desarrollador de pleno derecho como Gift. Entonces, ¿qué hacen los creadores si son más diseñadores que desarrolladores?

También puedes utilizar un creador de sitios web si:

  • Tienes los conocimientos suficientes para personalizarlo.
  • Eres más diseñador que desarrollador.
  • Tienes un desarrollador con el que trabajas.

10. Bruno Simon

El portafolio interactivo de Bruno Simon es bien conocido en el sector. El sitio en sí es realmente el portafolio, tras verlo conoces todas las habilidades de Bruno. Todo el portafolio de Bruno es un juego interactivo en el que se juega con el ratón y el teclado. Un currículum/portafolio interactivo es estupendo, si puedes llevarlo a cabo. Pero requiere mucha habilidad, más de la que tienen la mayoría de los programadores principiantes.

No todas las páginas web tienen que ser una producción. La simplicidad puede ser beneficiosa si:

  • Eres un desarrollador de back end y no eres particularmente conocedor del diseño de front end.
  • Tienes mucha experiencia laboral que respalda tu trabajo.
  • Te especializas en diseños minimalistas o de cara al móvil.

11. Timmy O'Mahony

¿Y si en realidad eres un programador de back end? Hay que tener en cuenta que no todos los desarrolladores web son desarrolladores front end. La mayoría de los ejemplos más llamativos que hemos destacado son de desarrolladores front end que pueden crear diseños interactivos.

Pero los programadores de back end son los que hacen girar el mundo. ¿Necesitan aprender Bootstrap y Adobe Illustrator? No, solo necesitan una visión general de sus habilidades, que es algo que Timmy O'Mahony ofrece aquí.

Considera la posibilidad de utilizar un gestor de contenidos o un CMS para el trabajo de back end. También puedes:

  • Buscar excelentes plantillas de portafolio, como las de Mailchimp.
  • Descargar una plantilla o un ejemplo en Github.
  • Trabajar con un desarrollador o una empresa de desarrollo.

12. Oluwadare Oluwaseyi

Este portafolio es impresionantemente audaz. No solo está lleno de movimiento emocionante, sino que sigue siendo claro, dramático y atractivo. El texto llena la página. No es difícil hacer este portafolio. Pero es difícil hacerlo bien.

Este ejemplo de portafolio muestra claramente que Oluwadare tiene un dominio total sobre la página, algo que es muy difícil de hacer con unas pocas palabras.

¿Cuáles son algunas de las grandes tendencias que se imponen ahora en los dominios web?

  • Diseños que dan prioridad al texto y a la tipografía.
  • Los colores vivos y los acentos llamativos sobre los neutros profundos.
  • Animaciones y formas geométricas divertidas y emocionantes.

13. Josh Comeau

¿Y qué hay de demostrar tus habilidades? El portafolio de Josh es un sitio web completo que ofrece conocimientos e información sobre una multitud de aspectos del desarrollo y el diseño web.

Al leer esta página, puedes ver que Josh tiene muchas ideas clave sobre lo que ocurre y lo que no ocurre en el mundo del diseño. Sabes que es un profesional con estudios, incluso antes de ver cualquiera de sus trabajos de diseño.

¿Cómo puedes establecer tus credenciales profesionales?

  • Publica regularmente posts en tu sitio web.
  • Habla de tu oficio en las redes sociales.
  • Participa en eventos del sector.

14. Denise Chandler

Suave, hermoso y brillante, realmente no hay nada como este portafolio. Este portafolio demuestra que tiene un estilo único y sabe cómo destacarlo.

Si tienes un estilo personal que destaca, tienes la oportunidad de resaltarlo en tu portafolio. No estás vendiendo el trabajo de nadie más que el tuyo. Muchos clientes potenciales quieren ver tu verdadero yo. Páginas y páginas de contenido aburrido y estático o páginas corporativas genéricas no van a venderte como algo completamente original.

Pero, al igual que la pregunta sobre el "riesgo", la singularidad también puede resultar alienante. ¿Hasta qué punto puedes salirte de la norma con tu estilo? Equilibra cualquier elemento único:

  • Incluyendo también trabajos más tradicionales.
  • Destacando solo uno o dos elementos únicos a la vez.
  • Creando páginas web diferentes para distintos puestos.

15. Jack Jeznach

Echa un vistazo a este sitio web de moda, casi grunge y de colores brillantes, realizado por un desarrollador front end y experto en WordPress.

Este divertido y animado sitio web muestra una serie de proyectos, junto con una visión completa de las tecnologías que Jack domina. Las palabras saltan de la página y la selección de colores es extraordinaria, legible y moderna.

¿Cómo se selecciona una paleta de colores para el portafolio?

  • Selecciona un color que realmente te guste y su color complementario.
  • Haz un degradado monocromático del color que realmente te gusta.
  • Utiliza un selector de color estándar.

16. Annie

Una diseñadora convertida en desarrolladora, por supuesto, diseñaría un sitio web magnífico, y Annie ha hecho exactamente eso.

El sitio web de Annie nos presenta a ella, su mundo y su trabajo. Es otro gran ejemplo de personalización. Annie ha diseñado y desarrollado multitud de proyectos, que aparecen en un lugar destacado de su portafolio. Si tienes proyectos que están activos, siempre debes promocionarlos y comentar lo que has aprendido con ellos.

¿Debes destacar el desarrollo, el diseño o ambos?

  • Considera la posibilidad de crear un portafolio para cada uno de ellos.
  • Divide tu portafolio en dos partes.
  • Destaca los proyectos en los que hiciste ambas cosas.

17. Brittany Chiang

Siempre es un riesgo tener una imagen de carga en tu página, pero esta merece la pena.

Este hermoso portafolio tiene una paleta de colores relajante pero atractiva y un diseño principalmente de texto. Sin embargo, aprovecha las animaciones y el movimiento para seguir siendo atractivo. Si tienes un sitio muy pesado, es mejor cargarlo con antelación. Y si consigues que el público espere, al final se comprometerá más.

¿Cómo hacer que un sitio con mucho texto sea emocionante?

  • Elige los tipos de letra adecuados.
  • Utiliza colores para enfatizar.
  • Asegúrate de que es accesible.

Qué incluir en tu portafolio

Si estás buscando un trabajo como desarrollador web, necesitas estar en Internet. Tu posible empleador querrá ver que tienes un sitio web activo y que lo mantienes actualizado.

Para sacar el máximo partido a tu portafolio de sitios web, aquí tienes algunas cosas que deberías incluir:

  • Conecta con tus perfiles en las redes sociales. Aunque no tengas miles y miles de seguidores, tu empleador quiere ver que estás comprometido con el sector y que realmente sigues las nuevas tendencias. Por supuesto, primero debes asegurarte que tus perfiles en las redes sociales son lo más profesionales posible.
  • Añade algunas publicaciones en tu blog sobre el diseño y el sector. Piensa en las formas en las que no estás de acuerdo con las tendencias actuales o los aspectos del diseño sobre los que la gente te ha pedido tu opinión o en los que crees que tienes experiencia. Tu opinión es una parte valiosa del sector.
  • Incluye una variedad de sitios web que estén actualmente en funcionamiento. Tus posibles empleadores quieren ver tu trabajo en acción. Un sitio web activo vale más que un puñado de sitios web teóricos porque es algo que alguien realmente compró, pagó y sigue utilizando.
  • Incluye algunos diseños bien pensados que aún no estén en funcionamiento. Aquí es donde puedes mostrar tus diseños de alto riesgo, únicos o incluso prácticamente inviables. Profundiza en cosas que puedan considerarse controvertidas (como elementos con mucho texto o estilos muy animados), ya que aquí es donde demostrarás que eres un líder de opinión.
  • Elige un nombre de dominio que sea corto y específico. Con un nombre de dominio fácil de recordar, será más fácil que te encuentren.

Esto muestra la amplitud de tus habilidades al tiempo que profundizas en tu experiencia como desarrollador web. Si no tienes ningún sitio web en funcionamiento, es probable que necesites diseños muy detallados.

Errores que debes evitar en tu portafolio

Cuando estás haciendo un portafolio, puede ser fácil cometer algunos errores habituales. Estas son las cosas que debes evitar al hacer tu portafolio de desarrollador web:

  • No incluir contenido genérico. Tu portafolio debe estar adaptado al trabajo específico que quieres. Una media docena de sitios web corporativos no te servirá de nada si estás intentando conseguir un trabajo en un sector emergente.
  • No utilices los diseños de otras personas. Eso es plagio y se notará. Aunque es fácil subir plantillas apenas modificadas de otros diseños (y, siendo realistas, esto ocurre a veces cuando se trabaja), tu portafolio debe ser lo más exclusivo posible. Cita cualquier trabajo de otras personas que hayas utilizado.
  • No utilices un tema básico de WordPress. Eso es poco profesional; incluso si el empleador potencial no puede identificar que es WordPress, sabrá que tiene "el mismo aspecto" que otros sitios que ha visto.
  • No lo compliques demasiado. Limítate a lo básico y evita todo lo que pueda resultar confuso para tu posible empleador. Cuanto más confuso sea el sitio de tu portafolio, más probable será que los posibles clientes renuncien a tratar de entenderlo, lo que podría costarte el trabajo.
  • No intentes incluir todo. No es necesario que incluyas todas las cosas que has hecho, sino solo unas pocas que realmente muestren lo mejor de tu trabajo.

Si evitas estos errores y sigues algunos de los consejos que te dimos en los ejemplos de portafolio para desarrolladores web, podrás crear un portafolio que será muy útil para ayudarte a conseguir los trabajos que quieres.

Crea un portafolio que venda tus habilidades

Ahora que sabes lo que debes incluir en tu portafolio, es hora de empezar. Crear un portafolio puede ser una tarea desalentadora, pero es esencial para cualquier desarrollador web. Siguiendo estos consejos y ejemplos de portafolios para desarrolladores web, podrás crear uno que venda tus habilidades y te ayude a causar una buena impresión.

Cuando crees un portafolio de desarrollador web, es importante que tengas en cuenta que tu objetivo es destacar tus habilidades. Esto significa que debes incluir solo los mejores ejemplos de tu trabajo. No incluyas nada que no sea necesario (a menos que sea una gran manera de destacar tus habilidades) y asegúrate que todo esté actualizado.

Empieza a construir tu sitio web y a crear un portafolio hoy mismo con Mailchimp.

Comparte este artículo