|
Travel Site
Create a responsive design site (optimized for multiple devices including cell phones) that is a travel promotional site for a location. The location can be scenic (The Swiss Alps), non-scenic (downtown Detroit), ironic (Angola maximum security prison), or fictional (Middle Earth). It can be an entire location (a city, an island, a forest) or a facility (hotel, spa, bed and breakfast). If you are doing a facility, the facility can't already exist (can't be Biltmore, Grove Park Inn, etc., because those places already have web sites). Choose a location that allows you access to enough photograph sources. Avoid a location that relies heavily on someone else's illustrations (South Park, Adventure Time's Land of Ooo, etc.). You should design your site based on the unique historical and topological characteristics of your chosen location. The site should not merely look like a certain location, it should also react to user input and be user-modifiable according to the "logic" of that location. There should be at least 10 "pages" of content. Some animation is required. Audio is optional, but not required. In order to be considered responsive, your project should have at least three state changes (it should look more than superficially different at 3 different screen widths). The largest width should work at 1680 pixels wide (min-width break point 1200px). The smallest width should work at 320 pixels-wide (max-width break point 480px). Column layout, image size, font size, and font typeface should vary at each state. Note: You may design for more than 3 states (in other words, you may have more than three break points), but you are only required to have three states. Your final responsive site should be cross-browser, cross platform (should work on all operating systems), and cross-device (should work on phones, pads, laptops, and wide-screen TV monitors). Put your site in a folder labeled "responsive" and upload it to the "public_html" directory of your student web site. The first page of the site should be labeled "index.html." Grading criteria: 1. meets above requiremets 2. design aesthetics (typography, color, use of space, movement, audio, framing/presentation) 3. interactive aesthetics (reactivity, usability, code mastery) 4. inventiveness (novelty of solution, appropriateness of approach to chosen location and to responsive environment, variability between states) |