This post marks the launch of my sixth portfolio and the process I went through to ship this version. Having been through several portfolios (at a rate of 1 a year), I wanted this build to last a little longer. Freeing my time up to work on projects and content to put in the portfolio.
Back in 2012 I jumped into web design with my first online portfolio (1.0) using Google Sites. It was pretty simple and helped land my first Graphic Design internship. The following year I got hooked on blogging and content creation with Blogger. From there I started learning more about SEO and utilizing analytics data to inform decision making.
With the subsequent evolutions of my portfolio site, I consistently noticed that most visitors only stopped by to checkout who I was and leave. Engagement was pretty low and the site would sit idle most of the time. This had me thinking about other ways to bring organic traffic to drive more engagement. I knew from my time as a content blogger that well written, relevant content can bring in great organic search traffic. With competition for “Nick Murphy” on the first page of Google at an all time high, a blog would help boost the site’s ranking.
The previous iteration (5.0) was a fully custom portfolio site that had bespoke case studies complete with animations. While this site provided a unique storytelling experience, and an Awwwards award, it was time-consuming to update and maintain. This iteration would need to be simplified for efficient content updates.
Requirements
Considering what I had learned from prior sites and my plans for this one, I started the process looking for a CMS that satisified the following:
- Robust content management
- Fully custom theming
- Blogging
- Long term community support
The search came down to WordPress and Ghost. I liked Ghost for its clean design and modern tech stack. Being a relatively new platform, I had concerns about their long term support. WordPress checked all of the boxes and has great documentation. Making it an obvious choice for this build.
Identity
My mark has remained relatively unchanged since its inception in 2011. For this launch, I updated the line weight and proportions to give it more impact. Previous iterations used two colors as a method for distinguishing the n from m. A single color is now used to further simplify the mark.
Design
Through the design process, I removed anything that could date the website; device mockups, trends, etc. Page layouts received generous amounts of white space to give the content a gallery feel. I opted for a monochrome color scheme with a single lime green action color. This aesthetic allows the projects and photography to stand out while the site itself fades back. A single action color clearly communicates what elements are actionable. Staying true to my past branding, Helvetica Neue is used throughout in; light, book, and medium weights.
The new design language is heavily influenced by the works of Dieter Rams and Massimo Vignelli. Their ethos and design thinking is very much inline with my interest in timeless and easy to use design.
Development
WordPress has great open source support and I was able to use the barebones s_theme as a starting point. Utilized MAMP to setup a local dev environment and begin implementing the responsive designs. Later setting up a virtual private server to host the site. This was my first time working server side and I learned a lot!
Thoughts
I am very pleased with how this release turned out and the addition of a blog section. You can expect to see tutorials, photo sets and future project status’ as they become available. I have some great content lined up for this section and am eager to share it with the community.
Leave a Reply