7 reasons to create your UX Design portfolio in Framer
A few months ago Framer launched the beta version of its product to create websites. I’ve been using Framer for high-fidelity prototyping for a long time but this new tool really surprised me so I jumped into beta testing to build my new portfolio.
What has happened is business as usual. Every time I redesign the portfolio, I am stopped by the indecision of what is the best layout, what projects I want to show, and what style best represents me. It’s like I forgot to design experiences when I have to design my own product 🤦♀️.
But finally, 4 months later I just published the first version of the Homepage of my portfolio.
So now I can tell you from my experience how it has been to use Framer to make the portfolio and what are the advantages it has from my point of view.
Advantages of Framer to create websites
1. The interface is very similar to any other design program.
Framer is very similar to Figma, Adobe XD, or any other UI design program. They have a similar structure with a layer management panel on the left, a properties panel on the right, and a central area for designing.
2. It has pre-built integrations and components that streamline site creation.
Some of the examples of components that you can use are:
- Forms: Formspark, Hubspot, Mailchimp, Typeform
- Audio: Spotify, Apple Podcasts, Soundcloud, Apple Music, Simplecast
- Animation & Video: Youtube, Vimeo, Lottie
- Social media integrations: Instagram, Facebook, Twitter, Google Maps, Tagembed
- Ecommerce: Eventbrite, Gumroad, Shopify
- Calendar: Calendly
- Chat: Intercom
3. It has its own content management system.
This makes it completely easy to manage site content and create dynamic pages, especially if the case studies you plan to include have similar structures.
It is also very useful if you want to include your own blog.
4. The site is fully responsive and incredibly easy to do!!
You can build the breakpoints by viewing all resolutions as you would in Figma for export.
Simply start with the resolution you prefer. And then by adding a new resolution you’re going to have all the same content rearranged for that new size.
You will surely have to reorganize it if you see that it is not as you thought, but it is already a wonder that it is almost completely automated.
And obviously, since it is the same content, every time you update something in one resolution it will also be updated in the others.
5. Touch the publish button and you will have your online portfolio, it’s that simple.
When you try to publish for the first time you will see a rather strange url and you will surely not like it.
The good news is that Framer allows you to create your own subdomain for free, so your portfolio would have a url similar to: example.framer.website
If what you want is to put your personal domain then you will have to pay a premium plan.
6. Stay on top of your site traffic.
If you’re obsessed with data and analytics, you’re going to love that Framer gives you an analytics section of your site.
If that’s not enough, you can always include your Google Analytics ID tracking 😉.
7. Configure your site data for SEO.
From the configuration section of your site, you can include the data of your site so that it is correctly indexed in search engines. These are the data that you can configure:
- Site title
- Language
- Description
- Favicon
- Open graph image
Bonuses!!
Framer allows you to embed code or widgets from external services. Although this sounds like it is for programmers, it is actually super useful. Here are some use cases:
It was a pleasure to share with you what I learned in these months, I hope it will help you decide if you were considering Framer to build your portfolio.
Here I leave mine in case you want to see how it turned out for now and if you have comments or recommendations they will be very welcome. 😁
