Rapid Prototype Blog

Posts Tagged ‘Prototyper’

Forget about hand-drawn mockup and clickable wireframe. Justinmind is launching the next generation of wireframing and prototyping tool: Justinmind Protyper 3.0 Beta.

From fully functional dynamic websites to mobile applications or mailing softwares (even Street fighters-like games), Justinmind Prototyper allows you to create almost anything in record time and without a single line of coding. With many drag & drop functions (i.e import for Illustrator/photoshop), the prototyper is incredibly easy to use and so powerful it´s virtually impossible to distinguish the real thing from the prototype (for there is none, except the auto-generated HTML code behind it). With functions like database simulationsor rich interactions, many widgets and templates (i.e mobile platforms), interactive creations are limitless.

Serious about getting as much feedback as possible, Justinmind is thus launching several testing contests both on Windows and Mac, giving away free licences of its software as prizes. Check out Justinmind´s blog.

Here comes a few of Justinmind Prototyper´s features:

Real-time simulation

Test your application’s dynamic behaviour in real-time without code generation

User interface design and Information Architecture

Create fully functional prototypes per drag-and-drop

Free viewer for your software simulations
Functional scenarios

Define and simulate your application’s control flow

Data behavior simulation

Simulate your business applications with real data

Requirements and comments management

Associate comments and requirements with simulation elements

Templates and masters

Reuse elements and apply changes easily

Export/import simulation elements and share them with others

Documentation generation

generate documentation for proposals, specification documents, and more from a complete prototype

Find More Prototyping Tools Database Articles

Have you ever seen a wireframe with simulated data? Justinmind Prototyper allows the creation of much more than simple, static wireframes. You can have fully functional prototypes, with events and action as astonishing as search, behaviour changes and commenting systems.

It’s not just drawing a form. You can fill in data, and even create a login screen.

You can use widgets to create common web elements such as data inputs, buttons and such. But using datamasters, you can link these inputs to a table, where all the data is stored. So, if you want to import real information from a .csv file or type inside the program, don’t worry. Besides, changes done in the files can be exported to any other editor. Things you can simulate quite easily and you couldn’t with just a simple mockup:

filling a form searching for a product filtering data, such as bank account movements pagination of content such as posts, items in a store, etc Personalization of objects (showing things only to logged users, calling the user by his name, etc). And many other uses.

Tutorial: Creating a comment form wireframe using real data

Edit a social network’s profile just as if it was coded

What kind of changes can the users make in a prototype?

Insert data. Users can fill fields and submit this data to the datamaster, that acts like a database. For example, a sign up form can be filled and stored in your datamaster and then exported.

Modify data. Users can change a previously filled field (changing a password, for example, or editing a comment).

Delete data. Erase unwanted information with a command, just as if you were manipulating your database. All of these data manipulation commands are easy and can be configured via drag and drop.

What kind of data I can’t still use in Justinmind Prototyper

Of course, being a prototyping tool, you can’t have all the functionalities of a real website. Yet. For the moment, datamasters and datagrids only handle text and numbers. You can’t create a database of images, but you can still simulate by placing dummy images on your datagrid. Normal data, such as text areas and text lines, numbers, dates, emails, urls, percentages and money can be used normally.

Find More Prototyping Tools Database Articles

Here are some questions and answers about creating wireframes with Justinmind Prototyper.

When do we stop building the wireframe and start the real development of the project?

The answer is simple: when you won’t make any more structural changes. It’s just like building a house. When you have all the structure defined, you’re allowed to make the groundings and start rising your work. But after the groundings, you cannot move the structure. Imagine saying to an engineer: “can you please move this column 3 feet to the left?” No. That also is dangerous when you’re building software. Changing database structures, layout or even snippets of code is hard, and can lead to an enormous amount of bugs.

We always recommend our clients to change whatever they want, as many times as they need, while still on the wireframe, because changing it later can be very painful.

How detailed must my prototype be?

Just enough to let everyone understand what’s going to be built. Some don’t need final graphics, or real text, others need to have data. For example, to test an online store, you may need prices and a database of products. If you must test data, you can wireframe and simulate it with Justinmind Prototyper, or insert the real images from jpgs and pngs.

Whether you need to use real data, real images of fake images and dummy texts (the famous lorem ipsun), it’s up to you and your project. Ask your co-workers and clients to understand their needs, and decide when to stop detailing the prototype.

xWhy not just simply show static mockups of the pages?

Nowadays, web technology has evolved so much, static pages don’t represent everything we see. For example, the webs that change content according to what users do. There are Javascript codes almost everywhere, not just links, but mouse overs, text that changes, colours and properties according to the navigation. How to represent it with static pages?

Functional prototypes can show the real interactions in an easier way, and make it clearer for both clients and developers. So, the final project won’t be different to what was planned.

Simple wireframe, mockup, hi-fi wireframe, prototype. You can do any of them, depending on your objectives. But be always sure of one thing: it’s function is to improve development speed and help everyone to understand the project better.

Find More Housing Prototypes Articles

Normally, a project made with Justinmind Prototyper is going to be coded into a piece of software or a website later on. So, it’s important that your wireframe software to be capable of exporting in several formats.

Export your documentation to your programmers

Every requirement that’s in your Justinmind Prototyper project can be exported in .csv format, and imported to any requirements management tool. This way, your project will always be compatible with an Agile Management Project, and your data won’t be “stuck” in any way.

Uses:

Share with colleagues Organize comments Control and manage projects

Export your HTML

Do you need to show your client how his web is going to be? Fine, just export the HTML. He will see in any browser. Host it in your private servers under a password, or, if it’s an emergency, a public-hosted one. It’s not fully-featured HTML code, so you won’t be able to edit it to create the final one, but it’s perfect for presentations.

Uses:

Visualize the final project Test usability with clients Test usability with users Show co-workers the future final result

Export your documentation in a doc file (PC only)

You can have a full documentation, with printscreens, requirements, comments, details, events, everything that involves your project, in a doc file. The final production book, for everyone consult what was agreed, and a building guide to the final project.

Uses:

Have a final project in which everyone agrees Have a document that shows the project everyone agreed upon Have a guide for that hour when everyone seems to be lost

Share with other Justinmind Prototyper users with Justinmind Server

Of course, any project created with Prototyper can be shared with other users, and have full compatibility. Also, anyone can download the free Viewer tool to visualize and comment projects. It’s especially interesting to have clients use them, and get their inputs on the project organized.

You can use Justinmind Server to do this too. This way, other users don’t have to install any software but their browsers to visualize the wireframe.

Uses:

Share the project online and allow users to annotate Avoid miscommunication (“I meant the OTHER image”) Collaborate remotely

So, there’s several ways of sharing your wireframes with other people while working with Justinmind Prototyper.

Find More Prototype Pc Articles

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.

Find More Prototype Ui Articles

the rapid prototyper making my papula

The requirements editor

The requirements editor is composed of four main parts or functional groups: the search box, the actions toolbar, the requirements list and the requirement details. The default view of the requirements editor contains a list of all the requirements of the wireframe. The list display the properties code, version, name, type, author, last modification date and related component. If a requirement has more than one version, only the last is displayed.

Bind text requirements to wireframe elements

You can find a requeriments pane below the canvas of the “User Interface” section. This pane provides the tools to bind requirements to wireframe elements. In order to bind a requirement to a wireframe element you can use one of the following methods:

Create a requirement and drag and drop the requirement to the wireframe element. Select the wireframe element and then create the new requirement.

Advanced features of text requirements

Requirement versions.Existing requirement versions can not and must not be modified. Thus, any changes to a requirement lead to a new version being created. Once you have made some changes to the properties of a requirement, you must click the “New Version” button to save these changes as a new version in the current requirement. Changes can not be saved in the current version. To use an old requirement version as active version, select it in the list and click “Activate” in the requirement details zone.

Display a wireframe element from a requirement.Click on the “View Element” button to jump to the related element of the particular requirement, opening the pertinent editor and displaying the element.

Specifications document generation

Justinmind Prototyper generates Microsoft Word documents containing relevant information about the wireframe. Moreover, one may easily create a template in Microsoft Word to fully customize and adapt the documents outputted by the Justinmind Prototyper.

Before any software or website project, it’s vital to test and verify if what’s done is exactly what was initially designed. Practice says that is better to prevent than to fix, so many UX designers nowadays are developing techniques to test and prevent errors using wireframes and prototypes.

One of the main uses for hi-fi simulations is usability testing. With a prototype, you can test all user interactions, gather data and then have the modifications and comments to your clients and all team involved in the project. For this, you need to have a hi-fi wireframe made with Justinmind Prototyper and record users’ reactions, comments and notes.

Several UX designers use complete prototype to simulate a website or software experience, and even with the use of real data to make it work just like it was a programmed piece of software. This saves time and teamwork, and may also improve coding quality, since it generates a better documented process.

Why should you test your functional wireframes

Dana Chisnell has a great article about when you should record usability sessions. It involves what you will and may do with testing, which kinds of results you should expect and even legal issues. It’s a great material.

Sometimes you have a very clear opinion about your idea, but the final users don’t understand. It may seem obvious for those involved in the project, but not for everyone. And they are the ones who will use and buy what you’re working in. So, testing may help you prevent mistakes and huge errors.

But what if your testing shows you’ve got to change a lot of things? Imagine the countless hours of work lost? And the other ones you’ll need to put into the project? This can be avoided using functional wireframes.

How should you do usability tests

To test a functional mockup, you need to follow several steps. It’s not hard, and it’s a much documented procedure. There’s a great article from Microsoft that explains how to define tasks, how many people you need, how to facilitate, moderate and record. (http://msdn.microsoft.com/en-us/magazine/dd920305.aspx)

Usability testing is very important, and we believe Justinmind Prototyper can be a great help to everyone involved in the activity.

Tools for testing: what you should use

There are plenty of options for recording screen, mouse track and users’ faces with a camera. Some solutions were listed in one of our blog posts for recording screen and mouse movements. You can use some camera recording software like Silverback (mac only) for record faces and audio. Then, you’ll have plenty of data to analyse.

The folks at Boxes and Arrows wrote a great review of software necessary to record and track usability testing.

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.

Designers can be very perfectionists with their projects’ images, but it doesn’t apply to all professionals involved in webdesigning. Sometimes other people are involved and they have to do changes in the project even though having less visual training. So several users of Justinmind Prototyper 2.5 asked us for a new feature which was implemented on 2.6: Widget Libraries.

With them, you can create images that are somehow constant on your projects, such as your portal’s header, a typical search widget, or anything else you might want, and share it from project to project.

Let’s say, for example, that a lead designer created the main layout of the site, and several other people are working on the other pages, which includes content, but the buttons, boxes, colours and everything else will be much alike. They will be able to copy the widgets and wireframe with the original layout, change the texts, but won’t need to redraw all the buttons, boxes or effects.

Widget Libraries on Justinmind Prototyper 2.6

In Justinmind Prototyper 2.5 you had some embedded widgets, like links, html code or layered boxes, but now this goes even further. You can create the whole style of the site. H1 are Verdana, 18, bold, H2 Garamond 12 italic, buttons are green, rounded, and bullets are whatever you may like. And the user will only drag and drop all them and have it there.

In the Screen Components, where the normal widgets are, you can on the top, you have the My Widgets panel. There are three buttons:

– Create group of widgets. For example, Hotel X Website, with all layout widgets of the project. – Import widgets, which allow you to copy the widgets made by another user. – Export widgets, which allow you to export your widgets to another user.

Advantages of Widget Libraries

Time Saver

For those who create similar projects frequently, it’s a huge time saver. You can create frameworks for your prototypes, and have them all there. Besides, we will add and share widgets with our users on our website.

Consistency and Quality Control

The designer’s job is to create the images and widgets, and the other users (UX, AI, Copywriters, Programmers) just have to drag and drop them, guaranteeing that the whole project will look fine and consistent.

Widget Libraries were request from several users, and we found it will be very useful for all the professionals that use Justinmind Prototyper.

Have you ever created an early project plan, or a simple wireframe — maybe to get approval for the project — only to find it unworkable when you started tracking progress? With the right start, you can ensure that the plan you create at the beginning of your project is an effective management tool throughout the project.

The first step is to understand all the requirements. In this stage, you’ll need to gather everyone involved in conceptualizing what’s going to be done, and write that down. You can draw a simple wireframe and sketches of the final project too.

Business Analysts and Project Managers are vital for this, and also Key Users, to understand what they need and want from the final product. We recommend a team of 5 people maximum, to avoid empty discussion and eternal meetings.

They’ll get together and write the first list of requirements needed, as much detailed as it can be. The Requirements list will be a briefing of the project, for developers, designers and coders.

Understanding the audience

The users of the projects must be studied. The usage, too. How people will use it is very important and can decide the success or fail of any development project. It is very important that your project is useful and severs a purpose for your selected audience.

People are not equal, and not everyone use software or websites the way you do. It’s important to step on the users’ shoes and understand their thinking, needs and values. After all, they are the ones who’ll use it.

This is why we recommend to have key users involved in the planning phase, and, if it may be, future or potential users.

Creating killer content

It is very important to think about what really interests people and how will they react to what you are offering them. Earning peoples’ attention is normally a one timer: if they don’t get interested in the first time, it’s probable they won’t be a second one. So, think about your users and amuse them.

Designing for human beings – help people

Some people just cannot focus enough on design, on thinking how form and function interact and how people interact with them. There are several unconscious and sub-conscious elements that can change users’ perceptions about a website or a program, and simply helping them find the specific button, or understanding how the program works, or even simpler: having the application have a pretty look. The design can improve a lot with the use of wireframes. Nowadays, there’s no excuse for having a poor looking app.

Technology – it cannot be possibly done

We all know the story of the beetle that cannot fly, according to aerodynamic laws. However, sometimes project fail because someone thinks that creating something is possible, or can be easily done, but actually takes too many work hours or too many people involved or some technology that’s not currently available to all. So, it’s very important to plan everything and discuss with technicians and experts to understand what’s going to be done.

Project Management – following the plan

Even when we get a map, sometimes we get lost. Why? Because somewhere during the travel, we forgot to keep track of where we were. This is to show how important it is to control the evolution, the iteration cycles, the steps and accomplishments. They’ll avoid the feeling of being completely lost, of not knowing where you are and how you got there in the first place.