Comm 333 Web Design II

Skip to navigation

Travel Experience Project

  1. Overview
  2. Requirements
  3. Example Websites
  4. Deadlines
  5. Grading Rubric

Overview

Your Travel Experience project should be an informational website or web page on a travel experience of your choosing. This can be about a trip that you had in the past or perhaps a dream trip you'd like to take. For this project, focus on bringing in great visuals through photography and illustrations.

You should think of this site as a promotional page for a trip you took or want someone to purchase. Examples of things you might include on the site:

  • Text to highlight special experiences
  • Travel map or itinerary
  • List of items to bring
  • Breakdown of expenses
  • Quotes from other people who have taken similar journeys
  • Photos of the places you'll go (or did go)

Be creative. As usual, this is a theme to get you started on the project.

The website should be fully responsive. There is no specific requirement on the number of breakpoints, but the site should work from the iPhone 5 size up to the width of the classroom iMacs (1920px wide). This also includes all sizes in between. Make sure your site design works at each size.

Requirements

Your site should include the following:

  • Enough content to cover your topic. This is a shorter project due to time contraints. The content included in the Citadela - Prague example would be more than enough for your project. The project can either be a website with a few different pages or a single page with several sections. The choice is up to you.
  • Responsive design that works in the range from mobile (ex: iPhone 5) to desktop (full screen on classroom iMac)
  • Some sort of responsive navigation to move between sections or pages your site
  • Incorporation of responsive image techniques (srcset, picture, svg, responsive video)
  • A colophon in your footer explaining who you are and the purpose of the site
  • Valid HTML
  • Text free of typos and misspellings

Example Websites

The following websites are examples of the theme I'm looking for. Not all examples are responsive, as your site will be, but you should get the general idea. The sites tend to incorporate large photos, sliders, background videos, and some illustration.

Deadlines

Description Due Date
Topic Selected
High resolution graphics chosen
Detailed sketches at three sizes		 4/4
First version of site complete 4/11
Final version of site complete 4/18

Grading Rubric

Description Points
Content
 10
Design
  • Selection of typefaces
  • Appropriate use of graphics to illustrate project
  • Appropriate and aesthetically appealing use of colors. Should also ensure that text is alway legible.
  • Proper use of headings
  • Site design leads you through story of your project
 30
Responsive Images
  • Includes at least one example of each of the following:
    • A responsive CSS background graphic (should change size or resolution at different breakpoints)
    • An img element that switches pixel densities or width using the srcset and/or sizes attributes
    • An example of art direction using the picture element
    • An example of SVG graphics and animation
 30
Markup and Implementation
  • Site works at all required sizes
  • Valid HTML
  • Working Navigation
  • All text in HTML (not images)
 20
Project Page
Completed project page on your class website that outlines all aspects of your projects. It should include working links to the following items:
  • Topic paragraph (1)
  • Content outline or text (can be either in HTML or a linked document) (1)
  • Links to your sources (1)
  • Links to sites you used for inspiration (1)
  • 3 Sketches (2)
  • Link to your first version of your project (2)
  • Link to final version of project (2)
 10