I’ve had this website since I was college in over 14 years ago. It’s gone through many designs and iterations over the years, but the redesign I’m rolling out today is the first since 2017. There are a few things I wanted to address, including:
- Better display of photographs
- Better portfolio display
- A new visual design
I’ll describe how the redesign came to be. You can also watch the video walkthrough above, where I address most of the same things I do in this post.
I began to look at some experimental designs that I had come up a few months ago for what I imagine personalized operating system could be (think macOS or Windows, but suited to myself particularly). These formed a good basis for what the aesthetics and priorities of what the website could be.
From there I began brainstorming potential layouts with pen and paper. In addition, I started making notes about how I would talk about myself and my experience.
At this point, I opened Figma and began designing all the screens and flows that I would need to begin development. A few elements quickly became consistent:
- Spare monospaced typography. I see my website as a workbench and as such I want it to reflect the tools I use to make it. Whether I am writing in IA Writer and Obsidian, and coding in Nova, the craft of building for the web is something I value, so I wanted that to be reflected in the design.
- With the workbench idea, I wanted a minimal grid that has an ordered character, but lets the content of the site, the writing, photographs, and design portfolio, move forward. You can see that in the grid texture behind the whole site, as well as the ordered grid that sites behind the layout.
- I wanted to turn some content that could quickly become a mind numbing feed into something that invited interaction. So the snippets and work pages would now have a swiping interaction to show a digestible amount of content that was easily comprehensible.
One of the benefits of knowing how to code and implement the site myself is that I can proceed into development without having made every decision. If I’m 65–75% there with a design I feel comfortable jumping into my code editor and making the rest of my decisions while I build. The following images are design options that I explored, but did not ultimately use.
After I began development, I began making the final design decisions as I got to them. I decided how to handle taxonomies in blog posts and portfolio projects. I also decided how to deal with a new search results page. I created the design tokens that worked well between light and dark modes. In addition, since side swiping is a major element in snippets and the portfolio, I decided to implement custom styled scrollbars, which I think add to the overall aesthetic of the site. Here are a few screenshots of the site as it came together.
grid-template-rows: masonry the layout I intended will suddenly work. The web is cool that way.
Below are a couple details, that I’m particularly happy with:
I’m pretty happy with how the website came together. Take a look around, see what you think.