Los 12 mejores ejemplos de portafolios en línea y cómo crear el suyo

Si está buscando un nuevo trabajo o espera conseguir clientes más grandes y mejores, un sitio web de cartera es imprescindible. Es la mejor manera de exhibir su trabajo y al mismo tiempo dejar que su personalidad brille.

Además, a diferencia de las redes sociales y otras plataformas, los sitios web de portafolios le brindan un control total.

Pero tener el control total puede resultar abrumador al comenzar con el proceso de diseño. Además, con tantos sitios de portafolios, ¿cómo puede destacarse?

Si se pregunta qué separa lo bueno de lo malo, o simplemente necesita algo de inspiración para el diseño web, siga leyendo. Hemos reunido ejemplos de sitios de portafolios de primer nivel de escritores, diseñadores, fotógrafos y más.

¿Sabías? ¡Con GetResponse Website Builder puede crear su portafolio en línea y exhibir su trabajo con facilidad! Viene con plantillas listas para usar y un asistente de inteligencia artificial que creará un sitio completo para usted en cuestión de clics. Vea este video rápido para obtener más información sobre la herramienta y comience a crear su cartera en línea hoy mismo.

Aquí están 12 de los mejores ejemplos de portafolios que hemos visto

1. Kristin Wong, escritora

¿Por qué es este un buen ejemplo a seguir?

Cuando abres el sitio web de Kristin Wong, queda claro de inmediato que es legítima. Ella presenta de manera prominente nombres grandes y reconocibles en su industria usando textos y logotipos: The New York Times, Glamour, CNN, The Cut, etc.

Y todo se muestra «arriba de la página», un término que se origina en la industria de los periódicos y que esencialmente se refiere a la información que el lector ve a primera vista. Con los periódicos, eso significaba el titular de primera plana. Con sitios web, significa la parte superior de la página que es visible sin desplazarse.

¿Por qué importa esto? Porque la investigación más reciente de Nielsen / Norman Group muestra que los usuarios pasan aproximadamente el 57% de su tiempo de visualización de la página en la mitad superior de la página y el 74% del tiempo de visualización en las dos primeras pantallas completas. Luego, en su mayoría se desplazan por el resto del contenido antes de animarse nuevamente cerca del pie de página.

Hablando de eso, Wong también usa el pie de página en su portafolio personal para su ventaja, con capturas de pantalla de su cuenta de Instagram que muestran su trabajo y un gran número de seguidores, una prueba social de que es una escritora bien considerada.

Lecciones clave de este ejemplo

• Coloque su contenido más importante (como su propuesta de valor) en la mitad superior de la página.
• Si ha trabajado con empresas grandes y reconocidas, destaque esta función.
• Muestre muestras de su mejor trabajo en la primera página de su sitio web en un formato visual.
• Utilice la prueba social para convencer a los clientes potenciales y aumentar las conversiones. Esto puede venir en forma de redes sociales, como lo hace Wong, o mediante testimonios.

2. Daniel Grindrod, director de fotografía

¿Por qué es este un buen ejemplo a seguir?

Como director de fotografía, Daniel Grindrod utiliza un carrete cinematográfico destacado de alta calidad para enganchar a los visitantes en su sitio web personal. De hecho, tan pronto como accedes al sitio de Grindrod, el video comienza a reproducirse, atrayéndote de inmediato. Y no hay nada más en la página de inicio, solo su nombre, el menú y el video.

Los visitantes pueden hacer clic en el menú simplificado para ver otros ejemplos de su trabajo, categorizados en video o en forma fija. Y el sitio de Grindrod incluye un blog activo y actualizado que demuestra la autoridad de la industria, mejora el SEO e impulsa el tráfico orgánico a su sitio.

Los blogs ayudan a impulsar el SEO al hacer que su sitio web sea una respuesta relevante a las preguntas de los clientes a través de la búsqueda. Y las publicaciones de blog que utilizan una variedad de tácticas de SEO a menudo tienen una clasificación más alta en los motores de búsqueda, lo que lleva a más clientes a su sitio.

Lecciones clave de este ejemplo

• Utilice todo su sitio web, no solo las piezas de su portafolio, para show lo que puedes hacer. Grindrod es un director de fotografía, por ejemplo, por lo que utilizó la cinematografía. Pero los escritores pueden usar un texto excepcional, los diseñadores un diseño excepcional, etc.
• Si es relevante, use el video para atraer a las personas y mantenerlas allí. Según una encuesta de Wyzowl de 2020, el 83% de los encuestados dice que el video aumenta el tiempo promedio que sus visitantes pasan en la página.
• Utilice un blog optimizado para SEO para generar tráfico y demostrar autoridad.

3. Arlen McCluskey, diseñador de UX

¿Por qué es este un buen ejemplo a seguir?

Todo sobre el sitio de Arlen McCluskey dice diseñador web técnico, desde la combinación de colores vibrantes y el fondo borroso hasta la tipografía. Y si bien parece casi minimalista en la página de inicio, cuando los visitantes hacen clic en uno de sus proyectos, es completamente sustancial.

McCluskey profundiza en los desafíos, metas y resultados de cada proyecto, casi como un estudio de caso, brindando a los clientes potenciales una idea completamente desarrollada tanto de su capacidad como de su enfoque. Y al igual que en los ejemplos anteriores, la cartera de McCluskey menciona a clientes de renombre como AirBnB, Dropbox, Segment y Xero en la parte superior.

Portafolios como estos son especialmente importantes para aquellos en diseño de UX como McCluskey. Como dice Nick Babich, editor en jefe de UX Planet, «En el diseño de UX, las carteras importan más que los grados. Los empleadores y los reclutadores utilizarán su cartera para determinar su experiencia y estética y, lo más importante, su capacidad para resolver problemas comerciales del mundo real «.

Lecciones clave de este ejemplo

• Mantenga su página de inicio simple y limpia, pero no evite el contenido de las subpáginas. Si alguien ha permanecido en su sitio el tiempo suficiente para hacer clic, está interesado en obtener más información. No los dejes queriendo.
• Conozca su industria y lo que buscan las personas. McCluskey hizo un excelente trabajo al comunicar su experiencia y enfoque de resolución de problemas desde el principio.

4. Raewyn Brandon, diseño gráfico

¿Por qué es este un buen ejemplo a seguir?

Para empezar, puede decir lo que hace Raewyn Brandon desde el principio: «Raewyn Brandon es un diseñador gráfico con sede en Tauranga, disponible para proyectos en todo el mundo». Esta copia en sí le brinda todo lo que necesita saber en dos líneas simples. Y el espacio en blanco nítido y ordenado dirige su atención al texto.

El portafolio de diseño gráfico de Brandon muestra sus habilidades de diseño, lo cual es importante considerando su línea de trabajo. Su experiencia brilla a través del diseño simple y limpio que utilizó y su dominio del color.

Además, Raewyn muestra su impresionante trabajo como cliente en la parte superior de la página. Los visitantes pueden hacer clic para ver un resumen completo de cada proyecto, con imágenes y descripciones de calidad.

El menú, horizontal en la parte superior de la página, también es claro y está enfocado al cliente. Ella clasifica su trabajo en impreso o de marca, por lo que los clientes potenciales pueden encontrar fácilmente el tipo de muestras que necesitan.

Y su sección sobre es excelente. La copia es agradable pero también enfocada en el cliente, enfatizando los beneficios de su trabajo en lugar de solo hablar de ella misma. Incluye una foto cálida y elegante de ella misma y de su espacio de trabajo que te atrae.

Lecciones clave de este ejemplo

• Piense siempre en su sitio web desde la perspectiva de un cliente. Debe ser fácil de navegar y debe presentar la información de una manera que sea relativa a sus necesidades, no a las suyas.
• Utilice espacios en blanco para enfatizar el diseño y / o la copia.
• Si tiene mucho trabajo de cliente de renombre, muéstrelo de inmediato.
• Mantenga su menú simple y centrado en el cliente.

5. Anton Cristell, diseñador gráfico e interiorista

¿Por qué es este un buen ejemplo a seguir?

Cuando abre por primera vez el sitio de Anton Cristell, se encuentra con una página en blanco. Al principio, parece que no se está cargando, no suele ser la primera impresión más deseable. Pero tan pronto como mueves el mouse (o el pulgar), te das cuenta de que es un lienzo interactivo que te permite dibujar en él.

Este enfoque único y memorable capta la atención del visitante, casi desafiándolo a hacer clic para ver más. La parte superior izquierda muestra solo su nombre, lo único en la página. Una vez que haga clic en su nombre, aparecerán dos enlaces: Trabajos y Acerca de.

El trabajo de Cristell, que se muestra en la página de su proyecto, es extenso y, al hacer clic en cada enlace, se muestran fotos de cada proyecto de diseño. Su página de acerca de también explica un poco sobre su enfoque y combinación de gráficos, diseño y arquitectura.

Lecciones clave de este ejemplo

• No tenga miedo de romper las reglas o desafiar las tendencias de diseño. La página de inicio de Cristell, aunque desconcertante al principio, motiva a los visitantes a hacer clic a pesar de que desafía la regla de «arriba de la página».

6. Tara Pixley, fotógrafa y periodista visual

¿Por qué es este un buen ejemplo a seguir?

Tara Pixley, fotógrafa y videoperiodista, es la primera de esta serie con un menú de barra lateral, útil porque su trabajo es complejo y requiere varios menús desplegables dentro de la barra lateral.

Si estuviera en la parte superior, crearía una experiencia de usuario confusa. Sin embargo, estar a un lado permite una fácil navegación mientras mantiene su fotografía al frente y al centro. Esto equilibra la complejidad del menú con la simplicidad del diseño.

Por lo general, es mejor mantener los menús simples. Muchos sitios web siguen el mantra del «Número mágico 7 +/- 2», que se refiere a investigaciones que muestran que los humanos solo pueden retener 7 elementos a la vez en la memoria a corto plazo.

Pero en el caso de Pixley, está apuntando a los principales medios de periodismo y organizaciones de alto perfil. Entonces, la complejidad es apropiada para la audiencia destinataria.

Además, al igual que Raewyn Brandon, el sitio de Pixley utiliza mucho espacio en blanco para comunicar claramente lo que hace y, al mismo tiempo, muestra su destreza artística.

Lecciones clave de este ejemplo:

• Tenga en cuenta a su audiencia al diseñar el menú de su propio sitio web.
• Los menús de la barra lateral pueden resultar útiles para equilibrar la profundidad de la información con un diseño simplista.

Nota del editor: ¿Quiere crear un sitio web como este? A continuación, le mostramos cómo puede crear un sitio web de fotografía con nuestro creador de sitios web intuitivo.

7. Robby Leonardi, diseñador ilustrativo y animador

¿Por qué es este un buen ejemplo a seguir?

El sitio de Robby Leonardi es uno de los más geniales. Un diseñador ilustrativo y animador, Leonardi pone su sitio a trabajar gamificando su currículum. Los usuarios se desplazan por el sitio interactivo utilizando el mouse o la flecha hacia abajo del teclado.

Desglosa su currículum en «niveles», siendo el primero una sección acerca de donde los usuarios descubren que es de Nueva York y un fanático de la NBA. En el nivel dos, el personaje corre a través de un mundo submarino que enumera sus habilidades de software gráfico y web, junto con juegos y habilidades de lenguaje de codificación.

El nivel tres muestra la experiencia laboral de Leonardi con gráficos visuales que desglosan la cantidad de animación, código y gráficos involucrados en cada puesto. En la última sección, el personaje flota en un globo aerostático mostrando pancartas que destacan sus premios y publicaciones. El globo «aterriza» en una sección de contacto, con pequeños fuegos artificiales divertidos y una celebración como si hubieras ganado el juego.

Lecciones clave de este ejemplo

• Al igual que en el sitio de Daniel Grinrod, piense en sus habilidades e industria específicas. ¿Existe alguna forma de utilizar su sitio web para mostrarle a la gente lo que puede hacer? Si es así, ve por eso.

8. ToyFight, diseñadores

¿Por qué es este un buen ejemplo a seguir?

ToyFight va a mostrarle que las páginas de portafolio no son solo para solos …