Oct 312010
 

http://www.ccaathome.com/

The website is about homeshore product. I think this site has a good colour scheme because they use the right colours that are relevant to their business concept.  In term of colour marketing message, they used mainly blue and white colours. Thurs, these represent clear and comfortable. Moreover, they used monochrome scheme for the background images as there are dark blue and light lighter blue and also used of gradient to highlight on logo area.  They also use some green and purple colours in the content, which goes well with the blue colour.  I think overall website looks very fresh and eye pleasing. The high contrast colour of dark text with lighter background, which makes the text looks more comfortable to read.

http://www.nowsmile.org/

This website has a good colour scheme as I think their target marketing is mostly younger users group, whom concerned about their appearance. Therefore, as I think the company want to represent their website as youthful, fresh, new and bright.  The website mainly used yellow, red, blue and green colours and I think these colours represent their marketing message very well.

The design of the website is really informal looking and different. The verity of colours they have used combination with their unique design idea. Thurs, these made the website looks more interesting and eye catching for their target users.

http://www.sushihiroba.co.uk/

This is a Japanese restaurant website in London.  It might not be the one of the most attractive website but I think it does have a good colour scheme. As it looks simple and it does also represent the Japanese culture and their type of business very well. They used back colour as a background, and red and white for the text font, which make it more easy to read and more visible.

 Posted by at 11:43 pm
Oct 312010
 

http://www.italianfurnituredirect.co.uk/

I think this website has a bad colour scheme because I think they have chosen a wrong colour for their type of business.  The colours do not represent the marketing message well. The top navigation bar should be in lighter font so that the users can see more clearly.

Moreover, the overall design of the website and choice of colour do look immature and also not so professional. As the result, these could have an impact of the way people think about company and they might have to re-consider before purchasing any product from the site.

http://www.jinkichi.com/

This is another example of a poor colour schemes website. They used images as a background colour and the text font display on the top of background image. Therefore, this effect the readability standard as the text does not look standout to the page.

Moreover, the website is poorly design as well as the logo.

http://www.pallasweb.com/color.html

This website also has the similar problem to the previous site. Because the site does contain dark grey background with dark blue font, which it made the content very uncomfortable to read.

It would be better if there is lighter background content, which may improve readability standard.

 Posted by at 11:40 pm

The Good layout/typography and the Ugly

 typography  Comments Off on The Good layout/typography and the Ugly
Oct 312010
 

Well as you dig deeper into the aesthetics of web design there is common short coming on many sites – much has been considered about imagery but very little about typography.

A good font resource to look for fonts and research what they look like is http://new.myfonts.com/fonts/ – great sample code to allow you to review font appearance.

Good layout /typography

Sourhaze site developed by Elliot Jay Stocks (lover of  typography writes for .Net magazine) http://sourhaze.com/v7/

This site is very unique and the artwork helps the flow of the web. The layout is cleverly held by images and the navigation whisks you to each section in  an exciting way – this web almost entirely consists of one page . Very nice style and typography . This site has an interesting mix of font work – headings are 16px/16px Georgia,’Times New Roman’,Times,serif bold and body is ‘Lucida Grande’,’Lucida Sans Unicode’,Verdana,Arial,Helvetica,sans-serif – this combination works really nicely and the use is consistent. One observation is the font size is small but that seems to work on this unusual design.

Pilmorelee http://pilmorelee.tumblr.com/

Two of the lesser known, or at least lesser used, browser-safe fonts out there are Lucida Grande and Lucida Sans Unicode are used on this website to great effect. I like the striking use of orange background  and black font for headings – which catch your eye well. Unusual style of layout but very pleasing to the eye.

Wine Buddy http://www.wine-buddy.com/

This is really clean simple site with strong colours (red wine comes to mind). Main body text is Arial,Helvetica,sans-serif and is consistent. The heading is sans-serif and is smooth and clean. I like the navigation boxes at the bottom of the page . There is nice use of white background to allow the clean layout to appear uncluttered and good use of borders and background colours to make the site easily readable.

Bad layout /typography

Tepilo http://www.tepilo.com/


This web has really poor use of fonts Georgia,"Palatino Linotype",Palatino,Arial,Helvetica  mix of serif and sans serif and no basic fall back font in the stack.  The footer uses a different stack Tahoma,Verdana,Arial,Helvetica !important – sans serif stack again no basic fallback font and very small font size. The mix of font sizes is quite extreme on the site and it makes it look unprofessional and difficult to see what the main focus point is. Layout is very poor with no flow to site and the main search box colours are harsh and add nothing to the usability of the web.

Best4Plants http://www.best4plants.co.uk/

Although this site does have a nice header and background body image the font size is too small and there is a strange text indent on the main content. This site is jammed packed and is very busy, the small font (12px) on the navigation menu  is difficult to find what you are looking for. Arial and verdanna both sans-serif fonts are used throughout the content. Some of the content has a table layout which does potentially hold problems for future redesign requests.

A suit that fits http://www.asuitthatfits.com/shop/index.php

This site uses Arial,Helvetica,sans-serif. The main grab content (top left) uses an ugly mix of font sizes and the spacing between the £ and the 200 looks poor. This style is unprofessional. I find the navigation tabs colours distracting and not sure what the colours are meant to portray and the white font on coloured background appears to bleed and look fuzzy.

 Posted by at 9:51 pm

Websites with good colour schemes

 Coursework, Inspirations  Comments Off on Websites with good colour schemes
Oct 312010
 

Here are three websites I think have got good colour schemes:

1. UK Graphic Design | UK Web Design

Blue colour adds a sense of freshness to a website. This particular shade of blue is very vivid. It’s even more prominent when combined with light gray outer and white inner backgrounds. Besides, font colours match with the overall design and orange links go well with blue.

2. Origen Creatives

Green combined with brown give the impression of calmness.
Green header with white font makes the text readable. There is a good font and background combination in the navigation bar too. The shade of logo is slightly lighter and make it stand out of the top part. Main part background matches with the header and creates a clear division between these two sections.

3. Allegro.pl – online shopping service from Poland

Possibly gray colour combined with any single one looks good on a website. Orange (in logo and main headlines) put together only with gray makes the most important parts more visible. I also feel the two other buttons at the top, the blue and green ones, goes really well with the overall colour scheme.

 Posted by at 8:17 pm

Websites with poor colour schemes

 Coursework, Inspirations  Comments Off on Websites with poor colour schemes
Oct 312010
 

Here are three websites that I think have got poor colour schemes:

1. Museum of Brands, Packaging and Advertising

Has this website actually got a colour scheme? No… Maybe only in navigation bar… But it’s really poor.
Considering the fact this is a place dedicated to promote graphic design, the situation is even worse…

2. Duty Free Perfume

In my opinion this website is too sweet? The header and title bars blue background could perfectly work on their own, without distracting diagonals outside.

3. Ryan Air

I think a combination of dark blue and very bright yellow is not nice for the eyesight. What’s more, the advertisements in are not visually consistent and it’s very distracting.

 Posted by at 5:32 pm

Examples of colour use: the good, the bad & the downright ugly.

 colour, Graphics, Uncategorized, Web Design  Comments Off on Examples of colour use: the good, the bad & the downright ugly.
Oct 262010
 

Here’s my selection of some sites where colour use is right to the fore of the design. Stretching from the beautiful to the utterly hideous, I have tried to find some examples where the use of colour has been instrumental to the character of the site.

1.Thrivesolo

A really bold use of colour, just the single tone other than black or white as well as some nice typography, this site really makes an impact. The design reminds me of Rhodia stationary – maybe that’s intentional as the Rhodia pads are a bit of a design classic and much used by artists and designers. The faint lines and bold orange appear to echo the writing pads iconic and simple styling.

Thrivesolo is some kind of project management tool  for creatives, along the lines of Basecamp and is worth a look at too.

2. October Filmfest


This is the website for a film festival based in Vaasa, Finland and is just a really lovely piece of graphic design, heavily influenced by Soviet constructivist poster designs. Site architecture is fairly minimal but the colour palette is really strong and has a fantastic impact. Im a big fan of this kind of imagery.

3. 1 Love

Marley Family 1 Love website front page

Bob Marley’s family have launched this website to help showcase the various Marley family members and advance the  various ethical causes that they promote. The colours are all muted, textured greys and beiges with subtle accented highlights providing navigation cues and headings. It does lend the site a sort of ethical and earthy feel as opposed to a commercial, slick presentation and I’m sure that that was the aim of this design.

4. Irontoiron

Web page design for iron 2 iron web designers

Just saw this one and thought I’d throw it in. All lovely muted blues and greens giving it a sort of peaceful underwater feel, This is another design agency, and just looking at how good this design is sort of makes me feel a bit depressed.

Well that was the good, and now the not so good…

5. Reiki Tails

Hideous Reiki Tails web page

The go-to destination for all pets needing a bit of counselling and reiki healing, though judging from the design, a hideous concoction of shocking pink and mauve, any kind of therapy for the people who run this site might be a smart move.

6. Alan Watt

crazy nutjob site

There are plenty of conspiracy nutjob sites around on the Web ranging from out-there to full on rabid and this one is placed fairly well to the extreme side, so I’d steer clear of the content. But what most of them share, other than a belief that 9/11 was a hoax and President Obama is the antichrist, is a fundamental disregard for tasteful design. This one is a good example plucked fairly well at random. A shocking combination of garish colours and bad use of images: the design, much like the views of its protagonist, stuck firmly in the stone age.

7. Accept Jesus Forever Forgiven

very garish website

Ok, so this is  a bit obvious but it’s almost too good to pass on. I particularly like the cat running backwards in the lower left of the screen.

8. Wolfgang Ingenfeld

badly designed web page example

With just about every usability rule in the book broken, this site will have  Jakob Nielsen running away, screaming in terror. A smorgasbord of animated gifs, horizontally scrolling tables and garish, clashing colours, it actually has a certain kitsch – it’s so bad, it’s almost good.

The joy of using sprites for rollover

 CSS  Comments Off on The joy of using sprites for rollover
Oct 262010
 

Well this web I found a good challenge getting a sprite solution to work for a rollover menu. It is great now it works and has good accessibility features in that the titles of the links are available to screen reader although an image supplies the menu text to the user.

I used this tutorial http://www.webvamp.co.uk/blog/coding/graphical-css-rollover-menu/ to pick together a solution.I used photshop to build my own sprite and used colour combinations to work with the overall design. Great affect and really you could reuse this again and again. Good to have a good selection of spirites without text to reuse.

Note one problem I had was that when I used this sprite only the bottom row of images was showing and hover would not work. I actually solved it by removing a nesting div holding the .cssmenu class. Whatever was happening I solved it by stripping down my html to the minimum, adding only bare css for the rollover menu and then built the page up again. This proved the rollover worked as it should before integrating into quite a complex liquid layout. Good learning and never achieved this before.

 Posted by at 5:02 pm

Some Good Colour Schemes

 Webpage design  Comments Off on Some Good Colour Schemes
Oct 262010
 

1. Brizk Design

www.brizk.com

I really admire this site. The overall design is beautiful and the colour scheme is incredibly appealing. The main colours used are deep red, orange, green and blue – which together create a tetradic colour scheme. The red which features on the image of the hummingbird is repeated in the large text headers throughout the site and on the sticky footer, and the blue of the sky is repeated in the colour of the text links. This sophisticated use of colour is not only eye-catching, but it helps to create a cohesive feel throughout the design.

2. Calvag Agricultural Supplies

www.calvagservices.co.uk

This design utilises a mono-chromatic colour scheme featuring various tints of green. Green on its own has the potential to look a little boring, but the designer of this site has used sophisticated gradients to create interest. Most of the pages are simple, clean and mono-chromatic but the homepage features flashes of colour in the graphic under the main navigation. The colours used in this graphic are seemingly random, but they are all of a similar tone and sit together beautifully; adding interest to the home page and a visual representation of the different services that the company provides.

3. Reklama Audio

www.reklama-audio.pl

I stumbled across this site whilst browsing a CSS Gallery a few weeks ago. I have no idea what the site is about, but it is an example of beautiful design nonetheless! The colour scheme features dusky, ‘vintage’ tones of pink and blue on a neutral, cream background. The colour scheme is simple but effective. The tones of pink and blue together create a wonderfully nostalgic feel… the design is almost reminiscent of an advert from a bygone era. Overall, I would say this is an excellent example of colour scheme use in web design.

 Posted by at 2:26 pm

3 good colour schemes

 Uncategorized  Comments Off on 3 good colour schemes
Oct 262010
 

1 John Coltrane

http://www.johncoltrane.com/

John Coltrane’s official website brings the covers of his albums displayed in the front page, and shows that it’s possible to use a great range of colours without being messy. The colorful header is beautiful and proves that it’s possible to use effects and still keep the image clean and pleasant to look at.  The colours in the menu were picked from the header, and in general the website presents a basic colour scheme, with variations of yellow and orange. As a balance to all these colours from the album covers, the designer has used some black and white pictures and neutral backgrounds. For the wrapper background, grey was the choice, and for the main one, brown. That’s an example of a perfect solution to display a colorful set of images.

2 Singularity Concepts

http://singularityconcepts.com/

Singularity Concepts has a fantastic colour scheme. It’s a website to present the work of a Web and Graphic Designer and it’s a good example of a great choice of colours. The designer used a small range of colours and displayed it in various creative ways. The orange, for example, is used as a background for the contact box, in some elements of the menu, as a background for a picture, as a font colour for some titles and in the main background. The same happens with the brown or the blue. The design is also very well done with many good ideas.

3 I Love Colors

www.ilovecolors.com.ar/

That’s a great blog that provides information and tutorials about graphic design, typography and web development. As the title suggests, the designer has used as many colours as he could and the result was great. With his colour choices, he creates an atmosphere that catches the user’s attention straight away. The design is also very well done and a few good ideas were used like staples to fix some pieces of information on the screen. The content of this website is very useful and interesting as we are now studying colours, and I recommend it.

 Posted by at 1:00 am

3 poor colour schemes

 Uncategorized  Comments Off on 3 poor colour schemes
Oct 262010
 

1 Bailey Wright

http://www.baileywright.com/

The lack of colours in Bailey Wright & Co’s website is its main problem. There is no wrapper and the only background colour is in the header. A pale yellow was used as a background for the title, written in black, what resulted in a very bad contrast. There are no background colours in the menu, body or footer and apart from the header’s yellow, some colours were just used for the fonts, however they were bad chosen, and the tones of purple and green used just don’t match. The design itself and the content organization are also very poor.

2 Haven Works

http://havenworks.com/

This is an example of bad use of colours and also bad design. This website has gained notoriety due to its horrible design and is constantly appearing in lists of bad designs, having being called the world’s worst website design ever and even getting more visitors because of that. Besides being very confused and difficult to navigate, the colour scheme is very poor. There are lots of colours mixed along the heading, menu and body with no criteria or concept. In this example the choices are so bad that it’s possible they were made on purpose, aiming to get some attention (and it’s working).

3 Restaurant Magnus

http://www.restaurantmagnus.com/

In this website, even thinking the body colours aren’t so bad, with a reasonable good match between the wrapper background and the font colour, the main background colour was definitely a bad choice. Brown is a colour that is not easy to match, and in this case, it just made the page looks bad. The red in the menu and the grey in the header also seem out of place. Besides, the whole atmosphere of the page is very cold, not ideal for a restaurant’s website.

 Posted by at 1:00 am