Project Example: Medical-Tools.com
Visual Design
Visual Designing is designing the appearance of website. Visual design uses colors, typography, images, graphics etc to make the website pleasant to look at, to control eye-movement, to inspire, to induce and to highlight the most and least important sections of the website.
Colors: For Medical-Tools.com, website color scheme was derived from corporate logo which uses steel blue, dark gray and red. However use of red color was minimized to the banner area because of its sensitivity and being symbol of warning of danger.
Typography: 10pt (13px) font was selected to display product description with Dark Gray #333 being its color. Main headings which user's eye would like to find where made large 30px in Arial and headings which were needed for visual separation were kept dark gray. Also only Product Name and Product Description were given H1, H2 and H3 tags and other headings were just made large without using any HTML heading tag. This was done to increase the key-word density for the Headings tags and to hide 'unimportant' headings from Search Engines.
Search: Upon analysis, it was found that only fewer than 3% visitors were using site's search functionality. Search is an important feature of site which reveals similar products as well as the one visitor is looking for. To increase its usage, it was given an increased prominence, larger height and dark contrast. Since updating it, stats show more than 17% site visitors are now using search and conversion rate has also gone up.
Credibility through Social Sharing: Facebook Like button was strategically placed under the Save banner, right under the product heading and next to initial product description. This approach is found particularly well in gaining the user's confidence and also giving the impression that product is popular one.
Buttons: There are many buttons on the products page but Add to cart button was the most important with user's requirements in mind. Email and FAQ inquiries suggested people were having difficulty in placing orders through online website. Therefore a large Add to Cart button was designed which also included a tick mark to give users an implicit message "it's okay" to go with. Other buttons which were not significantly important were made embossed but whitish to avoid obtrusiveness.
Visual Clutter Reduction: In order to reduce the visual clutter, Products Area was given a dark background color which isolated itself from Product and Product Description areas considerably. Also all sections of website were giving a light gray and light-blue bounding box to show which elements were related and were part of one information block.
More Examples:
