Custom Blog Site for Studio Diana

One of the great things about working with talented people is that the end product is something you wouldn’t have been able to accomplish on your own. I have worked on several sites now with the talented brand and identity designer Ellen Petty of Identity Kitchen (see previous post with examples), all custom blogs designed by Identity Kitchen and programmed by myself using WordPress. But the site for Studio Diana is an all-in-one portfolio site and blog, the culmination of a lot of time and planning about what the ultimate possibilities of WordPress might be.

With one login and only one site to edit, there is access to several categories of photo galleries, essentially unlimited pages, and a fully integrated blog. The design is customized on every page, with varying layouts and thumbnails for each section that really bring this site beyond the typical design. At the same time, the look is a very clean – almost all in white, allowing the amazing images from the photographers at Studio Diana to be the star of the show.

Visit The Live Site

Here are some highlights:

Home Page

The home page features a rotating slideshow of fading images in the upper right corner, links to featured galleries across the bottom and a feed of the latest blog post in the lower right.

click image for larger view

Photo Galleries

This is a look at the Portraits section of photo galleries. The thumbnail menu stays put on every page, allowing a viewer to switch between any of the galleries while the gallery itself loads on the right hand side.

click image for larger view

About Us Section

The About Us section itself has several different layouts, with this being the main look, using another take on the thumbnail menus.

click image for larger view

Contact Page

The Contact page is not generally the highlight of a site, but I like the clean look of this one. Each field uses a custom background image, rather that the usual HTML based box, just one of the subtle touches that puts this design on another level.

click image for larger view

The Blog

The Custom blog section is not a different site, but all edited from the same WordPress backend. It fits the design of the overall site, but stands on its own as well to help make it stand out from the ‘website’ part of this site.

click image for larger view

Image Galleries in the Blog

The blog uses another way of displaying images, the same one I use in this post, where the images pop up into a gallery while the screen goes dark around it.

click image for larger view

Visit The Live Site

Behind the Scenes

This site would not have been possible without some of the WordPress plugins that are made available for free by some amazingly talented programmers who put in a lot of time and effort. Here is a list of some the plugins I used in no particular order:

• Flutter - Add custom fields to any post and create custom post types. Used to create the variety of page layouts.
• NextGen Gallery and NextGen FlashViewer – Used for the portrait and wedding galleries. Displays images in a customized flash viewer.
• Shadowbox JS – Used for the pop-up gallery in the blog (and on this site).
• And, of course, I used my Recommended Plugins for optimizing the site and improving SEO.