How my portfolio came to life
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:
- A portfolio has to make a great first impression. Unfortunately, people judge online content 10x faster than in real life. Portfolios have very low retention rates, and 99% of users are unlikely to ever see it again. It’s a one-shot. Making a portfolio takes a lot of time and effort to build, yet people only merely look at it to make an opinion of you. It’s a frustrating experience.
- There are many tools online to build code-less (without you needing to type in code) portfolios. However, you often end up with the same themes and layouts as hundreds of other designers, which makes it hard to stand out from the crowd. These tools are great only if you accept to lose a certain degree of creative freedom. Yet diving into code to build your ‘dream’ portfolio is difficult when you just have a basic programming knowledge.
- The hardest thing of all things is to actually maintain that portfolio up to date. It’s a living document that is in constant evolution, yet we too often leave it abandoned.
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 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.
