/fireframe

Capstone project!

Primary LanguageJavaScript

Fireframe

Fireframe is a web-based wireframing tool with real-time collaboration and version control.

screenshot

Introduction

Have you ever felt like your team uses email for everything, and designs end up getting lost in your inbox? Fireframe solves this problem with its web based design collaboration platform.

Without any previous knowledge, non-designers can quickly create wireframes that designers can easily understand and further develop. This facilitates the creative process for both designers and non-designers alike; therefore, reducing the number of iterations needed to come up with a design.

Main Features

Fully-Featured Editing Suite

  • Multiple elements to choose from:
    • Premade browser window
    • Text boxes
    • Basic shapes
    • Tables
    • Lists
    • Images
  • Components can be customized. You can change:
    • Color
    • Size
    • Opacity
    • Borders
    • Position
    • Etc ...
  • Easily manipulate your designs with built-in keyboard shortcuts
  • Download your project images

Real-Time Collaboration

  • Join a room and build designs together
  • Changes made by one user are immediately visible on the other users' workspaces

Remote access & editing

  • Access and edit your designs anywhere you have an internet connection
  • No need to download desktop software
  • No need to find a meeting location

Version Control

  • See how projects evolve

  • A new version is created each time a version is opened up for editing

  • Any version can be arbitrarily assigned as the master

    • Users can create multiple new versions without committing to a particular one
  • Versions are stored in a tree-like structure

    diagram

How to use it

Creating wireframes is simple:

  1. Go to firefra.me
  2. Login/Create Account
  3. Create new project or edit an existing one
  4. Collaborate real time with your team!

Technologies Used

  • MEAN stack -- Client-side and server-side execution environments
  • Firebase -- Real-time collaboration
  • AWS S3 -- Image storage
  • Webshot -- Screen Capture
  • Interact.js -- Drag and resize elements
  • Bootstrap -- Styling

Team

Gustaf Erickson Liana Chin Gustavo Ocasio Jeremy Bini
Gustaf Erickson Github Linkedin Liana Chin Github Linkedin Gustavo Ocasio Github Linkedin Jeremy Bini Github Linkedin