Responsive Portfolio Case Study

Objective:

The goal of the project was to create a new responsive layout for CMS (Content Management Systems) portfolio website using HTML code and media queries. Looking back at what I had for a portfolio, I felt that I needed a website that better reflected current web design trends and my experience as a designer. The main priority for my new portfolio design is mobile first. People both young and old are browsing the web now more than ever, so the design my portfolio needed function and look well on all mobile platforms. I wanted to go with a one page responsive layout where the user can just scroll from top to bottom without having to click on another page.

Research:

For this particular project research was the most important aspect. Since it was a portfolio I was designing, looking at current web trends and theme layouts was where I spent a magority of this step in my process. While looking for inspiration, I noticed that more website were using a full width layout, which meant images would extend and resize to the end of the web browser.  Also I saw more one page layouts on portfolios where all the main peices of the website like portfolio peices, bio, and contact were all on the same page. While I was looking for inspiration I decided to make a pinterest board of anything that I was either inspired by or wanted to incorperate into my design.

Conceptualizing:

Next I created a wireframe of my responsive portfolio, which meant laying out my site on paper. The process was easy due to the fact that I one already had a clear vision of what my final website would look like and two, my site was a one page layout. I divided my one page layout into seperate sections; navigation, first read, portfolio, bio, and contact. This would allow for each section being able to respond individually when viewed on a mobile device.

Guarnieri_V_Homepage-01

Digital Mockup:

Once I finished the wireframe and reviewed it with both my professors and classmates it was time to put in content. When making the wireframe I chose to create it in Adobe Illustrator because when the time came put content in, I already had the empty boxes there ready to be filled. The first read or call to action for first time viewers would be a full width slider with images of my strongest work. On top of the slider would be my navigation, meaning that the bar the nav was coded in would have a transparent background until scrolling. Not only did this style look modern, it create a more friendly user experience. Right after scrolling past the slider would be my portfolio with a filteable navigation and load more button. I felt that showing off 5-8 pieces initially then giving the viewer the option to load more was important especially on mobile. When scrolling on a mobile device, things like thumbnails tend to resize larger, which will leave the viewer spending more time scrolling or getting bored with the site.

Guarnieri_V_HomepageMockupMKII-1

Coding:

Once I finalized my photoshop mockup I went on to hand code my responsive site. I chose to use Adobe Edge Code because while coding your website automatically updates in the browser. While coding it was important to keep in mind that everything needed to be responsive and adjust to fit different screen sizes. To do so we used media queries, which tell the site to use a specific set of css coded to be used based on what device it is loaded on. Although this project was only meant to be a skeletion of css used for when we make our custom themes, I felt that adding some jquery code would help me get a better sense of how would function. After a lot of trial and error with jquery  code, I successfully managed to get my navigation to change from transparent to 70 percent black on scroll  and have my portfolio thumbnails adjust when adjusting the browser window.

Screen Shot 2015-09-03 at 11.48.18 AM

Final Design:

Out of all of the projects I have worked I felt this one was one of the most rewarding after finishing. Web design has always been something I have excelled in and one of my strengths, so being able to challenge myself with learning how to use jQuery in responsive design really allowed me to take my skills to the next level. Getting everything to actually work without the use of a plugin was something that separated me from everyone else in the class and would help when I do design my own theme next quarter. Although my custom theme is still a work in progress, I still drew a lot of inspiration from this skeleton site when making my CMS portfolio.

Project Overview

Client School Project
Date 06/24/2015
Skills HTML, CSS, Web Design
Software Adobe Illustrator, Adobe Photoshop, Brackets

Like What You See?