Please enable JavaScript.

Coggle requires JavaScript to display documents.

Prototyping - Coggle Diagram

- - - - communicate look & feel
- - - - cannot move around
  - - - e.g. Noento React Studio
        
        encompasses prototyping, designing, and generating real code for native app front-end
        
        connect to back-end using plugins
        
        vs. design (Adobe Creative Cloud), prototype (InVision), front-end (Xcode), back-end (Node.js)
      - e.g. Bootstrap Studio
- - - - function that serves user
        
        how system is useful to user
        
        what can system do
    - - sensory experience of user
        
        see
        
        hear
        
        feel
    - - technical capabilities that enable system to perform function
        
        low-level detali of how system works
        
        each entry in menu
    - - complete user experience with system
  - - - horizontal
    - - vertical
    - - broad view of entire system
      - focus on interaction not functionality
      - e.g. Adobe XD / paper prototype
    - - focus on single feature/functionality
      - full functioning of that feature
  - - - rapid
      - discard
      - most lo-fi and paper prototypes
      - combined with sketching
      - just to communicate / explore / test
    - - incrementally build, test ideas, and refine prototype
      - most products we use are evolutionary, went through alpha, beta
      - e.g. car: first 3-D print, then replace with real parts
    - - divide functionality into vertical prototypes
      - incrementally build each slice
      - then integrate
      - for large and complex project (e.g. MS Team)
    - - Build static prototype
      - Build fully functional interactive components that simulate
      - implement back-end
      - rapid and parallel prototype, test, refinement
      - remove dependency between different components and between system and party services
      - can go back and forth
  - - - lo-fi
        
        low cost
        
        prevent designers premature wed to specific ideas
        
        explore, communicate, test conceptual ideas
        
        identify structural, navigation, organizational issues
        
        high-level ideas
        
        rapid evaluation of multiple ideas (quantity > quality)
        
        communicate to stakholders
        
        identify market before dedicating resources
        
        Limitation
        
        require facilitator to drive prototype
        
        limited ability to identify breakdown
        
        lack low-level specification for development
        
        limited sense of feasibility
      - hi-fi