Session 1: This week will be spent primarily of wrapping up the Cycling Project before in class presentations on session 2 of week 8. Secondly, we will discuss the components required for the Final Web Application project. These include:
1. A project proposal (summary, features, wireframes, bid)
2. Three design mockups of a single page
3. The complete and fully-functional web application
Session 2: Please be prepared to show your cycling project for group critiques and feedback today as described in Cycling Project Milestone #3. If time permits we will also discuss the requirements for the Final Web Application component of the final project as shown below.
Assignment 5: Final Web Application (Component 3 – Webapp)
Due: Session 1, Week 15 (35 points)
Description:
Using the HTML5 web standards we have learned so far and other techniques that will be demonstrated throughout the semester, design and build an interactive web application with a minimum of five pages in primary navigation and four pages in secondary navigation. The content for the project may be of three possible categories:
1. Build the project for a real organization that is need of a webapp or webapp redesign.
2. Build the project for a real business that is need of a webapp or webapp redesign.
3. Create an informational webapp on a topic of your choice that you are passionate about.
Important: If your project is a business or organization ensure that it is one with which you are closely associated. Consult with me about your concept no later session 1 of week 9 so that I can approve your ideas. All content must be either generated by you, the organization/business, or cited to credit the original source.
Requirements:
1. Create a minimum of nine content areas for the webapp.
2. Primary and secondary navigation will allow visitors to get to all content areas.
3. Include a minimum of four of the following types of media: graphics, photos, video, sound, motion.
4. Images and text content must be your original artwork, unless cited correctly and the licenses allow for use.
5. The webapp must be fully interactive – navigate to any page from any page
6. Upload an archive of the environment to Learn@UWStout before class on session 1 of week 15
Points Breakdown:
6 points will be awarded for designing an effective layout for the content and interface items
5 points will be awarded for a consistent and distinct primary/secondary navigation system
4 points will be awarded for placement, optimization, preparation, and choice of images
5 points will be awarded for the use of media (graphics, photos, video, sound, motion)
5 points will be awarded for developing meaningful and accessible content for the user experience
5 points will be awarded for carefully selected typefaces and type treatment
5 points will be awarded for the clarity of your presentation
Shows you how to create transition delays using and short cuts
http://css-tricks.com/transition-delay-delays
Examples of all the different things you can do with hover options in CSS
http://ianlunn.github.io/Hover/
Hover options with photos fading into other photos
http://css3.bradshawenterprises.com/cfimg/
The 10 Questions You MUST Ask Your Client Before Designing Their Website
http://blog.web123partners.com.au/blog/the-10-questions-you-must-ask-your-client-before-designing-their-website.aspx
How a web design goes straight to hell
http://theoatmeal.com/comics/design_hell
How to create a great designer-client relationship
https://www.levo.com/articles/career-advice/how-to-have-great-client-relationships
http://cssmenumaker.com/blog/6-exceptional-menu-bar-navigation-designs
This website page gives some really neat designs for a navigation bar, such as different textures and behaviors of the hover and the bar itself.
http://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/
This site shows you how to create a hover effect with a grid/photo system to illuminate where the mouse is hitting.
http://www.cssdesignawards.com/articles/round-up-38-neat-css-js-hover-effects/101/
This is another site that has great hover effects for not only links, but photos as well to add to the design. It gives you the html and css code.