Behind the scenes: creating a portfolio website

As a designer, I needed a portfolio website that is simple, clean and does not distract from the work. Since I am comfortable with html, css and php, I decided to develop a custom wordpress theme using the roots.io framework. That gave me a blank slate to create it exactly how I want.

DSC_4710


Choosing the right platform

Since wordpress is a such a widely used platform, there are a few issues to be aware of. The main one being security and the frequency of updates needed to support the site. So I try to limit the amount of plugins and develop custom features where I can. That limits my exposure to outdated plugins. And if you do use plugins be very selective and choose ones that are well supported.

DSC_4684

To make things a little easier, the roots.io platform cleans up wordpress in a more logical way, using a model view type structure. It made developing the theme from scratch much easier. It has bootstrap 3 built in that also helps the front-end move along quickly.


How deep do I go?

One major decision is how much information to include on each project. A good rule is that the more in depth your projects are, the more information you should include. Early in the process I decided to do much of the photos myself, and not use stock images at all if I could.  The process of taking and editing photos was the most fun, but also the most challenging.

I started coming up with concepts in my head, then created some preliminary pencil sketches, and quickly moved into Photoshop. Not too much was invested early in the process. Much of the design work happened in the browser.


Design and creating visual assets

The process I use for all design projects is to start with a pencil sketch. I like to not be attached to a computer to brainstorm visual ideas. It allows me to move quickly and get an idea for general layout. From there I moved into photoshop to create a quick design comp. For more complex sites I would use wireframes, but I felt in this case it could be done by going right into design compositions.

DSC_4724

 

Since I have experience with product photography, I decided to shoot all the photos myself. I wanted them to look professional, have a little more style, not look contrived or like stock images.  I used natural light with a tabletop situated in front of a large window in my home office. It was simple to setup and I could easily recreate the light for future projects. I was careful to compose the images that would work as horizontal crop, and have text over them as you see in the hero/banner images. Some of compositing was done in Photoshop to drop in background plates and screenshots and do a final curves adjustment.

I also needed a clean and modern typeface that looked good on screen. I chose museo sans which is slightly different san serif from the ubiquitous open sans i’ve used on many other sites. The fonts are delivered via adobe’s typekit.

DSC_4703