Class 2: App Prototyping Methods
Agenda
- What's an "app"?
- Prototyping Methods Overview
- Low-Fidelity Prototyping
- High-Fidelity Prototyping
Discussion: What is an App?
Form groups of 2-4.
Discuss with your peers what an app is.
Prepare a definition to share with the class. (I will call on each group to share.)
Activity: Design an App
Client: VibesApp is a startup that has contracted with your team to design a new mobile app.
Goal: Design a mobile app that lights up a room with moving colors based on the vibes that the user wants to create in their environment.
- Brainstorm a design for this app (or two) on the handout.
- With a group of 2-4, sketch a design for an app on the board.
- Evaluate the usability of your app. (Does it set the vibes for a room?)
Definition: App
App, short for application, is an interactive program for computational devices (i.e. phones) typically designed to support users with tasks.
Discussion: Is a website an app? It depends...
App's are Expensive!
- ~$100,000 to $250,000
- ~3 months to 12 months
- Significant expertise required
- 2 major mobile platforms (iOS and Android)
- 2 major laptop/desktop platforms (Windows and macOS)
Discussion: Should We Build Your App?
- UX designer/engineer
- iOS developer/engineer
- Android developer/engineer
- Backend developer/engineer
- QA tester/engineer
- Project manager
We should know whether the app is worth building before we invest!
Prototyping
A user interface prototype is a hypothesis — a candidate design solution that you consider for a specific design problem.
- NN/Group
Prototyping Methods
- Low-Fidelity (Sketches, Wireframes, Paper Prototypes)
- Medium-Fidelity (Digital Wireframes, Clickable Prototypes)
- High-Fidelity (Visual Designs, Functional Prototypes)
Low-Fidelity vs. High-Fidelity
- Low-Fidelity (e.g. Paper Prototype)
- lower cost
- less interactive (often static)
- Medium-Fidelity (e.g. Figma)
- moderate cost
- somewhat interactive
- High-Fidelity (e.g. Interactive Prototype)
- higher cost
- more interactive (often dynamic)
Low-Fidelity Prototyping: Paper Prototype
https://www.youtube.com/watch?v=OlbdIXLunt4
Discussion: Should we build a paper-prototype of your app?
Medium-Fidelity Prototyping: Figma
Figma is a web-based design tool for creating digital wireframes and clickable prototypes.
- Limited interactivity
- Content is static (no dynamic data)
Discussion: Should we build a Figma of your app?
High-Fidelity Prototyping: Interactive Prototype
A high-fidelity (sometimes referred as high-fi or hi-fi) prototype is a computer-based interactive representation of the product in its closest resemblance to the final design in terms of details and functionality.
Discussion: Should we build a Figma of your app?
High-Fidelity Prototyping: How?
- Adobe XD
- Figma (with plugins)
- InVision
- Proto.io
- Web-based (HTML/CSS/JS)
Vue.js
Vue.js is an approachable, performant and versatile framework for building web user interfaces.
Discussion: How to Learn Vue.js?
Learning Objective
Learn how to independently approach problems and technologies that are new to you.
Strategies for Learning New Technologies
- Tutorials
- Examples
- Documentation
- Ask ChatGPT
- Exploration
- Experimentation
Activity: Explore Vue.js
- Open your Homework 1 repository as a Codespace.
- With a peer (2-4) explore the code and discuss how Vue.js works.
- How does "You did it!" or your name show on the screen?
- Can you add another line of text below it?
- Can you start to modify the code to implement your app design?
Summary
- Apps are interactive programs for computational devices designed to support users with tasks.
- Apps are expensive (cost + time + expertise).
- Prototyping is a way to evaluate app designs before building them.
- Low-fidelity prototypes are quick and cheap.
- High-fidelity prototypes are more detailed and interactive.
- Vue.js is a web framework for building interactive user interfaces.