April 16, 2012

Designs for photo websites and photoblogs

On Indian Top Blogs, we have been emphasising again and again on two things: quality of content and functionality. We’d like to repeat the same for photoblogs also.

Content includes the photos and the text going along with them. We have talked about text content in photoblogs in the last post and will talk more about content in the next one. Let’s dwell on design aspects in the present post – from display and functionality angles.

Before we discuss specific designs suitable for photoblogs and similar websites, let’s draw your attention to these related matters:

1.    While you can make the photoblog / website as flashy as possible, consider functionality: Whether the colours, display elements and their layout, and frills such as flash animation add value without distracting and irritating visitors? Whether they aid navigation or confuse? Whether they enhance the photos’ appeal or hurt it? Whether a visitor sees the most important elements in the opening screen or he has to scroll down to get at the one he’s looking for?

2.    You will have limitations of technology too, in case you are blogging on a free platform. So, many types of beautiful layouts may not be possible with the available themes / templates. However, you can overcome these by applying a free or paid theme / template from the web.

3.    It follows from the above that you don't need an extraordinary theme. A simple but highly functional layout may work wonders for your photoblog if you choose the photos with care and support them with great text content.


photoblog-design-simple
fig. 1
4.    The designs that we discuss below tell the basic philosophy behind different layouts. You can add labels and categories, social media and interactivity tools, useful widgets etc to add value to the blog / website.

Let’s start with a very basic but good layout. Look at fig.1. It has a small title band [which can be a simple solid colored band with blog title +/- description; or an image in the background. A search box fits well at the right corner. Under it, there is the menu-bar. The main content area has a big photo [usually the most recent one] or a slide-show, while a sidebar gives thumbnails of other recent photos. You can have ‘about me’ widget on top of the sidebar and widgets under photo thumbnails. You can use the space below the main photo and the blog’s bottom for various links and widgets.


single-photo-on-photoblog-screen
fig. 2
single-photo-with-thumbnails-on-blog-top
fig. 3
Figures 2, 3 and 4 are some common variations of the ‘big photo’ layout.  Fig 2 has a band under the main photo that has various links. Many photo websites do have this design and it looks very professional. However, it limits functionality even if you stuff the two menu-bars with all relevant links and widgets. Moreover, if you do not use the sidebar, the width becomes too much vis-a-vis height for most photos.
big-photo-with-thumbs-blog-design
fig. 4

Fig. 3 has thumbnails of recent / important photos or categories under the big photo. There is a bit of description under each of these thumbnails.

Fig.4 has no sidebar. So, the photo takes the middle of the screen and is followed by categories / recent photos with a description alongside them.

Fig.5, 6 and 7 do not have a single dominant photo. Fig. 5 has a suggestion for shortening the title bar and removing the menu-bar. Under the truncated title bar, there are widgets. The rest of the screen has thumbnails of recent photos or categories, and next to each thumbnail is a small description. The arrangement is like vertical stacks.
list-type-photoblog-layout
fig. 5


neat-grid-design-for photo-blogs
fig. 6
Fig. 6 displays the photo gallery or album. Widgets and categories can come in the top menu-bar or in the bottom area. The layout looks like a neat grid.

Fig. 7 is an overlapping collage of thumbnails. The overlap can be arbitrary; size and placement of each thumbnail can vary according to their age, importance, popularity etc. 

You would agree that layouts mentioned at figures 1, 3, 4, 5 and 6 have greater navigability and control over content than figures 2 and 7, though fig. 2 looks very decent and fig. 7 quite experimental.


low-functionality-photo-blog
fig. 7
Importance of horizontal menu-bar and sidebar in a photoblog

The top menu-bar, we feel, gives a photoblog clarity like nothing else. Since it occupies the prime area of the site and is always ‘above the fold’ [=visible in the opening screen], it can be used to link to categories, profile of the blogger or the photoblog, terms of use, commercial aspects, photography tutorials, awards etc. A sidebar helps to balance the screen width.  The upper part of sidebar can be used for profile, recent posts, very important photos or other elements that add value to the blog.

In this series:
1.Photoblog defined; use of text with photo
2.Designs for photo websites and photoblogs (this post)
3.Placement of photos in blogs; blog-layout, categories, etc