You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

Design


Home screen


Event metadata


Time selector


Time selector with times
selected


Time selector and clear
all button


Invite screen


My events screen shows
events you've created


Incoming events shows
events you've been
invited to


Respond to an incoming
invitation

 

 

 

Our final design uses consistent colors and widgets to achieve a native feel on a phone.

Important design decisions that were influenced by paper prototyping and the UI evaluations were the time selector screen and our use of color. The largest change in our design from the prototype to the final iteration is the behavior of the time selector. It now moves continuously instead of discretely. This makes the experience smoother and makes the user feel like they have more control over the widget.

We now use only 2 colors in the interface, blue and green. These colors are used in buttons and in the time widget and their meaning is consistent. Blue means selected but not confirmed or submitted, and green means confirm or submit.

Implementation

The following section describes our implementation details for MashCal.

Front-End

We used the built-in features of JQuery Mobile to create our UI design.

Back-End

We have a SQLite database that stores our models and data.

Web Framework

We used Sinatra (a Ruby web framework) to deploy and provide functionality to MashCal.

Hosting

We hosted our live site on hyperbo.la, from Ryan Lopopolo. We shared our codebase by using GitHub.

  • No labels