How to prototype a photo sharing app
Say cheese! Create a fun, user-friendly and easy to use photo sharing app in Justinmind with these 5 simple steps
Did you know that over 140 billion photos have been uploaded to Facebook? Or that Instagram boasts 800 billion active users? We live in a world that is photography obsessed. Whether it’s uploading one of a thousand selfies or a snap of our most recent meal, we’re a generation of people who express ourselves through the pictures we take and share.
With smartphones now shipping with professional level cameras and entire movies being filmed on them, it looks as though this snap-happy trend isn’t going anywhere. So, with that in mind we thought we would show you how you can prototype a photo sharing app with Justinmind.
What is a photo sharing app?
A photo sharing app does exactly what it proposes to do. It’s an application that has been designed with the purpose of letting its users share their photos with an audience, creating their own feed and to a large extent growing their personal brand.
Prototype your own photo sharing app. Download Justinmind.
What can you do on a photo sharing app?
- Follow other users including friends and family
- Discover new photos using search functions
- Use hashtags
- Comment and like others’ photos
One of the most significant features of photo sharing apps is their ability to edit and manipulate your photographs, similar to traditional photo editing software like Photoshop. Users can pick from a vast array of unique filters and styles which can be applied to their photographs.
The most popular photo sharing app is Instagram. It has a multitude of different features built into it, which we can get into when we prototype our own photo sharing app. Instagram dominates the social media scene; however, there are other photo sharing apps such as Flickr and VSCO Cam which are also popular.
Photo sharing app features: design and functionality
When designing a photo sharing app, it’s important to bear in mind some best practices which can guide you during the planning stage. These best practices are based on what features a photo sharing app should have and will offer the best UX design:
- Login screen
- ‘Take a photo’ button
- Global feed
- Personal feed
- Profile page
- Aggregated feed
- Push notifications
Photo sharing apps like Instagram have all of the above features and then some. But in our walkthrough we’ll just cover some of the fundamentals that you can put into practice when wireframing or prototyping your photo sharing app.
How to prototype a photo sharing app
A photo sharing app may seem like a daunting task but fear not. When broken down into easily digestible chunks, it’s not so scary. Let’s start with a simple login form.
Create a login form
Most photo sharing apps, and most apps, have a basic login screen. This is essential so that people can login to their account and access their information, such as viewing their feed.
In Justinmind, create a new prototype. You can choose iPhone or Android, this walkthrough applies to either. First, drag a dynamic panel to the canvas, ensuring it fits the whole screen. You will then place your content within these panels. Drag two text fields, two input fields from the widgets panel which will be used for putting in a username and password. Style it how you wish — but make sure your styling is consistent across screens.
Under your input fields, drag a button. In the screens panel, create a new screen and name it global feed. To make life easier, simulated login forms in Justinmind are automatically linked to the next screen, found in the Events tab below. To link manually, click ‘Add Event’ and choose ‘On tap’ then ‘Link to’ and choose screen two, which you created earlier.
Create a global feed
In the global feed screen which you just created, we will begin to put together the UI elements needed for your photo sharing app. Start by dragging an image widget onto the canvas and stretching it out full length of the screen horizontally. You can double click it to insert an image of your choice.
All apps have icons and our photo sharing app is no different. We will need a few icons on this screen — a heart to indicate a like, a sharing icon and so on.
You can create your own icons to import or add Android Lollipop or Apple iOS icons to your widget library directly from the widget panel or from our widgets page.
When you have the icons you want to use, you can use change style events to simulate an action. Let’s add a heart to the canvas, just below our photo. In the events panel, add an event > on tap > change style. Here you have the option to change the color, the transparency and other styling options to your own taste. Now when you simulate your photo sharing app, the heart will change color upon tap.
Create a navigation bar
At the bottom of your global feed, you will create a navigation bar. Here we can add further icons such as a home icon, a profile icon and a search icon. These icons can be linked to additional screens which you will create. Use the Events panel to switch between screens, as we did with the login button earlier. We’ve put our ‘take a photo’ icon at the top right corner.
In the events panel for the camera icon, you can link to a new screen with a screenshot of the camera open to simulate the function of that button.
Switch between grid and list views
With most photo sharing apps, users can freely switch between a listview or a gridview.
In Justinmind, one of our powerful prototyping features is wrapping widgets in containers. This means you can create a tiled feed in your photo sharing app.
In a dynamic panel, place the images within the panel and make sure to change the Vertical and Horizontal Overflow to wrap in the Properties panel. There are also options to change the spacing and padding to give your image space between them. Make sure to create the relevant view option icons necessary for users to make the change. Then use Events > On Tap > Set Active Panel.
For both the list view and the grid view, you will need to create them individually in their own dynamic panel and link them using the events panel.
Create an image editor in your photo sharing app
One of the most important features in photo sharing apps is their ability to let you manipulate your photos with different colors and styles. In Justinmind, you can create before and after sliders to simulate photo change styles. Let’s show you how to change a photo from color to black and white.
Create a new screen. This screen will need a header so drag one of those from the widgets panel. This screen will act as your photo editing screen.
You’ll need another dynamic panel, resize it accordingly. Add another dynamic panel within this panel, placing it on the left. The layout should be set to free. In this dynamic panel, add your colored image. In the Outline tab, copy and paste this dynamic panel into the first one so that there are two dynamic panels inside the first. Next, the third dynamic panel should be placed right inside the first — here you need to add a grayscale image.
For the slider, you need an ellipse and line widget. Groups these inside a dynamic panel. Then add two image widgets on the canvas, placing them on either side of the slider. You’ll need to add icons to represent high and low contrast here also.
Once you’ve made your screen with the slider, you can add interactivity to your photo sharing app using Events — here is where you can manipulate the photo and change it from color to black and white.
Conclusion
Prototyping a photo sharing app may have been a daunting prospect for any UX designer but when broken down into easy chunks, it’s simple and anyone can do it — especially when using an intuitive drag and drop interface in Justinmind. In 5 simple steps you’ve gone from nothing to interactive app — bravo!
