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.
And then started to create the other pages. In the second page, while describing the software, I found a layered box, which shows some content according to which button you have pressed. That’s something hard to simulate with paper. This is a clip of the actual page, and the simulation I created.
It allows you to create as many layers you want, and only one is shown. Then I created two buttons that change color when pressed. Both of them turn white after pressed and gray when the other one is pressed. Besides, they show each one their respective layer.
To do this, just add the events. OnClick, change button colors, and show layer. That’s it. Here’s where it is.
Hello followers. A while back ago I was about to start another tutorial to post here, but I ran out of prototypes, so I thought: why don’t I show the whole process of prototyping, from first wireframe to final version? It may take a long time, but I think it should be interesting.
I’m going to tweet about it @just_in_mind, and also create some videos and photos. Now, I’m brainstorming about what kind of site should I start to build. It must be complex, to have all kinds of tricks we can do with Justinmind Prototyper: events, data, filters, conditions… So, you may feel free to suggestions, and I hope we can interact more about the project. Since I’ll probably learn a few tricks during the way, it will also be interesting for you to learn.
And maybe we can get some freebies for the most engaged users. Why not?
If you want to learn how to use Justinmind Prototyper to create wireframes, prototypes and simulate your idea before start coding, download this file and give it a try. The two best reviews will win a license.
I have this prototype of a Tour Agency, and I want to create a pop up that shows a map.
Here, in the red dot, I need a link that says: “Click to see map”, and when clicked, a pop up shows the map. For this tutorial, I’ll create just a grey box, but later, it’s possible to embed Google Maps objects easily in Justinmind Prototyper.
First, we go to the Masters Panel, and create a new master. We’ll see a blank main screen. This is the area of the map.
Let’s put a link, and the grey box where the map code will be.
The objects inside the master
I’m going to place the box above the link, so let’s first create the events and then put them in the right position. Also, it’s important to mark the grey box as hidden. It means the box won’t be show in the simulation, except if something happens.
Properties: Hidden
The first event is for the link. Go to the Events panel, create a new event and choose: OnClick – Show, and choose the grey box.
Event: OnClick - Show - Grey Box
The event is ready. If you simulate, you’ll see the box when clicking on the link. Now, the second part. We’ll create a big red X button, to close the box when clicked. To create this, just follow the same steps. Create an X, place it inside the grey box, and add the event OnClick – Hide, and choose the box.
Next step is the layout. Place the box where you want, and the link too.
Go back to your main screen. Just drag and drop the master on the screen, and it will be there. You can place several masters on several screens and them edit them all later by just editing the first one. For this wireframe, we won’t put graphics, but later on the project I’ll put colored buttons, gradients and other things.
Place the master wherever you want
Place the master wherever you want with drag and drop. Then, simulate and test it.
After the last post with tips & tricks, some folks asked us what’s the difference between a master and a template in a fully functional wireframe, so I created a quick tutorial to explain that.
The templates are sample pages, with custom objects that appear on all them. Masters are custom objects, so they don’t work as pages. You can put any object inside a template, including masters. For example, you are creating a huge portal, with a menu bar in some of them. So you can create the template for the pages, and create a master with the menubar, inserting actions and events to the master.
The first step is creating a master. Let’s call it navbar.
I started editing it, creating all the elements: labels, colors, events.
We create a navbar quickly by dragging the pages on your right to the labels, thus creating links. For example, the page aaPlayer, dragged and dropped over the label My Profile creates a link. Since the navbar will be on all pages, you’ll have this link on everypage of your site, quickly.
The navigation is created like that: my profile leads to a page, my team leads to another, and so on.
Then we’ll use another widget to add some efect: we want the label Other teams to have a dropdown menu, with several other teams, just to simulate better how the site’s gonna be.
We drag it to our canvas and start editing the properties, to match the label (colors, size, font, etc).
Note that the text inside the menu is edited on the properties, not on the text. We change another characteristics as well.
When created, the widget only has one submenu. But we want more.
We drag the widget Menu Item. This will do. We change their content to fit what we want, and creating a dropdown effect.
When the mouse comes over, it opens the options.
IMPORTANT: widgets are positioned according to the canvas. Since we want a kind of banner, we’ll put it on the top left corner. This will do. Let’s go back to the template.
On our wireframe, we had a gray box for the menu, just below the logo.
We simply replace it with the master. Drag and drop works at best!
We have then a fully functional master, with several links to several pages, working inside a template. Then, we can have all our site’s pages linked between them easily. Ain’t it great?
Today I’m gonna show you how to simplify work on several wireframe pages by using templates. They’re very handful for creating websites that need several pages that look alike, but change some details, for example the background or page structure.
First, we create a new template. The panel is on your left side, just below your widgets. Click on the + button and choose any name you like it.
Then we go editing it. Ours is called background, because that’s what it’s going to be like.
Then, I put the logo, background image and anything I want to have in several pages. Note that you can have more than one template per project, so don’t worry if some of your pages have different background images or the like.
When we go back to the home page, it’ll have all the elements we put on the template, below the normal elements. Their order can be changed anyway you like. Specific page elements can be mixed with the logo and background which were template’s elements.
When we create another element, guess what happens: we’ll have the structure already there, without having to worry about how many inches, inserting again the image and whatnot.
It’s a very common scenario: you created a wireframe using Justinmind Prototyper, and then need to give it a more sophisticated design. So you have to change all the menu’s properties, all the background colors, etc. Before, you had to do it manually, but now, its over.
Let’s see magic happening. See these three titles? Let’s change them to something different.
Select them all using ctrl + click.
We go to the properties panel, down.
Let’s change their color to white. Note that you can change simultaneously any properties, like size, typeface, background. You fancy it.
They’re all white now. May sound simple (and it is), but it’s a new feature for Justinmind Prototyper 2.6, and it’s very handful.
Sometimes we are questioned about why someone should do a prototype of an app or a website instead of already building it. It sounds like working twice, doing a wireframe and then doing the real project, but in fact it may save you time. When you go directly to your prototype, all the changes will be done by all the team: designer, programmer, copywriter, business analysts, everyone involved. If you prototype before involving everyone deeply in the project, you can save your team a lot of time and energy.
Using Justinmind Prototyper, the information architect can create the website structure and annotate it, the user interface can create the wireframe, the designer can make it have a look and feel and the programmer can make all interactions, movements and data show. All of them could be able to do their part using Prototyper, without much fuss and work. It’s drag and drop, and by learning some basic commands and tricks, even a no-programmer can create some advanced navigation interactions.
Dividing the wireframe work
It’s easier to collaborate when everyone uses the same software and the same interface. By sharing files, no-one will be working on old files, will loose requirements or comments, and everyone may be able to do what they’re best doing.
Using concurrent licensing, a company can have literally several people working on the same project all over the world, sharing, collaborating and creating a great product.
Joining the work together
After everything’s done, the project will be a single file. It may be presented to the client, the boss, or tested with final users, just like it was a real one. The changes, modifications and requirements can be directly added by users, using Justinmind Viewer tool, Automatically Generated HTML or Justinmind OnDemand service, and the team will have all them available with some clicks. So, all modification can be registered.
After approval
That’s when you generate your documentation, with instructions to everyone involved about project requirements, steps to follow and everything required to make things really work. It’s much easier to draft and change something on a prototype and only code the final version.
Next version
Besides all this process, Justinmind Prototyper’s requirements management also controls versioning, helping business analysts to know which version and which changes correspond to which piece of software.
If you want more information about high fidelity wireframes and website prototyping, subscribe to Justinmind’s blog feed or drop us a line on twitter.
By Eric DI POL, translated by Noémie Pagan and Alex Luna from justinmind.com. This is an user review we found at Eric’s site, and we found so interesting we decided to publish here in English, and also answer some of Eric’s questions. All this was done with author’s consent.
As you know, prototyping is one of my interests. After some articles about some offline tools (Powerpoint, Visio, Axure, Omnigraffle, Acrobat, Fireworks) and other online tools, (Gliffy, Jumpchart, Balsamiq, Protoshare and Pencil), I have just tested JustInMind Prototyper, and it didn’t disappoint me.
PRESENTATION
JustInMind is a Barcelona (Spain) based company that develops JustInMind Prototyper, a tool to prototype and simulate applications.
JustInMind Prototyper is available for Mac (OS X Leopard) and PC (Windows XP / Vista). I have tested JustInMind Prototyper for PC version 2.6 (still not released yet, actual version is 2.5). It still have some bugs but the program is globally stable.
This is a presentation video that gives an overviewof the tools capabilities.
INTERFACE PRESENTATION
JustInMind Prototyper’s inferface is quite complete because it allows working on four elements and each element has its own tab in the main navigationscreen:
“User Interface” tab for wireframes ;
“Functional scenarios” tab for processes ;
“Comments” tab for comments ;
“Requirements” tab to specify, in particular, the Business Rules of the application.
JustInMind Prototyper’s interface is somewhat similar to Axure’s.
If you have ever used Axure RP Pro, then you will probably recognise the content of the “User Interface” tab because the interface is quite similar:
on your left, HTML components and Masters ;
central screen, creation / edition of elements;
on your right, notes and comments.
Finally, the search engine, upwards on the left, is very practical and allows you to find again any element on your pages.
JUSTINMIND PROTOTYPER, A VERY SERIOUS CHALLENGER TO AXURE RP PRO
Just like Axure,thanks toJustInMind Prototyper, you can create wireframes and generate functional specifications in Word format. It has a good library of pre-defined HTML components and also uses the very useful principles of Masters and Templates.
But, in other details, goes far beyond Axure.
For example, with JustInMind Prototyper, you can define requirements related to pages, specify them and use real data, for example when you connect it to a database.
Functional Scenarios
Unlike Axure, processes’ definition is related to the interfaces, it has a direct relation with your pages. Here you have a login model:
In the “User Interface” tab, you create the “Identification” (login), “alter-id error” pages (“login error”) and “ok id” (login ok).
In the “Functional Scenarios” screen, you create the “login process” action; drag your 3 pages to the central zone, adding the correspondent actions and decisions.
Then, you connect the process to the corresponding pages, and you have a case management (correct/incorrect login), that allows you to simulate the precise behaviour of the application.
See functional scenarios video.
Requirements
Since wireframes can’t describe application behaviour completely on their own, JIM Prototyper adds Business Requirements (or “Business Rules”) to the functional specifications. Unlike Axure, JustInMind Prototyper integrates writing these requirements (“requirements” tab).
You can write the requirements one by one while prototyping, or write all of them altogether at the end, connecting them to HTML elements with a simple drag and drop.
JustInMind Prototyper allows a versioning system, with an historical list of modifications, where you can also define test cases and insert comments. Of course, when you export your specifications to Word format, you can define if these elements show up on the final document.
See requirements video.
Requirements screen allows you to define all Business Rules that the wireframe can’t have or explain.
The Data Masters
It’s a data base you can define, create, read, modify, cancel or search.
With data masters, you can, for instance, dynamically generate a product sheet. After deciding which kind of data it contains (product name, reference, price, brand), JustInMind Prototyper automatically generates the screens that allow you to do CRUD (Create / Read / Update / Delete) in this product sheet.
So, you can simulate creating / modifying / deleting / searching your products with the “Data Grids”, with the data you have inserted. You only have to format your pages, that simple. In addition, you can export / import these data in CSV format.
Better to see the video than listening to my large speech
NOTE FROM JUSTINMIND: we did not alter in any way Eric’s text, not even when he mentioned our competitors. We have another post with more comments, and there we answer some of Eric’s doubts and comment a little bit more about our 2.6 soon-to-be released version.
