Creando mi portfolio con una hoja de Notion

Pablo Hermida
5 min readJun 17, 2022
Muchas veces lo único que necesitamos es una idea sencilla

Unos de las preguntas que siempre aparecen en la vida del Product Designer es la de ‘¿Cómo muestro de lo que soy capaz?’. En este punto me encontraba hasta hace muy poco. Llevaba tiempo dándole vueltas a la creación de una nueva versión de mi portfolio pero no sabía qué hacer: lo hago con webflow, monto un wordpress, se lo pido a un programador para que me lo haga de cero… Al final gracias al consejo de un buen amigo encontré a un aliado que llevaba ahí mucho tiempo y que no sabía que lo podía usar para crearme una web: Notion.

Desde hace ya un par de años que conozco Notion y lo uso a diario. Es una herramienta fácil, rápida de usar y, sobre todo, muy muy útil. Puedes crear grandes estructuras de información y organizarlas como quieras. Es un punto muy a favor cuando quieres redactar documentación o gestionar tareas y equipos. Un diez de diez vamos.

Lo que te quería contar es que he podido crearme una web para publicar mi portfolio con literalmente una página de Notion. He visto muchos portfolios últimamente que se hacen a través de Notion y la verdad es que me parece una idea increíble. Puedes estructurar toda la información que quieras de manera óptima y puedes vincular proyectos que tengas publicados en otras plataformas de una manera elegante y bonita. Pues, si a todo esto le sumamos que podemos generar una web a partir de tu Notion, ¿por qué no hacerlo? Te presento a super.so.

Gracias a esta herramienta he podido crear mi web desde cero y personalizarla como a mí más me gustaba. Puedes cambiar colores, tipografías, añadir CTAs, navegación e incluso código. Tiene un plan gratuito con el que puedes hacer prácticamente de todo y una versión de pago donde puedes implementar tu código personal y crear tu propio dominio. En mi caso, y viendo algunos portfolios actuales muy interesantes, con el plan gratuito puedes conseguir mucho. Te explico cómo he hecho mi nuevo portfolio y porque he tomado algunas decisiones:

Estructura

Aquí me he dejado guiar por el patrón ‘si más breve, mejor’. Actualmente he visto que muchos diseñadores se están dejando llevar por la corriente de hacer portfolios accesibles y escuetos donde en muy poco podamos ver todo el potencial que tienen. En esta idea me he basado yo para crear el mío. Presentarme, conocer mi trabajo y poder contactarme. Fácil, sencillo y para toda la familia. La estructura que he seguido es la siguiente:

  • Header: He usado un color Abeto encalado (#303944) para dar un toque oscuro pero tirando hacia el azul y que dé un toque de serenidad y calma. He hecho un header sencillo, con mi nombre a la izquierda y un CTA en negro (#272A2C) donde he dejado un link para descargar mi CV. El texto del botón indica directamente lo que hace la acción.
  • Hero: El hero de la web es una imagen que define el contenido de la web: diseño de experiencia de usuario. En él podemos ver la definición de diccionario de la palabra diseño, mostrándose a través de un móvil. Es decir, el diseño a través de lo digital, la experiencia de usuario, el diseño de producto basado en nosotros: los usuarios.
  • Presentación: Acompañada de una fotografía en un componente avatar, comienzo mi web con un saludo y una presentación rápida sobre mí y cómo entiendo el rol de Product Designer. En pocas palabras te doy una pincelada de lo que estás a punto de descubrir más adelante sobre mí.
  • User Cases: En esta primera sección presento varios de mis trabajos personales a través de distintos posts que he escrito en Medium. En ellos hablo sobre todo el proceso de diseño que he ido siguiendo: desde el briefing al testing con usuarios, pasando por research, wireframes, prototyping He procurado que estos posts sean muy detallados y cuenten de primera mano toda mi experiencia creando productos digitales para así no dejar ninguna duda al respeto. Son stories bastantes completos y donde dejo ver mi forma de trabajar y de entender a los usuarios y a sus distintas necesidades. ¡Espero que te gusten!
  • About me: Esta pequeña sección la he usado para presentarme y hablar un poco de mí. Como Frontend Developer convertido a Product Designer creo que tengo mucho que aportar al área de diseño a través de mi experiencia de varios años a el área de desarrollo. ¿Cuántas veces nos hemos encontrado con problemas de entendimiento en estos dos áreas? ¿Qué positivo sería tener a alguien que hable estos dos idiomas? Mi idea es poder contestar a todas estas preguntas en esta sección y mostrar que soy un perfil de Product Designer distinto. ¿Lo crees así? Junto a toda esta información viene con una foto mía para que al menos me pongas cara.
  • Writing: La penúltima sección de la web nos trae varias de las distintas stories que he ido escribiendo en Medium sobre el mundo del producto digital y que me gustaría compartir con todo el mundo. Lo que más me gusta de Medium es que puedes plasmar tus ideas de una forma rápida y directa y el público que te lee puede compartir contigo qué le ha parecido el post y aportar nuevas ideas. Good bless Medium!
  • Shall we have a coffee?: Espero que se entienda la idea de este texto pero básicamente aquí presento la sección de contacto. Vuelve a estar acompañada de una imagen en un componente de avatar para cerrar de forma orgánica ese círculo que estamos creando desde que arranca la web: Avatar a la izquierda en la presentación, imagen del About Me a la derecha y de nuevo avatar a la izquierda en la sección de Contacto para terminar. En esta sección simplemente dejo mis datos de contacto y aporto un poco de humor para terminar con el portfolio. No engaño a nadie, ¡qué no muerdo! Si quieres que charlemos ya sabes dónde encontrarme.
  • Footer: Vuelvo a usar el mismo color del Header para cerrar la web de la misma forma que empieza. Es un footer sin sobrecarga de información donde lo más importante es la sección de redes sociales para poder contactar conmigo o ver mi perfil en LinkedIn.

Toda esta fuente de información está muy bien, pero lo más importante es saber dónde está el portfolio. Ya voy, ya voy, no tengamos tanta prisa :D Aquí debajo te lo dejo, espero que te guste.

Y con esto terminamos esta story sobre cómo he realizado mi portfolio únicamente a través de una hoja de Notion. A veces tenemos las mejores soluciones delante de nuestra cara y no caemos en ellas, así que espero que si has llegado hasta aquí y te estuvieses preguntando sobre cómo hacer tu web, puede que te haya ayudado a tomar una decisión. ¡Nos seguimos leyendo!

See you soon!

--

--