Shri Shivaji Education Society Amravati
Dr. Panjabrao Deshmukh Polytechnic Amravati
Semester: 4th
Branch: Computer Engineering
Academic Session: Summer 2024-25
Micro Project Topic: Prepare a prototype for online
blog using Figma
Guided By: Prof. S. A. Deshmukh
UNDERTAKING
I declare that the work presented in this project titled “Prepare
a prototype for online blog” submitted to the 4th semester
computer department of Dr. Panjabrao Deshmukh polytechnic
Amravati. Bareilly for the award of the Bachelor of
Technology diploma in computer Engineering, is my original
work. I have not plagiarized or submitted the same work for
the award of any other diploma. In case this undertaking is
found incorrect. I accept that my diploma may be
unconditionally withdrawn.
2024-25 Shreyash Vijay Zade
Bhargav Dashrath Khule
Sujal Pramod Kadu
Utkarsh Anil Gedam
[Link] NAME OF RESOURCES
1 CERTIFICATES
2 ACKNOWLEDGEMENT
3 GROUP DETAIL
4 INTRODUCTION
5 OBJECTIVE
6 TOOLS AND TECNOLOGIES USED
7 METHODOLOGY
8 SCREENS DESIGNED
9 OUTPUT
10 CONCLUSION
11 REFFERENCE
CERTIFICATE
This is to certify that the Micro Project titled “Prepare a
prototype for online blog” has been successfully completed
by under the guidance of Prof in recognition to the partial
fulfilment for the diploma in Engineering (Computer
Engineering) (2024 – 25)
Guide by
Prof. S. A DESHMUKH Prof. R. H. RATHOD
Head Of Department
Computer Department
ACKNOWLEDGEMENT
The making of the dissertation needed co-operation and guidance of
number of people. We therefore consider it my prime duty to thank all
those who had helped me through his venture. We are profoundly
grateful to Prof. S. A. Deshmukh guidance and continuous
encouragement throughout to see that seminar right on its target since
its commencement to its completion. We would like to express my
deepest appreciation towards [Link], H.O.D, Computer
Engineering whose valuable guidance supported me in completing the
dissertation. We would like to thank Principal for providing necessary
facility, guidance and valuable time during the period of working on
this dissertation. Last but not the least, we are thankful to my friends
and library staff members whose encouragement and suggestion
helped me in completing my dissertation.
Thanking you…!
Shreyash Vijay Zade
Bhargav Dashrath Khule
Sujal Pramod Kadu
Utkarsh Anil Gedam
Students Group Details
Name of the Student Roll No.
Sujal Pramod Kadu 02
Shreyash Vijay Zade 10
Bhargav Dashrath Khule 12
Utkarsh Anil Gedam 16
Signature of Teacher
Introduction
Prototyping is a key step in UI/UX design, enabling designers
to visualize application flows and user interactions before
actual development. Figma is one of the most popular tools for
collaborative interface design. In this project, we attempted to
replicate the interface of WhatsApp—a widely used messaging
platform—by designing interactive mobile app screens.
This project provided a practical understanding of how to use
frames, components, and connections to simulate user
journeys. The final product is a clickable WhatsApp prototype
with basic navigation functionality, such as viewing a chat,
sending a message, and switching tabs.
OBJECTIVE
The main objectives of this microproject are:
To study the structure and layout of the WhatsApp
mobile interface.
To gain hands-on experience with Figma's design
and prototyping features.
To create a fully designed, clickable UI model of
WhatsApp.
To simulate app functionality such as:
o Navigating from chat list to individual chat.
o Sending a message (simulated).
o Switching between tabs like Chats, Status, and
Calls.
To develop skills in using components, constraints,
and transitions in UI design.
TOOLS AND TECNOLOGIES USED
SR. Tool/Technology Description
NO
1. Figma A browser-based UI/UX design tool
used for designing and prototyping
user interfaces. Offers real-time
collaboration and cloud saving.
2. Laptop/Desktop Used to access and run Figma
through browser or desktop app.
3. Google Chrome / Figma requires a modern web
Browser browser for accessing its web
platform.
4. Internet Connection Required for accessing the Figma
web app and saving project files to
the cloud.
5. Mobile Reference Used as a visual and functional
(WhatsApp) reference for replicating screen
layouts and navigation.
METHODOLOGY
This project was divided into several stages to ensure a
structured design approach:
Step 1: Research and Planning
Analyzed WhatsApp's existing interface using a real
mobile phone.
Noted down the positioning of icons, colors, typography,
and overall layout.
Identified key screens and interactions to replicate.
Step 2: Wireframing
Created low-fidelity wireframes for:
o Main Chat List
o Individual Chat Screen
o Status Tab
o Calls Tab
o Settings Page
Focused on layout and structure before working on
visuals.
Step 3: Designing UI in Figma
Used mobile frame sizes (Android/iOS).
Added UI elements: header bar, chat list tiles, chat
bubbles, input field, etc.
Maintained design consistency using reusable components
(e.g., chat tile, message bubble).
Step 4: Prototyping
Used the "Prototype" tab in Figma to:
o Link Chat List to Chat Screen.
o Link back to Chat List from Chat Screen.
o Navigate between tabs: Chats, Status, Calls.
Used interactions like “On Tap” and animations like
“Smart Animate” and “Slide In”.
Step 5: Testing
Ran the prototype in Figma’s Preview mode.
Made design corrections based on navigation clarity and
visual alignment.
SCREENS DESIGNED
1. Splash/Welcome Screen: Initial screen with WhatsApp logo.
2. Login or Entry Screen: (Optional) Simulated version with
mobile number input.
3. Main Chat List: Contains a scrollable list of recent chats with
profile pictures, names, and message previews.
4. Chat Screen: Shows full conversation between two users
with:
o Message bubbles (sent and received)
o Timestamp
o Text input box and send icon
5. Status Screen: Displays user status and ability to add/view
others' statuses.
6. Calls Tab: List of recent calls (voice/video), with call icon.
7. Settings Screen: Basic settings menu options like Profile,
Privacy, and Help.
OUTPUT
OUTPUT
Conclusion
This microproject provided hands-on experience with a real-
world UI/UX design workflow. Designing a WhatsApp clone
challenged me to think about layout structure, component
reuse, user flow, and visual hierarchy. I learned how to:
Design screens using frames and layers.
Create reusable components.
Link screens to simulate navigation.
Test and improve a prototype based on feedback.
Overall, this project strengthened my design thinking and
Figma skills.
Reference
[Link] - Official Figma Website
[Link] - Official WhatsApp Website
YouTube -- Figma UI Design and Prototyping Tutorials
Medium articles and design blogs
Mobile device for WhatsApp UI reference
