Memo
To: Professor Eyman
From: Amber Papas
Date: March 31, 2016
Re: Final Project Proposal
Purpose
The purpose of my website will be to create a website for users that provides information about web authoring and design basics; how CSS and HTML5 interact together; CSS and HTML5 basics (parts, use, syntax; what different tags, elements, and attributes do; and different web design theories.
Product
Strategy: I have identified the user needs as needing a resource to help them create a website in one location rather than searching through multiple webpages online. The product objectives will be to create a resource for users that guides them on web authoring and design, CSS, HTML5 practices, and implementation.
Scope: The content requirements for a website of this magnitude are vast. I will need to gather information on CSS and HTML5 parts, use, and syntax, as well as how to create different effects with different code. I will need to provide analysis of how the different tags, attributes, and elements function on their own and with one another; as well as provide examples on what the back-end should look like to produce a particular effect on the front-end. I will discuss accessibility requirements and why they are necessary, typography and how to implement different fonts, and graphic insertion. I will also need to discuss web authoring techniques (such as Garrett’s Five Planes of User Experience); what you must do to plan your website; and also different web design theories such as gestalt theory, color theory, whitespace, grid theory, F and Z styling, and visual hierarchy.
Structure and Skeleton: I will be using a mix of a matrix and hierarchical structure. I will, of course, have a home page. Then I will have sections for the broader categories which include: Web Authoring, HTML5, CSS, and Web Design Theories. Those categories will have their own overview site which will have links to the other branching sites.
I will accomplish this by having the main categories be tabbed under the header but before content, with a navigation bar to the left with the subcategories of these larger categories. When you place your cursor on the subcategories, without clicking, it will bring up the different sub-subcategories of that subcategory. If you click on the subcategory, you will be taken to the main page of that subcategory which will give you basic information about the topic. There will also be a navigation bar on the right which will have each topic that is included on that page. If you click on the different topics, it will take you to that specific part of the page. Users will also be able to navigate from one page to the next by a button on the bottom of each page that leads them to the next section.
Surface: As for the visual aspects of the site, I am planning on utilizing all the different web design theories that I will discuss on the website. I have not gotten very far into thinking about visual considerations.
Audience
For this project, my primary audience will be ENGH 375/507 students at George Mason University. My secondary audience will be anyone who is trying to create their own website.
In order to investigate user needs, I will be looking at different forums to see what questions are asked most often regarding CSS, HTML5, web design theories, and web authoring. I will also be listening to questions students in our class ask. Furthermore, I will look at the different websites of students in our course to see what they do well and do not do well so I can see how my website’s content might benefit their work directly.
To gather feedback from my users, I will be asking students in our class to use the website and tell me how they would improve the website’s navigation, content, and usability. By asking students in our class, I will be able to gather information about my primary audience, assuming that the next group of ENGH 375/507 students will have similar questions.
Functional Specifications and Content Requirements
The content requirements for a website of this magnitude are vast. I will need to gather information on CSS and HTML5 parts, use, and syntax, as well as how to create different effects with different code. I will need to provide analysis of how the different tags, attributes, and elements function on their own and with one another; as well as provide examples on what the back-end should look like to produce a particular effect on the front-end. I will discuss accessibility requirements and why they are necessary, typography and how to implement different fonts, and graphic insertion. I will also need to discuss web authoring techniques (such as Garrett’s Five Planes of User Experience); what you must do to plan your website; and also different web design theories such as gestalt theory, color theory, whitespace, grid theory, F and Z styling, and visual hierarchy.
For functional specifications, each topic needs to include an overview, explanation of it’s function, how to use the different elements, attributes, tags, etc., and a visual example of what effect it will cause.
Similar Sites
http://www.w3schools.com/ : W3 Schools is obviously one of the most comprehensive resource websites on HTML5 and CSS. They provide useful information in an easy to navigate way. I find myself using their site quite a bit.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element: Mozilla is useful, if you can figure out how to navigate. I do like how they present information and explain the different uses of different elements and tags.
Tentative Project Timeline
2/28: Gather all necessary content for site
3/12: Have structure organized – begin adding content to site
3/30: Complete skeleton plane – continue adding content to site
4/20: Finish surface plane – have content on site finished
l Page 2