In this assignment you are going to use SVG, CSS transforms, Canvas or WebGL to redesign a simple classic app with a COMPLETELY, RADICALLY NEW AND ORIGINAL User Experience.
Just like assignment 1, this should be a single page application. If you need multiple views or routing, use a web framework like angular, react, vue, mithril, etc...
Your application should be responsive and smooth with a modern look and feel.
For this assignment you can come up with any new UX you like, it may work, it may not.
Personally I would try to do something radical and MAKE IT WORK WELL, but in the end, not all wild new ideas end up working well in production.
Try your best to produce something awesome that you're proud of, but be prepared to present equally about what worked and WHAT DID NOT WORK!
Since we are working with web technologies you will hear the term responsive a lot.
Responsive means that your webapp will adapt whether it is run on a phone, tablet, or desktop.
DO NOT focus on this when building your assignments, design for a phone, that is what Salehen and I will be using to mark your assignments.
Make sure your app works on a iPhone 5 / Nexus 5 "ish" device. i.e. buttons are clickable and the viewport is sized so that when you look at it on a phone you can read the text etc...
Use the meta viewport tag (see FAQ).
*** Test with Chrome Dev Tools Device Emulation for things like multitouch (pinch, rotate, etc... ***
The point of this assignment is not to make an amazing application, as you can tell by the choices, they are standard apps that already have several good implementations.
Focus your time and energy instead, on completely redesigning the user experience, however radical your ideas may be, keep it scoped and have fun!
Limit your app to 3-4 core features!
Example: a clock / to do / contacts app has the following features
That's it! The difficult part of this assignment should be developing a new user experience, not making the application (you did that in assignment 1).
How can you make your app unique, fun, playful.
Write down all your ideas! No idea is a bad idea! Get wild! Get crazy!
Shortlist your ideas by discussing them with your partner and come up with 3-4 unique user interactions you can develop and test in your application.
Polish the interactions that work, drop the ones that don't.
DISCLAMER: SVG is slow on mobile when you have to animate many objects
I also don't know many libraries that make working with SVG easy, but this doesn't mean you can't use SVG in your projects. Make an educated choice.
AboutLibraries
Libraries
Note these libraries are about animating HTML elements using CSS or JS animations that take advantage of CSS transforms. You can style your elements with plain CSS.
Libraries
Libraries
I assume you will build on top of example code and cool ideas you find on the web.
That's fine! Make sure you reference what you use and where in your project you use it.
Your app should be live on a gh-pages branch of a github repo. Salehen and myself will be using Google Chrome for Android (same as iOS) on a Nexus 5 and One Plus One.
Read This and then test on a phone or use Chrome developer tools (see below).
You can use Google Chrome's developer tools to emulate mobile devices and even network speeds. Click the little phone icon in the top left to start emulation.
Yes, use a library like Hammer.js
No.
Your app should never leave the original index.html. Read up on this.
Only if you are running a pre-processor on less, sass, jsx, etc... You app should run live on gh-pages, i.e. only js, css, html are supported.