Planning your Website 1 Website Refers to an
Planning your Website 1
Website • Refers to an electronic document on the web • We access a website through its address or URL (Uniform Resource Locator) Image Source: http: //markithis. com/wp-content/uploads/2014/04/shutterstock-website. jpg 2
Plan • A plan is a document that outlines the steps needed to create something. • Planning saves a lot of time, money, and effort. Image Source: http: //www. justawebcompany. com/wp-content/uploads/2013/02/website-planning. jpg 3
Steps in Website Planning 1. ) Create a goal for your website. • The purpose of the website should be clear. • What do you want to achieve by creating the website? Example: Wikipedia's purpose is to benefit readers by acting as an encyclopedia, a comprehensive written compendium that contains information on all branches of knowledge. https: //en. wikipedia. org/wiki/ Image Source: http: //ct-social. com/wp. Wikipedia: Purpose content/uploads/2015/03/Setting-Effective-Helpful-Website-Goals 734 x 368. jpg 4
Steps in Website Planning 2. ) Identify your target audience. a. ) Audience Characteristics b. ) Computer Specifications c. ) Web Experience Image Source: http: //www. leadxl. co/wp-content/uploads/2014/02/How-to. Reach-International-Audience-with-your-Website-1000 x 600. jpg 5
Steps in Website Planning 2. ) Identify your target audience. a. ) Audience Characteristics -Age -Gender -School/Work -Culture and Interests Image Source: http: //www. inqbation. com/wpcontent/uploads/2013/04/web-audience 1. jpg 6
Steps in Website Planning 2. ) Identify your target audience. b. ) Computer specifications -capacity of browser and computer Image Source: http: //3. bp. blogspot. com/i. Z 5 Lml. R 6 NIA/Ux 0 Zf 0 Nob. KI/AAAACs. A/__dyd-3 fsz. A/s 1600/webbrowser-usage. png 7
Steps in Website Planning 2. ) Identify your target audience. c. ) Web Experiences -Computer proficiency Image Source: http: //www. impactstaffing. com/impactstaffing/image. axd? picture=201 3%2 F 5%2 Fbigstock-Extreme-Close-Up-Of-Hands-On-K-37225885. jpg 8
Steps in Website Planning 3. ) Determine the content. • It should be relevant with the goals. • It should motivate users to come back and linger in your site Image Source: http: //support. campusuite. com/cms-forschools/images/website-tools. png 9
Steps in Website Planning 4. ) Visualize the page flow. • Sequence of page access -How a user will move from page to page. Image source: http: //www. myriadcore. com/blog/wp-content/uploads/2013/05/website-architecture. jpg 10
Steps in Website Planning 5. ) Sketch the essential features of the look and feel of your website. • Design • Draft Layout • Page Sections Image Source: http: //blog. vtc. com/wp-content/uploads/2014/07/web-designplanning. jpg 11
Steps in Website Planning 6. ) Plan site maintenance and update. • Easy to maintain website • Flexible for modification/expansion Image Source: http: //awwsomeweb. com/wpcontent/uploads/2015/04/Website-maintenance-awwsome. png 12
Steps in Website Planning 7. ) Create your website. • Start Coding Image Source: http: //www. kingwebdesignservices. com/wpcontent/uploads/2014/05/clean-code-700 x 300. jpg 13
Steps in Website Planning 8. ) Perform usability testing. • Have the users test your website • Ask for recommendations Image Source: http: //higheredexperts. com/edu/wpcontent/uploads/2010/03/usability. png 14
Website Sections 1. ) 2. ) 3. ) 4. ) 5. ) 6. ) Splash page Homepage About Me/Contact Me Section Site Map Section Site Links Section Guestbook Section 15
Splash Page Image Source: http: //line 25. com/articles/web-design-trend-showcase-splash-screen-revival 16
Homepage Image Source: https: //www. dropbox. com/ 17
About Me/Contact Me Section Image Source: http: //www. twelveskip. com/showcase/website-design/853/25 -best-examples-of-about-me-pages 18
About Us/Contact Us Section Image Source: http: //bluecadet. com/about/people/ 19
Site Map Section Image Source: https: //en. wikipedia. org/wiki/Portal: Contents/Overviews 20
Site Links Section Image Source: http: //rizal. lib. admu. edu. ph/rllinkages. asp 21
Guestbook Section Image Source: http: //thinkbit. com. ph/careers. php#/contact 22
Other Important Notes about Websites • URL – (Uniform Resource Locator) this refers to the address of a website • Website sections vary from website to website. • Contact Me Section – should be placed on the footer of every page Image Source: http: //www. onextrapixel. com/2009/10/15/contactus-page-best-practices-with-22 -fabulous-showcases/ 23
Reference Kazanidis, E, et al. 2010. Web Design. 4 th ed. Quezon City: Q. C. Tech. Factors, Inc. 24
Questions? Thank you 25
- Slides: 25