Skip to content

Latest commit

 

History

History
44 lines (34 loc) · 2.79 KB

README.md

File metadata and controls

44 lines (34 loc) · 2.79 KB

WhatsApp Clone - UI/UX Design Using Figma

Description: This repository contains the UI/UX design for a WhatsApp Clone application created using Figma. The project aims to replicate the key features of WhatsApp, focusing on building a user-friendly, interactive, and aesthetically pleasing interface for a messaging app. This design showcases core functionality like chat interfaces, status updates, voice/video calls, and profile settings, following modern design principles and best practices for mobile applications.

Outcome of the project

video.mp4

image

Features:

  • Chat List Screen: A dynamic list showing recent chats, contact names, last message previews, and profile pictures.

  • Chat Interface: An interactive chat screen with text messages, multimedia attachments (images, videos, voice notes), and emoji support.

  • Status Screen: Users can post and view statuses (images/videos), with indicators for viewed/unviewed statuses.

  • Voice & Video Call Screen: Interface for initiating and receiving voice/video calls with essential call controls.

  • Profile & Settings Screen: Profile picture, name, status editing, and settings for privacy and notifications.

  • Onboarding Screens: Welcome screens with a clean sign-up and login flow for first-time users.

  • Responsive Design: Optimized for various screen sizes, ensuring an excellent user experience across devices.

Tools Used:

  • Figma: Primary design tool for creating high-fidelity screens, prototypes, and reusable components.
  • Prototyping in Figma: Interactive prototype showcasing the flow between different screens and simulating real app functionality.

Installation/Setup:

  • Clone the repository:

bash Copy Edit git clone https://github.com/yourusername/whatsapp-clone-figma.git

Access the Design:

Open the project file in Figma to explore the individual screens, components, and prototype. You can view the design by using the Figma link (shared in the repository or as part of the project).

Interactive Prototype:

The interactive prototype can be explored by navigating through the Figma project to experience the app's flow.

Project Structure:

  • /assets: Contains exportable icons, images, and other visual elements.
  • /screens: Figma frames/screens showing the various pages of the app (chat, status, calls, profile).
  • /prototype: Figma prototype links for interactive navigation.

Contributions:

Feel free to fork the repository and contribute with improvements, bug fixes, or design suggestions. If you plan to make a pull request, please ensure that your changes align with the project’s design principles and maintain a consistent UI.