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.

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.

Widget Libraries: prototyping easier than ever.

We’re launching a very useful new feature: Widget Libraries. With them, it’ll be easier to include pre-designed icons, templates, html and flash codes.

With pre-made libraries, you can wireframe even faster. To warp speed now.

You don’t have to create a login screen every time you do a mockup. Nor OpenID banners. Even a Flickr Badge, if it’s what you want to insert. Now, you can reuse the widgets, download from our website, or even share yours with other creators.

Create a 2-column layout? Just drag and drop, and adjust the size. Headers, links, collapsable regions or breadcrumbs? The hard work is already done. You can also save your most used fields (like a login or a shopping cart) and reinsert on another project with just a few clicks.

HTML Wireframe Generation

Now, you can generate HTML of your prototype with just a simple click , sending this to your clients, sharing with colleagues and simplifying work. This was a request from several users, and we’re glad to announce it as a new feature of our new Justinmind Prototyper 2.6 version.

Mini-screens on the right side

A great usability improvement, now the Screen Panel shows a mini-view of your screen, so it’s easier to know where you are linking to, and facilitating work. You’ll never wonder again where you are pointing at.

Conditional navigation

Now you can add conditions to you navigation flow in your Events panel. It’s easier to create login screens, simulate password errors, or any kind of navigation that’s based on different conditions.

It’s just another new feature that can easily be added with Justinmind Prototyper 2.6

Change common properties in selected widgets

Do you want to change the colours of ALL buttons at once? Increase font size for all titles? Now, by just selecting them all, you can change de properties with just a few clicks.

Work with full screen

Another improvement for the designers, you can also edit the objects while working on full screen. Just click on the icon and voila.

Improved Colour-picker

Now the colour-picker shows the current selected colour, helping (a lot) when you’re trying to select that tiny little blue dot. Neat usability asked by our users.

Hooray! It’s online.  Officially launched, as you can see on our home, download directly the brand new, tested and approved Justinmind Prototyper 2.6 for both PC and Mac. After months of coding, beta testing and preparation, we’re ready to deliver you our renewed flagship product. Now, it’s even easier to design and develop wireframes and prototypes for web, desktop and mobile applications

Click here to download both PC and Mac versions.

Among the new features are:

• Widget libraries
• HTML Wireframe Generation
• Mini-screens on the right side
• Conditional navigation
• Change common properties in selected widgets
• Work with full screen
• Improved Colour-picker

Tomorrow, I’ll do another post with detailed explanation about the new features.

The interface is clearer, and easier to use the drag and drop functions. With this new release you can simulate interactive mockups, even with real data, before starting the project development.

See some tips and tricks on our published tutorials, or wait for the new ones this week:

Tutorial 01: from wireframe to prototype

Tutorial 02:How to create a form using JustInMind Prototyper step by step

Tutorial 03: Filtering data and hiding elements with JustInMind Prototyper

Tutorial 04: Creating a comment form and simulating a comment with real data

Wireframes

A wireframe (also “web wire frame”, “web wireframe”, “web wireframing”) is a basic visual guide used in interface design to suggest the structure of an interface and relationships between its pages. Typically, wireframes are completed before any artwork is developed. According to wikipedia.

These are examples of wireframes.

Plain Wireframe made with JustInMind Prototyper

They are useful to understand which things are going to be, sizes, patterns, structure, etc. They’re not the layout, the design of a site or software, but just the content.

Layered box. Click to enlarge

Mockup

A mockup is something more complex. It may include the design, colours, images, photos, etc. Sometimes, UX designers use moody boards, images that have colours, style, typography or any kind of visual reference for the client to approve. It gives you an idea of how it works, but may not be fully representative of how it’s going to be, and may generate some mistakes.

It looks like a website, but it’s static, you can’t click, input data or things like that.

It’s just a jpg file that looks like a web.

Prototype

A prototype simulates websites’ functionalities. For example, this video (link to youtube video of data simulation) simulates a search field, with fake data, and things happen when you click the button. It was made with JustInMind Prototyper to simulate how a real website should work, with events and transition. It can be used for a test, for showing how it will work to a client or co-workers.

Tomorrow, we’ll launch another tutorial, teaching you how to simulate a data search. I wireframed a music streaming site, and will show you how to create a real simulation of a user searching for some songs, and then showing on screen the result, based on a data master full of songs.

Besides, a neat trick to hide/show the search above the previously played songs.

This video shows you the working prototype. Tomorrow, how I’ve done it.