Please enable JavaScript.

Coggle requires JavaScript to display documents.

Sketching, Wireframing, Prototyping swp - Coggle Diagram

- - - - characteristics
        
        Visual design
        
        Only some of the visual attributes of the final product are presented (such as shapes
        of elements, basic visual hierarchy, etc.)
        
        Content
        
        Only key elements of the content are included
        
        Interactivity
        
        The prototype can be simulated by a real human or by using a special digital
        prototyping tool such as Adobe XD.
      - definition
        
        A quick and easy way translate high-level design concepts into tangible and testable artifacts. The first and most important role of lo-fi prototypes is to check and test functionality rather than the visual appearance of the product.
      - examples
        
        Paper prototyping
        
        Creating hand drawings of different screens that represent user interfaces of a product.
        
        Useful when a product team needs to explore different ideas and refine designs quickly.
        
        • Especially useful in the early stages of design when the team is trying different approaches.
        
        Paper prototyping allows you to prototype a digital product interface without using digital
        software.
      - Advantages
        
        Inexpensive
        
        Fast
        
        Collborative
        
        Clarifying
      - disadvantages
        
        Uncertainty during testing
        
        Limited interactivity
        
        impossible to convey complex animations or transitions
    - - definition
        
        Look and feel and functionalities are more closer to the final product.
        
        Teams usually create high-fidelity prototypes when they have a solid understanding
        of what they are going to build.
        
        Can be use to test it with real users or get final-design approval from stakeholders.
      - Characteristics
        
        Visual design
        
        Realistic and detailed design — all interface elements, spacing, and graphics
        look just like a real app or website.
        
        Content
        
        Designers use real or similar-to-real content. The prototype includes most or all
        of the content that will appear in the final design.
        
        Interactivity
        
        Prototypes are highly realistic in their interactions.
      - advantages
        
        Meaningful feedback during usability testing.
        
        Testability of specific UI elements or interactions.
        
        Easy buy-in from clients and stakeholders.
        
        Optimization for devices
        
        Less clarification during usability testing
      - disadvantages
        
        Higher costs
  - - - The simplest form of interactive prototype, created by linking static wireframes together.
        Like paper prototypes, clickable wireframes often don’t look like the finished product.
        Clickable wireframes don’t require a separate person to work as a facilitator during the testing session.
        Unlike static wireframes, in simulation clickable wireframes respond to user interaction.
  - - - definition
        
        Build and code prototypes using electronics. Designed for use by wide range of people
      - toolkits
        
        Arduino
        
        LilyPad (for fabrics)
        
        Senseboard
        
        MaKey
      - SDK
    - - Similar technologies used as the final product.
        Pretty close to the ready-to-release version of a product. Familiarity with the platform’s constraints.
        Extend your prototype to the final product.