Website Colour

I found a number of excellent resources on the internet as well as graphic design journals in the AUCB library. The Pantone website has a number of interesting ideas however they are aimed more at the fashion and interior design community. (http://www.pantone.co.uk/pages/pantone/category.aspx?ca=88) for colour inspiration, guidance and choice.

Making Effective use of Colour in Websites

When discussing the design of a new site, a question that consistently arises is – “How do I select the most effective colors?” Choosing the right color palette for a site is essential to communicate your message, brand your product or service, and, if you are an online business, sell your products. Everyone has favorite colors, but how those colors are interpreted may vary from culture to culture. Color communicates far more than most people realize. Choosing wrong colors can be a disaster for your website.

Before selecting colors, we ask the following questions:

  • Who are your site’s potential visitors?
  • What are your products or services?
  • What are your site’s key objectives?

Your website’s potential visitors might come from a global or regional market, or exclusively from North America. Did you know that the color white symbolizes mourning in China, or that purple is the color of death in many Catholic countries? Yellow is an Imperial color in Chinese countries, but in America it may symbolize cowardliness or urine. More important, shifting colors to another area of the color spectrum can completely change their impact. For example, yellow shifted toward red results in a color that indicates gold or ‘having value.’

Web visitor demographics also can make a difference in how colors are perceived. Young people are drawn more to saturated colors than adults, who may find them garish or offensive. Strong color contrasts can also drive older visitors away. While young people may respond positively to new color trends, these fashionable colors can be overused and go out of style as quickly as they appear. Text and background color choices also affect readability, which can be an issue for older visitors and those with visual impairments.

The following is a list of colors and potential meanings:

  • Red: passion, romance, fire, violence, aggression. Red means stop, or signals warning or forbidden actions in many cultures.
  • Purple: creativity, mystery, (reddish purple) royalty, mysticism, rarity. Purple is associated with death in Catholic cultures, as mentioned above.
  • Blue: loyalty, security, conservatism, tranquility, coldness, sadness. Light blues create a feeling of openness, clean air and freshness, while dark blues can convey tradition, trust and solidity.
  • Green: nature, fertility, growth, envy. In North American cultures, green means ‘go,’ is associated with environmental awareness, and is often linked to fiscal matters. A lighter, somewhat desaturated green is the color of money and indicates wealth or value.
  • Yellow: brightness, illumination, illness, cowardice. Some yellows can symbolize the precious metal – gold – and are universally valued.
  • Black: power, sophistication, contemporary style, death, morbidity, evil, night.
  • White: purity, innocence, cleanliness, truth, peace, coldness, sterility. White is also the color of death in Chinese culture, as mentioned above.

Many websites today clearly reflect the negative effect of bad color choices. People often choose colors to ‘dress-up’ their site without any regard to their site’s objectives. Here are several mistakes commonly made in selecting website colors:

Colors are selected that conflict with your brand, service or products.
If you have a well-known brand like Coke, you can use bold colors like ‘Coca-Cola red’ as much as you want without concern. However, very few companies are in the unique position where the brand name is more powerful than their brand color. Less well-known businesses should carefully consider the colors they choose for their logos and website. Certain colors work well with specific types of businesses. For example, warm colors, such as reds, yellows, and oranges – often called a ‘fiesta palette,’ can work well for food sites and restaurants that offer spicy fare. Colors in the warm range can also be effective in selling products associated with sun, passion or sensuality. Creams, whites and dark brown colors can be used successfully on websites that sell chocolate products. Cool colors, such as blues and greens, complement outdoor products, airlines, medical services, law firms and intellectual content. These colors can reflect trust or a relaxed attitude. As one person has noted, “… the color blue has a relaxing effect on the nervous system, and some studies have shown that it increases productivity when used as a background color. However, don’t use blue in your color scheme if your product is food-related, as blue is a natural appetite suppressant.”

The web site uses saturated background colors that fight with your site’s content and make it difficult to read and navigate. 
If your site uses product pictures or headlines with important messages, you should always chose a desatured background so the images will ‘pop’ or ‘stand out’ on the page. A saturated background will dominate your page, causing both the content and images to be lost. Not only will your content be hard to read, your pictures will lose their effectiveness and your site will be difficult to navigate. The colors of your product pictures and key messages should always be more highly saturated than your background colors. Keep in mind that graphics and areas on your site with the most saturated colors will attract the visitor’s eye first. (ref: http://www.pallasweb.com/color.html)

After reading a number of articles and using the colour wheel from the handouts from my course tutor, my website colour choice was mostly influenced by the above information and the following websitehttp://kuler.adobe.com/#themes/rating?time=30

Logo

Today I will be compiling my sketches and designs for my logo:

These were a few preliminary ideas i sketched out, then onto photoshop or illustrator to develop further graphically.

I have now realised that my logo is too big and too and too comlex. It will also not look right when it is scaled down, therefore I need to make it more compact and simple.

I have put together a simple sample logo to test which was made from 2 clipart images.

(logo of camera and lime)

This I would like to simplify even more to just use a slice of lime with a couple of initials : “p-f” which would be short for photographer-food.

On looking where the logo will go, I have found that there is no consistent area where my logo will fit in the proportions of the WordPress theme. This seems to be one of the limitations of theme “Striking”.

Therefore the website colour design will have to be consistent with my branding for the Business Cards, Letterheads and Compliment slips.

I have decided to not use a logo in my website.

Choosing a WordPress Theme

Today I will be looking at choosing a theme.

As well as this I have to download the generic “WordPress” template to be able to use a theme.

I have downloaded WordPress to my hard drive and I will be following the instructions on the links my tutor had sent me:

http://www.youtube.com/watch?v=6nse3Gdtvs4

Recommended Hosting  – Hostican
http://www.hostican.com/web-hosting/index.php
FTP Client he mentioned: Make sure you download and install the Mac version

You will need the website FTP user name and password to connect.
http://cyberduck.ch/
Once installed on your web hosting

Here is a video on changing themes:
http://www.youtube.com/watch?v=qPuBLvP8c6g

The WordPress theme that I have chosen was “Stiking” as shown below.

I chose this theme for a number of reasons; firstly it was pleasing to look at and simple in structure, hover extremely customisable with being very user friendly.

The theme cost me $40.

The web theme: http://kaptinlin.com/themes/striking/

Deciding on which website builder to use?

I have decided to use WordPress as my web builder due to the vast number of themes/templates available. All I have to do now is choose a web address, hosting and a WordPress theme.

The structure of the website I hope to build will be on the format I designed in the Muse application below:

 

Looking at Website Builders

I have started to look at some web builders as recommended by John Grindley our course tutor.

Presently as I have not built a website from scratch before, I will be looking at a number of different components at the same time:

Will the web builder be user friendly, fit the criteria for what I need as a gallery based site rather than text heavy, will the website once finished be simple and straightforward to update. Cost will be a factor as I do not wish to invest in a monthly subscription. I also wish to be able to customise my site that it will integrate easily with social media such as a business Facebook page, twitter micro blogging, flickr and the newer Google + business web pages.

I have considered the following web builders so far:

http://www.wix.com
http://www.clikpic.com
http://muse.adobe.com
http://www.moonfruit.com
http://www.photoshelter.com
http://wordpress.org
http://www.squarespace.com

The first web builder I tested was “Clikpic”, it is sensible in cost, fairly user friendly however it only has about 15 or so templates which are fairly restrictive. If all else fails, this is a good one to fall back on, however I will try other web builders in comparison.

The next web builder I tried was “Squarespace” and like “Clikpic” this also gave me many restrictions to window sizes, colours, however had more templates and good social media integration.

I also tried Adobe’s new beta version of “Muse” however, being new I found that there were not enough video tutorials and the on-line reviews were not favourable.

Muse did have a very good website planning software which I used to map my  pages as I would have done in Photoshop. Another downside to Muse was that there would be a monthly subscription to maintain the site for the whole term of use, which could prove expensive in the long run.

Her is my sample website from Muse which helped me plan my structure:

I also looked at iWeb which was extremely simple to use and fairly integrated with my mac software but it seemed unreliable and reviews say that it will be finishing together with the “MobileMe” accounts next year;
The very first web builder I considered was “WordPress” and I had to do a full circle and investigate a number of other web builders to decide that “WordPress” was the most suitable for my food photography website.

Other food websites

I have browsed the internet looking at some other websites under the title of food photography and have come up with a varied number of styles. I have screen grabbed the front pages of a number of sites and I am really looking at the initial visual production which I hope will give me some ideas on what colours and layouts I like. This is important as the first page, as “first impressions” will cause a viewer retention and entice a putter click to enter the site.

The designs of the ones I like are simple, not too much text, colour are kind on the eyes and not to detract from the food, simple to navigate and are generally visually pleasing which makes me want to stay on the site much longer and look further.