1. Web Technologies for Business
Workshop #2 – Web Design
WTB - Workshop#2
WTB - Workshop#2

2. Learning Objectives Things to consider before designing the Web
WTB - Workshop#2
WTB - Workshop#2

3. Useful References http://www.useit.com/ http://www.wpdfd.com/
WTB - Workshop#2

4. Site requirement ?
What are the most important information need to collect / document ?
How to collect the requirement?
How about Front-end ?
Any visual aid that could help?
WTB - Workshop#2

5. Important Information
Look and feel requirement
Content placement
How to convey the message
Color palette
Fonts and image concepts
WTB - Workshop#2
WTB - Workshop#2

6. Important Information (2)
Bandwidth Requirement
Balance between graphic and text
Resolution requirement
usability and credibility
Scalability requirement
Expand and changed in the future
Content requirement
Content volume
WTB - Workshop#2

7. Documentation ? Site / Client name Objectives Action Plan Prepared by
Date
Possible future site consideration
Client contact(s)
Version
Meeting Summary
Requirement
… … … … … …
Dependencies : Information obtained from other sites?
WTB - Workshop#2

8. Three basic rules Document everything and have everything documented
Save each document as different versions
Receive a sign-off on the requirement before beginning work
WTB - Workshop#2

9. Front-End Requirement
Who are the audiences?
What is the purpose(s) of the site?
Browser platform and resolution?
How may level or clicks
Most important information
Scrolls? Vertically / horizontally?
Functionality required?
Desired download size?
Company tagline?
… … … …
WTB - Workshop#2

10. Flowchart A page says a thousand word Easier to visualize the site
Save a lot of time clarifying questions
Microsoft Vision could help
WTB - Workshop#2

11. Others Bandwidth requirement Deciding on resolution Fixed or relative?
How many user hitting
Overall usage
Content
Deciding on resolution
1024x768, 800x600, 640x480
Color depth (8-bits, 16-bits, 32-bits)
Fixed or relative?
Resize automatically?
WTB - Workshop#2

12. Scalability Editable site Modular site
Able to amend / edit pages or sections of a site without any major rework of the design
Modular site
Any single webpage should be comprised of several files / pieces put together
WTB - Workshop#2

13. Scalability : nested tables
Example : employ nested tables allow content manger the ability to easily add, edit and delete information without changing the content in the other columns.
WTB - Workshop#2

14. Scalability : include files
Include files reduce the development and maintenance time
This make a site modular
Allow homepage remain unchanged
Various individual pages build underneath
Reduce the amount of space of the body if the content is not as long as other pages
WTB - Workshop#2

15. Create flexible design
client wants to add just one or two column to the navigation panel?
Client wants to add one or two sections?
Lack of room to expand is an inflexible design
Easy to create, difficult to maintain
WTB - Workshop#2
WTB - Workshop#2

16. What need to be flexible?
Menu navigation
Able to add / delete without requiring a redesgin
Beware of the width, not too narrow
Content layout
Always possible have room to add new text or graphic
Title area
Text description to identify 2nd and 3rd layer
WTB - Workshop#2

17. Re-Cap Well designed site is a well-through-out site
Collect requirement from client
Need to consider:
Bandwidth, resolution, color depth
Flexible, scalable
Nested table and include files
WTB - Workshop#2
WTB - Workshop#2

18. Web Authoring Web site creation process Web design
Creating, writing and layout with style
Graphics creation and optimization
Markup languages like HTML
Web programming with scripts like VBScript
WTB - Workshop#2

19. Web Authoring Applications
Software for creating Web sites
Two major types:
Text editors
E.g. Notepad / MS Word
Visual Editors
E.g. MS FrontPage / Macromedia Dreamweaver
WTB - Workshop#2

20. Exercise – Creating a Personal Web Site with MS FrontPage
Use template to create a personal Web site
Add a theme to your Web site
Modify and create lists
Add and manage hyperlinks to the Internet
WTB - Workshop#2