1. Evaluation & Maintenance
Managing a Web Project
Design
Analysis
Design
Development
Implementation
Evaluation & Maintenance

2. Six Visual Elements (art elements) We think of the elements as the basic visual material with which to make art. It’s hard to imagine anything visual without the use of one or more of these elements. We think of the principles as ways to work with and arrange the elements

3. Creating a composition
 A composition is the way in which various design elements
(shapes, colors and textures) are arranged in a given species
A composition defines the visual & emotional impact of a design

4. Balancing a page layout
Proximity: Group Related Items
Repeat Visual Elements Throughout Design
Align Elements In Order to Create
Visual Unity
Contrast: use contrast to Add Visual Excitement and Draw Attention

5. Layout Design

6. Site structural themes
Web sites are built around basic structural themes that both form and reinforce a user’s mental model of how you have organized your content.
These fundamental architectures govern the navigational interface of the web site and mold the user’s mental models of how the information is organized.
Three essential structures can be used to build a web site: sequences, hierarchies, and webs.

7. Site structural themes
Linear/ Sequential
The simplest and most familiar way to organize information is to place it in a sequence, This is the
structure of books, magazines,
Example: encyclopedia, learning sits, Tutorial, Travel guide

8. Site structural themes
Hierarchies
Information hierarchies are the best way to organize most complex bodies of information. Because web sites are usually organized around a single home page, which then links to subtopic menu pages,
hierarchical architectures are particularly suited to web site organization. Hierarchical diagrams are very familiar in corporate and institutional life, so most users find this structure easy to understand.
The simplest form of hierarchical site structure is a star, or hub-and-spoke, set of pages arrayed off a central home page.

10. Site structural themes
Web
Webs
In this structure the goal is often to mimic associative thought and the free flow of ideas. This organizational pattern develops with dense links both to information elsewhere in the site and to information at other sites. Webs work best for small sites dominated by lists of links and for sites aimed at highly educated or experienced users looking for further education or enrichment and not for a basic understanding of a topic

13. Where to put things, and Why…..
Site structure and eases of access
Classic rules of composition and our reading habits combine to govern how we approach information displays

14. Site structure and eases of access
Eye-tracking studies show that our page- scanning patterns are dominated by top-left scanning for the most important words and links on a page.

15. Site structure and eases of access
Users have developed clear expectations about where common content and interface elements are likely to appear.

16. Site structure and eases of Access
Navigation and Wayfiniding:
Hyperlinks (Anchor, target), types of hyperlinks:
Text, Graphics, text and graphics
Path links Menu links

17. Interface design
Clear navigation aids, give users confidence that they can find what they are seeking without wasting time.
Headers are essential for both site identity and consistent navigation
No dead-end pages

18. Your interface metaphors should be simple, familiar, and logical
Interface design
Simplicity and consistency:
Your interface metaphors should be simple, familiar, and logical
The Opera site is a masterpiece of balancing high functionality with key interface elements.

19. Differentiating the home page
Interface design
Differentiating the home page
Visually appealing
Shouldn’t t have a lot of functionality?
Loads faster
Simple and uncluttered
The user doesn’t t need to scroll the home page
and
Maintain consistency through design grids.

20. Maintain consistency through design grids

21. Interface design
Interface design conventions
A canonical page layout(frame), Not every page includes every element shown here

22. Things that might appear as standard elements of a web page wireframe include:
Organizational logo
Site identity or titles
Page title headlines
Breadcrumb trail navigation
Search form
Links to a larger organization of which you are a part
Global navigation links for the site
Local content navigation
Primary page content
Mailing address and information
Copyright statements
Contact information

23. Example http://www.ibm.com/us/en/

24. A hair achy of Contrast

25. Internal page design

26. Page Template

27. Components of a web page
Typography
Color
Graphics (smaller size, GIF,JPEG)
Audio(MP3)
Video(Compressed format)
Plug-ins(Flash elements)

28. Components of a web page
Advantages of GIF files
gif is the most widely supported graphics format on the web
gifs of diagrammatic images look better than jpegs
gif supports transparency and interlacing
Advantages of JPEG images
jpeg achieves huge compression ratios, which mean faster downloads
jpeg produces excellent results for most photographs and complex images
jpeg supports full-color (24-bit, true-color) images

30. Examples Bad websites: http://www.angelfire.com/super/badwebs/main.htm
Top websites:

31. Evaluation & Maintenance
Development
Tools for development
Microsoft Expression Web.
Adobe Macromedia Dreamweaver 8
Analysis
Design
Development
Implementation
Evaluation & Maintenance

32. Some tips in web page design
 Don't in web page design
Don t crowd your pages balance text, graphics and space
 Don t overuse graphics, animations and other bleeding edge technology use them to support and enhance but not to overpower your work
 Don t use background that distracts the user or makes text unreadable
 Don t use blinking or glowing text for emphasis
 Don t use long paragraphs of text divide them into readable chunks
 Don t create dead end pages, which have no links to any other local page in the site
 Don t design for a specific browser

33. Some tips in web page design
Dos in web page design
Plan the web site structure and navigation
Keep the layout simple and intuitive
Use the same general style throughout
Add standard navigation tools to each page
Include copyright and contact information on each page
Use original or free graphics
Use images wisely and keep file size small for fast download
Respect copyright and intellectual property rights
Always state the source of all materials used
Spell check and proofread each page
The download speed of a website

34. Elements of a web page Document title Address (URL) Banner
Web page title
Navigational tools
Search tool
Graphic elements
Hyperlinks
Table /
Navigational tools
Content
Hyperlinks
Frames
Footer /
Copyright