New Portfolio Site
As most designers would attest, creating a portfolio site is difficult because we continually have new ideas as we work that usually keep us from finishing. This has been my plight for the past couple of years. Well, that and the fact that I’ve been extremely busy working.
However, my portfolio of work was really starting to backup; it needed to be organized and put online. It’s taken me quite a few hours but I’ve finally organized my work in a design that I am proud of. In this post, I want breakdown some of my design decisions.
Layout #
Smartphones and tablet usage is now the majority of web traffic. I’ve been designing “mobile first” for the past year or so but I wanted to take it a step further with my portfolio site so it’s mobile only. What does that mean? Essentially, it means that it’s a single column layout. I love single column views. They’re easier to read and I don’t mind scrolling. I think most people would agree with me. Twitter, Tumblr, Google+ and the new Facebook are (mostly) single column views. I am certain this will be common trend. For desktop users, I widened the column to 600px and added a nice background image but the content layout is the same as on mobile.
Navigation #
I wanted to create a very touch friendly navigation. I didn’t want to use a standard list style. I organized the site so that the homepage is essentially the navigation. Large, touch friendly links guide the user to the underlying views. I restrained each area of the site into three levels:
- Product Overview
- Product Category
- Product Details
A couple of the smaller products have only two levels but none have more than three.
If the user is more than one level deep, they are given a home button at the start and end of the page. If not, they can use the browser’s back button to move up one level.
Baseline Grid #
I’ve been using baseline grids in my designs for years. I love them. If you’re not familiar, a baseline grid is a very old technique for establishing vertical consistency similar to a horizontal grid like 960. Paired with typographic rhythm, it greatly improves most designs.
I chose 18px as my base font size. Combined with my max content width of 600px and 20px padding, this gave me roughly 70 characters per line which is optimal. I used the golden scale to calculate line-height and heading sizes which resulted in:
- Line-height: 27px
- H1 29px
- H2 23px
- H3 18px
- H4 14px
I converted everything to ems for scalability.
Retina #
I sweat every pixel in my designs and I want them to be seen. Therefore, retina images were a must. Normally, I would consider the potential performance issues retina images would cause but on this portfolio site, I am not concerned with performance; I just want to show every design shown with the most detail possible. Most of my (desktop)web designs were created at 1200px wide, iPhone designs at 640px and Android at 720px. To display them at retina resolution, I used 600px, 320px and 360px, respectively. This gives 1:1 retina images on most devices.
Pure pixels, no mockups #
People love mockups and comps. Almost any design will look great when surrounded by gorgeous photography or 3D render but I wanted my portfolio to be seen as only the pixels I drew. I think my target audience will appreciate the opportunity to see the entire design instead of a skewed version.