8 Inspiring

Wireframes
& Prototypes
Web and Mobile
prototype examples,
made with Justinmind

1
8 Inspiring
Wireframes
& Prototypes No matter whether youre Dieter Rams or Ethan

Web and Mobile Marcotte, everyone needs a little design inspiration

prototype examples, sometimes. Especially when building web and

made with Justinmind mobile apps.

The best web and mobile designs may look and feel
like they sprang perfectly polished from the designers
brain, but everyone involved in digital product design
knows that behind every perfect user interface there
lie many, many interfaces fallen by the wayside.

Wireframes and prototypes allow design-development

teams to get bad ideas out of the way, fail forward,
and focus on users. Thats why we put together this
collection of the best wireframes and prototypes
created with Justinmind to serve as inspiration for
your next application design project.

2
In 8 Inspiring Wireframes & Prototypes, Product
managers, Information Architects, UI designers and
UXers will find something to light the way to their
next project. Bounce off the 8 examples to:

- Innovate with animations and gestures.

- Experiment with data-driven prototyping.
- Play around with navigation flows and architecture
- Simply get inspired.

Before we get started, a little terminology

- Wireframes provide low-fidelity layout and structural

guidelines to your web and mobile software.
- Prototypes are high-fidelity, advanced wireframes
with more visual detail, interaction and verisimilitude.

Whether youre looking for a simple wireframe to

sketch ideas, or a full-on interactive prototype to
impress clients, youll find inspiration in these 8
BUILD YOUR OWN PROTOTYPE NOW
wireframes and prototypes, all of them made with
Justinmind. DOWNLOAD JUSTINMIND

3
 INDEX

1 Videona,
social video sharing 6
MOBILE

2 Kurt Stangl, Darby

Internet of Vehicles 8
WEB

5 Diego Ocampo,
ChattyHive 14
Tom Murphy, MOBILE

3 Netflix Movie Club 10

TABLET

6 Siraj Salim, Online

Educators Platform 16
Jos Mora, WEB

4 Gasto Amigable Municipal 12

WEB

7 Michael Healey,
Roundtown events app 18
MOBILE

8 Boris Iglesias, Single

sign-in for Canada Post 20
WEB

4
8 INSPIRING
WIREFRAMES &
PROTOTYPES,
MADE WITH
JUSTINMIND

5
1
VIDEONA,
SOCIAL VIDEO SHARING
MOBILE

Social video platform

Videona created an
interactive mobile prototype
of an app for uploading and
sharing short videos.

The prototype is a complete app

experience, comprising uploaded videos
organized in cards, and floating action
buttons inspired by Google Material
Design principles. The guys at Videona
have built out tons of screens, creating
a full navigation experience that will be
great when they do user testing.

6
1
VIDEONA,
SOCIAL VIDEO SHARING
MOBILE

GO TO THE PROTOTYPE

Theres even an interactive upload page

for creating, editing and sharing your
own videos - it feels just like a real social
sharing application. This is a prototype
that gives you the 360 degree experience
of using a real, coded app.

Find out how to embed videos

in your prototypes here

BUILD YOUR OWN PROTOTYPE NOW

DOWNLOAD JUSTINMIND

7
2
KURT STANGL,
DARBY INTERNET OF VEHICLES
WEB

Senior Product Designer Kurt

shared his web prototype for
Darby, a data-driven motor insurance
company that leverages the Internet
of Things. Its a great project and an
awesome prototype!

8
2
KURT STANGL,
DARBY INTERNET OF VEHICLES
WEB

GO TO THE POST

Kurt used Justinmind to make a low to

medium fidelity prototype that promotes
team collaboration. He visualized the
sites functional requirements and did
user testing right inside Justinmind. One-
stop design and collaboration made easy.

Prototyping doesnt fit

into working with teams in
an Agile environment, it IS the
Agile environment.

BUILD YOUR OWN PROTOTYPE NOW

DOWNLOAD JUSTINMIND

9
3
TOM MURPHY,
NETFLIX MOVIE CLUB
TABLET

Tom and two fellow designers

envisaged introducing a new
Movie Club feature to Netflix.
The idea was to enable users to create
a movie night and a shared watching
experience. A user would be able to select
the movie/show, invite their friends via
email, Facebook or Twitter, allow friends
to chat during mutual online viewing, after
setting the time and date.

Tom created his Netflix mobile prototype

in Illustrator and then put it all together in
Justinmind, which enabled him to bring
the experience to life with drag and drop
events. The prototype is intuitive and
perfectly aligned with Netflix branding.
We love Toms idea of making Netflix into
a social experience, and the prototype
really sold the experience.

10
3
TOM MURPHY,
NETFLIX MOVIE CLUB
TABLET

GO TO THE EXAMPLE

Recreate Toms drag

and drop effects

Justinmind was the only prototyping

tool I came across that was laid out
well and quick to understand, as well
as the only one I could create moving
wireframe elements in. In short
Justinmind was an excellent choice
for our project and is an excellent
prototyping tool

BUILD YOUR OWN PROTOTYPE NOW

DOWNLOAD JUSTINMIND

11
4
JOS MORA,
GASTO AMIGABLE MUNICIPAL
WEB

Engineer Jos Mora used

Justinmind to build a hi-fi
prototype for a website that
lets people visualize how
money is spent by their local
authority.

The prototype puts a user-centric spin on

a subject thats usually difficult to digest.

The web prototype, which is simple and

effective, allows users to navigate and
discover information through one-page
scroll and animated transitions.

12
4
JOS MORA,
GASTO AMIGABLE MUNICIPAL
WEB

GO TO THE PROTOTYPE

A Slide Left effect smooths transitions

between screens and gives the web
prototype a responsive feel. Jos also
used his own custom icons, which appear
when users hover over the diagram - we
love the customized touch!

Like Joss one-page scroll?

Learn how he did it!

BUILD YOUR OWN PROTOTYPE NOW

DOWNLOAD JUSTINMIND

13
5
DIEGO OCAMPO,
CHATTYHIVE
MOBILE

This complete mobile app

prototype was created by UX/
UI freelancer Diego Ocampo
Prez, who makes all his
prototypes with Justinmind.

Here, Diego prototyped ChattyHive, a chat

web chat service to discuss your favorite
things and create communities around
them.

14
5
DIEGO OCAMPO,
CHATTYHIVE
MOBILE

GO TO THE PROTOTYPE

The app prototype is full of great UI

elements. A stepped registration form,
created with Justinminds expression
builder, leads to a social media style
homepage showing user stories and
updates. You can download Diegos
prototypes from the repository here
great inspiration!

Make your prototypes smarter

with our expression builder

BUILD YOUR OWN PROTOTYPE NOW

DOWNLOAD JUSTINMIND

15
6
SIRAJ SALIM, ONLINE
EDUCATORS PLATFORM
WEB

Siraj sent us an absolutely

stunning web prototype for an
online platform for teachers.

The prototype is full of awesome

functionality - from log-in forms and
carousels, to filtered Data Lists made
with real user data.

16
6
SIRAJ SALIM, ONLINE
EDUCATORS PLATFORM
WEB

We particularly like the way Siraj has

made it obvious this is still an early
stage prototype with some lorem ipsum
and content placeholders, but has still
added animations and interactive events.
Justinmind lets you define the fidelity
you need for each project - make the tool
work for you, whatever your needs.

Want to filter lists based

on user data?

BUILD YOUR OWN PROTOTYPE NOW

DOWNLOAD JUSTINMIND

17
7
MICHAEL HEALEY,
ROUNDTOWN EVENTS APP
MOBILE

Michael has created a mobile

prototype of an iPhone app for
finding out about events in your
local area.

Theres a great dropdown menu, created

with Text Table widgets, plus interactive
Google maps integrated with
the prototype.

18
7
MICHAEL HEALEY,
ROUNDTOWN EVENTS APP
MOBILE

GO TO THE EXAMPLE

Michael wanted to prototype a mobile

experience that was familiar, with
very little learning curve. Mission
accomplished the apps navigation
experience is flawless.

Create your own drop-down

menus with this tutorial

BUILD YOUR OWN PROTOTYPE NOW

DOWNLOAD JUSTINMIND

19
8
BORIS IGLESIAS, SINGLE
SIGN-IN FOR CANADA POST
WEB

Regular Justinmind user Boris

built web prototypes for a project
he did with Canada Posts digital
Delivery Network.

As this is an enterprise project, Boris used

Justinminds advanced requirements
definition and management features to
document his work.

20
8
BORIS IGLESIAS, SINGLE SIGN-IN
FOR CANADA POST
WEB

GO TO THE EXAMPLE

He also took advantage of our Scenarios

features to define use cases and critical
paths. Thanks for sharing Boris!

Curious about Justinmind Enterprise?

We got you covered

START PROTOTYPING!

DOWNLOAD JUSTINMIND

21
So what are you waiting for? Download
Justinmind now and start creating your own
wireframes and prototypes for web and mobile.
Better prototypes mean better products, and
happier users and clients.

Curious about Justinmind?

Get in touch, its good to talk

WE WANT TO HEAR FROM YOU!

If youd like to share your experience of

prototyping winning products in the business
world, or simply reach out, you can do so via
our Twitter handle or by writing to
[Link]@[Link]

22
[Link]

[Link]@[Link]

180 Sansome St. Fl. 2

San Francisco
CA 94104, USA