The Colour of Design

Over the past two weeks I have been tasked with creating an informal presentation looking at what I personally feel is good web design. For this I chose three examples of what I felt was good design.

1. The Heritage Craft Association

The heritage craft association website was created in mid 2009 to give online support to the charity. The web page itself is very simple in its function as when accessing it the first thing the user will notice are the 6 clickable image buttons located on the right hand side of the screen. The buttons firstly add a form of aesthetic that is visually pleasing as it combines both image and text to create a button instead of text only. This offers a contrast to the left side of the screen which is dominated by text.

Secondly the home pages colour scheme is visually pleasing as it fits in with the images (though the images may have been chosen to fit in with the colour scheme). The colours that can be seen are green (top menu and text), brown (strip below top menu), khaki (main page), Black (background), and white (text and logo). A total of five colours does make it visually striking but could also be making it rather bunched. Possibly one too many colours.

However the function of the website is to represent the scale of craftsmanship in Britain today. The way it does this effectively and simply is by creating a map of Britain and have little pins placed on the map representing known craftspeople.

This simple map gives the user a visual representation of how many craftspeople are in Britain, but also allows for users to contact them via the information located on the pins when clicked.

A simple approach to something functional.


2. My Starbucks Idea

This web site allows users to rate and talk about their personal experiences from Starbucks coffee stores whether it is from the experience or to the drink products offered.

From the initial outlay the webpage is simple. It is not cluttered with advertisements and is easy on the eyes because of this. Also there is only use of 4 colours white, green, black, and orange. The way in which the colour is used in the typography is very useful in the clickable buttons are coloured in orange and the un-clickable buttons are black. This is continued through the whole website and visually explains to the user what is clickable and what isn’t.

Also the top menu bar is simple in that it lays out the options available to the user. Whether the user wishes to submit an idea, view ideas, or view successful ideas the option is available from the top menu bar allowing quick an easy access.

3. For Dummies (Brand)

The “For Dummies” brand is a recognisable brand of how-to books that were published for beginners or novices in there field to understand better the field. The brand itself has become recognisable due to its success.

However looking at it from a design point of view one can see aspects of design that can be incorporated into a website.

Firstly the colour scheme is most apparent. It uses 3 main colours being black, white, and yellow with the yellow being most striking. This is beneficial to the design of a book as for example a user walks into a library looking for the “dummies” series, they will instantly recognise it when they see the bright yellow from the spine of the book and when seeing the dummie sign.

This colour scheme and design is so simple that it has been incorporated into the official “For Dummies” website.

This is a testament to how simple cohesive design can be used on a variety of mediums to still be effective.

Useability "Rule number one"

This past week for digital collaborative practice I have been looking into usability to understand how this may affect the design of my personal website.

In Steve Krug’s “Don’t Make Me Think” (2006) he explains that his first rule of usability is simply, don’t make me (the user) think. He explains that a user who accesses a website should be able to access what they want without having to expand their thinking capacity to access it. In other words the website content and navigation should be clear so that the user is not baffled with questions on how they can access the content they want.

An example of this is websites that search for books. This image below is from browns books online shop. Notice the search engine in that if the user wishes to search for a book (in the example World War 2) one has to think how they want to search for the book.


This make the user think of whether they need to search for a paperback, hardback, e-book, etc when all they want to do is find books relating to World War 2. Amazon’s version of this is simpler in that the user simply selects “books” from the menu and can search straight away making it simple for one to search the content they need.



Thought one may see this as something small and minor, it should be kept in mind that the competition are only one click away and that if your website frustrates users then they will go somewhere else.

Considering this my website should be functional and useable for users to access content whether it is by shortening the amount of pages or highlighting used on click-able buttons. To make the user think less is a rule that must be taken into consideration.

Bibliography:

Krug, S. (2006) Don’t Make Me Think a common sense approach to web usability. 2nd ed. California: New Riders Publishing.

I am now in the second week of the module and have finally begun creating my website using the Wix site. Having used it finally I have found that creating a website is easy however the content of the website is the difficult part.

The first problem is finding a colour scheme for my website. Considering the last post, I used one of the images from there and uploaded it to http://www.cssdrive.com/imagepalette/ which created a colour palette with all the colours that would suit that image. However after using some of colours suggested the website looks rather dull and dingy. Perhaps it would have been better to include image itself to give the webpage colour and depth or use some brighter colours to add some contrast. This aspect needs to be experimented with further.

Also further I am finding that the layout of the site is difficult. This is due to myself being unfamiliar with website layout and what works and what doesn’t. However further research into other websites would be beneficial for this.

Generation of Ideas

The first lecture for the Digital Collaborative Practice module was basically an introduction to the module and the tutor. This introduction comprised of a general look at web design, why websites are created, and a brief look at certain tools/programs used to create them. One point that was noted during the lecture was that the tutor stated that we should be generating ideas for the design of our particular websites.

Generating an idea for a website seems to be the first and one of the most important stages of design, as with out any form of idea or materials to contribute an idea, the websites look or feel will not exist. This requires one to generate ideas for the general outlook of the site.

“Before setting to work with your web page design software, switch off your PC, get pen and paper and note down your initial ideas: what you want to achieve from your website” (Austin, 2004, p13).

Whilst we are not creating a site for a particular use we still need to generate ideas for the design, colour scheme, typography, and layout of the site. Methods of idea generation can differ from each individual but certain methods exist, one that would be most useful for an individual would be a mood board. A mood board is a collection of real world stimuli that the individual feels would be appropriate for their design. It can include images, photographs, magazine cut-outs, colour schemes, material samples, drawings, doodles; anything that one feels is suitable for the design.

To begin gathering stimuli for ideas I decided to walk around town and with my camera and photograph any stimuli that I preferred the look of. Some of the results can be seen below:




Bibliography

Austin, B (2004) Web Page Design in Easy Steps. United Kingdom: in easy steps.