Web app overview

An overview of the web application prototype we’ll be developing this term on teams.

Go fullscreen: ⌃⌥F

Web app overview

What’s a “web app”

  • Task oriented — Perform a task, instead of find info
  • URL-driven — On The Web, platform agnostic, sharable
  • Fully responsive — Works on all screens & devices
  • Always up-to-date — Devs control release cycle

Interactive prototype

We haven’t concentrated on designing & coding responsive web applications

  • Design & code a responsive web application prototype
  • Every screen should be perceptibly functional
  • Usable enough to be tested but not actually functional

Teams—yeah!

  • 3 members per team (ideally)
  • Working together on the same code-base
  • Different lead roles
  • One final project, one shared grade

Subject of your choice

As a team, pick a focused, small app to design

  • Weather app
  • Train/bus app
  • Food diary app
  • Fitness diary app
  • Budgeting app
  • etc.

Online project management

  • GitHub
  • GitHub Projects
  • GitHub Issues
  • Netlify
  • Slack? Keybase? Zulip? Signal?

Timeline

  • Half the term on UX
    (Weeks 1–3)
     
  • Half the term on code
    (Weeks 3–7)

Do the UX

Do everything expected from you in IxD

  • Target audience
  • Competitive analysis
  • Sitemaps & task flows
  • Visual design
  • Wireframes

Code the screens

Code all the screens and make the app feel functional

  • Write all the CSS & HTML for each screen
  • Use pattern libraries & Jekyll to automate away the duplicate HTML
  • Work on unique Git branches
  • Use Issues to assign tasks to each other

User testing

User testing at two different points:

  • User test the wireframes
  • User test the final app prototype
Start

Web app overview

An overview of the web application prototype we’ll be developing this term on teams.