Instagram Web Design
Hello people, I hope everyone is doing great. I would like to introduce my design of #Instagram web. Also, you can compare my design with the original Instagram app and provide the feedback. Well this is not 100% complete design, but It will show you how it looks.
Home Screen & Stories
here you can see it’s a home page. Tab bar is on Left side of your screen which you see this feature in smartphone app design in bottom of the screen. You can easily access the posts from people to whom you follow, also you can see top comment and like, comment, share and save buttons. There are two navigation buttons on first post where you can see next and previous pic, which include in that post. On your right side, you are seeing stories from people also you can reply, mute, play and report to the story. And above that there are two buttons for create a post and message your friends and followers.
Messages
Previously you have seen home screen features, Now here is the Messages menu which is switched from following users stories. On the top you will see lock option which locks & blur your screen with tap lock OR Pin lock to hide from people nearby you. Below that, search and new message option is available where you can search messages and contacts by text or by name of your Instagram contact. Below that .you see pinned messages option where you can pin up to 3 chats in that option, for not to lose the messages from your loved one or important person. Next to username you see camera option to easily send or click picture and send it to that person. Just drag and drop a pic from your computer or click on the camera button to click a new image or record the video.
Reels
Reels option is available at the same of messages and stories. you can see same features, but I have added two new transparent buttons which helps user to play next or previous reel video, this is better option to click and swipe through your desktop mouse :) also the follow button is transparent. You can barely see those effects but don’t worry I will attach High quality preview image link in end of the story.
Search
As you can see on the Tab bar, the search icon is thick now to show you are in the search menu. In search menu you can see search menu bar with QR code option and below that random top posts. In right-hand side can your chat is locked where it’s completely blurred out your chat screen to hide your personal chats, to unlock just click on lock icon.
Profile
I was very confused here and wanted to fill all the places from the screen, but I didn’t succeed here :/ You can comment below and give me idea to make this looks better, if you can.
Well, on the top middle you can see your profile. In your profile you see a profile picture, a circle around the picture indicates you have seen your own story. Next to your username, you see the button with down arrow to switch your profile or add a new profile to the app. Below that, Posts, Reels & Saved posts option you see. Well I wanted to try to add tab feel there, but This also looks good. In right-hand top you see add posts, story, Reel, IGTV video button and next to it, menu button is there, and it’s only available on profile menu. Below that, you see suggestions, If you want to remove suggested user then just grab your mouse on the user, you will get a small (x) button to delete the suggested user also you will see undo button for next 3 seconds if you by mistake deleted the suggested user. Below that you can see other options which nobody cares stuffs actually :p
Very few options I have not added or not showed in my project, but you got an idea how your future Instagram web actually has to look compared to current Instagram web design. Trust me you will love my design compared to current design, Don’t believe me? check out Original instagram Web app here.
That’s it for now, you can download these screenshots here, thank you so much. See you with the new App designing. :)
