1. Basic Web Design Principles

2. Design
Most people visit Websites to find information or to accomplish some task
The content of the site should be organized in a way that is meaningful and useful to the intended audience
Users need a logical structure so they know where they are and how they get there
It is important to anticipate what the user will want to do, how he or she will use each section of the site, and in what order 2

3. Page Design Page design includes Visual design should reflect The look
Layout of content
Navigational elements
Visual design should reflect
The purpose of the site
The identity of the Web site sponsor
And contribute to the site's usability 3

4. Page Design Questions
Style: What's the overall impression you're trying to create?
Layout: Will the page composition be conventional or unconventional? How will the different elements be arranged into visual groupings? How will the navigation options be presented?
Content: Which tone of voice is best for the site's purpose and audience? What is the right combination of text and images?
Page design ideas should first be sketched out on paper. Working out your ideas on paper allows you to quickly explore different design ideas 4

5. Web Design The heart of design is communication.
The basic rule for any design is “Form follows function.”
Design must support that function to the fullest extent possible.
Think of web site navigation.
The coordination between form and function is invisible to the user when done well and painfully obvious when it is not. 5

6. Navigation Design
Most people ask four basic questions when they are getting around (anything)..
Where am I?
Where can I go?
How will I get there?
How can I get back to where I once was? 6

7. Navigation Design Navigation that really works should...
Be easily learned
Remain consistent
Provide feedback
Appear in context
Offer alternatives
Communicate the site hierarchy
Provide clear visual messages
Be appropriate to the site's purpose
Support users' goals and behaviors 7

8. Working with Color in HTML
Good combinations for web page
Bad combinations for web page
Blue on White
Yellow on Black
White on Gray
Red on Pink
Yellow on White
Blue on Purple
Red on Green
Green on Orange 8

9. Images and Bandwidth Speed Do more with less Use images sparingly
Select the most suitable image format (jpeg/gif/png)
The more high-bandwidth media you use, the more you will limit your audience 9

10. Image file formats GIF (Graphic Interchange Format)
To display clip art containing < 256 colors
To create animated graphics
To use transparent colors
JPG (Joint Photographic Expert Group)
To display photographs
To use images containing >256 colors
To reduce the size of the image through file compression
PNG (Portable Net Graphics)
A replacement for GIF
Compressed
More color depth
transparency

11. Image tag
Inline image: a picture file that is referenced in the HTML code and is loaded with the HTML file.
<img src ="photo.jpg">
src attribute
URL
is usually relative
If you want to retrieve an image from a different directory, you can add path information to the file name:
<img src=“images/photo.jpg”>

12. Image tag attributes
HEIGHT: specifies the height of the image in pixels
WIDTH: specifies the width of the image in pixels
BORDER: determines the size of the border
ALT: specifies the text displayed on-screen when the image cannot be loaded
ALIGN: enables text to flow around the image: at the TOP, MIDDLE, or BOTTOM of the image. Also used to flush the image to the RIGHT or LEFT of the screen

13. Bandwidth Image files are larger text files
Use more network resources (bandwidth)
Users who access the Internet via telephone lines will have to wait for image files
estimate 7K / sec or less
Use image files no larger than 30-40KB
especially on heavily used pages
Use "alt" text to describe images
for users with image loading turned off

14. Battling Bandwidth Limitations
Always specify height and width attributes for all your images so the browser can “work around” each image while it is downloading.
TIP: To find an image dimension: open it using a Web browser, then select Properties on the File Menu.
Don’t put large images at the top of a Web page
Use interlaced GIFs and progressive JPGs.
Several graphic programs save GIF or JPG files in convenient formats: Paint Shop Pro; PhotoShop, etc.
Use thumbnails – reduced versions of your image

15. General Design Guidelines
The name/logo of the site or sponsor should appear on every page
Avoid busy or distracting backgrounds
Prioritize your content. Call attention to your most exciting content with size, color, and/or screen position.
Minimize less important content 15

16. General Design Guidelines
Organize information into clearly distinguishable areas.
Chunk related elements into visual groups through the use of space, graphics, or similarities in color, lightness, texture, or orientation
50-80% of space on a page should be used for content of interest to the user, not navigation or advertising 16

17. General Design Guidelines
White space is not useless. It can guide the eye and help users understand the grouping of information.
Keep pages simple. Review all of your design elements and remove them one at time. If the design works just as well without an element, kill it. 17

18. General Design Guidelines
Use consistent
fonts, color palette, graphical elements,
navigation options,
placement of elements on the page
In general, use more short pages instead of fewer long pages.
However, content pages should contain one conceptual unit of content.
In general, people prefer to scroll to continue a single unit of content, such as an article, rather than click from page to page. 18

19. General Design Guidelines
Never make the user scroll to locate important navigation options or the focal point of the page, such as "Buy Now"
Always use highly visible page titles to provide location feedback and help users remain oriented 19

20. General Design Guidelines
Reading from computer screens is about 25% slower than reading from paper
Guidelines:
Be concise
Use simple sentences
Keep pages short
Use bulleted lists
Break up text with headings and subheadings
Match your writing style to your site's audience and purpose
Proofread!

21. Four Basic Principles Alignment Proximity Repetition Contrast
Use a consistent alignment throughout each section of a document. Do not mix alignments.
Proximity
The proximity of visual element on a page should reflect the relationships between the content elements they represent.
Repetition
Repeat certain visual elements throughout the Web site that tie all the disparate parts together. Each page should look like it belongs to the same site, the same company, the same concept.
Contrast
Use contrasting elements to guide the viewer’s eyes around to important elements on the page. Good contrast helps create focal points to which the user is drawn naturally.

22. Alignment

23. Alignment

24. Proximity

25. Example of Bad Proximity25

26. Better Proximity
Good proximity also means that elements belonging to similar content or categories should be visually grouped together. 26

27. Alignment & Proximity Notice how many times your
eye has to jump from one
element to another on this
page. About seven times?
Notice how the spacing arrangements provide visual clues as to the meaning and importance
of different pieces of information.

28. Repetition

29. Repetition
Repetition does not mean that every page in the site looks exactly the same. It could mean that a consistent set of style elements, graphic elements, and visual cues are used on all pages.

30. Repetition Example: The class Web site

31. Contrast
Important elements that represent the focus of the content must be set apart from sub-dominant elements. Contrast can be achieved by varying fonts, text size, colors, as well as through proper alignment.

32. Contrast To achieve better contrast and create a focal point:
Take the logo out of its confining box and make it the focal point by virtue of it being the biggest and first thing you see.
Reduce the size of the links (take them out of the bordered table!) and put them in an appropriate, subordinate position.
Get rid of the dark background.