Here are some mobile wireframes that I have been playing with. Its my first attempt to wireframe anything. I call it “PicStagr.am”, a mashup of PicPlz and Instagr.am. These are two photosharing apps that I really like. I’ve also been using Path (love it), Liveshare (cool) and Color (sux).
So I’ve tried to create my own photo app, based on my experiences with these apps. But it pretty much ended up looking like Instagr.am.
Why? Because I really love the UI, look & feel and everything about Instagram. It is just so easy to use, and I have tried to replicate some of the features that I like about it. I believe that elements of it can be used for other mobile apps. The numbers don’t lie, 2.5 million users in 6 months. PicPlz has about 200k users. And hey, they say that imitation is the best form of flattery =)
Wireframe 1: Onboarding of friends
What I really like about instagr.am was how easy it was to onboard your friends. By that I mean how easy to add them to your new social network on Instagr.am. It uses facebook connect, and you can easily see who in your network is using the app. You just touch “add”, and voila!
There’s also an option to select all, but I havent included it. I rarely use any “add all” option. This interface is just so simple, and enticing to just touch the “add button” for all the people you want to include. You don’t have to go to each person’s profile. You already know who they are because you are friends with them on Facebook. Much easier than using a mouse, just tap “add”!
I’ve also included an option to add friends via email that are not in your facebook network of friends.
Wireframe 2: Uploading photos
What I like about Instagr.am, Path and also Dropbox is that they keep the UI really simple. And it looks gorgeous. Same with Airbnb as well. I think there’s been a renewed focus on user centered design and designing things that just look awesome. I believe that Apple helped pave the way for this.
Here, we’ve kept it really simple. I wanted to keep the layout very similar to the first wireframe. Give it a consistent user experience, so the user does not get confused and knows exactly where everything is.
You hold the phone camera in front of the subject and can select one of these four buttons at the bottom:
1. Share to social network: Facebook, Posterous, Tumblr, etc…
2. Filters: What Instagr.am does is that it makes ordinary pictures look extraordinary by giving it an older or tinted look. Potentially their business model could be selling additional filters. Filters that other people don’t have.
3. Camera icon
4. Delete the current pic
Button 1, 2, 4 cannot happen without taking the photo first. I like to keep the camera icon in the middle, because the user will naturally look for it.
I probably should have put a “done” button in Wireframe 1 in the top right hand corner as well. Its pretty much a save button.
Wireframe 3: View Stream
I actually really like what Picplz does with this. Their grid of pics shows the best pics from the public. Your network of pics on PicPlz is actually vertical. You scroll down, but sometimes it takes too long or you don’t want to see too many of a particular person’s photo. I also like how instagr.am also allows for content discovery of cool pics as well.
I like the grid format because it enables you to view a lot of thumbnail pics at once. Similar to how Facebook albums works, you can view them all and select the ones you like.
I’ve tried to keep a consistent format with top banner and bottom banner with the 4 icons.
That’s all for now. I’d love to hear your feedback on my first attempt to do some mobile wireframes and my analysis.
I’m out like digital cameras,