In September of 2015, while grinding through online tutorials and local web development courses, I created my first real project. It was a portfolio where I would showcase my newly acquired skills to prepare for a coding bootcamp, and eventually help me break into the industry. Fast forward to 2021, and while this project has evolved through many iterations and has presented a wide array of projects through the years, the primary purpose of this site has remained the same – to show my design and development work to the world as well as being a sandbox for me to continue to grow these skills and steer my career trajectory. In the paragraphs below I’ll walk you through the the most recent iteration with a focus on the design process and what decisions and considerations went into crafting the current layout.

From a technical standpoint, this site was created using React on the frontend and WordPress on the backend. It was designed in Sketch, and I also tried hard not to rely on outside asset libraries or any sort of stock images. Therefore, all images on the site were taken by me on an entry level fancy cam. I also created my own SVG icons, which were used to make the logo and tech icons on the homepage.

The Problem

The initial site served its purpose to get me into the industry in 2015, but by 2020 it felt quite stale, dated, and neglected since I was focusing my efforts on projects that I was getting paid for. Simply, the site was no longer an accurate representation of my skill level or aspirations and was due for a major overhaul. The look and feel to it was very of the times, using a lot of flat design and muted colors, with an almost playful cartoon feel to it all. I wanted to update this to be more modern, clean, and minimal with a material design feel using shadows to insinuate depth. I also wanted to make a site where the mobile version wasn’t an afterthought, but looked as good on mobile devices as it did on larger screens.

Mood Board

I started out the process by creating a mood board to collect some examples of designs that captured the look and feel of what I wanted to create that I could use as inspiration to draw from. Many of the sites that I selected for my mood board were streetwear fashion and outdoor e-commerce sites that were high impact but simple, minimal but professional, and overall were experiences that were impressionable and resonated with me.

Imagery

I wanted my personality and interests to inform the design to represent me and the places where I live, which is some combination of city life and the outdoors. I also wanted to use high quality images that weren’t stock photos since the minimal designs that I was drawing inspiration from rely heavily on images and typography to do the heavy lifting. To build that aesthetic into the design, I took pictures of my surroundings to work into the layout – an art mural in Denver, the best view of downtown Seattle ( I’m looking at you Smith Tower, ) and a picture from Mount Rainier that I ran through a kaleidoscope filter.

Typography

Since I was going for a modern and trendy vibe, my typography had to build towards this aesthetic. For my primary type choice for titles and headlines, I went with Cooper Hewitt – a stylish sans serif font that was created in 2014 for the Cooper Hewitt art museum in New York City. For a body font that matched well with Cooper Hewitt but was more readable in paragraphs, I choose Inter. Like Cooper Hewitt, Inter is also a sans serif font based on Helvetica so it shares many similarities in its appearance and therefore pairs well with it.

Mock Ups

Once I had a target look and feel and some tools to drive that mood, it was time to open up sketch and start putting some ideas down and moving pixels around. Along with focusing on consistent spacing and having strong alignment throughout the design, I also wanted to try to get away from making everything look like a box, and looked for opportunities to have some overlapping of sections. One place where I was able to accomplish both of these things was with the “design driven development” kaleidoscope with the mural image from the hero fading out into the background.

Another place where I decided to avoid using boxes is the initial non-hovered state of the project logos. Once hovering over each logo, the hover state shows a card with a drop shadow underneath for a material design aesthetic. This same drop shadow is used on the call to action buttons throughout the site, and the appearance of these shadows were considered when building out the borders of the form inputs in the contact section to build consistency throughout the design.

Benefits of Designing as a Developer

Designing helped me as a frontend developer because it made me a more curious developer as to what’s possible while simultaneously informing the designer in me of certain constraints that could potentially cause issues if not anticipated. One good example of this is working with the limitations of the HTML output that the WordPress API passes to you to build out each individual project post. The HTML that is built in the WordPress editor is limited to about 5 or so HTML tags and does not give you the option to attach classes to the markup, which has some consequences when it comes to styling the layout of the page and gives you some serious constraints to work with. On the performance side of things, I was aware throughout the design process of how many fonts I was using, knowing that every font would use some resources when loading the page. I had to strike a balance between page performance and making impactful stylistic decisions when styling text on the site.

Finally, being a designer made me a better developer by pushing me to explore how to implement styles that I normally wouldn’t have thought about, such as adding inner shadows and fading background gradients. It also gave me more incentive to find fixes to visual browser bugs rather than reaching for easier work arounds in layout since I had a stronger opinion about how I wanted the site to look.