Web & Graphic Design

Backdrop Lights – free minimalist WordPress theme for photo bloggers

It’s fairly common knowledge that when it comes to displaying digital photography, either offline or online, less is more. Some photographers even go as far as suggesting that you should go with a grayscale palette or at the very least use desaturated colors. While that would certainly work in the best interest of the images, it might also bring about some usability issues which could make such a website an unfriendly place and deter the visitors from exploring it further.

Since I’m not a fan of the extremes, i set out to design a WordPress theme that would be both simple and easy to navigate, while also putting the photographs center stage. That’s why things such as complex gradients and textures were discarded in exchange for some clear typography in bright colors, all laid out using a 960px wide grid system on a dark background. Despite  some statistics pointing towards a two column layout as the most popular choice among bloggers, i went against the trend due to several reasons such as:

  • there’s something that simply doesn’t feel right about an endless sidebar;
  • a narrow main column improves readability by limiting the number of words on each line to what’s usually the recommended value for proper typography;
  • it also helps better accommodate photos both in landscape and portrait mode;
  • allows to display a significantly larger amount of navigation elements above the fold;
  • provides more flexibility when including ads of different sizes.

During the design process, there were two main aspects i had to concentrate on: colors and typography. Pretty much from the get go, i knew i wanted to use a nice cyan hue along with yellow. That’s how it wasn’t long before i settled on a CMYK inspired palette. Furthermore, it was essential to keep the colors in check, using as few as possible, while also maintaining a certain logic. For example cyan ended up being used for links, while magenta would signify visited pages mainly because of their relative resemblance to the classic blue and purple choices. On the other hand, yellow stands mostly for static headings.

As a fan of typography, i wanted to use something different from the usual web safe fonts. Also, it was essential to find a condensed looking typeface that would take the least amount of space even for longer headings at larger sizes. While i like League Gothic a lot, it didn’t fit right for this particular instance. Several searches later i found Miso which is free and comes in three weights. Its geometric and neutral appearance means it doesn’t have such a strong personality that could otherwise interfere with the rest of the page elements. Still, it has clarity and elegance, which combined with the other qualities make it suitable for a wide array of uses.

Backdrop Lights WordPress theme screenshot

Besides designing the core elements you will also find ready made styles for some of the widgets/plugins I’m currently using on this website: Better Tag Cloud, Contact Form 7, Flickr Widget and Wickett Twitter Widget. For all the extra elements not included, you could go ahead and try to further customize it to your own needs: adding a logo, changing the header background or its height, using different colors, moving the widgets around and I’m sure the list could go on.

Normally, you should be able to simply upload it into your themes folder and activate it. There are three widget areas: the two sidebars and the footer. Having worked as a web developer for quite some time now, I’m not too keen on having things hardcoded into the interface. That’s why having a widget into the footer area made more sense, as it allowed mixing blocks of text maybe with the blogroll, latest comments or the calendar without any extra programming. After activating the theme, you will however need to reposition your widget into their respective areas. While it appears they are saved into the Inactive panel, it wouldn’t hurt to manually back-up any custom code.

Bear in mind that while the actual programing code is licensed just like WordPress under GNU General Public License, version 2, the CSS, font and image files are not. You are free to use them (as part of this theme) in both personal and commercial websites. However, you are not allowed to redistribute them in any way or link directly to the archive file(s) without prior written consent. Also you must not remove the credit/copyright message from the footer. While further attribution is not required, if you enjoy using this template, you might consider letting people know about it, so others can benefit from it as well. In that respect, it’s only fair to thank Theme Shaper for their wonderful tutorial on WordPress theme design.

Feel free to leave any comments or questions about this theme below. Should there be any interesting suggestions for improvement or things that i might have missed, I’ll try and update the files based on your feedback. Also don’t shy away from mentioning what kind of theme i should try next.

Click here to download the theme and here for a set of ten extra header backgrounds.

This entry was posted in Free Wordpress themes and web templates and tagged , , , , , , , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.