Chapter 4

Web page layout in elegance

Specific Designs for

Target AudiencesConsider your audiences tastes when creating your website.

Sometimes websites will not look the same in a

different browser Test your website in all the popular browsers like:

Internet Explorer, Firefox, Google Chrome, Safari, etc.

Make sure you use appropriate resolutions, the most common are: 1024 X 768, 1280 X 800, and 1280 X 1024

Browser Compatibility

Most websites use hierarchical organization. It consists of a clearly defined home page with

links to major site sections, an About page, Contact page, and the Product page

Hierarchical Organization

Linear organization can be

useful when the purpose of the site is to provide some sort of tour for a presentation or something.

Linear Organization

Random Organization has no

clear path through the website

There is no obvious home page, and no clear structure.

This kind of structure are usually found on sites that are made by people who don’t know how to make websites.

Random Organization

Repetition- Repeating one or more elements

through out the page Contrast- Adding visuals like: pictures,

animations, etc. Proximity- Related Items are placed close

together. Alignment- Horizontal or Vertical alignment

with another element on a page.

Types of Visual Design

Long paragraphs and explanations don’t

belong in websites. Keep your text short, and be concise. Organize the page with headings and

subheadings. Use common fonts and appropriate font sizes. Bold your words and make sure the font color

is visible with the background color.

Use of Text

Computers display RGB which is different

intensities of Red, Green, and Blue. The intensities range from 0 to 255.

Hexadecimal Color is also used, and it uses the characters 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

All these characters represent a certain amount of Red, Blue, and Green.

Web Color Palette

To appeal to children and younger people, use

bright colors that will catch the eye. To appear to adults and teens, use dark colors

and maybe some music. For an all around appeal, use a white

background with splashes of colors here and there.

For older people, use white backgrounds, clearly defined pictures, and large text

Use of Color

Make sure you keep the file size of the site as

low as possible. It can make the page take a really long time to load.

Only use videos and GIFs if it helps your website.

More animations and pictures should be used for websites that are supposed to be appealing to children

Use of Graphics and Pictures

Use clear Navigation bars that are either text or graphic based.

For big websites you can use bread crumb navigation which shows you what pages you have visited.

Graphics can sometimes be more effective for navigation than text. So it shows exactly what they’re looking for.

Use a site map to make it of ease to find all pages on your website

Also have a site search bar just in case your website doesn’t have the information they are looking for

Website Navigation

Wireframe- a sketch or blueprint of a web page that shows the structure of basic page elements such as the logo, navigation, content, and footer.

Ice design- The page hugs the left margin and has a fixed width.

Liquid design- A fluid web page with content that takes up 100 percent of the browser window regardless of the screen resolution.

Page Layout

Load Time- To make sure your website loads

the fastest, keep all of your pages images and media files under 60kb.

Other Considerations