Project Review: Warm Bean Coffee

By | January 15, 2012

Warm Bean Coffee (View Site)

Brief: As part of a new campaign, to bring customers back to the high street, you have been commissioned to build a website for a small business retail outlet based in a small town in the southeast of England. The campaign organisers believe that by giving small, local businesses a web presence, they can increase awareness and improve trade.

Tone: design emphasises this is a local business by stating the location clearly on every page. Similarly, purpose of the business is always obvious. Large images make an impact and add visual interest. Copy is friendly and helpful, as concise as possible without being terse.

Site Identity: logo is simple and iconic reinforcing the purpose of the business. Main products and location contained in a large banner. Banner contrasts with other content; spans the header image to add visual interest, drawing the reader’s eye down the page.

Colour: complementary palette (browns and yellows) generated using Adobe Kuler from coffee bean image in the header, then a contrasting blue chosen for additional visual interest. Colour scheme intended to be warm and cosy in-keeping with the company brand.

Font: Georgia for titles and the opening paragraph, Verdana for body text. Use of bold, italic and varying colours keep the limited typefaces from looking uninteresting. Consideration given to all whitespace (padding, margin, line-height, letter-spacing, etc.) to ensure a pleasing visual balance. CSS pseudo-elements, :before  and :after, used to add the coloured tildes ~ to the Drinks and Snacks pages as they are style, not content.

Layout: 960 grid system with a 30px baseline. Basic 12 column layout used as very flexible and design does not require anything more. Whole page is summarised via visual and copy in header area, then more detail given below the fold.

Information Architecture & Navigation: only five pages are used, with no sub-levels, making all information easy to find and contrasting with larger coffee shop chains. No search box as site is so simple but may be required in future if range of drinks and snacks becomes much larger.

Images: large JPEGs for high impact header images, optimised for load time while still working with large, widescreen displays. The blur effect, and images with limited colour palettes were used to reduce the file size. Coffee beans in header edited to tile seamlessly.

Google Maps API: jQuery and gMap plugin used (along with an API key) to create a map and indicate the location of the coffee shop using a custom icon. This technique does not use an iframe so the page validates against a Strict DTD. Map spans entire width of the header so it feels fully integrated into the overall design.

Social Media: links to Facebook and Twitter included in the head of each page. Use of these for a small business could be vitally important for building up a loyal and local client base which will recognise and relate to members of staff. There is the potential for future promotions and events organised via social media.