Jump to Page Content

Rebuilding mattmclean.net

Online portfolio renovation

This humble home of mine on the internet had its last major renovation in 2015. I’d like to think I’ve learned a few things since then, and I was ready for a fresh design. I wanted my website to look more minimal, to feel lightweight, and to have a “graphic art” character.

Generally speaking, I wanted to make the site a little easier to traverse, and bring information closer to the surface. I started by choosing a much lighter color palette. This gave the site a more open and airy feel. It has the added benefit of image borders being clearer against the background (important since I share a lot of imagery in my portfolio and blog posts).

The old main menu header as a translucent overlay counterintuitively made reading more confusing, so I made the new one clearly separate from the content. The new menu interaction is now consistent on mobile and desktop, and clearly labeled, as opposed to being hidden behind a “hamburger” icon.

Example blog post from previous version of the website
Example blog post from new version of the website

Following the idea that the new site should have less friction in navigating to content, I decided to get rid of full-browser-height featured images on every page and pay closer attention to typography and content sizing. At the same time, my sketches yielded some unconventional elements that I really wanted to try out.

The first of these was the concept of vertically-oriented menu items. Featured prominently on the homepage, they look a little like the spines of books. This motif is echoed on other pages of the site as “bookmarks” that indicate your current position. These blocks are the primary source of color on my site, and, indeed, each section is loosely color coordinated.

Sketch of header menu design
Screenshot of new header menu

The other concept was the interaction paradigm for viewing my portfolio. Since my artwork is very visual, this presented a unique challenge, since I wanted to lead with type rather than imagery for the site overall. This went from a standard grid layout, to a common sidebar portfolio layout, to one with a rolodex-like presentation. Ultimately, the winning concept was the sliding “control panel” design. It’s not perfect, interaction-wise, but I love how smooth it feels to rotate through the content.

Sketch ideation for portfolio layout and interaction

On the top level portfolio page, where each section is introduced, I wanted to pay homage to creativity and interconnected ideas. I chose “section icons” that evoke 2D sketches and 3D wireframes, and animated them using walkway.js. The shapes have no specific meaning; rather, watching the icons get drawn onscreen speaks to the process of creating things, which is almost never straightforward, yet produces a completed artifact.

Animated gif of a slider-controlled UI interaction

I also spent some time thinking about how to reorganize my content. Previously, my artwork and projects went into a single portfolio area of the site. I decided that there was no reason to stuff everything into one place since, in effect, the entire website is meant to be a portfolio. That allowed me to break things out into web projects, artwork, and photography – all distinct creative pursuits that benefit from their own showcases.

The photography page is the odd one out. Before the redesign, it was never linked from the site navigation and could only be reached directly. It was meant to be a stand-alone micro-site so that people interested in my photography could focus just on that without wading through anything else. As such, I often give a direct link to this page for photography exhibitions, business cards, etc. While I adapted it into the new site style, its layout doesn’t really match the rest of the site. I felt it was more important that it retain its original function – at least, for the time being.

Example photography page from previous version of the website
Example photography page from new version of the website

The page that took me the longest was actually the homepage. I struggled with what, and how much, information to put there. Once I started thinking of it as a landing page, it was easier to focus on the impact it made rather than any particular content. The final touch was to colorize one of my landscape photos and draw contoured lines over it. This really pushed the homepage into that “graphic” character I was looking for, and is a good representation of the intersection of my creative interests.

Example home page from previous version of the website
See the little arrow at the bottom? The featured image took up the full browser height and there was more content below.
Example home page from new version of the website
Instead, let’s show everything up front.

This project gave me a chance to explore some functionality I wasn’t taking advantage of before:

  • Loading certain scripts only when they’re needed, like masonry.js on the photography page, or slick.js on portfolio pages (I was doing this, but not nearly as effectively);
  • WordPress Gutenberg editor for content;
  • image srcset functionality to dynamically load images depending on the screen size;
  • Integrating with Marmoset Viewer and ArtStation to allow visitors to interact directly with my 3D models.

While I’m almost certain that, in another five years, I’ll go through this process again, I’m really pleased with how everything came together. I’ll be happy to live in this internet home until then.