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

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

Useful References http://www.useit.com/ http://www.wpdfd.com/ http://www.webpagesthatsuck.com/ http://webdesign.about.com/ WTB - Workshop#2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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