Wireframe Tool

Table of contents

• Wireframe Tool Project Report
• Snapshots
  • Home Page
  • Login and Signup Page
  • Dashboard Page
  • Editor Page
• 1. Introduction
• 2. Purpose
  • What is a Wireframe?
  • Why Use Wireframes?
  • Benefits of Using Wireframes
  • Objectives
• 3. Modules
  • 3.1 User Authentication Module
  • 3.2 Wireframe Design Module
  • 3.3 Collaboration Module
  • 3.4 Storage and Database Module
  • 3.5 Export and Sharing Module
• 4. Functional Requirements
  • 4.1 User Authentication
  • 4.2 Wireframe Creation
  • 4.3 Collaboration
  • 4.4 Data Storage and Retrieval
  • 4.5 Export and Sharing
• Additional Functional Requirements
  • 1. User Management
  • 2. Draft Management
  • 3. Asset Management (Admin)
  • 4. Draft-Asset Relationship
  • 5. Security & Authorization
  • 6. Database Constraints
  • 7. Import/Export
• ER Model
• Relational Schema

June 20, 2025

Wireframe Tool Project Report

Institute: Birla Vishvakarma Mahavidyalaya
Project Repo

Group Members:

• Mukund Parmar (23CP014)
• Jaivik Prajapati (23CP002)

Snapshots

Home Page

Login and Signup Page

Dashboard Page

• Send verification email
• Edit or delete draft
• Create new drafts

Editor Page

• Name and create drafts
• View/search all drafts

1. Introduction

The Wireframe Tool is a web-based application designed to assist UI/UX designers in creating wireframes efficiently. The tool provides an infinite canvas where users can collaboratively design, modify, and share wireframes. It is developed using the LAMP stack (Linux, Apache, MySQL, PHP) and aims to streamline the design process with real-time collaboration features.

2. Purpose

The primary goal of this project is to create an intuitive and feature-rich wireframe design tool that allows users to design interfaces collaboratively.

What is a Wireframe?

A wireframe is a simple sketch or blueprint that shows the basic layout of a website or app.

Why Use Wireframes?

• Clarify ideas.
• Get early feedback.
• Save time.
• Focus on function.

Benefits of Using Wireframes

• Improves user experience.
• Faster changes.
• Clearer development.
• Saves costs.

Objectives

• Provide an infinite canvas for designing wireframes.
• Enable real-time collaboration through link-based sharing.
• Store and retrieve wireframe data efficiently.
• Offer an easy-to-use UI without coding knowledge.

3. Modules

3.1 User Authentication Module

• Registration and login
• Secure session handling
• Password encryption and reset

3.2 Wireframe Design Module

• Infinite canvas
• Drag-and-drop UI elements
• Layered object management

3.3 Collaboration Module

• Shareable links
• Real-time sync via WebSockets/AJAX
• View/edit permission management

3.4 Storage and Database Module

• MySQL storage and retrieval
• Load previous designs
• Optimized queries

3.5 Export and Sharing Module

• Export to PDF/PNG/SVG
• Unique sharing links
• Print-ready outputs

4. Functional Requirements

4.1 User Authentication

• Secure login/logout
• Password hashing
• Session management

4.2 Wireframe Creation

• Drag and drop elements
• Resize, move, delete
• Undo/redo support

4.3 Collaboration

• Invite via link
• Real-time updates
• Shared views for all collaborators

4.4 Data Storage and Retrieval

• Save wireframes in DB
• Access previous work
• Autosave support

4.5 Export and Sharing

• Export to standard formats
• Shareable links
• Print options

Additional Functional Requirements

1. User Management

• Register with email, username, password
• Role-based access (admin/user)
• Update profile info

2. Draft Management

• Create/view/edit/delete drafts
• Use assets in drafts

3. Asset Management (Admin)

• Add/update/delete assets
• Assets linked to drafts
• Access control

4. Draft-Asset Relationship

• Multiple assets per draft

5. Security & Authorization

• Only authenticated users can access features
• Hashed passwords

6. Database Constraints

• Valid user-draft relationship

7. Import/Export

• Drafts as JSON import/export

ER Model

Relational Schema

---