Intro to Web Design

1
Intro to Web Design

• IS 372 Telecommunications
• Presented by
• Ryan Wright

2
Biography

• EDUCATION
• Graduate of UM in IS
• Attending UM for MBA
• EXPERIENCE
• Montana World Trade Center
• Rocky Mountain Global
• Kinetic Sports Interactive
• School of Business

3
Design Basics

• Overview
• Authoring Software
• Browsers
• Images
• Design Strategies
• Exercise

4
Overview

• Speed
• Design
• Bandwidth
• Server side
• Clarity
• Simple Users are taking over
• Simplicity
• Save your users

5
Getting Started

• KNOW YOUR AUDIENCE
• STEP MODEL
• SPEND A LOT OF TIME
• PURPOSE STATEMENT

6
Authoring Software

• Three Ways to Create a Web Site
• Coding
• HTML
• ASP
• JS
• VB
• Authoring Tools
• Dreamweaver
• FrontPage
• Page Maker
• Hybrid

7
Examples

• Coding
• www.webaddressbook.com
• Authoring Tool
• www.business.umt.edu
• Hybrid
• www.filmsoundrecordist.com

8
Browsers

• Two dominate Browsers (90 of market)
• Netscape
• IE
• Others
• AOL
• WebTV
• Opera
• Lynx
• STATS
• Browserwatch.internet.com

9
Browser Features

• Support
• MAC VS PC

10
Choosing a Page Size

• What is a a pixel?
• What is Resolution?
• Choosing a Page Size
• 640 X 480 vs. 800 X 600
• KNOW YOUR CUSTOMER
• TEST TEST and MORE TESTING

11
Layout

• TREE SYSTEM
• KNOW YOUR CUSTOMER
• STEP SYSTEM

12
IMAGES

• SPEED
• WEB PALETTE
• GIF
• JPEG
• RESOLUTION
• SIZING

13
COLORS

• Web Palette
• 216 colors
• 6X6X6
• All Browsers and all platforms

14
JPG(JPEG)

• Jpeg
• Joint photographic experts group
• Do not use palettes rather 24-bit color
• Compression
• 101 to 201
• Used primarily for photographic images

15
Gif

• Graphic Interchange Format
• 8-bit Color 256 colors
• Palette Based
• Used Primarily for Graphics

16
Resolution

• What is dpi?
• Computer 72 dpi
• Images greater than 72
• Images less than 72

17
Sizing

• Max Size
• 30 Seconds at 28.8
• Compression Tools
• Fireworks
• Photoshop 5.5
• Image Ready

18
Examples
GIF (2.1 kb)
JPEG (4.4 kb)
19
GIF 25.2kb
JPG 17kb
JPG 5.1kb
20
Design Strategies

• Lowest Common Denominator
• Current Version Design
• Splitting the Difference

21
Resources

• www.Webmonkey.com
• 15seconds.com
• welcome.zdu.com
• wally.rit.edu
• www.htmlhelp.com
• www.htmlgoodies.com

22
Exercise
23
QUESTIONS?

• Ryan Wright
• GBB 332
• 243-4817