Using Product Photography during Homepage Design

Business Owner / Managers are commonly required to commission bespoke pieces of website development in order to inject life to websites and online presentations.   As part of the homepage design and re-development of the sales website that stocks the Trabasack product, we were delighted to be involved in producing a set of slides to demonstrate and show-off the Trabasack Bag.

Introducing the new Website…

The photograph below shows the change in presentation from the ‘old’ website to ‘new’ website.  The new website is styled differently and it forms the basis of placing the product range in to new markets.  The include commuters, computer users and the education sector to name but a few.

One of the key areas of interest with the new website is the large dark space that holds the main product photograph.  This space proportionally uses up 30-50% of the viewable screen area and is the largest visual focal point to the eye.

The standard installation of the online shop only goes so far as providing a static image.  A static image is permanent fixture on the screen and it provides very little in terms of keeping peoples attention.  It is this large static area that the business would like to use to display a slide show to keep visitors attention when people land on the homepage of the website.

Making use of the Space

As with so many websites, this space can be used to display layered information that cycles through a sequence.  Using space in this way provides opportunity to bring the product in to context.  Context is a key ingredient to attracting interest. For example, in the example of a Tennis Bag, it is always far easier to distinguish a Tennis Bag from other sports bags if the item is photographed next to a Tennis Player or Tennis Shoe, keeping the object in context.

The same is true for Trabasack, and is an important part of product photography when considering homepage design.

Putting photography in ACTION

One of the key aspects about this blog are the photographs we are going to use.  Trabasack is a product, at its most fundamental level it is essentially a bag, albeit a multi-functional lap tray bag destined for different markets.  The images that have been selected are a combination of product photographs and photographs to show the product in action.

This point is imperative.  The essence of what we would like to communicate is in product being used in its environment.   One of the key themes here is to demonstrate the features and benefits of the product through visual communication.  Creative direction is essential to capture the right kind of images that can be used later during stages of marketing design.  The photographs we are going to use will show where, when and how the product is used.

In a similar example, to sell a Tennis Racket, having a series of on-white product photographs are a key ingredient to display any (or at least, most) product to the buyer.  A good example of this type of on-white product photography is displayed with the hompage design of the Dance  Etc website.  Please see the Dance Etc to see how the photography for their bags has been done, see Dance Etc.

Building desire from your homepage is different to displaying a listed product.  To actually build desire from the homepage, we need to do more than display a isolated item with a description.  Products need to be shown “in use” and preferably in their natural environment.  This strengthens buyer confidence and can increase the desirability of the product if the photograph lends itself to the customer.  Buyer confidence can also strengthened through endorsement, by “known” people using the product.

This approach to marketing is sometimes easy to grasp with a little direction from creative minds.  Considering the marketing designer as a customer to your product photography, its always a great idea to involve the designer at some level prior to the the photography shoot.  The more creative direction you seek, the higher the likelihood of exceptional results in your homepage design.

Framing the space

Recognising that the outlined space can be used to display layered information is key.  Often, when speaking to the gatekeepers of website the answers are not always forthcoming.  As designers, we have a slightly different approach.  We plan out the nature and flow of the space first and secondly put something together that performs that function.

In this example we are running different sets of visual presentations through a space in order to allow the marketing communications to take place.  To frame the space, we’ve depicted below a number of slides that will pass through the target area as part of this exercise.

Thinking about transitions

A transition is the term given to the filtering effect between one slide and another.  There are an unimaginable number of transitions available when deciding how a transition should work.  With such a large selection of tools available, making a decision can be a challenging task.  Having choice is far more favoured than being limited by scope.

Individual transitions can be tweaked slightly to ensure that each transition will work optimally with the sequence of slides.  For demonstration purposes, we are showing a fading effect below:

.

Making up our Canvases

Before we move on to the marketing design aspect of this case, we are going to take a careful look at the canvas that we will be using.  In all cases, each frame will be created using an identical canvas to ensure that they overlay correctly.  In this case, we will be using a single canvas to create a number of individual slides.

The canvas is something that we make prior to designing the communication.

With the canvas size set we are ready to start designing the individual slides that will cycle through the presentation and be seen on the final homepage design.  The next element where we bring in the marketing brain.

Marketing Design

When the marketing design process starts, we gather together all the key resources that we need.  Often they come in different forms, from different places.  For instance, we may receive a logo file in .EPS format, a set of RAW file from a commercial photographer and self taken JPEG format too.

At this stage, the key is bringing it altogether to allow the individual presentation slides to be designed in sequence.

Re-making the first slide

In this case and in others like it, it is very common for the customer to come forward with preferences.  Trabasack particularly liked the modern feel of the reflective Apple products.  We have remade and improved upon the very first slide showing some of the detail that goes in to marketing design.

Preparing the second slide

Following on from the first slide, a format can easily be established.  At this stage we start to look more closely at exactly what it is we are trying to communicate.  In this case, we are looking to show the product in context.  To achieve this we have decided to use a photograph of the product being used in a cross legged position.

Please see below:

This particular image shows the product in use on a persons knees.  The original concept for this product is a lap tray bag that can be used by wheelchair users giving the a hard usable surface.   The pose in the photograph maps directly to the original product concept.  In addition, the slide also gives subtle reference to the comfy beanbag bottom and hard top tray.

A number of challenges presented themselves with this image due to the composition of the photographers shot.  In this photograph, the subjects knees are out of the shot.  A great photo, but one that limits its use when being used during the design stage.   It is quite typical for our photographic friends to sometimes forget the final environment of how their images will be used commercially during the product photography.   In situations like this we need to be a little more creative with how the final output is put together.

The best way to provide a designer with full flexibility and scope is to ensure that the images captured are of the full body.  To close off the story about this slide, we will add the main photograph from the first slide to this second slide.  We have added the product shot in a smaller format on the bottom right hand side.  This continual follow through from one slide to the next is what helps the eye follow the story.

Introducing the strap

One of the key features explained to us about the laptop bag product is the ability for the bag to have either a double or a single shoulder strap.  Keeping the product in context, we felt it was particularly important to demonstrate what happens next in the sequence of events and this is why we chose to select the next image.

The above image clearly shows the bag being carried in a secure and quite comfortable position.  One of the attractive aspects of the particular bag in the shot is that it is light weight.  In this case, we felt that this photograph clearly demonstrated a light weight bag due to the hands free nature of the model.

Again, to provide a good follow through we have maintained the smaller image of the Trabasack Bag to allow the eye to easily follow the presentation.

Returning to Function

All three of the sequenced images prepared cover particular product features of the bag in a lifestyle setting.  We are about to introduce one of the biggest product features of the bag, which is the way it doubles-up as a laptop carry case.  Slowly, Trabasack is beginning to market its product to a wider audience and that wider audience includes groups of laptop users, computer users and people requiring an alternative laptop bag.

To help this slide communicate group user requirements, we have selected and manipulated a different type of image than the two previous.  We have returned to a product photo that shows the bag being used as a laptop tray.  In this slide, we have also introduced a new photograph showing the bag in an upright position.  This additional photograph showing the two carry handles, re-iterates how easy the bag is to carry.

To finalise this slide, the group user experience has been put together by showing the laptop tray bag as if it is being used by many people in a single row.  As abstract as this may seem, it has enough suggestion to help the visitor see the product in a different setting.

Finishing on good form

For the design of the final slide, a photograph was selected where the model has his back turned.  This is the final transition before we cycle back to the start.  Sporting the Trabasack for the first time as a rucksack, this pose is perfectly fitting to complete the story.  This subtle change in stance is only likely to be picked up subconsciously and again, this is an important part of the communication piece.  This final slide represents closure.

In addition to the photograph, a quote has also been added and uses the word turn, which has been used to help this slide turn the visitor seamlessly back to the beginning.  These subtleties are hard to pickout and often only visible to designers and people involved in marketing, but we hope you will see that it looks and feels right on the final homepage design.

Looking at the final sequence

Following the process through from start to end (and avoiding the ‘creative thinking’ time), most people will agree that there is quite an edge that professionals have over their hobbyist counterparts.   There is usually a level of intrinsic quality to the way something even as small as this is put together.

So let us have a look at the final sequence and see how it all looks.

Looking at the product photography in action

The only way to see the effect of the marketing design process  is to look at the final sequence of slides and see how individual images have been used to create a particular mood or feeling in the readers eye.

Evaluating the final piece…

The final piece has been implemented on to an OSCommerce online shop. Naturally, this piece could be installed on to any website, regardless of system whether it be a content management, blog, online shop and bespoke website systems.

If you would like to take a look at the final homepage design, please visit: http://www.trabasack.com/shop

Slideshows help keep things fresh

The motive behind this slideshow is to fulfil a number of requirements, one of which is to keep the product display looking fresh and active.  The slideshow achieves this with ease and it lays the path way to build new and interesting features in to this cycling area of content.

Whats more, the presentation currently loaded in to the slideshow can now be changed, resequenced and updated at any time.  This gives great flexibility to marketing and sales providing them with a whole host of options in the future.  We would like to think that the sequence of slides will help new visitors and prospective onlookers understand the product in context, which naturally will progress buyers along their journey.

We hope you enjoyed this years blog about product photography and its importance for homepage design, please feel free to comment.

We are happy to talk to people who would like:

1. A static image swapped out for a slideshow component.
2. Fresh new material designed for their showreal.
3. Direction on how to hold attention, generate interest and create desire.
4. A combination of the above.

Feel free to get in touch and contact us.

Looking forward to reading your comments.

References:

• Trabasack Products, Featured Case.
• Dance Etc, Mentioned Reference.
• KN Creative, For providing inspiration for the blog.
• Nick Johnston, Webmaster for Trabasack.com.
• OS Commerce, Online Shop system.
• Print Away, Who we hope find a little inspiration  from the blog.