NAME: AAKHILA FATHIMA J
COMPANY: CODTECH IT SOLUTIONS
ID: CT6WDS1866
DURATION: SEPTEMBER 30TH 2024 TO NOVEMBER 15TH 2024
MENTOR: NEELA SANTHOSH KUMAR
OVERVIEW OF THE PROJECT PROJECT: MOBILE APP WIREFRAMING
OBJECTIVES: Creating a wireframe for the Instagram app requires defining its navigation flow, screen layouts, and basic UI elements to demonstrate how users will interact with the app.
KEY ACTIVITES:
1. Navigation Flow
Instagram’s navigation is primarily based on a bottom tab bar, which remains visible on most screens. Here’s a typical flow:
Bottom Navigation Bar: Includes icons for the main sections:
Home (Feed) Search (Explore) Create (New Post) Reels Profile Top Navigation: On some screens, the top bar includes icons for additional functionality:
Notifications (Direct messages and notifications) Settings (On the profile screen) Camera (Story creation) IGTV (for older versions, separate tab or section)
2. Screen Layouts
Home Feed Top Bar: Logo or title (“Instagram”), plus icons for Direct Messages and Story creation. Story Carousel: Display user’s story icon, plus icons of others they follow. Feed: Scrollable list of posts from accounts the user follows, including: Profile picture and username Post image/video Interaction buttons (Like, Comment, Share, Save) Caption, comments preview, and timestamp. Bottom Navigation Bar: Persistent with icons for Home, Search, Create, Reels, Profile. Search/Explore Search Bar: Search functionality for users, hashtags, and places. Content Grid: Grid view of images and videos (explore content suggestions), tapping opens content in full view. Category Filters: Tabs like "For You," "Fashion," "Travel," and more. Create (New Post) Media Selection: Choose from Camera Roll, or directly open the camera. Editor Screen: Includes filters, cropping tools, and editing options. Caption & Tagging Screen: Add caption, location, tag people, and sharing options. Reels Vertical Scroll: Each reel fills the screen, scrollable like TikTok. Interaction Buttons: Options to like, comment, and share on the right side. Music and Effects: Displayed at the bottom for reference and interaction. Profile Profile Header: Profile picture, bio, follower/following counts, and an "Edit Profile" button. Tabs for Posts, Reels, Tagged Content: Display in a grid or list format. Settings Gear: Access to account settings, privacy options, etc.
3. Basic UI Elements
Icons: Use of recognizable icons for key actions (heart for likes, speech bubble for comments, airplane for share, etc.). Buttons: Rounded buttons for interactive elements like “Follow,” “Message,” and “Edit Profile.” Typography: Clean, sans-serif font for readability, with larger font for usernames and section titles. Color Scheme: Instagram’s classic colors (gradient for story ring, blue for links, etc.). Animations: Subtle animations on like button, new post transitions, and story creation interactions. Each of these screens and elements work together to provide an intuitive, visually appealing user experience. The wireframe should emphasize clean layouts, ease of navigation, and minimal yet effective use of visual elements to make the experience seamless.
TECHNOLOGY USED: FIGMA
