https://github.com/jillmpla/wireframes_and_prototyping

Info on wireframing and prototyping, including a Framer prototype for a learning platform.
https://github.com/jillmpla/wireframes_and_prototyping

framer prototyping wireframing

Last synced: about 23 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/jillmpla/wireframes_and_prototyping
• Owner: jillmpla
• License: mit
• Created: 2024-07-06T19:15:19.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-06T19:42:33.000Z (4 months ago)
• Last Synced: 2024-07-06T20:29:20.500Z (4 months ago)
• Topics: framer, prototyping, wireframing
• Homepage:
• Size: 12.9 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://www.figma.com/community/plugin/732603254453395948/stark-accessibility-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.