Due @ 6:00AM on January 22, 2015 (Submit via Camino and late assignments will be assessed a penalty)

Interactive mock ups are vital to application development as you usually work with product managers and designers. In this assignment, it is your mission to create an interactive mock up of an app that is inspired by the iOS Weather app.

In this assignment, I pose as your visual and UX designer and I will give you all you need to create the mock up.

How to be successful and get a good grade (out of 100 points)

  • Be as close to the spec if possible. (HINT: Use something like XScope)
  • Use semantic HTML 5 markup such as <header>, <footer>, etc
  • Use well-named CSS class names
  • Use LESS for CSS management
  • Make sure that you can link between the pages so it is interactive
  • Make sure that your layout is flexible for different screen sizes (the specs point to a 400px wide by 700px tall Chrome browser)
    • This means that any pixel dimensions not mentioned in the spec should just flow naturally
  • No JavaScript is needed
  • Make sure it renders in Chrome on Mac or Windows
  • Use only supplied images for the weather icons (download zip)
  • Other special icons should be unicode characters

This app has 3 main pages that displays the index page containing the cities list, and two weather detail screens for San Jose and Sydney. For this interactive mock up, these will be separate pages, but you will have to use a common CSS style sheet between then and link between the pages. In the mock up, you will have hard coded, fake data that you will later make real and interactive in the second assignment. See the screenshot and specs supplied for all the details on the content.

What to turn in:

  1. citylist.html
  2. sanjose.html
  3. sydney.html
  4. styles.css
  5. styles.less (if you use LESS for CSS)
  6. The image icons I provided but linked in your code

Interaction Design Video

Visual Mockup (click to enlarge)

Visual Spec (click to enlarge)