< Back to the blog

Well, the portfolio is built in Webflow now! 🎉

The portfolio is now built using Webflow, rather than manual HTML and CSS.
Monday, April 11, 2022

So for the past few years, I've been building my portfolio using an HTML template I bought in 2015. 

It's served me well: it met all my needs for many years, and was robust enough for me to land a couple key internships, and my current role. I'm writing this because it's finally come time to retire the old site and rebuild a new site from scratch that's properly optimized. In this post, I'll explain what "optimized" actually means for my use case, and what sort of things I prioritized when re-building the site.

My current priorities are quite different than they were in 2015. When I first started out in design, I had no money and no experience. I was spending most of the money I could afford to invest in my design career on my Adobe subscription. I had a lot of time though, so learning to code was the way to go. It helped to teach me about how HTML and CSS worked, which is great for interfacing with developers. I'm really grateful that I invested all that time over the years into the old site. It really was everything I needed it to be for a long time.

All that said, now that I can afford to re-invest some money into my career, it became clear I needed a more robust solution for showcasing my work. But what does a "robust" solution actually look like? In this article, I want to outline some of my priorities when choosing a platform.

Here's a high-level list of what I was focused on when considering what platform to use when transitioning to the new portfolio:

  • I wanted to reduce the time and effort it takes to create and publish content for the site
  • I wanted to create modular components, with a focus on re-usable classes
  • I wanted the ability to customize the visual design of the site and not be fully constrained by template limitations
  • I wanted to be able to use my limited knowledge of CSS to add small, delightful micro-interactions where appropriate
  • I wanted a CMS, with scalable content options and the potential to offer e-commerce should the need arise

Ok, so now that that's out of the way, I'll expand on each of those points.

I wanted to reduce the time and effort it takes to create and publish content for the site

So this was a big one. On my estimate, I have spent over 800 hours editing the old site. A lot of that was learning the fundamentals of CSS, but it's still a lot. Moving forward, I want to spend less time editing the site's code and more time making stuff that's worth putting on the site. So, reduce the time and effort, big time priority.

I wanted to create modular components, with a focus on re-usable classes

I had so many lines of CSS in my last style.css file that I didn't know what half of them did. Part of that came down to the fact I was building off of a template. Affectionately, I referred to the site as being held together with "spaghetti, marshmallows, and popsicle sticks." I really didn't know what was holding it up, or how it worked, and so moving forward I wanted to be slow and methodical about building components. The way I had the old site built, I had to edit each individual instance of a header, for example, on each individual page. I did a poor job of building out classes. The new site needed to have some well-crafted, intentional classes and components that could be re-used across pages, and edited all at once rather than individually.

I wanted the ability to customize the visual design of the site and not be fully constrained by template limitations

I really enjoy visual design, and I get a ton of energy from experimenting with design elements and information architecture. I wanted to build a site that wasn't limited to templates available on the platform I chose. Being able to consider all the small details is one of the reasons I'm in design in the first place.

I wanted to be able to use my limited knowledge of CSS to add small, delightful micro-interactions where appropriate.

I don't know too much about coding, but I've picked up a few tricks along the way over the years of building my site and the sites of clients. I think there are many ways to stand out when it comes to web design, but many are too trendy or over the top to be sustainable long-term. I wanted the opportunity to build simple, timeless micro-interactions into the site that show visitors the level of care that I put into the site. For example: scrolling on this page puts a small progress bar in the header, and toggling your system's light mode or dark mode, will force the site respond to your preference. Stuff like that goes a long way to show a level of care and help set me apart from other designers. "Do small things with great love."

I wanted a CMS, with scalable content options and the potential to offer e-commerce should the need arise

I write case studies that are often long. People who visit the site are looking for process explanations, and so I need to give that out in detail. These long case studies can be a tedious process when manually formatting static pages. Moving forward, I wanted a site with a scalable, customizable CMS platform that could automatically generate responsive pages. Those pages would ideally be based on a template format that is already an established pattern on the current site, to reduce the amount of re-writing I have to do for old projects.

Ultimately, those previous considerations are only going to be improvements if the content on the pages is improved to match. Here was the plan to improve the content on the pages of the site, and make it easier to read and understand:

  • Reduce the reading level of the content to a simpler reading level (tested using Hemmingway)
  • Add proper alt-text and header style formatting, and test the format of pages in screen readers
  • Remove / archive content that isn't representative of the quality of work I'm able to produce

So here we are, with established preferences for the new platform standard and better content parameters. What are my options then?

Well, there are some common platforms you've probably heard of... and I swear this isn't a segue into an ad. Although, I wish it was. Please sponsor me @webflow.

I considered Squarespace, Wordpress, and Webflow seriously. After considering the platforms and their limitations, landing on Webflow was ultimately a bit ambitious but something I felt was going to be the best long-term investment of my time. None of those platforms are bad, and all of them could meet the needs I talked about previously.

The balance of features on Webflow was too good to pass up. Lots of customization options, with a graphical editor that lets me lean on my previous experience in Sketch and Figma without having to write the code to bring it to life.

Squarespace wasn't free-form enough for my vision of what I was hoping to build, and Wordpress was effectively the Wild West. It could ultimately become as time consuming as the previous build and wasn't something I felt I wanted to build with, although I recognize the immense amount of themes and customization options when building with Wordpress.

Ultimately, as a product designer by trade, Webflow just felt like it was written in a language I already spoke (and in this analogy, Squarespace was a "learn to read" option and Wordpress was written in Braille). I haven't been disappointed: I built this whole site in hours, when building it the old way would have taken days. It exceeded my expectations when it came to usability, and you can tell that the whole of the platform has been considered with care by the people behind it. It's simply the best site building platform I've ever used, and it feels robust enough to scale to my needs as I continue to grow in my career. I'm really, really impressed.

I'm excited about reducing the friction when it comes to building the site. I think the visual standard is much improved, and overall I feel like I actually understand the architecture the site is built on. This was a super energizing project for me, and I'm excited to keep building on the platform. Please send me a t-shirt or something, I'm a huge fan.