• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Principles of web design

Principles of web design






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Principles of web design Principles of web design Presentation Transcript

    • 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/