Application Prototyping With #JustInMind (No Coding Required)
“Justinmind Prototyper lets you create interactive wireframes with interactions, animations, and even data without ever having to worry about code. From start `to finish without any technical expertise or programming knowledge; it is the perfect tool to visualize designs before moving on to coding” — JustInMind
We’ve all had a “million dollar” app idea that we thought about creating–but forgot about when we realized we did not have the “tech” skills required to develop it. Luckily, for those (like myself) who have zero understanding on how to write code but are still determined to bring an app idea to life; we have access to wireframe and interactive prototyping software like JustInMind to aid in our journey.
What Is A Wireframe/Prototype?
A wireframe and/or prototype is visual representation of what an application’s user face and layout will look like. It provides developers with an idea of the platform that a company/person intends to build and it is used to “convey the basic concept, layout, and flow of the envisioned end product.” The purpose of a wireframe and/or prototype is to provide an overall blue print to showcase exactly how the app will look and feel once it’s in the users hand. Using wireframes and prototypes allow UX designers to accurately communicate the design of the app with the developers who will ultimately be writing the code to support the system.
But, wireframes and prototypes are not the same. To break it down, “wireframes are low-fidelity, basic layout and structural guidelines of your web product’s layout and prototypes are an advanced wireframe with more visual detail and interaction.”
Why Use Wireframes/Prototypes?
By creating wireframes and prototypes in the early stages of forming your app idea, you don’t just save time and money by skipping the process of writing actual code, but you benefit because it allows you put the prototype in the hands of a potential user and instantly get feedback. Using a prototype to observe how a potential user navigates through the interface allows you to take a more human centred design approach because you can observe how the person interacts with the platform and see if there is any areas of frustration that need to be adjust before proceeding to the next stage of building the application.
The process of going straight to your customers with a prototype in the early stages–opposed to sitting in an office designing the platform for months (waterfall production) is part of design thinking and the learn startup methodology.
Building A Prototype Using JustInMind:
Getting Started:
For the purpose of this blog post, I will introduce some of the most basic features of the JustInMind software and showcase the tools that will allow you to build a quick and easy interactive prototype for any app idea.
Download Software: The first thing you need to do is create an account and download the 30-day free trial of the JustInMind softwate by clicking here. Alternatively, you can purchase the professional subscription for $19 USD per month or the enterprise subscription for $39 USD per month.
Chose Device: The software allows you to build your prototype for any device you can think of using their preloaded templates. “You can define websites and apps for Web, iOS, and Android with our intuitive drag-and-drop interface. No code involved”. For my example I will be using the “iPhone” device.
Overview of Software: Once you have selected the device template you want to work on, your blank device template will automatically open. But, don’t get discouraged just yet if you think the platform looks too complex. I will walk you through each of the different tools that are available to aid in building your prototype within the software.
Tools:
1.) Widgets: After you browse around the software for a few minutes, take a look at the widgets tab. The widgets tab contains almost every single IOS button, header, form and icon that you would find on an iPhone (or which ever device you selected) and using these widgets you will be able to make a realistic feeling prototype for your own application by dragging and dropping these widgets onto your template.
2.) Sreens: The screens section is where you are able to create new screens for your prototype. The screen list shows the different screens and pages that you have created for your prototype and here you can drag and drop to order them and link them together.
3.) Proporties: This panel allows you to edit the properties of your template, such as the background colour of your screens, outline colour on your widgets, position of frames and transparency of items. To edit a specific property from your template, ensure you have that element individually selected from your canvas (click to select).
4.) Outline: The outline section enables you to see the different layers that exist within each screen of your prototype, these layers can be the different text boxes, pictures, widgets, screens, etc. Within the actual software, they explain the outline panel by saying “This panel works similar to the layers in Photoshop”.
5.) Simulation: The most fun part of the software is the simulation button. Using this button JustInMind will generate an interactive prototype based on the different screens, links, buttons and widgets that you inserted to your template and pull it together to make a relistic feeling “app” that you can navigate through on your browser. If you are still within your 30-day trial period or are using a paid subscription, the software can also send the prototype directly to your smartphone and you can actually test the application on your device to get the most realistic feeling of the app’s navigation and user interface.
Putting It Together: Although we only covered the most basic features of the software, the capabilities of JustInMind prototyping tools are extensive. This application is most definitely not just a platform that is solely for beginners without any UX/coding experience and is used by many industry professionals/companies who want to visualize and validate there ideas before making huge investments into developing the application from scratch.
Here is a GIF showing the simulation for my prototype application that I built for the EID 100 program at Ryerson University. I will showcase and further explain the entire prototype that I built for the EID 100 platform in my next blog post (Module#8).
For a more interactive demonstration on how to get started with the JustInMind software, check out this YouTube video by JustInMind:
