Home > UX and Prototyping > Challenge: turn your design idea into a hi-fi prototype in one day
Faking it fast: design interactive prototypes in less than 24 hours with Justinmind prototyping tool

Faking it fast: design interactive prototypes in less than 24 hours with Justinmind prototyping tool

Fully functional prototypes help us visualize all the elements and functionality of our end product prior to production. They’re great for pushing through stakeholder requirements sign off, UX cognitive testing, and translating requirements for the tech team.

The problem is that high-fidelity prototypes can take up a big chunk of time out of the product design process. Wouldn’t it be nice if they were quicker to make? In today’s post, we show you how to create a hi-fi prototype and present it the same day. Don’t believe us? Try us – now!

Make Justinmind’s workspace your own

With your great idea in mind, or sketch on paper, it’s time to put hand to mouse and get those design juices flowing! The first step is to get to grips with your workspace and the architecture of your prototyping tool. Knowing where things are will really speed up your workflow. In Justinmind, there are loads of ways to do this.

For starters, take a look at the menu bar, which is organized intuitively by tasks: file, edit, view and then Justinmind-specific simulate, widgets, share, teamwork etc. Having a clear menu bar with everything in its usual place will get you off to a great start.

Next, we’ve got the floating palettes, which you can move around the canvas as you like. If you close and reopen Justinmind, you’ll see that the palettes you’ve moved around remain in those spots – just like having your assigned workspace in Photoshop.

Oh! And design down to the pixel in no time. In Justinmind, the nifty grids, rulers and guides support the overall composition of your screens and allow you to arrange and shift elements around the canvas with ease. The ‘snap to geometry’ option is based on the default guides in Photoshop that help you to keep things aligned in a matter of seconds. Neat!

And last but not least, make use of our keyboard shortcuts. Tiny but mighty!

Stock up on ready made UI elements and templates

Don’t waste your energy creating industry standard UI assets and icons from scratch. Justinmind stocks 200+ pre-built UI kits for iOS, Android, Windows, and Bootstrap, and there’s a whole bunch more to choose from on our website. Use these in your prototypes to help build up your designs and communicate branding in no time. It’s just a simple drag and drop from the widget library to the canvas.

When you open Justinmind, you’ll notice that there are templates attached to the new prototype that you create. There are default formatting attributes and styles that define each prototype and its elements that you create and design with. Each element takes on the default style (background, border, shadow etc.) defined in its template, which means that you don’t have to waste any time reverting them to default. And if you do want to customize the templates, no problem. These styles are fully editable.

Export your designs from other tools and get the best of both worlds

We love it when things just work. Like when design tools work together – super satisfying!

Take our new Sketch plugin for example. Now that Justinmind is integrated with Sketch, you can easily export your artboards to Justinmind and work on them further – make them even more stunning or go straight for the events. Either way, you’ll save yourself time not having to replicate Sketch elements inside Justinmind.

You can also copy and paste images from ux tool Illustrator and make customize to the style of your SVG vectors with next to no effort.

Break the habit of repetitive design by reusing content

We often find ourselves repeating ourselves throughout our UX design process because we either don’t know a workaround or just can’t be bothered to figure one out.

But the fact is that reusing content and preserving design material is a fool-proof way to avoiding tedious repetition that really slows down the workflow and grinds down the UX designer. With Justinmind, you’ve got templates and masters that will rescue you from monotonous design burdens.

Templates (mentioned above) are a great starting point for your prototype. Easily reuse content, assets and screen layouts for quick prototyping. You can define styles and set a standard across the entire project.

Masters help you spread global changes, circulating changes across all instances in the prototype. Effective use of masters is key to reducing rework and saving time. Designing a high-fidelity prototype in a matter of hours- every shortcut counts!

Interaction attraction

Setting user interactions to make your prototype functional is super simple. Define rich events and make your prototype zoom in seconds – no code required.

The easiest way to make your feature-rich prototypes clickable is to use the linking feature. Simply drag and drop the UI element to the place you’d like the audience to go to upon interacting with it. Simple buttons and subtle links can add a level of elegant interactivity to your prototype.

But you can just as easily step up the level of interaction in a flash with our full Events system – packed full of animations, effects, transitions and mobile gestures.

Simulate and share at the speed of light!

Once you’re ready to show someone your prototype, there’s no need to mess around with printing screens or exporting to HTML. You’ve actually got a few options for presenting your high-fidelity design.

You could simulate your prototype to share in the boardroom, or more intimately with small groups or individuals on your desktop or mobile device screen.

You could send your team or stakeholders a link direct to their inbox so that they can view the design in their own time. You can also invite them to review your prototype – they’ll add comments and you’ll have lightning fast feedback to implement and create iterations off of.  Snap!

Finally, you can engage Justinmind’s Teamwork features which means that you and team can work on your prototype simultaneously – saving time and collaborating. Huzzah!

So what are you waiting for? Try out Justinmind now and make your speediest fully, functional prototype yet. And we’d love to see it! If you’re up for sharing, send us a link via our twitter handle. Cheers!

Prototype Faster. Communicate Better.


Emily is Marketing Content Editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *