"From UI to AI" – Focused on how I designed the Figma UI to match the deep learning model
🧠 From UI to AI: Designing My First Deepfake Detection Tool
Most people think AI projects are all about models. But if no one can use what you’ve built, does it even matter?
That’s the question I asked myself while working on my Deepfake Detection App. In my first blog, I shared how I trained a model to detect manipulated videos. But in this post, I want to show you how I connected the dots — from designing the interface in Figma to integrating it with the backend code.
---
🎯 The Challenge
I wanted to make something that looked clean, modern, and usable — especially for people on platforms like Instagram who may not be tech experts.
My goal:
Keep the UI minimal
Make the flow intuitive
Reflect the seriousness of the problem (deepfakes) while keeping it accessible
---
🖌️ Designing the Interface in Figma
Before a single line of code, I jumped into Figma.
Here’s what I built:
📥 Upload screen for users to add video files
📊 Result screen showing confidence score and detection output
💬 Clean text prompts, subtle icons, and minimal distraction
---
⚙️ Bringing It to Life with Code
I used:
Python + OpenCV to extract frames from videos
Deep learning model (CNN-based) to classify fake vs. real
Flask/Streamlit to serve the interface
Integrated the UI workflow from Figma into HTML and component layout
---
💡 What I Learned as a Student
Design before code saves a ton of time
Users don’t care how cool your model is if the interface is clunky
UI/UX is just as important as the AI model, even in a technical project
You can’t copy-paste good design — it needs empathy and clarity
---
🗺️ What’s Next?
I want to:
Host it on a website or Android app
Add drag-and-drop video upload
Include a real-time prediction bar as the video plays
Publish my dataset and model on GitHub
---
🔚 Final Thoughts
If you're working on AI projects, don’t ignore the UI. What users see is what they'll remember.
And if you're someone who wants to dive into AI + design, feel free to reach out — I'm learning, building, and always happy to share what I know!
