July 2019

I wanted to make an online website to host selected works from my portfolio. My goal was to make a simple, and clean layout that was responsive for both web and mobile.

After hand sketching my ideas, I used AdobeXD to design and layout the pages. Each of the selected works has a theme color, so I decided to keep a monochromatic theme for the rest of the site so that the different colors do not compete.

Laptop preview



Process Sketches

Landing Page 1 Landing Page 2
Landing Page 3 Landing Page 4

Landing Page Iterations

In order to reduce the complexity of building the site, I wanted to create a singular template and structure that I can use for each of my projects. The following selected iterations were created in AdobeXD.

Fuel Nutrition 1 Fuel Nutrition 2
Fuel Nutrition 3 Fuel Nutrition 4

Project Page Iterations



Web Elements


Once I was satisfied with the look of the site I shared my wireframes with the developer via Adobe XD and Figma. The scaffolding was built by Rehan Butt using Jekyll and the Foundation CSS framework. Once the framework was established I was able to make minor edits and additions since a lot of the design components are repetitive across the projects.

Adobe XD Chart

Complex issues with coding were outsourced to David Baker via sharing the website's repository. Most of our communication happens through Github's interface.

Github Img
Code Img

After the website went live for a few weeks, I utilized web analytics to help inform how I improved/modified the site. For example, my cookie cutter project was one of the last pages I uploaded chronologically, however it had the most page visits overall. So I added more images and info onto that page to demonstrate additional skills to the visitor.

Github Img
Code Img

User Flow

regional traffic

Regional Traffic