Web Disigning


Published on

Published in: Education, Business, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Disigning

  1. 1. September 30, 2009
  2. 2. <ul><li>Site Planning </li></ul><ul><li>Determine site goals </li></ul><ul><li>Analyze your audience </li></ul><ul><li>Analyze the “competition” </li></ul><ul><li>Know your own abilities and resources </li></ul><ul><li>Map the current site </li></ul><ul><li>Design your new site </li></ul>
  3. 3. <ul><li>Site Goals and Guidelines </li></ul><ul><li>Why are you creating this site? </li></ul><ul><li>What does the site owner hope to achieve with this site? </li></ul><ul><li>What action does the site owner want the audience to take as a result of visiting? </li></ul><ul><li>What restrictions or guidelines must be followed when designing the site? </li></ul>
  4. 4. <ul><li>Audience Analysis </li></ul><ul><li>Who are you trying to reach? </li></ul><ul><ul><li>Age </li></ul></ul><ul><ul><li>Language and Culture </li></ul></ul><ul><ul><li>Level of education </li></ul></ul><ul><ul><li>Access to the Web (High-speed? Dial-in?) </li></ul></ul><ul><ul><li>Familiarity with the Web </li></ul></ul><ul><ul><li>Barriers to access? </li></ul></ul><ul><li>What are they looking for at your site? </li></ul><ul><ul><li>Information </li></ul></ul><ul><ul><li>Services </li></ul></ul><ul><ul><li>Community </li></ul></ul>
  5. 5. <ul><li>Analyze the “Competition” </li></ul><ul><li>Look for sites with similar contents, purpose </li></ul><ul><li>At other organizations </li></ul><ul><li>In the private sector </li></ul><ul><li>What are the trends and precedents? </li></ul><ul><li>Where do they excel or fall short? </li></ul>
  6. 6. <ul><li>Know Resources & Abilities </li></ul><ul><li>What technical knowledge do you have? </li></ul><ul><li>What tools, resources, and time do you have </li></ul><ul><li>access to (now AND later)? </li></ul><ul><li>Software </li></ul><ul><li>- Web authoring tools </li></ul><ul><li>- Image editing tools </li></ul><ul><li>- Animation tools </li></ul><ul><li>Hardware </li></ul><ul><li>- Camera (video and/or still) </li></ul><ul><li>- Scanner (flatbed or slide) </li></ul><ul><li>Other people </li></ul>Think long-term! Be sure you have the resources to maintain the site
  7. 7. <ul><li>Design the Site </li></ul><ul><li>Determine the site structure (site map) </li></ul><ul><li>Gather content (visuals, information) </li></ul><ul><li>Mock up a visual design </li></ul><ul><li>Build the site in a “test” mode </li></ul><ul><li>Perform (user) testing and make changes </li></ul><ul><li>Put the site into production </li></ul><ul><li>Review audience needs/wants with site owner </li></ul><ul><li>Maintain and update the site </li></ul>
  8. 8. <ul><li>Visitors first impressions </li></ul><ul><li>Should tell what your site is about </li></ul><ul><li>Should provide index / table of contents </li></ul><ul><li>Keep short and to the point </li></ul><ul><li>Should not contain a lot of text </li></ul><ul><li>Avoid huge list of links to every single page </li></ul>
  9. 11. Tip no. 1 Create a Suitable Template Template contains your entire page design, logo, images, navigational links and a specific area for your content.
  10. 12. <ul><li>Tip no. 2 </li></ul><ul><li>Optimum Load Time </li></ul><ul><li>Design should be optimized for the web </li></ul><ul><li>Should not take more than 10 seconds to load </li></ul><ul><li>Minimize Graphics, Animations, Flash and scripts </li></ul>
  11. 13. <ul><li>Tip no. 3 </li></ul><ul><li>Format Pages with Tables </li></ul><ul><li>Use Three Tables </li></ul><ul><li>(Header, Main Content and Footer) </li></ul><ul><li>Set border attribute to “0” </li></ul>
  12. 14. <ul><li>Tip no. 4 </li></ul><ul><li>Neat and Easy Navigation </li></ul><ul><li>Make sure all your important links are at prominent places </li></ul><ul><li>Make use of menus on the right and the left </li></ul><ul><li>Let your information be accessible from all parts of the site </li></ul><ul><li>Use the footer for your important links </li></ul><ul><li>“ Rule of Three” </li></ul>
  13. 15. Tip no. 5 Cross Browser Compatibility - Internet Explorer 5+ - Netscape Navigator 6+ - Opera 7.0 and - Mozilla Firefox 1.0
  14. 16. <ul><li>Tip no. 6 </li></ul><ul><li>Design for All Screen Resolutions </li></ul><ul><li>Resolution range from 640 x 480 to 1024 x 768 and go even higher </li></ul>
  15. 17. <ul><li>Tip no. 7 </li></ul><ul><li>Readable & Professional </li></ul><ul><li>Looking Font </li></ul><ul><li>- Common and professional web fonts </li></ul><ul><li>- Be consistent with font </li></ul><ul><li>Avoid spelling mistakes </li></ul><ul><li>Highlight the main elements only </li></ul>
  16. 18. <ul><li>Tip no. 8 </li></ul><ul><li>Background and Text Colors </li></ul><ul><li>Avoid busy background </li></ul><ul><li>Be consistent with background theme on each page and web page colors </li></ul><ul><li>Avoid bright/dark background color </li></ul><ul><li>Don’t overuse colors </li></ul><ul><li>Don't make your text the same color as your background . </li></ul>