Web Design Marquette, MI | Middle Ear Media

Chris Pot­ter Photo

November 18th, 2011

Chris Pot­ter recently had me redesign his pho­tog­ra­phy web site. The old site was in a blog for­mat and con­tained his “photo a day” project, where he added a new photo each day for an entire year. For the redesign, he wanted to fea­ture these pho­tos promi­nently and make it eas­ier to view all 365 of them. I took all of these images and com­bined them into one slideshow gallery. Then I framed the entire gallery in what looks like a view screen on the back of a camera.

Slideshow

The images are dis­played in a slideshow for­mat. Instead of slid­ing across though, the cur­rent image fades out while the next image fades in. Each one is vis­i­ble for about eight sec­onds before fad­ing to the next image. There are “pre­vi­ous” and “next” arrows located on the left and right sides of the view screen which allow man­ual nav­i­ga­tion through the gallery.

Thumb­nails

There is a small “Thumb­nails” but­ton located on the upper right cor­ner of the view screen. This but­ton acti­vates the Thumb­nail drop-down over­lay. In the over­lay, the images from the cur­rent gallery are shown as semi-transparent thumb­nails. Hov­er­ing over them makes the thumb­nails fully opaque. Click­ing on one will load that image in the view screen. Also, hov­er­ing near the left or right edge of the over­lay will scroll through the thumb­nails at a rapid pace which is very use­ful in such a large gallery.

But­tons

Another inter­est­ing fea­ture of the site is how I incor­po­rated the exist­ing but­tons on the back of the cam­era by assign­ing them use­ful func­tions. They all have gray icons that become col­ored when hov­ered over. When clicked, the icons move down one pixel. This helps give the illu­sion that the but­ton is being depressed.

There are sev­eral util­ity but­tons located in the lower right cor­ner. The but­ton with the star icon can be used to book­mark the site. The one with the enve­lope and pen­cil opens up an e-mail client and allows a user to con­tact Chris via e-mail. The but­ton with the heart will share the page on Facebook.

To reduce the ini­tial load­ing time of the site, the gallery is sep­a­rated into 12 months. To nav­i­gate between each month, there are gallery but­tons with left and right arrows located in the upper left.

In order to give it a real­is­tic effect, I paid close atten­tion to detail. The back­ground image of the site (Chris’s night-time photo of a ceme­tery) can also be seen in the camera’s view finder.

This gallery is just a small exam­ple of Chris Pot­ter’s Pho­tog­ra­phy. Look for an expanded site with more gal­leries in the future, and don’t hes­i­tate to con­tact Chris for your pho­tog­ra­phy needs.

Check out chrispotterphoto.com to see the web site for yourself.

Tags: Chris Potter Photo, gallery, Marquette, Michigan, slideshow, Web Design

This entry was posted in the Web Design category.