Metablog
Subscribe
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

How my portfolio came to life

I made my previous portfolio using only Sketch. Here I provide the method and the tools to make this possible.

A reflection on portfolios and my solution to finally be up to date.

TLDR: I made this portfolio with this prototyping tool. Here I provide the method and the tools to make this possible.

A small introduction

Portfolios define who we are. So better make ‘em good. Building one is a daunting task though. Here’s why:

Ideally, all portfolios should be beautifully crafted, quick to build and easy to maintain. And I found a unique solution to tackle these 3 challenges.

How this is possible

I used Sketch 3.0 (Photoshop works too) and Marvel combined with this plugin. This plugin enables designers to ‘push’ their artboards (via ⌥ + ⌘ + F) onto their marvel prototype. The result: I built my portfolio in less than half an hour without touching a bit of code.

What this means is that designers can seamlessly upload multiple web pages (devised under so-called ‘artboards’) online, then animate the interactions between the pages with https://marvelapp.com/. This costs no money and takes a minute to set up.

The first thing I did was to open Sketch, and just literally design my portfolio. I opted for a clean mosaic presentation and I divided each project into separate artboards. Also, I synced my Sketch file (which you can download below) on Dropbox so I’ll always be able to access it, wherever I am.

Once I was done, I just sent it to Marvel:

Then I just added the ‘hotspots’ on my marvel project online. I choose the ‘push left’ and ‘push right’ transitions to animate my portfolio’s flow. This is what it looks like in the marvel editor:

The animations in my marvel portfolio

quick.as

The limits

My portfolio is not truly responsive as Sketch only uploads ‘still’ images to Marvel. Thus, the text of my portfolio is hard to read on mobile phones. I’m currently trying to find a way to get around that obstacle (with a link to a smaller version of the portfolio for example, although updating the desktop + mobile version each time I add a project might be too inefficient in the long run).

Conclusion

When I have a new idea for a project/startup, the Sketch/Marvel combination is my secret weapon to test ideas fast. It’s beautiful and very convenient.

Thanks for those who appreciated the idea, feel free to ask me any question on twitter @Bissenmann.

Here is my Sketch file to dissect: www.dropbox.com/s/emiuhyk44oms7a2/Personal%20projects.sketch?dl=0

Bonus: Using bit.ly’s short links is a good way to get around the not-so-pretty Marvel URL (https://marvelapp.com/4ci2d) to just be bit.ly/bissenmann. It gets the job done.