Professional Web Design Principles - Prof. Raymond J. Kimball
Design
Home
Design Principles
Eye
Scanning
Basic
Layout
Layout
II
Storyboard.doc
Storyboard.htm
MC Sites
Winning Techniques
HTML
Tutorial
Resources
WebAccess-U.S.
Maryland
Web Access
Reno
v. ACLU (1997)
About
508
Bobby
W3C
Web Access Initiative
New
MC Banners!
MC
Disability Access Standards
MC
Web Standards
Lesson 1 - Design Basics, Planning Your Site
Design Principles
Topic 1:
-
- Children/Young students - Mattell Toys - http://www.mattell.com
- Prospective Students
- Students Graduating from MC High Schools - Future Students
- "First Generation" Students - Counseling First Year Experience
- Students with limited English reading skills - Short Sentences, Chock Full of Links
- "Dear New Student"
- International
Students
- How Deep in the Mine is the International Students Page?
- How Do you Find This Page?
- MC Home?
- Admissions Home? Yes!
- Student Services Home? Note emphasis on "Organization" and "Service Category" links, not broken down by major student populations. First Year, yes
- Counseling Home?
- How Does a Student distinguish Counseling and Advising from Student Services?
- Search - "international." Pretty good search. Note the importance of the Search Engine at a large institution with thousands of students and hundreds of departments, programs, courses and degrees?
- Adult students with degrees
- Adult Students seeking certification
- Adult students seeking career changes, internships
- Working students seeking new skills
- Departmental Peers
- Staff, Administrators
- "User-Centered" Sites facilitate Faculty, Staff, Administrators, helping students find what they want.
- How can make as web site as effective as using the Search Engine?
- Option 1: Use buttons to "bubble" Level 2 up to Level 1: MC Home Page
- Option 2. Use JavaScript menus to "bubble Level 2 and 3" up to Level 1. Johns
Hopkins' Home Page. Drawback - Text Reader Accessibility under "508."
- Fix - "Text-only" pages without JavaScript
- Option 3: Use Cascading Style Sheet technology to develop "drop downs" and "buttons" which comply with Maryland's State College Web Accessibility Requirements (508) Note. Maryland accessibility rules are applicable to Montomgery College (state college) but not applicable to Johns Hopkins (private college). .
- Option 4: Use "Multiple User Option"
Page Design Techniques which:
- I.D. Your Audiences on the LeftNavBar;
- Prioiritize your Courses/Degrees/Sequences (Products) and Services on the LeftNavBar;
- I.D. Your Major Topics or Services in the Horizontal NavBars;
- "Multiple User Options:" Restate and Repeat your
Services and Audiences in the
- Main
Text Area - Use Short Sentences Chock Full of Links
- Compare Admissions to
- Financial Aid
- Horizontal NavBar
- LeftNavBar;
- Right-Column "Ads" Section - "News
- Main
Text Area - Use Short Sentences Chock Full of Links
- Instructors - http://school.discovery.com
- Professionals in a given field - http://www.fidelity.com
- General Public - the Internet - Johns Hopkins University - http://www.jhu.edu
- Internal Corporate audience - "Intranet " - MC Infonet
-
- Sell Produces or Services- Acrobat Software - http://www.adobe.com
- Provide Educational Non-Profit Courses (Product) and Services (Counseling) - MC Web
- Non-Profit Web Site - Display Sense of Quiet, Dignified Majesty - National Gallery of Art
- Internet Research, Sell Internet Services, Sell Ads - http://www.yahoo.com
- News, Sell Internet Ads - http://www.msnbc.com
- News, Sell Internet Ads - http://www.washingtonpost.com
- Design a "Personal" web site - http://www.tripod.lycos.com
- Sell Tickets, Provide Endless Statistics, Entertainment - http://www.mlb.com
-
Structure
- How the Eye Moves
Across a Web Page
- Speeeeeed Reeeadiiinnnnnnggggg
- Bouncy-bouncy-bouncy
-
C o L O R R R
- Basic Web Site Structure
- Brand - Upper Left
- Banner - Upper 50 pixels
- Left Navigation Bar
- NavBar Using JavaScript
- Main Content Area - Pics, eye centering point
- Ads - Right Navbar
- Sound - www.BBKing.com- Use Sparingly but Effectively - Flash Movies & Sound
- "Re-centering" -- Controlling the Visitor's Eye
- Insert a Picture
- Make Something Move - Flash Movies
- "Moving Pictures" = "movies!"
- <Blink></blink> (Disabled in Modern Browsers)
- <marquee> </marquee>
- Table Template for building web sites
- How the Eye Moves
Across a Web Page
-
- How "Functional" is your web site?
- Does it "Help" your users?
- Is it so hard to navigate and figure out that it drives your customers away?
- ITI Web Site - For entire Montgomery County Community
- Redundant Links - 3 links to the same information.
- Short Descriptions:
- What's this page about? How will it help me?
- How do I use this page?
- Where should I go next?
- How do I find courses?
- Avoid - "MC is the Greatest Community College Since Sliced Bread!"
- See http://www.montgomerycollege.edu/admissions/prospect.html
- "Our College has achieved a reputation as one of the finest community colleges in the nation; a reputation we have earned by applying a winning formula: excellence in teaching, a focus on student success, and innovative and effective partnerships with area businesses and cultural institutions. "
- How could you improve the Future Students Web Page?
- Pleasing Use of Colors
- Suggestions on Course Sequences
- Rich Course Descriptions
- Good Contact Information
- Don't overwhelm your visitor
- Try to avoid clutter.
- How "Functional" is your web site?
-
- Graphics, Graphics, Graphics - See TV Web -"Communication Arts Technologies"
- Opening Graphics Determine Color Scheme
- Pastels, Blues
- Background Colors - Be careful!
- Background Colors are OK on Banners - BGcolor anchors a page
- Text, Text blocks
- Guidelines
- Appearance-Eye Appeal
- Storyboarding -- Visually laying out your site
- Basic Tools
- Directing the Action
- Templates
- Testing the Site
- Keeping It Fresh - (Site Management)
Contact Information
Raymond.Kimball@montgomerycollege.edu