theBattleforge limited website
theBattleforge limited are currently using an ekmPowershop ecommerce package which provides a template through which to build a website.
This is not without its difficulties, due in most part to the manner in which the template handles text and graphics... the result is your design doesn't always appear the way you would expect.
The challenge here was to produce an interim design that would withstand the vagaries of an online template of this nature without sacrificing creativity. Additionally as the purpose of the site was to sell products, it was important to present the content in a meaningful way to the customer and in the shortest number of clicks.
Referencing the template structure, overwhich there is little control, the decision was taken to wire frame aspects of the sites navigation to solidify the customer "journey" from the home page to a product page.
Below are the wire frame visuals that I created to represent that journey, followed by a sample of the website's new graphic assets and a work in progress screen grab of the same chosen navigation route to demonstrate how the site is expected to look closer to its completion.
Using a Photoshop wire frame template that I created for generating visuals that have a pleasing sketched look about them, I produced a dummy of the home page (above) and then seven subsequent pages (below) as the user choose as shop category, a product range, a part of the range and then the product itself.
The Company already had a logo and a corporate colour scheme used on earlier versions of the site. These would not be changed.
It was however necessary to distinguish product images from category images and as a result a great many category and subcategory images have been produced. Below are a few examples from the wargames and RPG fantasy product areas of the site, showing a consistent visual theme running throughout.
The product images are all on white showing clearly what is available for purchase and how the finished item can look once the customer has assembled and painted it. Not all products have been finished to this level so it is also necessary to show them in their unpainted form while they await finished photographs.
Finally we have examples of some of the Work in Progress visuals I produced for the client, showing the design as it is being implemented. By presenting the screen grabs inside the wire frame template it demonstrated to the client that this is work still under development, but gives a clear indication as to the impact the finished site will have.
The following screens repeat the customer journey illustrated in the wire frames at the beginning of this project while also showing the four "slideshow" elements on the home page.
