Assignment 2

Redesigning a UX

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.

Good or Bad

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!

Design for the Phone!

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.

Testing Your App

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... ***

Application Choices

  • Calculator
  • Clock
  • To Do List
  • Calendar
  • Camera

Scope It!

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!

Design

  • Original UX
  • Feedback
  • Motion (yes you must, it's cool)
  • Where appropriate: icons, color, typography, navigation
  • Performance (smooth animations if you use them, smooth scrolling, no junky / janky code)

Technical

  • USE SHAPES: SVG, CSS, Canvas or WebGL (USE A LIBRARY)
  • If you need routes and views USE A FRAMEWORK
  • Single Page App (all resources delivered in one request)
  • User input + feedback
  • Animations (button feedback or transitions)
  • Some logic algorithm (i.e. parsing / calculating results, filtering data)

Application Features

Limit your app to 3-4 core features!

Example: a clock / to do / contacts app has the following features

  • Add item
  • Show list of items
  • Edit item
  • Delete item

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).

UX is many things

  • User Input
    • Gestures
    • Voice
    • Device APIs
  • Feedback
    • Color
    • Shape
    • Motion
    • Sound
  • Design of Information
    • Color
    • Type
    • Structure
    • Organization

Brainstorm

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.

Great sites for inspiration

  • Chrome Experiments (mobile)
  • Creative JS
  • Code Pen
  • CSS Deck

Some more lists of cool Javascript sites / experiments

  • Creative Bloq
  • Design Crazed
  • JQuery Rain
  • Smashing Magazine
  • 50 Website Examples (grouped by style)
  • 15 Awesome JS Experiments
  • Canvas Demos

SVG

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.

About

Libraries

  • D3.js

CSS Transforms

About

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.

  • List, Cheat Sheet, Animate.css, Greensock GSAP, Velocity.js (jquery anim. replacement)

Canvas

About

Libraries

  • Kinetic.js, Easel.js, Fabric.js, Paper.js

WebGL

About

Libraries

  • Pixi.js (2d), Three.js (3d)

Extra Animation Libraries

  • (SOLE) Tween.js (good paired with pixi/three), Tween.js Part of Easel / Create JS, Greensock GSAP (can use with pixi/three)

USE 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.

What does my app have to be able to run on?

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.

How do I support a mobile layout and properly size my CSS pixels?

Read This and then test on a phone or use Chrome developer tools (see below).

How can I test my app?

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.

Do I have to support touch gestures?

Yes, use a library like Hammer.js

Do I have to worry about my app running on other browsers? Tablets? Desktop?

No.

What do you mean single page app?

Your app should never leave the original index.html. Read up on this.

Do I have to compress, gzip, uglify etc...

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.

Breakdown

  • Presentation / Design Rationale: 4%
  • Performance + Usability: 3%
  • Code + Requirements: 3%

General Expectations

  • Scoped and focused topic
  • Well reasoned and presented in terms of design and technical decisions
  • Completed, running app with no design or technical flaws

Group Size Expectations

  • 1 Person 75%
  • 2 People 100%
  • 3 People 125%

Suggested Milestones

  • Week 1: Find a partner(s) and idea for app
  • Week 2: Choose your library, sketch out how it will work, divide the work
  • Week 3: Get the basic functionality working, present
  • Week 4: Finalize the application, create a README