Art Gallery is our answer to the challenge of making the balance between a website which shows art work and a website which sells goods. It has all the potentials of exhibiting the versatile talents of artists where visitors can enjoy the beauty of art, but at the same time it also advertises products and people can buy them as on any online shop. The major demand here was making the site responsive, i.e. preserving the unique design of an artistic website and the functionality of an e-commerce website across many devices (desktops, tablets and mobile phones).
The main feature of the main page is the banner where most important art work is advertised. It can accommodate images of different sizes and width to height ratios offering wide range of unique arrangements, colours and textures which best represent the nature of the gallery. The image navigation buttons are conveniently located at the bottom of the banner. Visitors can start/stop the smooth movement of the images left, or right. By pressing the respective direction button second time images can also move more quickly (jump) which is useful when showing bigger number of art work. Clicking on any individual image opens the Art Work Details page which presents all necessary information related to the selected picture.
Other important (and also optional) components of the main page are:
- Top navigation;
- Shopping basket;
- Welcome section;
- Bottom section with navigation and other important information (links to social media, accepted credit/debit cards, copyrights note).
Small galleries can start with a single page website which is the main page.
Art Work Details page
The Art Work Details page is one of the most important pages of the website. It presents the art work not only visually by showing more detailed image, but also it displays all necessary/available information related to the work, like full description, size, year of creation, techniques and materials used, etc. in the Art Work Details panel. Showing the size in inches and centimetres and the price in different currencies is optional, but very nice feature, especially in case you expect visitors from different countries.
Art Work Details panel
There are a couple of important functionalities of the Art Work Details panel which are worth mentioning, first of which is the Add to basket button. As its name suggests this button, when clicked, puts the art work into the shopping basket. That is also indicated by increasing the number of items in the shopping basket.
A second button - the "Close Art Work Details panel" button is available to hide the panel allowing cleaner view of the art work. In that case the panel is replaced by 3 new buttons – "Open Art Work Details panel" button and two navigation buttons. The navigation buttons help the visitor to easily switch to other art work without going back to the main page. Clicking on the "Open Art Work Details panel" button re-opens the details panel which always shows the details of the current work.
The image of the art work shown on this page is resized to best fit the size of the browser’s window, but at the same time keeping the proportions of the original image.
The other features of the Art Work Details page (top and bottom navigation, links to social media sites, etc.) are the same as they are on the main page keeping the design consistency of the site.
The Basket page can be opened by clicking on the shopping basket icon which is available on all pages (excluding the checkout pages). It shows the name, price and image for each art work the customer wants to buy. A "Remove from basket" button (in the form of a small letter "x") is also available at the top right corner of the image which helps the customer to manage his/her shopping basket.
The customer also has the option to select his/her preferred currency. The currency select drop-down menu is located at the top right of the page. A second drop-down menu located on the last row of the shopping basket table is available for selecting the delivery option.
Lastly, the page is completed with a "Continue Shopping" and "Checkout" buttons.
The content of the Basket page and the selections made there (currency and delivery option) are saved on the visitor’s device (desktop, laptop, tablet or mobile). That allows the same visitor to continue with his/her purchases even he/she has left the website, but returns later. The items in the basket are removed when the customer pays for the art work he/she has bought and receives an order confirmation.
There are 4 checkout pages each focusing on a specific step in the payment process:
- Delivery and Billing Address – the customer is required to enter delivery address for his/her purchase. If the billing address is the same as the delivery address there is no need to enter the address again. Instead a simple tick box is provided which when ticked does the necessary job.
- Order Summary – this page provides complete and detailed information about the art work purchased, currency and delivery option selected, delivery and billing addresses entered. After checking all these details the customer can press the "Pay now" button which transfers the customer to a secure page (provided by a secure payment provider) where the actual payment takes place.
- Secure payment – provided by external secure payment provider;
- Order Confirmation – at the end of the payment process the "Order Summary" page shows again all details of the art work and delivery purchased and the delivery and billing addresses. It also provides a code which can be used to track the order, or to use it in correspondence. The customer has the option to enter his/her e-mail address where an e-mail with the same order summery can be sent. In addition the content of the shopping basket is cleared (the shopping basket becomes empty) which allows the customer to make further purchases without being confused with previous purchases.