Web Design – Choosing the right colour scheme

Picking the right color scheme can be a difficult phase of the design process. Color schemes can make or break a site. The colors you choose will help convey the overall mood of a site and how you use them will call attention to key areas on your pages. Websites keep their colors for a long time between web designs, so make sure to choose the best possible scheme by using the tips and tools below

Working with text
Text is the most important element on your site. If someone cannot read your site then it serves him or her no purpose and they will leave. Whether it is the text in your navigation or your body text, select colors that contrast so that text is readable. A standard choice is to use dark text over a light background. Most people are used to this since print on has gone this way for ages. Of course this is web design and we are not constrained to the styles of print media and are free to choose a dark scheme if it fits our site

The following example shows how a dark design can work. Navigation elements have a slightly lower contrast to bring out the white text from the background. Also the opposing color of red also points out the focus of this particular website.

The example below shows what not to do with text both in the navigation and the body. The text on bottles is inconsistent and difficult to read on. The body text is made of the two worst possible colors for the background. The yellow text also doesn’t contrast well against the bottles in the background image.

Figure 1 Poor colors for text over a blue background

Choosing the Colors

Once upon a time web design was limited to the 216-color web safe color palette, but current browsers allow nearly all colors to be rendered. Just because you can use any color doesn’t mean you should. Try and work with a light background and dark foreground colors. With the background making 50% or more of your site this is the color that will set the tone. But don’t be afraid to invert this color scheme if it fits your sites purpose.

Look at your logo

Your logo is a good starting point for choosing the colors for your site. Experiment with contrasting colors to help the logo stand out. You can also use the colors of your logo to become colors of various elements in your website. The image below from FedEx is a good example of this. The purple from the logo highlights the active navigation and the services section of the website pointing out what the customer will gain most from this area. The light grey also takes a role here as trim and for navigation and elements like the scroll bars.

Figure 2 FedEx logo colors as highlight

Tools for color selection

There is no end to how many possible color combinations can be made. A good rule of thumb is if you are working with more than 5 colors for your website you are going overboard. Tools such as Color Scheme Designer, and Adobe’s Kuler project allow you to experiment with colors using the following rules.

• Complementary – colors which are colors opposite to each other on a color wheel
• Analog  - colors that are located right beside each other on a color wheel
• Monochromatic  - colors or different shades of the same color
• Triad or Tetrad – 3 or 4 colors equally spaced around a color wheel

There are more color theory rules than I listed here but those are the most popular choices.

Both tools allow you to look at schemes from other designers and export your created color palettes to formats useable in GIMP or PhotoShop. Adobes Kuler web app also adds many social aspects to the color selection game. There is the color wheel showing the popularity of colors other designers are using, and forums to discuss current work being done from Kuler.

There are many web applications for creating color schemes available that work on all platforms. These are just two popular examples. I’ve listed a few more here for you to explore for your self:

• Color Schemer(http://www.colorschemer.com/) – Online gallery swatches from other designers, and discussion forums.
• Color Blender(http://colorblender.com/) – Simple tool with RGB/HSV sliders and simple export functions
• Visibone Color Lab(http://www.visibone.com/colorlab/) – Basic color selection tool using only the 216-color web safe palette
• Color Theory(http://colortheory.liquisoft.com/) – Not a tool like the others but it is a good site to get some basic understanding of color theories mentioned here in this article.

This article was courtesy of:
Lawrence Hall , Community Manager Go-Gulf , a Dubai based web design company that provides web development solution in the middle east.

Fatal mistakes in web design

The internet is full of sites of various niches – personal, business, company, entertainment, information, medical and many more. You may have often wondered as to why only some of the websites amongst the many thousands of websites in the internet space thrive, while others struggle to stay afloat.

Some of the common reasons are mentioned as under:
a) Type of Fonts and their size
People commit a common mistake of maintaining one font size for a long time without realizing that not everybody in the world possesses equal eye sight. It is necessary to keep changing the font size such that your site is legible and easy to read.
b) Lengthy Paragraphs
Human nature is such that people do not wish to read long paragraphs at one go. It is thus necessary to split content into smaller paragraphs with proper headings and sub headings so that people are encouraged to read the content on the site and they can get the information they are seeking without problems.
c) Less General Topics
It is also necessary to crowd the site with less general topics and not make people to scroll through a lot of content and many pages to find what they want. Using easy to navigate menus will help people much better.
The above three tips should help you in designing a better web site.

Designing a website, pay attention to the basics

One of the biggest mistakes novice web designers make when designing a new website is often the basics. They tends to go though getting the difficult aspects of web design done but usually fall flat on their face when their design is analysed for the basics web design which even a novice should know.

A case in point is the forum called Rock Forums, though as a forum the design is more complex because the design was integrated into vBulletin software, the script that powers the website, however it fails one of the most basic rules of web design which is to test the final design in all major browsers (Internet Explorer, Firefox, Opera and Apple Safari).
Using Internet Explorer to browse The Rock Forum was fine but a visit to the site with Firefox see most of the important elements of the site including the logo fall flat on their faces.  A reference  guide novice web design should bear in mind when designing a website includes:

* Navigation
* Use of hyperlinks (general internal link structure).
* Important contents displayed prominently.
* Forms and contact pages.
* Speed of website
* Optimise graphics to improved SEO ranking, navigation for visually impaired and look and fell.
* Search capabilities
* Basic design concepts
* Site consistencies
* Standardisation and accessibility
* Compatibility with popular browsers.

Whether you are a beginner web designer or experience website designer, you can enhance you site design and development technique by exchanging ideas with other developers are UK Webmaster Forum.

Its is free to join.

Velnet Designs

Most good web designers are brilliant at designing new website, they are even better when it comes to giving advise to website owner when reviewing sites created by other web designers, but when their own website is put under the spotlight, the proverb “physician heal thyself” comes to mind. “physician heal thyself”  was the prescription when the website of a team of web designers called Velnet Designs was reviewed.

Velnet Designs website was put under microscope to see what aspect of it is good and what aspect can be improved.  The website colour scheme is excellent, the overwhelming colour used on the site is blue, with a hint of red in the site logo and a dash of red here and there. The site has two navigation menu, a horizontal navigation menu takes you to the top level contents such as web deign, logo design portfolio, enquiry form, contact form and about us for. The horizontal navigation take visitors to deep sections of the site. The two navigation menu works pretty well to make the site very easy to navigate.

The most important contents were laid in columns on the homepage, with deep links that take you to detailed page for each product, this works very well on the site, withing two clicks of the mouse you arrive at any of the important pages on the site.
At the bottom of Velnet Designs, a site map contain links to all the pages on this site, this provide a secondary navigation which strictly speaking is not  necessary giving how well the two principal navigation menu on the site works.

Despite the aforementioned plus, there are areas the site can improve, starting with the site map, it was not well created, it can be improved with a brief description of what to find on the page a link points to.  Velnet Design lacks a search facility, though the site is not that large, however a search facility will be an additional was to find information quickly on the website.  The free web design quote page which is the principal enquiry page for all their product could be improve to make requesting information from Velnet Design easier. The site also does not have and easy way of bookmarking nor does it use any of the social bookmarking tools that could potentially help to make the site popular in social bookmarking sites.

Moderneon Lighting Design Usability Review

One of the most striking thing you notice when visiting a shopping mall, a services station or restaurant is how lighting is used to create desired atmosphere to match the theme or effect the establishment is trying to create. As a casual visitor, such subtle lighting is usually lost on us, however lots of careful planning has gone into selection of bulbs and other lighting accessories to create the effect you experienced.

Moderneon one of the few specialist, whose core business is to install lighting at major establishment ranging from restaurant chain like Weatherspoons, shopping centres to petrol station. Established nearly sixty years ago, based in London, Moderneon provide custom made signage, manufacturing, installation and maintenance of handmade neon and cold cathode lamps which are made from a wide range of Tri-phosphors colour coatings.
Modereon are committed to ensuring environmental impact of lighting are minimised so they use voltage to provide an energy saving alternative to traditional lighting methods.

Next Page »