1 / 13

Graphical User Interface (GUI) Web site

Explore the importance of GUI in web design, Team Matix aims to showcase effectiveness and aesthetics in website usability. Follow the project timeline and objectives to create intuitive and visually appealing web interfaces.

lynnn
Download Presentation

Graphical User Interface (GUI) Web site

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. GC 215: Web Publishing Graphical User Interface (GUI)Web site Team Matix Proposal

  2. Definitions: GUI Webopedia’s definition of a GUI (www.webopedia.com): Graphical User Interface (GUI) is an extremely important part of web design and architecture. As the internet continues to grow in scope and possibility, the usability of websites will continue to be a priority for amateur and professional web designers alike. The Team Matix GUI site will focus on the core concepts of making an effective webpage that is intuitive, well-thought out, and easy to navigate. A program interface that takes advantage of the computer’s graphics capabilities to make the program easier to use. Well-designed graphical user interfaces can free the user from learning complex command languages.

  3. Definitions Phase Team Matix

  4. Problems & Concerns Very often, Web sites are created by designers who focus on aesthetics at the cost of usability. Graphic elements such as still images, Flash animations, and animated gifs can add a lot to a site, but if not used with certain guidelines in mind, these elements can mitigate the quality of the site’s GUI. Content can also trump usability. Static sites that do not take advantage of hyperlinks and interactivity fail to give the user controls over what they see and do not utilize the concepts of an effective GUI. Team Matix hopes to demonstrate that usability and aesthetics and or information flow are not inversely related. Instead, by employing simple techniques, designers can create a Web site with both an effective visual display, a useful flow of information and still achieve a user-friendly Graphical User Interface. The Team Matix site will serve as a resource for designers who may have the know-how to create visually stunning sites, or may be able to create basic sites, but do not have the experience in interactive design and architecture to present content in an efficient and intuitive fashion.

  5. Project Tasks • Outline the flow of GUI tutorials: order, priority, etc. • Create examples of both effective and ineffective GUI • Search for Resources and References to cite and recommend to users • Develop the look and overall design structure of the site • Determine navigation scheme for the site • Storyboard site • Develop site rough draft and test on various browsers • Make Modifications to site • Publish site on the Web

  6. Project Timeline • Definitions Phase – Finding GUI resources, prioritizing information, narrowing in on target audience • August 1st – Sept 1st • Design Phase– storyboarding, determining site navigation, determining ‘look’ of site • Sept 1st – November 1st • Evaluation Phase – reviewing site structure, getting feedback from site testers • November 1st – December 1st • Publishing – finding server, domain • December 1st – December 15th Site Completion date: December 15th

  7. Design & Development Phase Team Matix

  8. Objectives • Team Matix’s GUI site has the following objectives: • To introduce the basic elements of an effective Graphical User Interface: Site Structure, Page Design, Navigation, Graphics/Multimedia • Provide examples of both effective and ineffective GUIs • Give recommendations for sites with other helpful tutorials, books, etc: • Web Style Guide, 2nd Edition: www.webstyleguide.com • Robin Williams. Web Design Workshop. Peach Pit Press, 2002. • Web Design Guidelines. http://usability.gov/pdfs/guidelines.html

  9. Site Outline • GUI Site Resource Pages: • Site Structure – How to Organize and Group information • Page Design – Creating hierarchies, Consistent graphic themes, Page Dimensions, Frames • Navigation – Different Navigation schemes • Graphics/Multimedia – File types, File size, Flash Animations • GUI Examples • Browser Issues – Newer vs. Older Browsers, Java Applets, Text size • GUI Resources

  10. Site Flowchart GUI site home 5. GUI Examples: Good and Bad 1. Site Structure 6. Browser Issues 2. Page Design 7. GUI Resources 3. Navigation 4. Graphics/Multimedia

  11. GUI Homepage From the homepage, users will be able to navigate to the different tutorials on the left side of the page.

  12. Evaluation Phase Team Matix

  13. Site Evaluation • Test Criteria for GUI site: • Links – all links need to be double checked – both internal and external links included in the site • Download Time – The site will be tested for download times on different connection speeds (i.e. 56k modem, DSL, and Cable Connections) on the same browser and files will be adjusted accordingly • Proofreading – All content will be proofread to avoid mistakes • Printing –We will test printing from browsers and that all relevant content will print successfully

More Related