Proximity

Example Proximity Design Principle
Example Proximity Design Principle

This sight demonstrates proximity by grouping the login and enroll links at the top. It also groups common links in the header on each page (Flight | Hotel | Car). It uses the space below the header to feature promotions. This breaks the page up and helps with the overall flow of the site.

The blue "Book" bar contains links to the most common used pages to book new travel components or manage existing ones. Below the blue bar, all of the elements needed to book a flight are grouped in a logical sequence from left to right.

The sight also uses the blue bar above and below the search elements to help keep the grouping together. Notice also how in the lower left of the search elements group, there are links to other resources. This helps the sight to be efficient but not feel cluttered.

Example of proximity website

Alignment

Example Alignment Design Principle
Example Alignment Design Principle

This web site uses alignment to group like topics together. The first column is the main stories that the site is tracking. It takes up about half of the horizontal page. It is labeled with Top News. The next two columns take up the remaining half of the horizontal page. The middle column uses about 30% of the page and consists of Sponsor's Posts. The last column is about 20% of the page and shows the Newest posts.

The alignment of the columns help the reader to focus on each area. There is also shading that is used to break up the page and help to define the alignment.


Repetition

Example 1 of Repetition Design Principle
Example 1 of Repetition Design Principle
Example 2 of Repetition Design Principle
Example 2 of Repetition Design Principle
Example 3 of Repetition Design Principle
Example 3 of Repetition Design Principle

These three screen shots from the Disneyland web site show how the Repetition design principle is used. Notice how the background of each page is the same. Also, the use of white boxes with rounded corners on each page and each box.

Each page uses the same fonts and in the same location. The first two use a filter element to narrow searches. These filters are always left and above the results. There are always menus which appear at the very top of the boxes. What is displayed in the boxes is not the same but has the same look and feel.


Contrast

Example Contrast Design Principle
Example Contrast Design Principle

This web page shows the contrast design principle by using different colors in the top image. Each color is associated with a ordinance (blessings=green, baptism=light green, and eternal marriage=blue green, sacrament=yellow green, and temple=pale yellow). It helps to see each one separately but also ties them together.

The boxes below the Press Forward banner also have a contrast to each other. They have a shadow box behind each one which give the page depth. The box on the far right has the site menus. The black background with the white text draws the eye to the menus. White text is used throughout the page against colored backgrounds.


Typography

Example Typography Design Principle
Example Typography Design Principle

The typography principle is used by this website to create a clean look. The varied font sizes of the headers, text and hyper-links all contribute to a pleasing look and feel. The use of blue for the hyper-links relies on the traditional color of links, making it easy to know what is a link and what is not, without having to mouse over the text.

The Capitalization of the "READ MORE" like beckons to be clicked. The font spacing is a little condensed. It can make for harder reading.