Web Design Principles

Designing a Website When setting out to design a new website, we have plenty of decisions to make. Standard web design principles offer us some guidance on key aspects, such as: Choice of a site color scheme. Choice of text font and size. Placeholder text. Use of white space. Location of navigation menus. Planning for different browsers and screen resolutions. Testing

Choosing a Color Scheme The background colors and graphics we use have a tremendous effect on the mood evoked for our visitors. We can use a color wheel to assist us with making selections: Lime Yellow We should limit the number of main colors on our site to four (excluding black and white). Red Aqua Color selection should always be made with our target audience in mind. A color scheme for a site aimed at teens would be very different than one targeted at business customers. Blue Fuchsia

Complementary Color Scheme Complementary colors are directly across from each other on the color wheel: Lime Yellow Red Aqua This strong contrast lends a vibrant, energetic feeling to a site. Blue Fuchsia

Triad Color Scheme Triads are three different colors equidistant from one another on the color wheel: Lime Yellow Red Aqua Color triads offer a vibrant feel with a lot of color diversity. Blue Fuchsia

Analogous Color Scheme Analogous colors are those that are next to each other on the color wheel: Lime Yellow Red Aqua Analogous colors are pleasing to the eye and make for a peaceful, serene design. Blue Fuchsia

Choosing Fonts and Sizes When choosing fonts, font sizes, and text colors for our site, we should keep the following tips in mind: Many designers use two different fonts for their sites: one for headings and one for regular body text. Font size must be large enough to read easily. Consider 12px to be the minimum acceptable size. Black text on a white background is the most common. However, any light color text with a dark background or dark color text with a light background can be acceptable, provided there is strong contrast. Avoid using bright colors for text. Avoid underlining text or making text blue for emphasis, as this can easily be mistaken for link text. Use bold or italics for emphasis instead.

Placeholder Text Often when designing a web page, we don't have our text content written yet, but we want to see a mock-up of how text will look on the page. In these cases, we can use the "Lorem Ipsum" text temporarily: "Lorem Ipsum" is text in Latin that we copy and paste into our pages for testing. A copy is available free at lipsum.com and many other sites.

White Space White space is the space between the elements of your web page. It does not literally have to be white; it can be the color of your background: Too many elements crammed onto a page can be overwhelming to the visitor. Plenty of white space makes for an uncluttered and easy-to-read page.

Navigation Menus Most websites have their navigation links across the top or down the left side of the screen: The logo or name of the site in the header is traditionally a link back to the home page. Navigation menus should be consistent on all pages of a site.

Planning for Screen Resolution Over 99% of desktop computers now have a screen resolution of 1024 x 768 pixels or larger. If we set a site to be 960px wide, we know that nearly all visitors will see the page without having to scroll right and left. A site that has the width set to a specific number of pixels is said to have a fixed- width layout. It's much easier to plan a site with specific dimensions, but visitors with very wide screen resolutions will see excessive white space on their screens. By using percentages rather than pixels, a site can be made to automatically adjust its width to fit the available space of the screen. This is known as a fluid layout. Though often a better user experience, it's more challenging to the web designer to build and test this type of site. Some larger websites have an entirely separate version of their site designed for mobile devices. These sites automatically detect the mobile browser and deliver trimmed-down content to accommodate smaller screen sizes. These sites usually have an address like "m.yahoo.com" instead of "www.yahoo.com".

Testing There are several web browsers with major market share, and we must plan for each of them: Internet Explorer Firefox Chrome Safari Opera Different web browsers can display the same page very differently. Sometimes, a page will look great in one browser but broken in another. Good web designers test their pages in multiple browsers and screen resolutions prior to posting content live. browsershots.org is a free website that will test a page on numerous browsers and screen resolutions and then display the results.

More Design Tips Here are a few more design tips to bear in mind when setting out to build a website: Aim for consistency in the look and feel of the site. Logos, headers, footers, and navigations bars should reside in the same spot from page to page, and site colors and text should remain consistent site-wide. Align groups of elements horizontally or vertically on the page. Alignment makes a site both easier to use and more visually appealing. Always proofread your site content. There's no excuse to have misspelled words or grammatical errors. Such errors reflect poorly on you as a designer.