Principles of Web PageDesign and Construction Company LOGO
4 Steps to Success1. Planning2. Design3. Production4. Maintenance
Planning Who are my users and What do I want the site to what do they want and accomplish? need? Ask yourself What competitiveHow much time do I advantage will the have and what site offer over others? resources do I need? How can I take advantage of the Web medium?
DesignHow will you use Structure Navigation The Elements of Media Web Design? Text Visual Layout and Elements
StructureMaking it easy for users to find what they need Develop a user centred structure for your site Create a flow diagram List the elements and links for each page of the diagram Design hierarchies of breadth rather than depth
Sample Flow DiagramPrinciples of Webpage Design and Construction Website Title 4 Steps Product- Mainten- Planning Design Sited ion ance Navigat- VisualStructure Text Media Steps ion Layout Flow Providing TextDiagram Feedback
Navigation Clear Consistent Persistent • Link to the• Use labels that Whenever users see homepage andclearly indicate the a link they expect it high-level sitefunction of links will: categories on every page of your • look the same site • Persistent links• Provide feedback • be in the same enable users totelling users where location navigate easilythey are in your site • function the same between pages on your site
Providing feedbackExample of visual feedback for navigation links
Text t Communicate an on ort ati Use the inverted p quickly withI m o rm pyramid strategy headings Inf mes for body text Co s t Fir Place links at the Too many links s beginning or end ink within a block of e p l te text can disrupt of paragraphs orKe para continuity. sections of se m ive s narrative text. fro rrat ock na xt bl te
Text r n fo keD esig lt Ma graph u a d efa er par flush s row b s text t left fonDefault fonts for Flush left is easierPC computers to read than textare Times New which is flushRoman and Arial right or centeredDefault fonts for Aids reflow if theMacintosh are user resizes theirTimes and browser windowHelvetica frame
Visual Layout and Elements e.g. e.g.Use the top and left Maintainareas of the page for consistent visualnavigation and identityidentity Establish and/or avoid clutter Design within comply with your the boundaries schools design say more of an image safe conventions with less area Design in a style that will appeal to your audiences tastes
MediaInstructions for downloading media objects Use animationsshould include the file size, the media type, and a to attractdescription of the subject matter attention Provide user controls Create animations that enhance explanation
Production How do I minimize the size of files and images? Ask yourself How do I structure my files to support efficient updating and maintenance? What testing do Ineed to do before I publish?
Production Steps Preparation Final Testing •Establish conventions for •Ensure your site is ready for file management publishing Creating images Rollout• Produce images that will •Move the site to theload quickly destination server •Test the site on the• Use a Web safe 216-color destination serverpalette •Make a backup
Maintenance A Healthy Vital Site Equals Keepingusers up-to- Responding Maintaining Tracking date on to users who links site content give you activity changes feedback
Sited A Fabulous Reference: IBM’s Ease of Use – Webpage design guidelines http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/572 Some great sites in this searchhttp://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and_Layout/ A site devoted to beauty by one of our number http://users.tpg.com.au/grimsdel/ Truly a Sucky Site - The Worst Web Page In The World for June 27, 2006 http://www.kangaroocenter.com/