This Page
Design samples
· Reasons for Site Disgust
· Site requirements
· A professor's advice
· Headings without graphics
· Alignment, contrast & proximity
· Alignment and repetition
· Alignment, uniformity & contrast
· Alignment and non-uniformity
· Vertical and horizontal axes
· Contrast in tables
· Bands in tables
· Components and grouping
Top of page
Site Pages

30. Web design samples

Design Samples



Top 10 Reasons for Site Disgust by Dennis Gaskill

  1. Slow access
  2. "Under construction"
  3. Horizontal scrolling
  4. Auto-play music
  5. Crashing code
  6. "Bleeding-edge" technology
  7. Low quality content
  8. Poor use of language
  9. Attitude
  10. Poor graphics and site design


Site requirements

Every Web page needs

  • an informative title
  • the creator's identity
  • creation or revision date
  • link to home or menu page

Source: Web Style Guide, 2nd Edition, 2001.


A professor's advice

Work on paper before beginning to author. Look for common examples of sites with objectives and content similar to those of your project.

Postpone being creative and novel. Go with what users will expect.

Content issues are paramount, not design issues. Spend time on content refinement, structuring and organization.

graphic Notes on my 1st draft course page.

Some problems surfaced.

I didn't consider pagination of my content.

How do I present long passages?

Should they be sectioned?

How does this affect navigation between and among pages?

Will the long-content page controls be different from the site-page controls?


Headings without graphics

Business cycles  
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem

Investments  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. Torem ipsum dolor sit amet.
Goals  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem Duis
Planning  
Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
Analysis  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem Duis



Alignment, contrast and proximity

This layout illustrates how well a strong left edge organizes text (alignment), and how well grouping (proximity) maintains the theme.



World Wide Mailers

The best connections possible
www.worldinourbackyard.com
Austin, Texas
(512) 432-8972
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.



Alignment and repetition

Alignment and repetition describe thie very functional visual treatment. The listing provides repetition that unifies the theme, and alignment lends organization. Design components of this character are very functional: they provide quick summaries (left side) and details for interested readers (right side).

N-tier analysis Overview. An MIS steering committee meets at least once yearly to reiview our MIS curriculum coverage. Committee members are MIS graduauates, current students and the present faculty. This analysis shows the view from 30,000 feet.
Database design dB Review. Fundamentals of dB design: normalization. Covered on first test
Application design Chapter 2. Documentation that defines the project objectives should guide all software projects. Reprogramming is usually 50 times more expensive that original programming. It pays to plan and document.
Introduction to IDE Chapter 3. Introduction to the VBA Integrated Development Environment (IDE). You will be spending a lot of time here.
VBA Events Chapter 4. Learning to use events is very important to your VBA skills, and events are a major part of all our assignments.


Alignment, uniformity and contrast



Home
HTML
Style Sheets
JavaScript
Design
Graphics
Web Servers
Home
HTML
Style Sheets
JavaScript
Design
Graphics
Web Servers



Alignment, no uniformity


Home

HTML

CSS

JavaScript

Web Design

Web Graphics

Web Servers


Home

HTML

CSS

JavaScript

Web Design

Web Graphics

Web Servers




Vertical and horizontal axes



HomeSalesCustomer ServiceContact Us


HomeSalesCustomer ServiceContact Us



Contrast in tables

No lines around the cells in this table are needed nor would they be attractive. Contrasting text color and size works very well also.

Naturalis Glorioso
Rose rose Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Sun- flowers sunflower Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lotus lotus Adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.



Bands in tables

Statistical tables can have an abundance of cells on each row. The eye needs assistance when scanning a single row to keep on the row. Alternating color bands make these tables more readable. Using server-side database as the data source, and scripting to help shade alternate rows makes this component very easy to create.

Symbol Last Trade Paid Change Shrs Gain
FBALXJun 1914.4815.33-0.10-0.69%3,966.24-$3,371.31-5.54%
FEQIXJun 1946.2853.43-0.68-1.45%1,159.22-$8,288.42-13.38%
FDCPXJun 1927.0152.33-1.91-6.60%303.323 -$7,680.14-48.39%
FSCSXJun 1936.6251.51-1.17-3.10%297.249 -$4,426.04-28.91%
FSDCXJun 1911.1429.59-0.39-3.38%401.44 -$7,406.57-62.35%
FSELXJun 1935.8557.78-2.43-6.35%283.199 -$6,210.55-37.95%
FSPTXJun 1943.0088.72-2.02-4.49%166.074 -$7,592.90-51.53%
RDESXJun 1936.1546.82-0.47-1.28%898.195 -$9,583.74-22.79%
REMSXJun 198.77 8.63-0.21-2.34%1,246.076 $174.45 +1.62%
RISSXJun 1946.7861.32-0.55-1.16%799.853 -$11,629.86-23.71%
RMSSXJun 199.979.73+0.03+0.30%4,241.347 $1,017.93 +2.47%
RQESXJun 1931.3939.43-0.46-1.44%1,115.406-$8,967.87-20.39%
RRESXJun 1931.0528.30+0.05+0.16%279.306 $768.09 +9.72%
RSPSXJun 1943.1845.68-0.46-1.05%927.351 -$2,318.38 -5.47%
TEFTXJun 199.4410.34-0.11-1.15%329.02 -$296.12 -8.70%



Components and grouping

Pleasing alignment rarely results from "align center". Imagine a margin on your page and left align text to that margin. Place images to the left. Group components.



Dr. Hugh Poynor

Most Challenged Professor

Fall, 1999

Hugh

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



Dr. Hugh Poynor

Most Challenged Professor

Fall, 1999

logo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



logo

Dr. Hugh Poynor

Most Challenged Professor

Fall, 1999

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.