My goal with this new site was to make sure it was fully responsive and make sure it was clean in both design and development, as my site was when I originally published it with only 2 sections (portfolio and about). I used Jekyll and the Foundation CSS framework to develop this site. Jekyll helped to compartmentalize and template pages and the Foundation framework helped to create the responsiveness for all devices. From a development stand point I also decided to remove the javascript from my site in case it is being blocked by the user and to speed up the load time. With the refreshed site I also wanted to streamline my brand, specifically reduce the complexity of the graphic while keeping the reference of the logo to my name. One of the first elements I looked into was reducing the number or horizontal lines in the logo, then crisping up the corners by removing the chamfer.

Site Design Current Old Site Design

What it looked like before the refresh.

Original Old Site Design

My site when I first deployed it.

Process

Rehan Logo Color Scheme Sketches Logo Iterations Logo Iteration Iteration Detailing

In order to reduce the number of horizontal lines I had to either slide the middle segment of the “E” down or move the “R” horizontal up. I decided to slide the “E” segment down so that I did not mess with the curvature of the “R”.

Development

During the development process I needed to recreate many of the assets including the thumbnails to match the new specifications and to match the column width on all screen sizes.

Mobile Site