VG WEB STUDIO
AboutLearn MoreServices
Banner imageHelping small businesses
grow and prosper
Welcome to VG Web Studio!
Specialising in web design, development, and management, we offer professional all in one web services for a wide range of businesses.
See Our Latest Work
Chic Boutique is an example of a fully functional e-commerce website. Its responsive design is tested on many devices (desktops, laptops, tablets, mobile phones) and browsers (Chrome, Internet Explorer, Firefox, Opera, Safari). The site benefits from the custom designed shopping basket and wish list. It could be ready for launch as soon as the design (layout, colours, fonts, etc.) is agreed and you supply your own product details (images, prices, description, etc.), adverts and other content. We also offer website after care, management and hosting.
Website Details
Main page
The main page has a unique design with navigation, images, adverts and other messages, colours, fonts etc. which best represent your business. All these elements could be discussed and changed during the design and development stage as well as after the site is launched (site management/after care).
Available elements
  1. Logo;
  2. Top Navigation Bar/Menu (including links to Shopping basket and Wish list). On smaller screens the navigation bar is replaced by a navigation icon which opens/closes the navigation bar;
  3. Banner where adverts or simple images could be placed;
  4. Main Body holding additional product or product categories ads, most important information about the boutique/shop, product promotions, sale discounts, etc.;
  5. Bottom Banner showing additional important links (Delivery and Returns, Terms and Conditions, etc.), icons of accepted credit/debit cards and secure payments providers, links to social media.
Notes:
  1. The following elements (Logo, Top Navigation, Bottom Banner) are available on all pages, except check-out pages where the top navigation is replaced by check-out stage indicators.
  2. Banner ads are available on the main page and all product pages.
Product pages
All product pages (Jewellery, Clothing, Shoes and Accessories) have similar design, but they are more related to the product category they are presenting. That includes the banner ads.
Note:
The names of the main product pages are selected this way for illustration purposes only and can be changed depending on your business.
The product details(image, name, description, price, discount price, colours, sizes, etc.) including "Add to Basket" and "Add to Wish List" buttons are arranged in individual boxes which resize automatically to best fit on the width of the screen/browser’s window. The number of products on each row also changes respectively.
When the customer clicks on the "Add to Basket" button the code first checks if the product is in stock, then if the product is already in the basket and shows an indication when the product is added to the basket. At the same time the number of products in the basket counter increases to show how many items are in the basket. If the product is out of stock a message appears to inform the customer. By clicking on the "Basket" icon the customer can see a simple table showing the content of the basket. A "Review Basket" button is available taking the customer to the Basket page and allowing a detailed inspection of the basket at any time.
The "Add to Wish List" button which is available for each product and the "Wish List" icon provide similar functionality, but for products customers want to review later.
Basket page
The Basket page can be opened by clicking on the "Review Basket" button available on the main page and all products pages. It shows detailed information of the products the customer wants to buy including:
  • Thumbnail image;
  • Name;
  • Price;
  • Quantity;
  • Product subtotal;
  • Two buttons to increase/decrease the number of items;
  • Remove product button.
Additionally the total number of items and the total sum are shown. The customer has also the options to continue shopping, go to checkout, or clear the basket.
Note:
The content of the Basket page is 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 products he/she has bought and receives an order confirmation.
Wish List page
The Wish List page is very similar to the Basket page, but the items listed there are products which the customer is selected to buy later. In addition each product listed on the Wish List has a button to move it into the Shopping Basket.
Note:
The content of the Wish List remains saved on the customer’s device (desktop, laptop, tablet, or mobile phone) even when the customer leaves your website. On return he/she could continue with the choices he/she had made during previous visits to your website. In that case the code automatically refreshes the prices of the products listed on the Wish List.
Checkout pages
There are 5 checkout pages each focusing on a specific step in the payment process:
  1. Choose Delivery Option – here the customer can select from a list of delivery options and see the estimated delivery date and the total sum he/she have to pay;
  2. 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.
  3. Order Summary – this page provides a complete and detailed information about the products purchased, the delivery option selected, delivery and billing address and estimated delivery date. 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.
  4. Secure payment – provided by external secure payment provider;
  5. Order Confirmation – at the end of the payment process the "Order Summary" page shows again all details of the products and delivery purchased, delivery and billing addresses, estimated delivery date. 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.
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).
Website Details
Main page
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:
  • Logo;
  • Top navigation;
  • Shopping basket;
  • Welcome section;
  • Bottom section with navigation and other important information (links to social media, accepted credit/debit cards, copyrights note).
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.
Note:
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.
Basket page
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.
Note:
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.
Checkout pages
There are 4 checkout pages each focusing on a specific step in the payment process:
  1. 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.
  2. 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.
  3. Secure payment – provided by external secure payment provider;
  4. 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.
Dundee, Scotland, UK
Copyright © 2016 VG Web Studio - All rights reserved