Skip to content

Info on wireframing and prototyping, including a Framer prototype for a learning platform.

License

Notifications You must be signed in to change notification settings

jillmpla/wireframes_and_prototyping

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Wireframes and Prototypes

Low, medium, and high-fidelity wireframes and prototypes.


  • Low-fidelity:

    • Simple, often hand-drawn, representation of a design or concept.
    • Used to quickly get an idea across without focusing on the fine details or functionality.
  • Medium-fidelity:

    • More detailed than low-fidelity, but not fully functional.
    • Might be digital and have some interactive elements, but not all the features of the final product.
  • High-fidelity:

    • Detailed and interactive representation of the final product.
    • Looks and functions very closely to how the final product will.

Wireframing & Prototyping Tools

  • Google Draw: https://docs.google.com/drawings/
  • Allows users to create simple, collaborative diagrams and visual content directly within the Google ecosystem, making it unique for its seamless integration with other Google services.
  • Draw.io: https://app.diagrams.net/
  • A free, browser-based diagramming tool that offers a wide range of templates and is known for its ease of use and integration with various cloud storage services.
  • Balsamiq: https://balsamiq.com/
  • Unique for its hand-drawn, sketch-like interface which aims to simplify the wireframing process and facilitate rapid idea generation without focusing on design details.
  • Axure: https://www.axure.com/
  • Offers very high fidelity for interaction design, including scripting events and user input/output to provide realistic, functionally interactive prototypes.
  • Framer: https://www.framer.com/
  • Distinct for its emphasis on interactive design and prototyping, offering a code-backed environment that allows designers to create more dynamic and realistic user interfaces and experiences.
  • Figma: https://www.figma.com/
  • A collaborative, online design tool that allows real-time co-editing, making it optimal for remote teams and ensuring consistency across design projects.

NOTE: Use Stark Accesibility Tools with Figma to ensures designs are inclusive and compliant with accessibility standards, enhancing user experience for everyone, regardless of ability.

Audio & Video Tools

  • Clipchamp: https://clipchamp.com/
  • Video editing platform that offers easy-to-use tools for creating professional-looking videos.
  • Streamlabs: https://streamlabs.com/
  • Streamlabs is a live streaming software, but can also be used for desktop audio & video recording.

About

Info on wireframing and prototyping, including a Framer prototype for a learning platform.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published