Blog: Celtic Design Symbols

The importance of a good site layout
Websites are judged by content and layout. How good your content maybe, if your layout is not appealing, visitors will not be eager to come back. Everyone is not born with a quality of creating layouts that are pleasing to the eye. If you have been to different Yahoo groups, you might have found various color combinations that the group owner has chosen. Some of them have red backgrounds with blue colored text creating a blinding effect. Although Yahoo provides all the possible color combinations, some choose the wrong colors.
Points to consider while designing a website layout
Website design is not a one time activity. Almost all websites alter their layouts to give it a new and better look. Also with advancement in technology, underlying code also changes accordingly, adding new possibilities of providing a better layout.
1.Keep it simple:
A simple website layout is user friendly. Do not create complex navigational links using complex scripts or images that maynot be viewable correctly in different browsers. Also search engines cannot index the site properly if complex navigation is involved. Minimize the use of bulky images which take long to load. Use smaller icons to attract visitor's attention instead.
2.Readable font size and face:
Use a standard font size of "-1" (11 or 12 pixels if using styles) so that visitors can read the content easily. Select a professional looking font face (Verdana, Arial, Helvetica, sans-serif are very common). Avoid using fancy fonts like Comic Sans
(unless it is a personal website). Use appropriate spacing between lines (12 or more pixels) to avoid clumsiness.
3.Use web safe eye pleasing colors:
The choice of colors may reflect one's personal taste. Every webmaster or designer wants the color combination that he/she likes best. However, it is a wise decision to get feedback from users or friends about what they feel about the color combination
of the website. Use web safe colors whenever possible.
4.Webpage Dimensions:
One important aspect of layout is keeping track of dimensions of a web page. Most successful commercial websites limit the width and height of the webpage so that the important content of the webpage lies within the top 600x600 viewable area without scrolling. To avoid a horizontal scrollbar, set the page layout to expand and shrink with changes in browser window size. Sometimes this interferes with image and text positions relative to each other and throws the layout structure out of sync. The best choice is to limit the width by placing a table with a fixed width of 750 or 775 pixels. See the layout of this web page for an example.
The page height should not be any more than 4 scroll lengths. Limit the content of the page and if more content needs to be added, move it to a new web page. Provide a navigational link to the next page and a link back from the second page. This will also increase your web site's page views (adding more advertising space).
5.Limit File Size:
Webpage size is defined by the total size of text, images and supporting files (including javascript, flash etc.) that is downloaded from the server to view a webpage. Page size is very critical for high volume websites because of high bandwidth needed. However, it is also very important for any other site in order to keep loading times to a minimum. Most of the population on the internet use a slow 56K modem to access the internet. And smaller page sizes load faster. If you look at some very high volume websites like Yahoo.com and Google.com, they hardly have any images, making their site load faster.
There is a trade off between making your webpage look nicer with lots of graphics and making it faster to load. The rough target for page size should be below 35K for at least the cover page. However, for e-commerce sites, it is often not possible because they have to present multiple product images to attract attention. As a general rule of thumb, a visitor will leave your site if the loading time is more than 8 secs.

The use of proper colors can make or break your web design. Color is complementary to content and in his post we discuss how you should be choosing the colors for your next website so that it shines with professionalism, ease of use and manages to look dazzling at the same time.

As web designers we are often faced with a dilemma as to what colors to use and how to use them effectively without distracting the user of the website. Effective use of color can ’scream’ for attention in just the right pitch of voice so that the user is forced to take ‘action’ that you want them to without being ‘annoyed’ about it.

Colors: Psychology and Symbolism

Most of the time the colors that we need to use in web design are determined by the brand identity of the company and the colors that it is generally associated with. But when we do have a control over the color to choose for the web design which one do we end up choosing? Not many people know that colors have a psychological connotation that is often the primary reason behind choosing the color for a design.

Color psychology refers to investigating the effect of color on human behavior and feeling, distinct from phototherapy (the use of ultraviolet light to treat conditions like psoriasis or infantile jaundice). Color symbolism is a contentious area of study which is dependent upon a large body of anecdotal evidence, but not supported by data from well-designed scientific studies.

You can read about the connotations of colors here. Even while a visitor is only skimming through the contents of the website, the colors are making a psychological impact. There is no hard and fast rule that says a Blue color gives professional feel to the website or yellow makes your site look unprofessional.

As WebDesigner Depot says it here:

The color scheme will depend on the particular nature of the website. For example, both banks and florists can have professional-looking websites. But people might be less inclined to buy flowers from a website that is corporate blue and ocean gray. And imagine the Bank of America website in lilac and yellow-green.

The Three Basic Tests

There is no sure shot guideline that will see you design perfect color schemes yet there are systematic paths to follow that make it easier for a designer. Let us look into some of these methods.

Mockup/Grid Test

Yes, it might seem odd at first for a Grayscale test to be listed as a means to design a color scheme. But trust me, the best way to be making a great color scheme starts with no color scheme. There is a reason that mockup grids are not made in any color. When a website is designed take a step back and see if the content complements the design. Once you have the elements in the perfect place, look for the areas where you want the user to focus. Ask yourself the following questions:

• What are the action that you would want the user to see at the first instant when he lands on the page?
• What are the elements where you would not want the user to take primary action?

Once you have the answer to these questions, make it a point to note these areas and move on to the next test.

Contrast Test

Contrast is the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view.

Good contrast can make sites appear crisp and organized, whereas poor contrast blends it all into an incoherent mass of RGB values. Contrasting elements allow for the user to figure out which page areas are related and which are totally separate, so make sure to differentiate your elements and page sections.

To check for contrast, you need to compare the brilliance/luminosity of the foreground and the background. The greater the difference, the greater the contrast. For example have a look at how contrast sets the elements out clearly here on Dribbble’s landing page.

The first thing you are tempted to do is Click that delicious Sign In Button and the cute pink basketball. The reason? Contrast my friend!

Photoshop Squint Test

The Photoshop Squint Test is used by designers to see what colors are dominating in the color scheme and change the design accordingly. It is also used to analyse the White Space in a Web Design

Take screenshots of at least three pages from your website. Open them in Photoshop.

Duplicate the background layer in each screenshot (Layer ? Duplicate Layer, or Command + J on a Mac, or Control + J on Windows).

Apply a Gaussian blur of about 10 pixels to the new layers.

Go to Image ? Adjustments ? Posterize. Use 8 to 12 levels or go to Filter ? Pixellate ? Mosaic. Use 15 to 30 pixels.

It is not a coincident that the Squint Test on Inspiring Pixel home Page shows content as the most highlighted segment. It is the way I would want it to be. The hidden nature of the Sidebar is due to the same reason, emphasis on content. The Blue, Black, White and Grey constitute the Color Palette for this site and are consistent with the design everywhere.

Creating a good Color Scheme

Hues, Saturation, Value and many other properties of colors often leave designers confused and lead to a bad choice of colors. It is always a good idea to use a shade that is neutral to strike a balance. This gives you a kind of safety pad in case you chose the hues in a not so pleasing manner.

1) Use the Color in the Content (Image/Stock Photos)

If you are building a smaller site, then you can save yourself a lot of trouble by extracting the colors present in one of the primary image or logo that the company uses. A great tool to do the same is Pictaculous. Use of Inspiring Pixel logo as the Source Image gave us the following suggestions:

2) Use Textures

Textures add a very unique taste to the site. They can be anything from floral to antique to grungy, depending upon the theme of the site. The Color scheme can be used through texture while the main content speaks for itself. Imagine the IP site without the textured grey background.

Here is some help:

I believe you can appreciate the change that it brings to the aesthetics, while keeping the color scheme same.

It is often the simple and overlooked elements like these that make that BIG difference between a successful and not so successful web design company. I hope the post has been able to shed some light on potential methods to use when choosing the color scheme. Do not forget to check these awesome tools and resources for further reading.

Further Tools and Resources:

Working with Color by Lynda.com

27 Color tools by Design Mag

10 Color Palette tools by Web Design Ledger

Examples of Websites with Brave Color Scheme

Fuel thinks Pantone is Blowing Up