How I designed and built my UX UI design portfolio in 30 days
A couple of years have passed since I updated my design portfolio. It was one of my goals to have a design portfolio completed every single year as a way to watch my own growth and that of course did not happen. In order to challenge myself and complete my portfolio no matter what state it was in, I embarked on a 30 day challenge. If I couldn’t finish my portfolio for the past couple of years, how was I supposed to do that in 30 days? Well, I pushed myself outside of my comfort zone and changed my strategy. My new strategy involved getting myself to finish one simple task a day. And surprisingly that worked out. Before the 30 days was up, I had my brand new portfolio to showcase! Scroll to the end to see it in action!
TLDR; Design and build your design portfolio in 30 days by completing simple tasks that contribute to your portfolio to do list. Work on a task a day: First by finding inspiration and practicing your design skills with other designer portfolios as a reference, second making note of elements you want in your portfolio, third mashing those elements together, and lastly adding your personality to the remixed design.
#1: Finding inspiration and recreating them
As with every project, finding inspiration and creating a mood board is quite typical. But in times of a funk, it was not enough to stare at well crafted designs and have a light bulb moment. Instead I wanted this process to help me get my brain gears moving by challenging myself to recreate other designer portfolios. Similar to how mentors and instructors would tell you to copy Instagram, Airbnb, etc. to get better at visual design, I did exactly this to get me inspired. I do want to preface that through this process, you should not end up copying another designer’s work.
- Find 10 designer portfolios that you really like. Use FOLEO or PAFOLIOS if you’re having troubles finding portfolios.
- Take a full screenshot of the homepage, case study, or other pages that resonate with you.
- Use Insert Big Image plugin on Figma to add large screenshots to your file.
- Recreate one designer portfolio a day to practice your visual design skills and start imagining what elements you would use for your own portfolio.
#2: Remix elements into your own
After ~10 days, you should have a collection of recreated portfolios to review. In order to understand the vision of your own portfolio, figure out what sections or elements you like seeing and what you want your portfolio to give the feeling of. With the recreated portfolios, grab sections that you like and Frankenstein them together to create a unique portfolio page that you could envision with your personality, branding and style.
- Identify what sections from the recreated portfolios you like
- Choose your favorite section and add to a blank canvas until you create an outline of your portfolio page
- Repeat for all other pages
#3: Designing your portfolio
With a clearer vision of your portfolio, you’re already half-way done! Dedicate one week to creating iterations of your Frankenstein pieces until you are content with the direction you are heading. Try to slowly transform the piece by adjusting the font, colors, and add in elements that show who you are. My favorite color is purple so I had to sprinkle that throughout my portfolio. Once the week went by and I was still not satisfied, I made a mental note to return to that section afterwards. It’s important to not let a creative block actually stop you from completing your goal.
- Create a new canvas frame with the Frankenstein pages next to it
- Redesign the Frankenstein pages by adjusting the font, color, and adding elements
- Keep iterating on the sections until they do not look like you copy and pasted the sections from the recreated portfolios. Make them unique and in line with your brand.
- When you are happy with 80% of your portfolio, you’re done with designing. You can come back later if you’re not done.
#4: Building your portfolio
Next step is breathing life into your portfolio. To challenge myself and become comfortable with yet another tool, I decided to use Framer. After learning how to use Framer through YouTube videos and the Framer Academy, I ended up falling in love with how easy it was to build a website. Framer is the perfect medium between not too easy and not too technical. Everyday I worked towards building out each section and making it responsive so by the end of ~5–10 days, I accomplished my goal. And it wasn’t that difficult! Surprisingly!
- Build out one section (ex. hero section) a day and remember to make it responsive.
- Build out a case study template if you’re including case studies on your portfolio.
- Add interactions and animations to the sections or pages
- Iterate sections or pages until you’re satisfied. Add in fun Easter eggs like I did, if you’d like.
#5: Celebrating a published portfolio!
After a productive month, I’m super excited to showcase my new portfolio website! Dedicating the time and money into a portfolio was not something I had to do, but what I consider an investment into my career. I just wanted to check off a task that’s been on my list for the longest time ever. The journey of a portfolio never stops because I find myself still making small edits and iterations even though I “finished” my portfolio. I hope this inspires you to take up this 30 day challenge!
