Justinmind Blog

Wireframes & prototypes didn´t use to be a priority  for IT professionals. But as the IT industry develops, it becomes essential to build websites or apps on solid foundations. Here comes a non-exhaustive list of why we should all be using wireframes and prototypes more often.

• We speak different languages

Imagine an English developer having to explain a future website to his client, a chinese businessman… I think this speaks for itself. But we don´t need get to such extremes, the very same word can have different meanings for people that speak the same language. But simply because they have different backgrounds they won´t intend the same things behind a common concept.

• We need to visual the future product

An image is worth a 1000 words! This is actually why we wireframe in the first place (and incidentally, reading all the specs doc of a future website is a pain, I wonder how many actually do it). Even if it´s only a sketchy wireframe, at least everybody sees where is what and how it looks like.

• Clear up your ideas

Get things clear! Wireframes and prototypes help you to organise and share your idea avoiding misunderstanding. You´ll see what´s possible and what´s not.

• Save time (it´s quick)

Because with a prototype in hands, you know what to expect as a final outpout. Hence prototyping will save you time during development and avoids rework being done too. A prototype is also quickly shared & commented among collegues and you can apply ongoing changes to it so you see in real-time what´s being done.

• … and money (it´s cheap)

Time is money, everybody knows it! Whether it´s on conception, design or development, saving time most certainly means less man-month! Plus, the whole point of a prototype is to save time, so it´s usually developed using cheaper & easier technologies than the one that will be used for the final product.

• Anyone can do it

No need to be a high-profile developer to do a prototype. Actually, it´s quite the opposite. If you want to build a good user interface, you might want to ask a UX designer, or designer to build what usually a simple HTML prototype. Moreover, with high-fidelity prototyping softwares like Justinmind, everybody can create fully functional prototypes in no time and without a single line of coding.

• Run user testing before development

This is probably the main advantage of prototyping! Prototyping the UI of a website or an app lets you carry out user tests before developing the final thing. This is also a big difference between functional prototypes and static wireframes, as the latest doesn’t allow you to do this. Go prototyping!

All in all, although wireframes are very useful when it comes to define and analyse a website or an application, these arguments shows that it´s best to prototype. Prototyping will “fluidifies” all processes of any IT project, from design to development and testing. With RIA & dynamic websites the need for prototyping will hopefully be increasingly present.

Hi everyone,

This short post just to let everybody know we´re offering free licenses to those of you who´d be willing to write and publish a review about our wireframing tool: Justinmind Prototyper 3.0!
Test it and review it, and we´ll give you a full perpetual license of the Enterprise Edition once you´ve published the review on your blog.

Wireframes and mockups are very useful to define websites or applications. However, in the era of web 2.0, RIAs, web apps and dynamic websites, they need to be combined with more functional prototypes to define an application properly.

Along with mockups and wireframes, the new Justinmind Prototyper 3.0 allows you to create fully functional dynamic prototypes. From highly interactive softwares to mobile apps or complex dynamic websites (i.e. Facebook or Easyjet websites) you can prototype anything in minutes. Both on Windows and Mac, the desktop app is easy as PowerPoint. Justinmind 3.0 provides full drag and drop features to wireframe without any coding. Justinmind is also very powerful as the prototype is, for end users, virtually identical to the final product.

Justinmind offers all the tools you need to do a prototype from A to Z. From sketching to mobile widget libraries, a wide range of templates, masters and widgets are available. Moreover you can drag and drop any image directly from your computer or from other softwares (Photoshop, Illustrator) and add interactivity to them. The prototyper also offers to create conditional navigation by simply dragging & dropping conditions. It lets you make your own interactions dragging and dropping events. You can even create dynamic wireframes by adding real data and content to prototypes. And if you want to test a prototype on progress, no need to export, you can simulate your prototype instantly. However, Justinmind generates HTML and JS so that you can quickly test and share your prototypes.

But more than a wireframing tool, Justinmind also gives you the possibility to add and attach requirements and comments directly to elements. You can also generate and customise specification documents, diagrams and navigation flows for validation.

Conception, design, development and testing, Justinmind Prototyper is a powerful, customisable tool that can be used all through the project. It fluidifies any IT project, improving communication between programmers and non-IT literate people, cutting cost, avoiding rework load.

Wireframes and mockups have been used to think and define websites or applications before their implementation. But with the coming of the web 2.0, dynamic websites or RIA, you need to think everything from UI to conditional navigation or the type of interactions you want to use. But mockups or even clickable wireframes are not enough anymore.

Justinmind Prototyper 3.0 is a powerful wireframing tool designed to build fully functional dynamic prototypes without any coding, both on Windows and Mac.

At first glance, Justinmind Prototyper looks really powerful. It lets you create Rich Interactive & dynamic Application prototypes. You can also integrate real data and simulate their behaviours through datamasters and datagrids. Ultimately, it simulates real conditional navigation (i.e. functional login pages).

OK, so “powerful” is one thing, but is it easy? Well basically, everything is done through drag and drop. From creating mockups to adding interaction and datas, Justinmind is incredibly easy to use. Easy as Powerpoint, the desktop application comes with a wide range of reusable templates, masters and widgets (sketching or mobile widgets). You can also drag and drop images and elements (videos, flash…) straight from your computer or any other application like Photoshop or Illustrator. You can also create your own interactions by simply drag & dropping events on elements. Even conditions and data are added using drag&drop, no coding is involved. You can build a dynamic website literally in minutes, and to test, you don´t need to export it all as it provides an instant simulation button.

But Justinmind is not just a quick and high-fidelity wireframing software. It also allows to test, comment and validate prototypes. You can add and attach requirements directly to elements or export them. Once you´ ve commented the prototypes, you can generate your own customised specification documentation (.doc) with webpage images, diagrams, navigation flows, requirements and comments. The prototype generated is coded in HTML so that you can share it quickly and easily.

Once you ´ve created and export your prototype to HTML/JS, the extent of interaction and dynamism is such that the prototype is, for end users, identical to the final product.

Justinmind Prototyper is a new wireframing tool particularly powerful and easy to use. Whether it’s for definition, design, validation, development or testing purpose, it can be used through out all the processes of an IT project. Overall, it `fluidifies´ communication, cutting cost and rework load… because a good prototype is worth a 1000 words.

Hi folks!

We haven’t received many prototypes for the contest, mainly because the ones the testers were making were for real projects and there were security restrictions. Anyway some of the testers sent their prototypes but only one was the winner. We choose it not because the level of detail but because there were made so fast (hours) and it was pretty interactive (pay attention to the price of the product that is shown at the “billing info” screen and the visa/mastercard validation that checks if the first character is a 5 or a 4).

So the winner is…

Award for the most interactive prototype

Nate Heagy! With this nice interactive wireframe!

Play it

Congratulations Nate, you will recieve your free license soon.

We would like to thank to all the testers who helped us on the beta contests. The new 3.0 version will be available to sell next week.

Yes, although wireframes are essential before building a website or a software, they are not sufficient anymore. I´ll tell you why in a second but first, we should do a bit of IT history.

Wireframes: a short history

At the beginning of (IT) times, if somebody wanted to build a website or an app (and this goes for any products made by men), putting things on paper was (and in many case still is) the first thing professionals did to think and define their project. But soon, clients asked for more than mere sketches and mockups. IT consultants thus started using Powerpoint to show the overall software design or the pages of a website. Clickable wireframes, meaning a short interactive version of an app, was obviously the next step (this is why so many wireframes have this sketchy design).

However, in the era of the web 2.0, dynamic websites or RIA, static wireframes just don´t make it anymore. Conditional navigation, rich interaction, database, changing content… IT products are increasingly complex and small “low-fidelity” wireframes doesn´t cover the vast majority of the final app or website.

High-fidelity prototypes

Wireframes are dead, long live wireframes! So what’s next then? They´re called high-fidelity prototypes: “high-fidelity” because they have the same look and feel as the final product, “prototypes” because they are fully functional versions of the final product.

Why bother?

Now, you could argue: why bother with a hi-fi prototype if it´s the same as the final output? Well, although a prototype is, for end users, virtually identical to the final product, it is not exactly like it as most prototype are only HTML version, thus not made with the same technologies that will be implemented later. But again you could say: what´s the point in preparing something identical to the end product? Well, a hi-fi prototype is useful for several reasons:
- communicate effectively with your clients (often non IT literate)
- concretely define specifications
- carry out user tests
- visualize apps and see its limitations
- follow up & visualising changes through all processes
- gauge technical feasibility
- or simply sell an idea

How to prototype

Well, once you´re done with paper mockups, you can start to build an HTML prototype. However, this is a tedious, time-consuming job (you need to code) and this will not be useful if you´re building an interactive application or a dynamic website. The best way to do this is using a high-fidelity wireframing tool (i.e. Justinmind Prototyper). This kind of tool lets you create fully functional dynamic and interactive prototypes without any coding. Using a prototyper will let you design, add rich interactions (Jquery-like), integrate real datas, create conditional navigation, build diagrams (i.e. navigation flows), generate specification documents and even carry out remote user tests.