The annual self-rebrand of someone in the design space. Maybe you cheer at the opportunity to reinvent yourself, try out a new style for your online portfolio, or feel proud that you can add new accomplishments to your site. If you are anything like me, then you dread the annual rebrand, but view it as a necessary evil. You should update your website and all other professional brand assets periodically, but why does it feel like pulling teeth?
Of course, you don’t need to do a complete redesign. If your portfolio works; it works! However, I find that once I reach the point where I am mentally revisiting updating my portfolio, resume, LinkedIn, etc., my portfolio design has gone a bit stale. I build mine on Squarespace, which is always releasing new features and updates, and I am always eager to flex my limited creativity on and use. So instead of viewing this as a task I need to do, I think of it as a learning opportunity.
1. Evaluate the visual brand.
I always want to change up my color scheme and fonts. This time around, I wanted to experiment with a serif font and a more mature color scheme. While I am still a fun and up-and-coming design professional, I want to step away from this branding and step towards something more elegant yet experienced.
For type, I settled on Ivy Presto Display. I felt it was a universal serif font that didn’t feel too artistic, but did add a feminine flair (especially when italicized). As my sans serif body font, I chose Cabin. You can’t go wrong with Cabin.
What was harder was picking out my color scheme. Something I was considering more this time around (as opposed to previous years) was accessibility of the colors I picked. How harsh was the contrast between the colors in my palette? How much use could I get out of using all of my colors in a thoughtful manner?
I used tools like Atmos and Toolness to double check for this. I somehow ended up with a blue pretty similar to previous portfolio iterations, a green pretty similar to previous portfolio iterations, but what was new was the background cream color I opted for instead of white. It matches with the Ivy Presto Display font so well!
I also tried to update my “logo” based on the new color scheme, but I hate personal logo design. I don’t use my “logo” anywhere on my new iteration aside from the favicon, so I was okay with it being less than perfect.
2. Evaluate the content.
As someone who doesn’t necessarily need UI/UX project writeups* on her portfolio anymore, I don’t need to include any projects that I’ve worked on. However, I do want to showcase any pieces of work that display my expertise, support my goals, and highlight my professional accomplishments. I updated my “featured work” section to feature the top 3 things I want people to see. Aside from that, it is important to have your story and goals on your portfolio.
*Tip: The easiest way to do this in Squarespace is a Blog and then add a summary block to your homepage to display whatever you would like (most recent, filter by category, etc.).
I spent a lot of time trying to put together how I want to present myself, a multi-disciplinary, vague-ish designer, vague-ish educator, vague-ish project manager. I knew my copy was solid, but I did add some industries I have previously worked in (which is something that was sort of on the previous iteration of my portfolio, but not super apparent). I also added a bit of what I like to do in my free time. You don’t need to have a super lengthy professional and personal bio; a couple sentences can seal the deal and motivate anyone who wants to learn more to visit your other profiles/contact you. For example, my LinkedIn has all of my work and volunteer positions along with descriptions of duties and projects.
3. Make the changes.
Once I knew what changes I was going to make, I got to work! Since I am fairly comfortable with Squarespace, I was able to make the changes in under 2 hours. But definitely carve out some time to iterate. Update your friends and have them take a look, just to make sure. Don’t forget to check mobile styles!
4. Final touches.
I had fun adding some fancy touches to my site. I had already played around with the Squarespace section borders update, but here is what I added:
- Stars!!! Star shapes all around the sections to give some extra personality. I know I wanted something mature, but in the end, something fun won. Who knows what next years redesign will bring.
- Rotating header. This adds some motion to the other wise static site. Plus, it’s a great way to spruce up any headers, while not interrupting the flow of the sections.
- Gradient CTA button. I knew I wanted to experiment with some code and see how it could subtly elevate my portfolio. I used Ghost Plugins’ animated gradient header button CSS code and adjusted the hex codes with my brand colors.
