Copenhagen Photoblog

Concept

Develop design techniques and explore the design process through redesigning a WordPress blog site. Starting with wireframes, then moving into designing the homepage in Photoshop, and finally developing the theme in WordPress using SASS and the Bones starter theme.

Details

My goal for this college project was to focus on photography. I started by choosing a photo blog to base my content around, then went on to sketch out some basic wireframes of how I felt the content could be structured.

With photography being the main content, I wanted the experience to revolve around that. I included a space for a writeup on each post, and a short description on each image, but otherwise the text content would be minimal. In my final designs I had envisioned the photos would be expanded to take up 90% of the screen height, filling the entire container vertically, and any horizontal overflow would visible through scrolling and through a full-screen display.

I decided to use my own photos from a recent trip to Copenhagen, and write out short descriptions in the same way the original site had. I used the Attachments plugin to structure the posts and allow for any number of images attached to each. Since my photos were taken on an iPhone and had rich metadata, used the EXIF data to display the exposure information and output a link to a map of the photo’s location.

I started developing this just as the WordPress responsive images feature was made available in a beta release, so I utilized this to serve up the smaller image sizes to smaller devices. What was more important to me though was that I could retain and serve the high resolution images to large, high resolution displays. I felt for a photo blog it would be foolish not to take advantage of these new features and thought this was a great project to explore them.

Outcome

I made the conscious decision to start this project on paper. I’ve quickly learned that if I start digitally I spend too much time making perfect wireframes and not enough time exploring ideas. Once I felt I had a good concept down I then took it into Illustrator and brought in real content to start to see how it fits together.

This was the first time I’d used SASS in a project, and I quickly learned to love it. Not only did it allow for better organization of an otherwise large CSS file, I also figured out how I could best integrate mixins and learned a whole new way to think about CSS.

Dealing with photos as I had planned in my designs turned out to be trickier than I expected, so I decided on a more standard approach of simply scaling the images with the container, while using responsive image techniques to deliver the correct images to a specific device. Full Screen view enables a viewer to see the image at a larger size.