In September 2010, Justinmind will issue a enhanced version of its Prototyper. With Justinmind Prototyper 4.0, you will create dynamic website wireframes and highly fidelity application prototypes without coding. Register online at http://eepurl.com/FNTV to test the new Prototyper and win free licenses of a value of $495 each.
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.
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 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).
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.
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.
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.
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.
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.
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.
According to UN´s last E-Government survey 2010, governments all over the world have made significant efforts to increase citizen participation and access to political affairs through the internet.
The survey states that during the last 2 years (the last survey dating back to 2008), E-participation has increased everywhere, even in least developed countries. Authors further argue that in the current context of world financial and economic crisis, governments can take advantage of new technologies like the internet to gain transparency by sharing freely their data bases with the public. Following the same idea, e-government can add significant agility to public services and bureaucracy, thus helping governments to respond and react more quickly.
The usability of governments´ applications is thus fundamental to increase the public access and participation. One way to achieve it could be to involve citizens (the final users) in the definition process, like when making wireframe or prototypes of apps.
Gathering user feedback on the usability of an app before its development is essential to its success, and this is probably even truer when it comes to online citizen participation. On the one hand, apps have to answer the needs of citizens. On the other hand, these programs have to be comprehensive and easy to use, so that users can understand what to do right away.
Involving citizens as users in the wireframing and prototyping process could thus benefit both citizens and governments. Publishing functional prototypes would let the very final users (citizens) test and comment a future app. The very citizens, the targeted audience, would be the ones defining and validating apps of their public institutions. This system would show a true e-democracy as institutions are supposed to be working for the people.
Communication between institutions and citizens would thus become more “agile” and the public would regain trust in political institutions, often seen as oblivious of the people´s reality. But more than just improving political participation and communication, the use of prototype would also increase productivity by avoiding long and expensive rework loads.
Now-a-days, a wireframe is essential to plan and prepare any IT project. Failing to plan development and design ensures a dramatic journey.
Wireframing a project is thus the key to a well-planned development and delivery. Wireframing appears right from the start, when you have the very first idea of an app. This article will give you tips & tricks to improve this essential process that is wireframe.
1) State a clear objective first
Once you´ve got a clear idea, the temptation to jump straight to the coding is high. The idea seems so easy at first you think start coding righ away? But IT projects are never that simple and you won´t wait long before a handful of problems (small & big) will get in the way.
A wireframe basically identifies all these issues. This will save you time and money because it´s easier to make changes on a paper wireframe or even on HTML prototype than to hundreds lines of code.
But the wireframing process doesn´t just avoid errors, changes or rework, it also helps to get a better understanding of the application. Visualizing a website wireframe or prototype triggers new ideas and raises questions.
Besides, a wireframe can be a blueprint from which designers, developers, architects and project managers can work from so that everybody is on the same page.
2) Pretty is good, functional is better
Wireframes are primarily about usability and functionalities. That´s why they come prior to the actual design. “Here you´ll have 3 buttons, a auto-validating form…” It´s about function, not form.
Some wireframe extremists even strip down wireframes to let nothing but functional elements (dropdowns, buttons, text area…) and purposely ignore any design so that everybody can focus on usability.
3) Think about user experience, not layout
Everybody has used websites, so even if designing or programming one requires technical skills, drawing the experience you want to have can be done by literally anyone.
4) Who’s in Charge?
It´s essential to put someone in charge of the wireframe process. This (these) person(s) will be responsible to keep it up to date and to manage changes and feedback…
5) Everyone is involved
The first meeting might be for stakeholders only, but then it´s important to involve everybody in the process, from marketing to designers and developers or even users.
6) Put a deadline to the wireframe
If you want to keep a project moving, decide of a deadline for your deliverables and stick to it.
7) Avoid Designing
wireframes are focused on usability, not the way the app will finally look like. This focus on usability is there for a reason: it avoids distraction.
08) UI vs UX
a wireframe is about functionalities because for usability and accessibility reasons, apps should be thought first without interactions. Interaction can be prototyped in a second stage, through a HTML/JS.
9) Think about users
Most of the time, we´re too focus on the functional and we forget about the user experience. That´s why user tests are essential, even at early stages like wireframing or prototyping processes.
10) Like a website, organise your wireframe into sections
A website or an app is often organised in sections like products, user account and news. Follow the same division for your wireframe as it should be as close to the real navigation as possible.
11) Scenarios and “stories”
Web apps often rely on a number of processes, a more or less linear structure: log-in > buy > checkout, for instance. These processes can often be linear but sometimes users can choose to skip a step or go through different paths. Number the pages in your document and label the action (and where it leads the user) on the page so that you can actually read the wireframe like a story.
12) Look for consistency
A consistent app is always helpful to users, developers and designers. Repetition of groups of elements can therefore be useful and clarify things to users.
13) Does it make sense
From business men, to marketers and designers, the final document should be easy to read… like a story. Try asking one person who has nothing to do with the project if they can understand it.
14) Include ads
For monetization purpose, many sites include advertising. Ads are functional and nort design, don´t forget to include them.
15) Include public and private page
Today, sites usually have an administration area to manage content or user profiles… These private pages may not be viewed by many but they are important enough to be included. These pages are for example extremely relevant to developers when time comes to design databases.
16) Fair amount of version
Make sure everybody involved have their say. A first wireframe should aim at gathering feedback, a second that shows this feedback was taken into account and a last one for the final polish.
17) Pick the right tools
Putting things on paper is often a good way to start throwing ideas and concepts. However you should quickly turn to fast wireframing tools and prototypers as the project evolves.
Wireframing concepts is one thing but with RIA, dynamic websites and interactive apps, it´s becoming increasingly important to prototype the whole thing before getting your hand into development.
18) API & third-party components
If your website integrates API or other external web services like PayPal, it may influence the whole structure of your site. API are thus also important to take into account when wireframing.
I hope that this article covers most of the questions raised when dealing with wireframes and prototypes as to who should be involved, the right tools to use, how to approach it, and how the final output should look like.
What about your own tips to improve wireframe? Post them in comments!