Skip to main content

INFO 4340/5440: App Prototyping Methods

Class 2: App Prototyping Methods​

  1. What's an "app"?
  2. Prototyping Methods Overview
  3. Prototyping with Vue.js

Copyright 2026, Kyle J. Harms

Review: Course Policy​

Activity: "Whitenoise" Maker App​

Working at the board with your peers, design a "whitenoise" maker app.

  • The app has at least 4 different sounds (i.e. rain, ocean, wind, fire), but no more than 8.
  • Each sound can be turned on or off independently of the other sounds.
  • The user combines the sounds to create a "whitenoise" that they like.

Sketch your own design of the whitenoise app on your handout. You will implement this design in Homework 1.

Discussion: What is an App?​

Discuss with your peers what an app is.

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

Discussion: Should We Build Your App?​

  • UX designer/engineer
  • Project manager
  • iOS developer/engineer
  • Android developer/engineer
  • Backend developer/engineer
  • QA tester/engineer

We should know whether the app is worth building before we invest!

App's are Expensive!​

  • ~$100,000 to $250,000 (and increasing)
  • ~3 months to 12 months
  • Significant expertise required
  • 2 major mobile platforms (iOS and Android)
  • 2 major laptop/desktop platforms (Windows and macOS)
  • Extensive LLM/Claude token budget ($10,000s)

Prototype​

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 (e.g. Paper Prototypes, Sketches, Wireframes)
    • lower cost
    • less interactive (often static)
  • Medium-Fidelity (e.g. Digital Wireframes, Clickable Prototypes)
    • moderate cost
    • somewhat interactive
  • High-Fidelity (e.g. Interactive/Functional Prototypes)
    • higher cost
    • more interactive (often dynamic)

Low-Fidelity Prototyping: Paper Prototype​

A paper prototype is a low-fidelity representation of a user interface that is hand-drawn (or printed) on paper.


Pro: Quick and cheap to make; Easy to iterate and modify. Pro: Users are more likely to provide honest feedback. Con: Not interactive (static).

Medium-Fidelity Prototyping: Figma​

Medium-fidelity prototypes are digital wireframes or clickable prototypes that are created using a design tool such as Figma.

  • Limited interactivity
  • Content is static (no dynamic data)

Pro: More realistic representation of the final product. Con: Time intensive (though less so with AI assistance). Con: Users may be less likely to provide honest feedback.

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.

https://blog.prototypr.io/high-fidelity-prototyping-what-when-why-and-how-f5bbde6a7fd4


Pro: Feasibility of the final product can be evaluated. Con: Time intensive (though less so with AI assistance). Con: Users may be less likely to provide honest feedback.

High-Fidelity Prototyping Methods​

  • Adobe XD
  • Figma (with plugins)
  • InVision
  • Proto.io
  • Claude Code (code me an app)
  • Web-based (HTML/CSS/JS)
  • ...

Vue.js​

Vue.js is an approachable, performant and versatile framework for building interactive web-based (HTML, CSS, JavaScript) user interfaces.

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​

Learning is more effective when it requires significant effort and active engagement. Passive strategies (e.g. reading, watching, listening) feel easier and more productive, yet they are less effective than active strategies (e.g. exploring, experimenting, creating).

Passive Strategies​

  • Tutorials
  • Examples
  • Documentation
  • Claude or ChatGPT

Active Learning​

  • Exploration
  • Experimentation

Studio: Explore Vue.js​

  1. Start your Homework 1.
  2. Once you (and your peer) have your Codespace up and running, explore the code in App.vue together.
    • What do you notice about the code?
    • What do you wonder about the code?
  3. Can you start to modify the code to implement your app design?

ChatGPT vs. GitHub Copilot​

ChatGPT is a general-purpose conversational AI.

GitHub Copilot is a coding-specific AI.

Discussion:

  • Do you need to know industry/domain-specific AI tools?
  • Can you get by with copy-pasting from ChatGPT or Claude?

What's Next​

  • Due Monday, 8/31/2026, 11:59pm: Homework 1
  • Due before next class: Class 3 Preparation
Last updated on