Your Portfolio in 6hrs with Framer
Arjun Phlox
Multi-Disciplinary Designer & Artist. Consultant in Digital Product Design, Brand Experiences, Visual Development at UX Labs. Design Educator at Xperian School.
One of the common things I noticed among Framer learners is their inclination to use the tool to build their Portfolios.
That is great because Framer is the most Designer-friendly Build tool for this use-case. Until Framer, there's never been an easier way to publish custom highly interactive sites that helps Designers to showcase their creativity.
But there is an open joke that esp. Designers, take forever to design their own portfolios. I empathise with the overthinking. ??
But if you’re up for turning this joke into a myth, here are 6 steps to make a successful "first cut" of your personal site in just 6 hours, provided you know the basics of Figma & Framer. ??
→ Step 1: Time Box
To be a Designer is to Play. And playing within constraints is a powerful way to progress and overcome overthinking. So the first step is to constrain yourself to just 6 hours to Design and Build your portfolio.
→ Step 2: Get to the Core [30mins]
Your site is already half well done if it answers 4 simple things and in simple ways:
a) who are you
b) what do you offer
c) type of projects you did
d) how to contact you
These are the key pieces of information that your Peers, Hiring Managers and others in the field look for.
Best way to do this, is take the first 30 mins and write them in 4 simple tweets. Everything beyond this is bonus and upto how you express and detail things.
→ Step 3: Draft a Single Pager [45mins]
Your Site/Portfolio can be updated frequently, iterated in seasons but the first cut need not be the best cut. It can be a simple cut. Take 45 mins and draft a creative single page design with content from Step 2 and only 4-6 sections.
Use only 2 colors — black, white and any default typeface. Have only one dominant creative aspect for this design, whether it is in layout, typography, interactions or graphics. Use references of other portfolios and visuals for inspiration.
Here are a few sites to spark you up.
领英推荐
→ Step 4: Detail on Simplicity [~2.5hrs]
Details are best addressed in 3 stages to not go into vicious cycle of iterations.
Stage 1: Copywriting —use 30-45 mins to improve written content and putting together project snapshots. Simplify and clarify. No need to be clever here.
Show a simple “before” and “after” snapshot for each of your project. Add a simple 200 word description of what you did in the project. Show atleast 2 of your best projects. Use ChatGPT if needed, to improve tone to be casual yet professional.
Stage 2: Typefaces —use the next 30-45 mins to visually set the tone and style using typefaces. You can fasten the process by choosing 2 typefaces from starter list below — one for expression in titles (aka Display type) and one for readability in descriptions (aka Text Type).
Stage 3: Layout & Interactions —use 30 mins to improve layouts and interactions. Design for desktop resolution first (1440dp width). A bit of novelty without compromising on the ease of use goes a long way.
Stage 4: Responsiveness —take 30 mins to think about how the design can translate gracefully onto mobile variation (360dp width). Keep things simple. The two should give you a direction enough to start building it with Framer.
Step 5: Framer Build [~2hrs]
Take 90 mins to build the site using Framer on a single resolution. Use Framer Flex Start template to get your responsiveness on the right foot, rather than adding later, which slows you down.
Use Framer features that only enhance your content and not distract.
e.g. color shift when scrolling to offerings/project section (or) a grid of 10 favourite snaps of your projects.
→ Step 6: Fine Tuning [45mins]
The last step is to add fine bits. Take 30-45 mins to check if all links and images are in place, if the site works well on all resolutions and to add the needed SEO to Site Settings.
Your Site SEO works best if you write in simple english, based on on how you want others find you.
e.g. User Experience Designer from Hyderabad with specialisation in Strategic Design & Prototyping.
Now publish the site and then obsess about the details, the variations, the iterations, the ideal version and what not.
You’ve now "earned" ample time to make it even better without the baggage or guilt or constraints.
Your first cut is a great shot that will yield you superb results in scenarios where you have to quickly pull up your work and show. This is many times better than having nothing to show. ?? ????