What’s a mockup?
A mockup is a very simple, small and easy-to-build sample of your final product or vision. If you were an architect planning a building for a client, you would build a mockup of the building in real life or 3D. If you were a developer who was planning and developing a new app, before you even begin to write a single line of code, you would work on a mockup.
A mockup’s purpose is to put all your ideas from your head down on paper while it’s still fresh. Here you write down all the ideas, features and functions, sketch out the UI, UX, and brainstorm the functionality. From there, you would begin to sketch out or wireframe your projects with simple shapes, but the purpose is to display or communicate your ideas to the public.
Nowadays, if you google search “mockup” or “wireframe”, you will find hundreds of tools, examples, samples and services that you can use to help you build a kickass mockup. For example, if you were planning on starting a T-shirt company, you can find T-shirt mockups in Photoshop that you can download and start planning out.
In this article, my objective is to find the simplest and best for collaboration for non-developers. We are going to go through a list of mock up tools we can use to build an impressive representation of our app.
I will judge the services I’ve found online based on three criteria.
- Simplicity – How easy it is to build my mockup without googling.
- UX – How easy it is to be able to navigate through the program
- Collaboration – Is it easy to invite my team members and start working?
I judged from the POV of a non-developer and non-designer, i.e. someone who’s brand new to the whole world of development and wants to get their hands dirty.
FluidUI is a online mockup service that’s been around for a few years. I’ve used it in the past and, back then, it was a bit buggy. But in the past three years, it really has improved its UX, effectiveness and overall performance.
One of the things I love about FluidUI is it’s pre-built library of iOS, Android and general stock images, icons and design. Say you’re building an app for iOS 10. Well, instead of spending time on google gathering and looking for elements like status bar, button icon, etc, FluidUI has it prebuilt that you can simply drag and drop onto your project.
The web app itself is pretty straightforward – it’s all drag and drop, and if you’re ever worked with Powerpoint, Google Slides or Apple’s Keynotes, it’s a lot like that. A very simple and easy-to-use system.
Another great feature is it’s easy-to-follow layout. There aren’t hundreds of complex buttons and options to choose from. Just a few drop boxes where you specify your device, operating system and size. After that, you’ll be given some hints on the screen on how to start. The templates, icons and everything else you need is always open in front of you on the left. It’s really simple to navigate without getting lost.
And for the final factor I like: FluidUI is the simple collaboration of team members on a project. One thing to keep in mind is the fact that for team collaboration, one person must upgrade to the Team Account plan, and from there, they can invite up to four members, thus five in total including yourself. Team members can share and collaborate as well as copy and clone projects to test new directions. If you’ve messed around with, or heard of, Git or Version Control, it’s a bit like that.
Another great choice is Marvel App, and it’s also an online service. The difference is this would be ideal if you had a designer and someone who knew a bit of programming. In Marvel Apps, you can create realistic mockups that you can actually interact with using buttons, forms and other elements. The downside is that it can be a bit intimidating for those who aren’t programmers or designers.
This can go both ways: you can create simple mocksup like in FluidUI, where they are more like slides or images, or you can create complex interactions. In the end, it’s up to you, with its simple drag and drop system.
Marvel App also has a great UX like FluidUI. The buttons are big, bright and easy to understand. Navigating through the site and project is fairly simple. A few hours behind the site and you should be confident in navigating it.
Collaboration is also simple in Marvel App. You can bring in team members to help build up your mockup or prototype. But with its abilities, if one member adds a bad function or messes up the coding aspect, it can disrupt the entire project.
As mentioned, Marvel App would be best for teams that have an designer who can create the UI, plus a programmer who can build the UX and functionality. For those without either, FluidUI is your best choice for simple, ready-to-start mockup creation.
For some inspiration on mobile app design, it’s always best to reflect from your own experience. Take out your phone and instantly open up your favorite apps: Spotify, Instagram, your bank app, etc. Take a look at the UI or elements and see if it’s easy to navigate through your app or not. Another thing to think is how would you improve it?