Advanced Interactive Photo Sharing App Prototype
Tools: Figma
"Photogram" is an advanced mobile app prototype designed as a streamlined alternative to Instagram, focusing solely on authentic content sharing without ads, marketing, or algorithmic clutter. Built in Figma, this project showcases my ability to craft a clean, user-focused UI/UX experience with advanced interactivity and a refined design system. The app prioritizes simplicity and connection, allowing users to engage only with content from people they follow—nothing more, nothing less.​​​
​
Explore on Figma
Main Goal
​
The primary objective of Photogram was to design a simple, no-nonsense photo-sharing app that strips away the noise of ads, sponsored posts, and irrelevant content. Unlike other platforms, Photogram ensures users see only the photos, videos, and reels from accounts they follow, fostering a more intentional and personal social experience.
Interactive Components: Built buttons and icons with hover states and click interactions.​
Hover, Scrolling, and Fixed Elements: Added hover effects for post actions and fixed navigation bars.​
Aligning Objects & Layout Grids: Ensured pixel-perfect alignment with visible grids.​
Auto Layout: Streamlined responsive design for dynamic content.​
Constraints: Kept elements adaptable across screen sizes.​
Styles & Typography: Defined consistent fonts and text styles (e.g., "Inter" for body, "Playfair Display" for headers).​
Variables: Used for reusable color values and responsive text sizes.​
Generating a Color Palette: Created a semantic palette (e.g., #E8ECEF for backgrounds, #2D6A4F for accents).​
Component Properties & Variants: Designed modular buttons and icons with multiple states (e.g., active/inactive).​
Publishing Libraries: Organized reusable assets like icons and callouts.​
Advanced Prototyping: Linked screens with smooth transitions and micro-interactions.
Home Feed: Chronological post grid with hoverable like/comment icons.
Upload Screen: Simple drag-and-drop interface with basic editing tools.
Messaging UI: Clean chat window with sent/received bubbles.
Live Broadcast: Full-screen video with viewer count and join button.
Explore Page: Grid of suggested profiles with follow toggles.
This project helped me master advanced prototyping in Figma, while also refining a scalable design system that mirrors real-world application. I’m especially proud of how clean, fast, and user-centric the interface feels—delivering exactly what users need and nothing more
What I’m Proud Of
This project helped me master advanced prototyping in Figma, while also refining a scalable design system that mirrors real-world application. I’m especially proud of how clean, fast, and user-centric the interface feels—delivering exactly what users need and nothing more
