I started by sketching some ideas of what I wanted my portfolio to look like. Again, like for the CV, this was more to get me started rather than to have a finished design. Due to both the CV and Portfolio needing to be turned around quickly, I’ve found this process of just doing a load of quick sketches really useful and interesting the final design is usually an almagimation of all of them.
Moving into Figma, I experimented with some of the imagery I had sketched. I quickly settled on the “Hi I’m Noah Weston” header as I felt it was a good way to open the page. I explored some ways to have a consistent style, such as using the logo repeatedly to break up the page, however, I kept getting drawn back to just using horizontal or vertical lines as a repeated style, which I felt worked well and didn’t detract from the work.
My first draft the the whole website design used a one-screen layout as the introductory screen, which would then lead to the “about” and then to the “my work”. I felt this worked well as it gave a good flow to the site and made it feel like an experience. I also designed a template for a case study page which would be useful to quickly create them.
https://www.figma.com/file/BN2X7OohNT6EDBvp5yF6mJ/Portfolio?type=design&node-id=0%3A1&mode=design&t=Ipua6QP77oZRzEkn-1
After getting some feedback on my design, I decided to rework some of the pages. The main change was combining the home and work pages. Looking back, this worked far better as it would allow employers to more easily access my work. Overall I was pleased with my design and was now ready to build it into an actual webpage.
I decided to use Webflow to build my portfolio as I felt I had enough confidence in HTML and CSS to understand it, but also not enough to build it from scratch. It was tricky at first to get used to Webflow, due to it purely being a visual version of HTML and CSS unlike Framer, which is its own system entirely. However, once I had gotten used to it, it allowed me to really quickly build my site. It’s an incredibly powerful tool which I’ll definitely use again as it makes so much of HTML and CSS so easy once you understand it.
One aspect of Weblfow which made development particularly easy was the animation ability. I wanted to add a few micro-interactions to the site to make it a better experience, and this was particularly easy to do in web flow. Adding in these hover states worked really well and just added a finishing touch to bring the site to life.
