Interface Design – Week 8 – Working With Colour

Colour Theory


This week explored the importance of the application of colour in website design.

Consistency of colour throughout a piece of work is called a colour scheme, and used effectively it can help communicate a message.

The Colour Wheel

The Colour Wheel is used to show the relationship between the 12 colours. There are 3 Primary Colours, 3 Secondary Colours and 6 Tertiary Colours.


The Colour Wheel

The Primary Colours

The 3 Primary Colours – Red, Yellow and Blue – form the basis of Colour Theory. None of these colours can be made by the mixing of other colours.


Primary Colours

The Secondary Colours

The 3 Secondary Colours are orange, green and violet. Any of these can be made by mixing two Primary Colours.


Secondary Colours

Tertiary Colours

The 6 Tertiary Colours (+3 Primary + 3 Secondary) compete the 12-Colour Wheel. Tertiary Colours are made by mixing one Primary Colour with an equal, part adjacent secondary colour.



How Tertiary Colours Fit into the Colour Wheel


How Tertiary Colours are Created

Tints, Tones & Shades

A HUE is a pure colour – one of the 12 on the Colour Wheel.

A TINT is a hue blended with WHITE

A TONE is a hue blended with GREY

A SHADE is a hue blended with BLACK


Tints, Tones & Shades

What About Black and White?


This Speaks for Itself!

One More Thing..


How is the Colour Brown Made?

Brown is a composite colour, and is created by mixing RED, BLACK and YELLOW.

Colour Combinations

If colours are put together skilfully, the result can set a mood, draw attention or make a statement – colours can actually affect how a person feels emotionally. Thus it is a crucial tool in design, and needs to be utilised effectively.

When the 12 colours in the Colour Wheel are combined, it creates a ‘colour scheme’, and there are some tried and tested colour combinations which work particularly well – these are called ‘colour harmonies’: two or more colours with a fixed relation in the Colour Wheel.


An Example of a Warm Colour Scheme – based around REDS, ORANGES and YELLOWS (also known as advancing colours)


An Example of a Cool Colour Scheme – based arounds GREENS, BLUES and VIOLETS – also known as receding colours

Complimentary Colours

Complimentary colours are opposite each other on the Colour Wheel – when mixed they make GREY. When using complimentary colours in a colour scheme, the stark contrast between the two can be striking…but needs to be used carefully so as not to be garish!


How Complimentary Colours are Made


An Example of a Colour Scheme using Complimentary Colours

Split Complimentary Colours

A split-complimentary colour scheme is an expansion of the complimentary colour scheme. It uses ONE BASE COLOUR plus TWO ADJACENT COLOURS – this retains the contrasting nature of a complimentary colour scheme, but is more balanced and gentler on the eye.


How Split-Complimentary Colours are Combined


An Example of a Split-Complimentary Colour Scheme

Triadic Colours

A triadic (triangle) colour scheme uses three colours which are equally spaced around the Colour Wheel. It has the benefits of vibrancy and strong visual contrast but keeping a sense of balance. It works best when one colour is dominant and the other two are used as accents.


How Triadic Colours work in the Colour Wheel (make a triangle shape)


An example of a Triadic Colour Scheme

Tetradic Colours

A tetradic (rectangular) colour scheme combines four colours in the Colour Wheel, which are arranged in two complimentary colour pairs. This gives a good deal of scope for variation. However if all four colours are used in equal amounts the scheme could look unbalanced and chaotic.

Bearing this in mind, it is important to be aware of colour temperature when using a tetradic colour scheme. Two warm colours and two cool colours used in equal amounts help to bring balance and harmony.


Tetradic Colours in the Colour Wheel (make a rectangle shape)


An example of a Triadic Colour Scheme

Analogous Colours

Analogous colours sit next to each other on the Colour Wheel and share an undertone of the same colour (rather than mixing warm and cool colours which can look unbalanced) Using an analogous colour scheme offers a harmonious, calming and interesting effect.


Analogous Colours sit next to each other on the Colour Wheel


An example of a warm-colouredAnalogous colour scheme – using yellow, yellow-orange and orange

Monochromatic Colours

Monochromatic colours colours are made up of different saturations (tints, tones and shades) of the same colour.

The benefits of using a monochromatic colour scheme are that it is calming and brings a sense of serenity. It is consistently balanced and visually attractive. However, it can lack contrast (clearly!) and vibrancy.



An example of a Monochromatic colour scheme

Types of Colour Theories

Additive Colour Theory


Additive Colour Theory (RGB)

Simply put, this is about mixing two or more hues together to create a third.

The Primary Colours in Additive Theory are RED, GREEN and BLUE (RGB) – added together these make WHITE

It is also known as LIGHT THEORY, as it deals with radiated and filtered light. BLACK radiates NO LIGHT. WHITE radiates ALL LIGHT. The more light that is added, the brighter the colour mix becomes.

Because VIDEO is the process of capturing and RADIATING light, it uses Additive (LIGHT) Theory . This is used in TV, theatre lighting, computer monitors and video production. If an incorrect choice of colour process (ie not RGB) is made by someone when designing for a website, for example, then a bright red logo risks appearing muddy when it is on screen.

Subtractive Colour Theory


Subtractive Colour Theory (CMYK)

This is more complex! It deals with how WHITE LIGHT is absorbed and reflected off coloured surfaces. It is also known as PIGMENT THEORY.

It is subtractive because light is subtracted by adding more colour (pigment).

The Primary Colours in Subtractive Theory are CYAN, YELLOW, MAGENTA and BLACK (CYMK)

Subtractive Colour Theory is most often used in printing and painting – colour that is seen on a physical surface. The CYMK colour combination allows printers to produce a wider variety of colours on paper than RBG.


The task was to rework my holiday website using 3 different colour schemes.


The Original


A Warm Colour Scheme – Reds, Yellows and Oranges


A Split-Complementary Colour-Scheme – Pink, Purple and Yellow


An Analogous Colour Scheme – Yellow-Green, Green and Blue-Green


Out of all of the colour-schemes, my ‘cool’ original version remains my favourite. The blues and the white are clean and crisp and feel fitting for a skiiing holiday website.

However I do like all of the variations! Each one looks good, and the tweaking of  the colours show that Colour Theory  really does work. It enables different sets of colours to be combined in ways which produce great results.

Interface Design – Week 7 – Interface Development

This week was devoted to developing a home page from the wireframe we created in the last session.

My theme was to create a web page for a holiday company (I opted for skiing holidays!) I used the following three design references to help me put together my own:

Screen Shot 2017-04-03 at 18.04.19

Screen Shot 2017-04-03 at 18.01.03

Screen Shot 2017-04-03 at 18.06.41


Screen Shot 2017-04-02 at 12.19.26

Using Photoshop, I created a new document (1366 x 768 @ 72ppi). then used a grid system to help me plan and organise my information on the page with the help of last weeks wireframe.

Screen Shot 2017-04-02 at 12.34.37

I knew wanted a blue and white theme. My initial idea was to style the name of the company to look like a ski-slope, but it seemed untidy, so I jettisoned it!

Screen Shot 2017-04-02 at 12.55.16

This is looking better

Screen Shot 2017-04-03 at 18.23.32

The finished product!


Mission complete!

Interface Design Week 6 – Wireframes & Annotations

This session was about wireframes and annotations, and their importance in the design process.


This is an example of a wireframe..


A wireframe can be regarded as an architectural blueprint. Much like planning the building of a house, it is never a good idea to randomly start the construction process before mapping out where everything is going to go.

Wireframes provide a way to identify content and structure, and also behaviours of a view of a webpage or app. Layout and content can be planned without the distractions of colour choices and typefaces – the foundations of the design need to be fundamentally strong before it can be given it’s ‘bells and whistles’ of graphic elements or content.

Placeholder text (“lorem ipsum”)  is often used to represent where the actual text will be on the screen in the finished design. This is a useful strategy, as it stops people from focusing on perfecting the text rather than the design features.

Used in combination with site maps and task flows, wireframes are extremely useful for demonstrating prototyping scenarios and proof of concepts.

Wireframes usually begin their lives sketched out on paper..


…this paper draft should identify the main elements to be included on the screen, such as:

  • Navigation (main and sub navigation)
  • Content (text and images)
  • Media (video and animation)
  • Form elements (search, login fields and buttons)
  • Calls to Action (CTAs  – a CTA may be a banner, button or some kind of graphic or text on a website which in intended to prompt the user to click on it)


Annotations are explanations and notes about an element or interaction on wireframe. They often contain information such as:

  • Content identification or labelling
  • Content sources(s)
  • Display rules
  • Interaction rules
  • Interaction destinations
  • Error content/messaging

Wireframe annotations are important because they provide explanations as to design decisions, and why the design is effective.

In creating annotations it is useful to bear in mind the following:

  • Keep them short and to the point, as this makes them more readable, and focus on the benefits for the user.
  • Number each annotation and place them so that they read from left to right going down the page for a smoother reading experience.
  • Explanations about each annotation should be placed in a column to the right of the wireframe.

An example of an annotated wireframe

The task this week was to get into groups and pick a number from 1 to 5. Each number had a theme for a website design. I was in the ‘Holiday Company’ team.

The project began by using post-it notes to create a site-map for the website, having thought about the kinds of pages that should be included.

This led on to devising a list of requirements for the homepage, and doing some research on what typical website for holiday companies include on their own homepages.

Moving on, a paper wireframe was designed based around that list of requirements, followed by a more comprehensive digital wireframe.


My wireframe for a holiday company


Made in Creatly and Photoshop

Interface Design Week 5 -Images & Sitemaps

This session was focused on web graphics and understanding the different file types. Using the correct file type is crucial – it needs to load quickly, be compatible with the designer’s coding environment and also be viewable in a browser.

Varieties of Image Files


This file type end in .jpg. It stands for Joint Photographic Experts Group – the ones who created the standard for this type of image. JPEG files are images which have been compressed to store a large amount of information in a small file size.

JPEG files are usually used for photographs on the web because of their small file size. A further benefit is that they present well on a web page, load quickly and support millions of colours.

This type of file is not considered suitable for logos or graphics due to the compression – it can create jagged lines and make an image appear pixelated rather than smooth.


This file type ends in .gif. It stands for Graphic Interchange Format. Unlike the JPEG format, the GIF does not lose detail when it compresses. However, the file cannot be made as small as a JPEG.

A benefit of GIF images is that they support transparency, which means that the GIF can be placed over a colour background (or even photographs), and there will be no visible border or background in the image – the only thing seen is the icon.

GIF files also have the disadvantage of being limited in their range of colours (it is an 8-bit format which means the maximum number of colours is 256), and are never used in photography for this reason. GIFs are useful for simple animations, logos and graphics which solid areas of colour.


This file type ends in .png. It stands for Portable Network Graphics, and was created as an open format to replace GIF. It is a good option for when a small file is required which maintains its original quality. PNG files support millions of colours, and also varying degrees of transparency (unlike GIFs which are either transparent or opaque). PNG-8 does not support transparency, but PNG-24 and PNG-32 do.

A Task…

The task was to create a set of web ready images from a flat-graphic logo and a photograph from Google images.

There needed to be FOUR versions, and each one should show THREE different levels of compression – HIGH, MEDIUM and LOW

  • JPEG
  • GIF
  • PNG-8
  • PNG-24

 Original Images

(PNG) Original Image

(JPEG) Original Image

Adjusted Images


JPG is best for photographs of natural images. JPEGs are ‘lossy’ which means they retain all colour information, but compress file size by selectively discarding data. That compression can result in loss of quality. JPEGs cannot be animated.

Low Quality

(JPEG low quality) 27.44K – 6 sec @ 56.6Kbps



(JPEG low quality) – 63.31K – 12 sec @ 56.6 Kbps

Medium Quality

(JPEG medium quality) 48.88K – 10 sec @ 56.6Kbps


(JPEG medium quality) 89.77K – 17 sec @ 56.6Kbps

High Quality

(JPEG high quality) 88.65K – 17 sec @ 56.6Kbps




(JPEG high quality) 171.2K – 32 sec @ 56.6Kbps


The GIF format is best for images which have solid colours, text and line art, and computer-generated images. It is also useful when an image has text, and every pixel counts in order to preserve clarity. GIF does not compress photographs very well. GIFs are rarely used for large images on web pages due to download times and file-size.

Low Quality


(GIF low quality) 57.37K – 11 sec @ 56.6Kbps – 4 Colours


(GIF low quality) 35.44K – 7 sec @ 56.6 Kbps – 4 colours

Medium Quality


(GIF medium quality) 168.9K – 31 sec @ 56.6 Kbps – 32 colours


(GIF medium quality) 142.1K – 27 Sec @ 56.6 Kbps – 32 colours

High Quality


(GIF high quality) 263.9K – 49 sec @ 56.6 Kbps – 256 colours


(GIF high quality) 225K 42 sec @ 56.6Kbps – 256 colours


PNG-8 (or 8-bit PNGs) images are more optimised for things with simple colours, such as logos, or user interface elements like icons and buttons.

Low Quality


(PNG-8 low quality) 65.28K 13 sec @ 56.6 Kbps


(PNG-8 low quality) 37.11K – 8 sec @ 56.6 Kbps

Medium Quality


(PNG-8 medium quality) 126.4K 24 sec @ 56.6Kbps


(PNG-8 medium quality) 110.4K – 21 sec @ 56.6 Kbps

High Quality


(PNG-8 high quality) 241.2K 45 sec @ 56.6Kbps


(PNG-8 high quality) 188.9K – 35 sec @ 56.6 Kbps


PNG-24 (or 24-bit PNG) images can handle much more colour than their PNG-8 counterparts. This makes the format ideal for complex images with lots of colour such as photographs. When there is a need to preserve transparency and large amounts of colour (as well as achieve full or partial transparency) PNG is likely the best option.


(PNG-24) 662.8K 121 sec @ 56.6Kbps


(PNG-24) 493.7K – 90 sec @ 56.6 Kbps

Site Maps

Site Maps are a visual tool which identify the structure of websites and applications. Site maps depict hierarchies and connections between pages, and also show how users may locate content. They are like an interactive table of contents, in which each item listed links directly to its counterpart section of the website.

In their most general sense, site maps give an overview of a website’s navigation, as well as the connections each page can have.


An example of a site map

The Basic Elements of a Site Map

  • Page – This usually takes the form of a plain rectangle. A page is the basic unit of user experience on the internet.
  • Page numbering – Every page on a site map should be numbered. This allows other documentation, such as wireframes and taskflows, to sync up with it
  • Pagestack – This represents multiple pages of similar content
  • Decision Point – A decision point is like a virtual crossroads. It shows the path a user can take depending on the answer to a question.
  • Connectors and Arrows – These show the direction of progress between pages, pagestacks, decision points etc..
  • Conditions – It is common to use a dashed line to represent a condition. It can either be used a connector or as a box around an area to highlight that a connection to a page (or set of pages) is conditional on some other action or event

A Task..

The task was to select from a list of websites and then create a comprehensive site-map. I chose Valve Software

Screen Shot 2017-05-15 at 18.15.01.png

Screenshot of the Valve Sofware Website

I used Creatly to make the sitemap, which is below

The site map I made for the Valve Software website














Task Flows

Task flows are a useful tool for helping think through the design of a website before it is actually developed. They use many of the same basic visual elements as site maps, and when used in combination with these, the two together can show how a user arrives at a page with the information which was desired.

It is important to have in mind the objective of the user when creating a task flow – this is connected to UX (user experience)


An example of a website’s task flow

Interface Design Week 4 – Grids

This session was all about grids. We learned about the importance of an underlying structure when designing something, and how to see the logic behind any design layout.

Otl Aicher, a graphic designer and typographer from Germany,  said “the creation of a common language through repetition” and “use the design grid not only as a design aid but as a direct inspiration for schematic representation.”

The most famous work Aicher did was for the Munich Olympic Games in 1972 – all his designs were on top of a grid system, and featured on posters, flags, mascots, medals, tickets and stationary.


Otl Aicher – Graphic Designer & Typographer

The design grid he spoke consists of a set of alignment-based relationships which act as guides for distributing elements across a format.


Aicher used the grid system to develop his pictograms

Grid systems are a simple and effective way of communicating a large amount of information (multiple pictures, text, quotes, headlines etc..) to a viewer in a coherent manner. Each and every part of the system fulfils a specific function. A designer can use their discretion to combine and/or omit parts as required.


Manuscript Grids

This is the simplest of the grid structures, comprised of a large rectangular area taking up most of the space within a format.

Manuscript grids are excellent for extensive and continuous blocks of text – for example, in books and long essays. Images can also be used to fill the block.

Tinkering with the margins can create interest, with wider margins focusing the eye on the text. This gives a sense of stability. Narrower margins push the text to the edge of the format and create a sense of tension as the two are close together.

In order to create visual interest, typography is important in manuscript grids – the choice of typeface, font-size, leading etc are all important considerations.


The Manuscript Grid System


An example of a Manuscript Grid system

Column Grids

Column grids are made up by placing multiple columns within the format, and are useful when non-continuous information needs to be presented. There could be one column for text, one column for images, another for image captions.

There are a great degree of flexibility when organising information on the page when the column grid system is used. Columns can be dependent on each other, independent from each other and crossed over by design elements.

If a column is too wide…or too narrow, reading can become difficult.

Consideration needs to be payed to gutters – when the margins are wider than the gutters between the columns, the reader’s eye is drawn inward and this eases the tension. When the margins are narrower than the gutters, the reader’s eye is directed outwards and there is increased tension.

The traditional rule is that if the size of the gutter is Y then the margin is set to 2Y.


The Column Grid System


An example of the Column Grid System

Modular Grids

Modular grids are the most flexible grid option. They are like column grids, but they have horizontal divisions marked by rows – the columns and the rows and the gutters between each, form a matrix of cells.

These modular grids are extremely useful for more detailed design projects since they offer greater control that column grids. They are often used for charts, forms, schedules, tables of data and image galleries.


The Modular Grid System


Another Modular Grid System


An example design which has used a Modular Grid System

Hierarchical Grids

This form of grid is widely used on the web, and involves more intuitive and spontaneous placement of elements, yet still conforms to the needs of the information. Hierarchical grids are handy when a design project needs a grid which does not fit into any of the other types of grid.

They mostly use customised proportions, with varying column widths. Development of a hierarchical grid often starts with random placement of design elements. Later on in the project a rational structure to coordinate those elements can be established.


An example of a Hierarchical Grid System


Another example of the use of a Hierarchical Grid System



Grids bring order to a layout and make it easier for readers to find and navigate through information. They lead to rational and standardised systems which help people absorb the information which is being communicated.


Grids impose constraints on a layout, which helps to reduce an overwhelming number of possibilities to a more manageable few. They allow designers to elements to a layouts quickly. This is because many layout decisions are made while building the grid structure.


Grids make it easier for designers to work and collaborate on the design, as they can provide a plan for where to place elements. The grid can become a blueprint for other to quickly follow.

Consistency, Proportion and Harmony

The use of grids leads to consistency in the layout of pages, creating structural harmony in the a design. All parts of the grid (fields, rows, columns, gutters…) are based on geometric and natural proportions, which lead to rhythm and structural harmony in the layout.

The Task This Week…

…was to choose two examples from magazines, and two examples from books, of a modular grid-system in action, and then to show how it is modular in nature using Photoshop tools.


My first choice of magazine – The Week Junior


My second choice of magazine was Total Film


I used a psychology book for my book examples


Example number 2 of a modular grid system in a book

Interface Design Week 3 – The Principles of Design

This session focused on the 9 Principles of Design.

The task was to create a mock-up for an app for the 9 Principles of Design, which would demonstrate typographic and layout skills. It was created in InDesign, and used Otl Aicher’s drawings for the 1972 Munich Olympic Games as inspiration.

Otl Aicher founded the Ulm School of Design in 1953, with Inge Scholl and Max Bill. Aicher was heavily involved in designing the logo for Lufthansa, the German airline, in 1969, and also in that company’s corporate branding.


The Lufthansa Logo


A Sample of the grid system used in designing the logo

In 1966 Aicher was asked to become the lead designer for the 1972 Munich Olympic Games. Aicher created a set of pictograms with the purpose of giving a visual representation of the sport they featured. This was to help visitors, as well as athletes, at the Olympic Stadium and village, find their way around with ease.

He used grid systems to create the pictograms.:


An Example of Otl Aicher’s Grid System


A more detailed example of Otl aicher’s use of grid and the resulting pictograms

These are some example of the actual signs designed by Aicher and used at the Munich Olympic Games:



Below is my mock-up for the app for the 9 Principles of Design:


The 9 Principles of Design – Page 1


Page 2 – Overview


Page 3 – Balance


Page 4 – Emphasis


Page 5 – Movement


Page 6 – Unity


Page 7 – Variety


Page 8 – Rhythm


Page 9 – Proportion


Page 10 – Repetition


Page 11 – Pattern

Interface Design Week 2 – Designing Business Cards

This session focused on the use of grids in graphic design.

The task was to make a set of business cards, using Adobe InDesign.

The process began by setting up a digital publishing file at 320px x 480px in portrait orientation. We were taught about using InDesign tools such as the Selection Tool and the Type Tool, as well as the functionality of the Control window. It was interesting to note how that interface changes when the Type Tool is selected.

We learned about some aspects of typography, and how some fonts are grouped into ‘families’ (for example: Helvetica: Light, Regular, Bold etc..)

The next step was to use guides to set up a 14 x 22 grid, to organise the content on the page (which could later be simplified to 7 x 11).

My completed set of business cards is below:


Interface Design Week 1 – Websites: Conventions & Usability

In this first session for Interface Design, we learned about what Interface Design actually is.

  • Method = Design
  • Medium = Visual
  • Objective = Communication

It encompasses a range of activities involving the creation of software, websites, apps and other interactive products – with the focus on maximising usability and creating a successful user experience (UX) – ‘communicating’ effectively with an audience.

Important considerations in the design process include:

WHO is the site or product for? Know the audience

The designer should know what needs will bring people to the website, then go about providing a design which will draw them in further.

In a nutshell this can be summed up as “what for” and “where next”. A visitor to a website should be able to work out what the site is for in less than 4 seconds! Then they should have a clear idea of where to go next.

If they can’t work out “what for” and “where next” in 10 seconds they will leave!

A useful tactic is to check out other similar websites – especially those which are rated highly in that particular field.

Knowing who a website is aimed at, the target audience so to speak is crucial in the design process. This is an example of the differences that should be considered when designed a website aimed at children vs designing a website with  primarily ‘adult’ audience.

Screen Shot 2017-05-02 at 20.10.28.jpg

Image credit to

Structure and consistency in design & Navigation Principles

Simplicity is key, in that a great interface will be easy to understand and interact with. Navigation around an app or website should be subtly guided process, without the need for a user to have a map in order to find what they are looking for. Strategic use of elements such as colours, typography, and visual hierarchies all aid the guidance process.

Each part of the interface should be kept consistent throughout the design – most importantly language, layout and design. Users need consistency – it makes them comfortable, so design rules should be established and adhered to.

Layout and visual hierarchy

This controls how the user’s eye perceives the order of the information on the page.

The most important elements of an interface should be highlighted so that users are drawn to them. The design process offers many ways in which this effect can be achieved – for example, simply making one element larger than the rest.

The Netflix website often uses this method, and the user is faced immediately with a larger ‘highlight’ which occupies the top half of the screen.


The Netflix Website

A visual hierarchy clearly shows users which parts of the website are of primary significance, as in the Netflix example, then secondarytertiary and so on. Other methods of doing this include contrast, colour, scale alignment and proximity.


The main task for this session was to find a website that I think works well…and why.

I chose Truffleshuffle as a great example of a website which I think works well. It is one I return to time and again, so it must be doing something right!


In terms of those crucial first 10 seconds, in which a visitor needs to be able to work out WHAT the website is for, and WHERE they can go next, I think that TruffleShuffle fits the bill.

It is clear as soon as you land on the front page WHAT kinds of products they sell (primarily retro style 80s/90s TV-themed t-shirts and other related products) and all the picture ‘blocks’ are direct links to the products which makes for a spontaneous and exciting shopping experience.

This partly fulfils the WHERE NEXT criteria, and there is also an easily located search facility at the top of the page. For more general browsing, the blue bar contains different categories which expand when rolled over with a mouse/touch-pad.

The TruffleShuffle website’s target user would most likely be adults in their 30s or 40s who have a soft spot for the TV and movies of their childhood. Or anyone else who is a fan of retro styling.

There is a strong visual hierarchy in the structure of the website with it’s nice solid ‘blocky’ feel and simple but effective colouring and layout.

The top section of page (everything above the pictures/product links) remains consistent even when searching in a particular category, which makes for smooth-sailing navigation, and clicking the TruffleShuffle logo in the top left corner always brings the user back to the front page.

The bottom part of the website contains all the TruffleShuffle links to social media, as well the accepted payment methods (extremely useful, as often this information is buried within terms and conditions, or even more inconveniently only made known after going through the checkout process).


This area also has the facility to sign up for email newsletters, and clickable links to general information regarding delivery and all that jazz!

TruffleShuffle is one of my favourite websites. It is awesome..