These are the slides for Session 02 of my Web Design Function & Analysis class currently being taught at UArts Philadelphia.

1. Session 02: Web As A Medium
CE-9506: Web Design - Structure, Function & Analysis

2. Structure of a Site
• Websites are multi-layered programs
running on the OS called the Web which is
running on the Internet
• usually consist of 3 layers

4. What makes up a web site?
• Information / Content
• information graphics (icons, pagination, etc.)
• media (pictures, video, animation,etc.)
• front end code (HTML / CSS)
• back end code (PHP, Ruby, .NET)

5. What kinds of web sites are there?
• Mini-Site (1-3 pages)
• Marketing Sites
• Weblogs (Blogs)
• e-commerce
• Web Applications
• enterprise e-magazine and news sites

6. Web Page Breakdown
• Header
• Navigation
• Content (multi-column)
• main content
• secondary content (sidebars)
• Footer

12. Grid Systems
• Aid in symmetric layout
• allow a designer to visualize column
divisions
• give greater control over content structure
• Are completely customizable
• should be used in every web interface

13. Grid System
• should not exceed 980px wide
• made up of columns and gutters
• columns can have variable widths
• gutters should be at least 10-20px wide
• what about horizontal?

19. Design / Code Relationship
• Being familiar with code is a MUST!
• You do not need to be a code guru in
order to be a good web designer
• HTML / CSS is an easy language to learn.

20. Design / Code Relationship
• Hyper-text Markup Language (HTML)
• Cascading Style Sheet (CSS)

23. Design / Code Relationship
• CSS / HTML Control the Grid
• CSS tells the HTML where to be and how
to look
• Some graphic elements can be rendered by
the code
• As much txt as possible should be
rendered by the code.

24. That’s It!
For my next trick...