Justinmind Blog

Wireframe & prototype apps and websites for Android.The library is free for all the Justinmind users out there! Just download it.
We hope you’ll enjoy making interactive mockups and prototypes with our widgets. We try to include all the necessary elements and to make widgets as faithful as the original Android design! We hope you’ll like it, feel free to contact us if you want to add your own Android widgets, so all the community can enjoy your work.

Android widget library for Justinmind

See the library component list: Component List

Example of an Android prototype: See prototype

Download the Android widget library and try it yourself: Download Library

With new fashionable devices like the iPhone or the iPad, the mobile web has boomed. According to ComScore, global leader for analysing web trends and practices, the mobile web really exploded in the last 2 years. Between January 2008 and January 2009, the number of Americans accessing internet through mobile devices went from 36.8 to 63.2 millions. PC, mobiles or tablets website wireframes are more essential than ever.

The daily use of the mobile web has increased even faster as 22.4% of mobile users used a smartphone in 2009, against 10.8% in January 2008.

The study highlights another key point. The new use of applications on smartphones allowing users to get access to their social life online through Facebook and Twitter applications gave a real boost to the use of the mobile web.

The Nielson Norman Group carried out a serie of tests in July 2009 in order to assess the usability of webpages on mobile terminals. More then 20 sites were reviewed on 6 different devices. The results of the analysis highlight striking difference… not in favour of mobiles. According to the report, only 59% of mobile users completed the task they were asked to do, against 80% for traditional PC users.

Among the sites tested, some were specifically optimise for mobile terminals whereas other were tested in their original version for regular computer. This comes as no surprise : websites optimised for mobile get rated 20% higher for usability and navigation issues. Regarding usability, the smartphones are also rated better than traditional terminals. Results are particularly good for Apple’s iPhone that obtained a task completion rate of 75%, against 55% for other smartphones (and 38% for classic mobile phones).

For this particular study, several criterias were taken into account like the screen and keyboard size as well as the site architecture and bandwidth perfomances. « On most phones, the screen is too small. It’s hence not easy to open several windows at the same time. The keyboard typing is rather slow and hazardous » stated the study that encourage webmasters to develop their websites through website wireframes to create effective cross-browser, mobile versions of their websites.

Justinmind awarded highest Growth Company by Hit Barcelona

The next 16th and 17th of June will take place the Growth Company Showcase, an event that will bring together companies with major growing potential with invest funds of venture capital and international business angels.

Hit Barcelona invited Justinmind to the Growth Companies Showcase. The event will take place on the next 16th and 17th of June. It aims at connecting the most promising start-ups with prestigious venture capital funds and major international business angels.

This award as major growth company comes after Justinmind Innvate! 2010 award, judged as one of the most promising IT companies in the world.

These distinctions come as a reward for the development team and praise Justinmind products, seen as a revolution in application development as it lets users create high-fidelity dynamic prototypes without any coding. This kind of app is becoming increasingly essential as applications become more complex and expensive to develop. Justinmind Prototyper can be downloaded and tested for free at http://www.justinmind.com/downloads/wireframe_tool.

Justinmind Prototyper lets you prototype and test fully functional applications for Windows, Mac, web and mobile before developing them.

The Spanish Start-up Justinmind has developed Justinmind Prototyper, a product that allow users to test and validate apps before their development through the wireframing and prototyping of Web 2.0, SAP and mobile apps, among others.

The company is based in Barcelona but distributes its products worldwide. Coca-Cola, Orange, Banco de Sabadell, Bertelsmann and the Austrian Federal Government are just a few of its prestigious customers.

For more information, visit http://www.justinmind.com.

Wireframes, documents, sketches… companies and programmers use different methods to convey the look & feel of a future website or app. But the “big picture” is hard to imagine with just a document or a mere sketch, and this often ends up in communication problems, delays or even the project being cancelled.

But this realm is changing quickly. Indeed, there are now new tools available that offer to create, visualize and simulate the final user interface of a future app without coding.

Background
For a long time, web design and app creation used different ways to create and adjust requirements and design, trying to look as much as possible to the actual final design. At first, simple tools like pen and paper were enough to show a general idea of an app, using arrows and all type of diagrams to reflect interactions and the information architecture. But at the same time as apps were becoming more interactive, the systems to represent these future apps also grew in complexity.

From wireframe to prototype
With the help of Photoshop or even PowerPoint, some were able to create visual images with detailed specifications. These were the late mockups. And only then did they add interactivity.
However with the coming of the web 2.0, interactivity and data dynamism became an essential part of the design process. Content generated through database and RIA now requires more interactive wireframes and prototypes. From content to user actions and interactions (login, edit, delete), the user experience has to be thought thoroughly and the look and feel has to be as close to reality as possible. Moreover, apps and websites have to be thought and develop for a wide range of terminals, from PC, to Mac, iPhone and iPad… Mockups and static wireframes are not enough anymore.
Hence new applications appeared to help interaction designer to build the best user experience possible.

Advantages of prototypes
The benefits of using this kind of apps are pretty obvious as the scope of users grows steadily and offers get more sophisticated. Indeed, the benefits are many:
- Save time in the development process, simplifying the revision process and integrating final users in the process, thus ensuring the right use of the final product.
- Save money during the elaboration of the app up to 30%.
- Early detection of issues and limitations thus easing changes in requirements and specifications.
- Better definition of user requirements. This tools offer the possibility to carry out user tests using the interactive prototype as if it was the real thing.
- Better communication between all developers and non-IT literate Business professionals all along the production process so that everybody can work in-sync.
- Remote user tests to insure the best user experience before even developing the final app.
- Visualization of changes and keep track of the design evolution all along the production process.
- Match business rules with user experience.

A changing realm
According to a study by the Standish Group in 2009, only 32% of application development projects end successfully (on time, with the required features and without extra cost in the budget). The investigation also shows that 44% experience delays, extra cost or fewer features than planned. The other 24% are cancelled projects. These data shows the increasing importance of having well-planned project before hand.
Now innovation in the field of prototyping changes the way IT projects are carried out.

Wireframes and user-centered design are still relatively new to e-learning apps.

In the last few years, technology has improved so much that new domains like education started using it and changed drastically. E-learning is still a newly born science that comes down to learning via information technology (IT). In the last few years, technology has allowed for more efficient and flexible delivery of course material. In parallel, the demand for online delivery of higher education courses continued to rise. Online courses provide more time and location flexibility than traditional education and it allows universities to expand their course offerings by expanding their virtual infrastructure.

Unfortunately in both corporate training and higher education institutions, user-centered design techniques like wireframes and task analysis are pretty uncommon in the creation process of e-learning apps.

E-learning usability is still new but surprisingly underrated. Yet the idea around improving e-learning apps usability or “learnability” is pretty straightforward. A system simple and easy to use will take the learners thinking off the system and onto the course material itself.

Usability testing usually offers an effective way to ensure an app actually works. This means that most people can make sense of it and use it without an extensive formation. Unfortunately carrying these tests is often expensive. That’s why many companies rely on previous analysis showing reliable principles. But here’s the catch: proven sets of principles of what “works” for online learning, based on research findings or industry best practices, don’t yet exist.

Design and usability standards like website wireframe that have proven their worthiness for e-commerce applications need to be changed substantially before being applied to e-learning-tools. Indeed, the 2 domains have completely different goals. Wireframing a site so that someone can book a flight with ease has not much, if anything, to do with wireframing an engaging online biology class. For Don Norman, a professor of computer science at Northwestern University, “Even though usability and learnability are slightly different, usability practices followed by the User Interface (UI) community can be easily applied to learnability.”

If e-learning practitioners were using usability testing, usability experts could then assess how testers handle learning tools or cope with lots of data without a teacher telling them what to do. Through the use of wireframes and functional prototypes, they will be able to test their app before its development, assessing how new students navigated virtual classrooms. “Many people think they can’t really afford usability,” argues Michael Korcuska, design director of DigitalThink, e-learning software development firm. “Unfortunately, the market doesn’t care about quality so much as price and speed improvements,” says Korcuska. “And until the market demands it, and is willing to pay, it won’t get it.”

But other usability experts like Mathieu Collet, interaction designer for SQLY Agency suggest there is a competitive advantage to designing the user-experience of e-learning websites”.

With the coming of the web2.0, recent developments in streaming video and interactive interfaces can make e-learning softwares potentially more dynamic, but also more complex. Therefore, e-learning apps should carefully take the user experience into account before starting any project.

User-centered designers have a real challenge ahead, both in proving to universities that usability is worth the money, time, and effort, and in developing e-learning usability standards that can be shared. But the stakes in game are worthwhile because a well-designed user experience makes the interface almost disappear, enabling users to concentrate on their work, exploration, or pleasure.

Justinmind is an active member of the brand new IxDA Barcelona. IxDA Barcelona is the local chapter of the IxDA. The new association will organize events on UX design and serves as a platform for discussion and news for everything related to interaction design, UX design and usability in the Barcelona area.

The new born association will organise its first event in Barcelona on June the 17th with Rich Radka from Node as the guest speaker.

The event will take place in the Dusk Bar, calle Merce 23, metro Jaume 1 at 7p.m. Follow IxDa Barcelona on Twitter or LinkedIn.

IxDA BArcelona first event

Wireframes are all but a clear notion in the web design world. When it comes to the design process of any IT project, several notions comes into mind like wireframe, design, sketches, prototypes. After reading an article on sketches and wireframes in UXmatters, I thought it’d be a good idea to put these blurry notions back in their current context of new technologies… hence methodologies.

At a time when technologies (web2.0) and devices (mobiles, tablets…) are exploding, wireframes, design and prototype are merging together slowly but surely. But first let’s have a look at these blurry notions and see how they are coming together in the creative process.

Wireframing the design

A wireframe is often understood as the first step into designing a future app or website. It usually consists of a rough sketch, usually hand-drawn, of the user interface. Its main purpose is to throw out ideas and design “directions”. Hence, it has to be “fluid” and disposable to be changed quickly. A wireframes is a team work by definition. Everyone has to be invited to provoke ideas and directions. It primarily focuses on communicating concepts and structure. Thus it doesn’t include details as these are left to design.

Designing the app and its interactions

Although I separated design from prototypes, these two processes often go hand in hand. After they have gone through different ideas and concepts, designers usually start designing their future website. But with the coming of the web 2.0 and the growing importance of functionalities, the design has to be functional and tested among users and on different devices (desktop, web, mobiles…) in order to be validated. Testing their design before implementing it is one of the reasons why more and more IT companies have started using functional prototypes.

Prototyping and the web 2.0

If wireframing is all about suggesting and exploring, Prototyping has a lot more to do with validation. Moreover, with the coming of the web 2.0 and new devices like mobiles and PC, the focus was put on interactions and dynamism. And apps have now to be crossplatform, taking into account a wide range of devices (mobiles, pocket PCs, tablets…). That’s why prototypes came into being as IT professionals realised that making changes to a final product was a lot longer and expensive than changing a inexpensive functional prototype. Very close from the final application, functional prototype are made to make the final user tests. From design to functionalities, Business rules and requirements, an application prototype has to include them all in order to get the validation and start the development process.

The agile method bringing them together

Now a days, apps are born and live in a very competitive world. In order to prepare them for success, the design and user experience processes have to be carefully orchestrated. So rather than separate all these processes, companies tend to merge them to get a more agile creative process. Some even go as far as using prototypes for both designing and developing processes in order carry out user tests, operating and visualising the changes that will have to be done on the fina

With the success of mobile devices like the iPhone and the iPad, the market of web and mobile applications is booming. With an increasing competing market, a well planned app is the key to success. It’s now important to anticipate everything from business plan, stakeholders to user experience and even clients, before you even start coding. Building a wireframe or a prototype can be the right answer to a successful project.

A wireframe to improve user experience

First and foremost, a wireframe can be used to improve the overall user experience of a future app. It is indeed a fundamental step to enhance, and often start off, an efficient interface. Some wireframes and prototypes can even integrate useful user testing tools to carry out user experience research. As the world of apps for mobiles and web becomes increasingly competitive, the best possible user experience is essential to the commercial success of a future app. UX design and user experience are why wireframes saw the light in the first place, however wireframes are now used for completely different reasons, primarily commercially driven.

Find stakeholders before developing

A wireframe or prototype can be very useful when you´re actively looking for investments to develop a project. Once a first wireframe or functional prototype is done, you can approach potential investors and stakeholders showing them a concrete draft of your project.

Promote your app with a wireframe

But wireframes can also be useful to simply promote an idea. At Justinmind, we have had concrete examples among our customers. A scientific used Justinmind Prototyper to create a functional prototype of a future innovation portal. He then took it to investors and even clients, looking for funding. Without any investment at first, he gathered enough funds to actually carry out his website, now online.

As we can see, wireframes can be used for a lot more reasons than just UX purposes. They can be extremely valuable to sell your future idea, and you don´t need a “first miss” to gather feedback and a “second version” to make changes.

Dear customers and users,

Today we have launched a new update for Justinmind Prototyper with some interesting improvements that could make your daily work more comfortable. Important: if you use the new widget named “rectangle” your prototype can be opened with the 3.2 version only (not older versions).

Tables

We have changed the way tables resize. Now, only the last column or row is resizable. We realized that resizing all the cells when a table is resized has more drawbacks than advantages so we changed it.

Selection

Components are not always easily selected. So we´ve decided  to improve this feature by highlighting components when “flown over”. Now, you’ll see a nice orange border effect when you put the mouse over a component. Furthermore, the cursor now changes state to suggest possible actions to users.

Containers

We also decided to change the way containers work. Before, you couldn´t  put a component over a container as the component was integrated straight in the container. We also changed the dual structure of “layer containers” vs “simple container” as it was impossible to transform one into the other. First, we changed the “container” widget to a more simple “rectangle”. Moreover, all the old “containers” are now “layered containers”. Please note that all prototypes made with older versions work fine, however, prototypes made with the 3.2 can´t be opened with older versions.

Widgets

We have noticed that certain users tend to create widgets by clicking on them in the control panel and then click again on the canvas, instead of using the drag&drop function. These users were used to other drawing tools that work like that, so, along with the drag&drop option, you’ll be now able to create widgets by clicking on them on the control panel. This can be really useful when you want to draw a rectangle with a certain size from start.

Outline View

The outline view was a really good solution to the selection issues on the widgets but we have received many requests to improve it. So now you can right click on the outline view elements and execute the same options that if they were selected in the canvas. Also you can define the order of the elements by drag and drop and insert elements into containers also by drag and drop, all inside the Outline View.

Keyboard shortcuts at Properties panel

The canvas  were reacting to keyboard shortcuts like CTRL+C or CTRL+V but the properties panel wasn´t. So users thought they were copying and pasting properties between the properties input fields but what they were actually doing was making copies of the screen component that was selected. To avoid such confusion, we have implemented all these keyboard shortcuts on both canvas and property panels.

We are always happy to receive suggestions from anyone, drop us a line! Many of the suggestions have already been implemented and others will come in future updates and releases. Thanks to all our users for their insightful feedback!

Presenting a wireframe to clients became an essential requisite part of the design process. But wireframes started to be handed out to clients for clear contextual reasons and not just because you “had to”. With the coming of HTML prototypes, we’ll discuss here what questions you should ask yourself before starting the design process.

The importance of wireframe

Whether they’re just a couple of boxes sketched quickly on a paper or detailed drawings with real content, every project now includes a wireframe of some kind. They provide guidance for designer… that’s why they are called wireframe.

Some see wireframes as simple blueprints for the general layouts but the relevance of wireframes shouldn’t be underestimated. Despite their sketchy and basic looks, wireframes are guidelines that follow both designers and developers all through the creation process.

Why wireframe

In most cases wireframes can bring valuable insights before starting a design, like for:

-    forms
-    general layouts
-    news sites
-    when you lack of content

In most cases, wireframes are usually easily approved by clients as they lack visual context like non-content graphic elements. In such contexts, black and white wireframe helps to get a clear picture of how the final result will look like.

Why not to wireframe

However, a wireframe can’t convey important design components. Grey boxes and lorem ipsum content can’t communicate how colours and contrasts influence content, the visual impact  of brand design or the visual weight of graphics elements and the visual path created by colours, contrasts and components.

But because the purpose of a wireframe is so much intricate with design, it’s sometimes best to start with the design. In some cases, the client might not fully grasp the point of a wireframe, or simply doesn’t agree on the objectives you have set… and bad starts are never a good sign for a project. In these cases, it’s thus best to first agree upon a clear direction for the design and then start wireframing specific layouts.

Why Prototype

When the time comes to create the final design, what seemed logical at first might not fit the final output. Changes often have to be made as textures and images can influence relationships between elements.

And as time goes by, the further design moves away from functional requirements, the less effective becomes the wireframe. Inversely, a wireframe can also look dull and little attractive to a client when the actual design is actually very effective and impacting.

The alternative here is to create a quick HTML prototype of the future app. The prototype can integrate both a sketchy wireframe and a more final draft of design. Furthermore, the prototype is functional and some like those made with Justinmind Prototyper, even feature interactions and real data behaviour so that clients can test their future app before starting developing it.

Wireframes for information or promotion purposes lose their effectiveness, especially when it comes to questions of branding and images. You need the full design to assess the successful quality of the output. That’s why, in some cases, prototypes are more relevant than wireframes.

At the beginning of every project, all parties should assess the need to wireframe or rather to prototype, so that they can best serve the needs of the client.