Justinmind Blog

User Fegabe managed to run Justinmind Prototyper on a Linux machine. Here’s his twitpic:

A hundred thanks, Fegabe!

Coming to work today I saw this great TED Talk from designer Tim Brown, in which he talked about creativity, ideas and also prototyping, so I think it should be interesting to share with you.

Hello folks.

I’ve just used some personalized widgets to simulate the experience of creating text notes on Evernote in an Android phone.

DOWNLOAD evernote_prototype wireframe for Justinmind Prototyper

The simulation opens in the main screen of an Android mobile. Click on it to go to the program.

You can create a text note, which will be added to a datamaster and stored in your prototyper. Then, you can search for notes and see their content. This project doesn’t have any notes embedded, but you can add as many as you wish. Also, you can modify them inside prototyper.

Recently, our friends of Czech SIG CHI started discussing the uses of Justinmind Prototyper, and some visitors came around here. So, talking to Jirka Mzourek, we decided to make a special contest for the community.

Write about Justinmind Prototyper and win a license

If you write about how you could use Justinmind Prototyper, what do you think about the program, or what feature you’d like to see, you can win a full license.

Where can I write?

You can do that inside the community Czech SIG CHI, or in your blog, or both. Just be sure we can find your text (post it at the community, or a trackback to this post).

This is also valid for those who participated in World Usability Day 2009 and didn’t win a license.

How are we going to decide the winners?

The winners will be the two reviews that are most interesting for other users/usability professionals. Think as a journalist or a tester. Explain things, express your thoughts, but don’t ever forget your reader. You can use images, videos and any media you need to get your message through.

If you need to download Justinmind Prototyper, visit our blog or talk to me on twitter.

When you’re going to tell us?

Entries are accepted until Friday, the 27^th of November. Then we’ll have the weekend to review all texts, and the 30^th, we’ll announce it here in the blog, and also on twitter. Also, we’ll reach the winners by mail.

Using Justinmind Prototyper’s widgets for Android, I’ve created some prototypes of effects in Justinmind Prototyper.

This is a simple trick, using container boxes and hidden objects.

First, import the template:

Then you can create as many pages you want, with the G1 background.

Templates are fixed. So, you cannot move your cel phone. However, you can move the masters. So, you have the background, which is the cell phone, and you can insert inside it the master, which is the home sliding menu.

The masters are shown in a yellow area, that shows where are the objects (including the hidden ones). Let’s edit the master, to see what’s inside:

The master is the whole screen, but the only visible thing is the button in the down part. When you click it, the invisible black container, with the other top button and the icons becomes visible. The top button also has the event that hides the container. That’s what creates the effect of Android’s sliding button.

Tricks:
1 – the bottom button MUST be below the invisible container, but not inside it, because if it happens, it will be invisible too.
2 – Everything must be inside another container, which has the same size as G1’s screen.

Following this morning’s post about how the slider worked in a wireframe, now I’ll show you quickly how to create a unlock effect.

After the slide, the gray screen disappears, and we see the normal iPhone background, or anything else you might want. How to do it?

The slider widget is inside the gray box, and behind that box, there are several buttons, widgets, your whole application. What do we need to do?

Go to layer four. That’s the layer in which the  button is in the extreme right. Well add an event to the button, that hides the gray box. The slider widget will be hidden to, as it is inside the container. Simple as that. Remember that, for it work just as the iPhone, it must be an OnMouseOver event, not OnClick, which is Justinmind Prototyper’s default event.

For those of you who downloaded the widgets I posted two weeks ago, I’ve made a tutorial explaining how I made the voting stars widget.

This is a simple widget that highlight some stars when you click, and all the stars at the left. It works like this:

It’s quite simple. All the stars are png transparent objects. The yellow ones are ABOVE the gray ones, but hidden.

You just have to hide them with this yellow button there.

So you have 5 gray stars that show the yellow ones when clicked. Note that when clicked they show all the stars to their left, as it’s usual on websites.

After the launch of the iPhone widget library, I’ve started creating some mockups of iPhone apps. But before showing you that, I’ll explain how the widget work.

Here’s the widget simulated.

How does it work? How to make a box move?

First, install the widgets, drag and drop the unlock button in your canvas. It works as any normal widget.

Now let’s see how it was built. It will look like this:

As any widget, you can edit and modify its parts.

It’s a layered box, with four steps. Each step from locked (left) to unlocked (right) position. Besides the button, there’s an invisible container with an event. The event is OnMouse Enter, show the next layer. This means that, when you’re on the layer 1 and passes the mouse over the trick invisible container, it will hide the first layer and show the second one.

Here’s how it works. We repeated the trick in the four layers:

Now there are 2 trick boxes, one for going forward and one for backwards. This means the slider can go any direction.

In the last layer, we add another trick:

When the fourth layer is shown, we want something to happen. In this case, it will probably mean that the screen will be unlocked and you’ll be able to see the content that’s there. So, Select the button inside the fourth layer of the box, and add an event.

You can create a link to another page, where your iPhone simulation starts or you can hide the background gray screen.

I’ll explain how I created the screen in the next tutorial.

Some big projects done with Justinmind Prototyper involve more than one person. Sometimes big teams work together to create something, and thus collaboration-management is a very important feature of our wireframe authoring tool.

Keeping the same design code throughout the project
Widgets and templates can be used to maintain the same styles, colours, events and structures which are repeated throughout several pages. The main designer can create the objects following the brand guidelines, and other users will simply drop them on their canvas, without any confusion of mistaken sizes, colours or deprecated styles. Also, it improves work, since things don’t need to be redrawn.

The filetypes for templates, masters and widgets are accepted in most Justinmind Prototyper versions, and are small, making them shareable by mail, network or even personal messaging systems. Also, most common media types, such as jpg and gifs, are accepted by Justinmind Prototyper.

Creating widget sets for determined projects
Let’s say you have a project with many, many screens, but just one designer. He can create the widget set that will be used, with specific properties, and several users can easily follow the guidelines.

There are widget sets for specific hardware and interfaces, such as iPhone or Android. With them, you can simulate all the UI of the phone in your computer, and specify the development of the software. You can always find more widgets at Justinmind.com.

Comments and requirements management
Not everybody’s comfortable with Justinmind Prototyper’s ease of use, but still have changes and modifications to do in the wireframe or prototype. Sometimes, the clients want to add their views and opinions, and they’re able to do that with JP Requirements Management feature. They can comment and link their comment to any specific feature. Also, they can specify features or requirements, and this can be related to any version of the software. Of course, these comments can be exported and organized in personalized .doc templates, for reports, summaries and analysis.

A team works better when it communicates better
Every manager knows the importance of being understood, and that details are organized and overseen. So, using Justinmind Prototyper to optimize teamwork is the best option to assure everything will run smoothly and within the deadline.

From wireframe to final development specifications, your team will work better with Justinmind Prototyper.

For those who want to create an iPhone app and don’t know where to start: create a hi-fi wireframe with these new widgets. Then, find a developer and tell your idea!

donwload the iphone wireframe for Judownload IPhone_library for justinmind prototyperstinmind Prototyper

This is the full library, with several widgets, animated backgrounds, objects and screens. Hope you like it.

UPDATE

The iPhone widget library is also available on our downloads section, along with other libraries for Justinmind Prototyper.