5 Lessons Learnt Making An Interactive Portfolio Using Spline, Webflow & GSAP
Webflow's built in GSAP isn't complete...
Hey guys,
I just spent the last couple of weeks working on my portfolio website. Check it out here.
It’s been a bit of a process of trial and error.
Here are the 5 most important lessons I’ve learnt:
1) Mobile First
As much as making exciting interactive websites are fun, it’s important to consider that over 50% of your traffic are likely mobile users. I saw this tweet recently which showed 3 wildly fun websites that went through a massive redesign to simplify their UI which no doubt increases conversions.
Remember, the more “out-there,” design you have, the more overwhelming it may be for the user.
Now, I’m all about interactivity but it has to be in the right context and considered for mobile users as well as desktop users.
Scrolling through awwwards websites, you only ever see desktop, which is cool - but consider the mobile design carefully.
I radically simplified my portfolio design after showing it to my girlfriend (who hires freelancers often since she’s an events producer) who said she just wanted to see the work and where to contact if she likes what she sees.
It’s a stark reminder to us all in the re-designing portfolio trenches.
2) Loadspeed
53% of mobile users abandon a website if it takes longer than 3 seconds to load: according to Envisage Digital.
I know.
Savage.
But, if you’re using Spline in your Webflow projects, I advise using MAX 1 embed in your page.
Check out this website that I made to show this.
The asset is simple but adds a lot to the page and scrolls down with the user encouraging scroll.
More than this, loadspeed would massively decrease.
If you want multiple assets like I did, I recommend recording mp4s in Spline, converting them to webm files and then uploading them to vimeo or cloudflare to play from there on your Webflow site.
That’s the fastest loading speed I’ve found to play Spline recorded assets like this website:
3) Use a paired back colour palette to allow work to shine
Look at these studios. All of them (Clim, Studio Size, Ashfall Studio) have paired back colour palettes that allow the work to shine.
Now I’m not saying that your portfolio site should have a dark aesthetic but just think about contrast when it comes to your site.
Make sure the design in the central focal point to allow it to sing.
4) GSAP animations
Right now, the GSAP Webflow native integration is basic. It’s worth considering using GSAP’s documentation to get your deserved result.
I hacked away with Chat GPT to actually make something I was happy with because some animations just didn’t work with Webflow.
5) Easter Eggs
I wanted to drop in fun little bits and bobs across the site to delight.
These might be buttons (from Eduardo Bodak which are incredible) and then the nav bar has some fun little gifs like a rumba man.
These are fun to discover as you use the site.
11 Lovable Lessons Learnt Loving Lovable
So, I’ve made an app.
Yes, it’s ugly but early days.
And it’s built with Lovable.
I recorded a video on what not to do.
If interested, have a gander.
You still here?
Wow, you really love this newsletter, huh?
Well, here’s some free 3D assets to thank you
Cheers,
Jack