Justinmind Blog

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!

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

iPhone widget library for Justinmind

See the library component list: Component List

Example of a iPhone prototype: See prototype

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

Just when UX/IA designers were settling down in a cosy working method, drawing nice static wireframe, Information Architect´s game changed again with the coming of Rich Internet Applications (RIA).

Technologies tend to go faster than our design skills. Whether it´s AJAX, Flex, PHP… it became a challenge to improve the usability of these new applications. Wireframes and prototypes thus became increasingly important to rely on.

“Show, don´t tell”
For complex RIA, prototypes are definitely the best way to express the structure, flows and layout of information. However, if you have a tight schedule, it´s even better to start by “telling” the client a narrative wireframe and then quickly move to more functional prototypes.

Defining user behaviours
When wireframing RIA, a key step is to define “personas”, meaning all the types of user behaviours. In this context, improving usability usually means imagining different narrative according to personas, guiding users through tasks according to their needs and context.

Narrative wireframe
When using a low-context medium like wireframes to illustrate dynamic information like RIA, it´s essential to narrate the information. In other words, it´s best to build stories to illustrate non-linear apps.

This low-context, narrative approach is actually a good way to introduce new ideas to clients. Presenting one dimension of information at a time allows clients to focus on one particular aspect of design, avoiding confusion and misunderstanding. The key here is to focus on general patterns and not details.

Prototyping interactions & dynamism
Once this foundation work is done, it´s important to move to high-context documents like functional prototypes. Designing applications and leaving out interactions or data dynamism is like forget the cheese in a cheese cake… That makes no sense! Dynamic functional prototypes are thus essential to fully grasp the purpose of the RIA and what it can achieve.

Prototyping the actual app is also important for the client to see and validate the final design and not just the information flow. Another advantage of prototypes in RIA is to witness on-going changes during the development process.

These two techniques of wireframing and prototyping, once brought together, can significantly improve the usability of complex dynamic applications or websites.

In any IT project today, wireframes are working hand in hand with the design process. This is because a wireframe cut out from design will most certainly turn out to be useless, because a wireframe split from design is like singing without playing.

The agile method
The integration wireframes in the design process is rather new and was influenced by the rise of agile methodology. Here is a video of a sketchy wireframe evolving into a final website design made with Justinmind… in real-time and in 5 minutes.

Justinmind, a new kind of wireframing/prototyping tool
This very impressive designing process (because fast and straightforward): creating a wireframe and transforming it in a real final design, is a good illustration of the power Justinmind Prototyper. The main advantage of this tool is that it allows non-developers to build not only functional design, but even fully operational dynamic websites without coding.

Justinmind power and ease paves the way to a more fluid method mixing design and wireframes with the development processes to create better user experiences.

The widget library for iPad is finally out! Wireframe & prototype apps and websites for Apple´s new flagship… And the library is free for all the Justinmind users out there! Just download it.
We hope you’ll enjoy wireframing with our widgets. We try to include all the necessary elements and to make widgets as faithful as the original iPad design! We hope you’ll like it, feel free to contact us if you want to add your own iPad widgets, so all the community can enjoy your work.

iPad widget library for Justinmind

See the library component list: Component List

Example of a iPad prototype: See prototype

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

“Is my new website going to look as sketchy?” I’m sure you’ve heard this kind of comment after presenting a wireframe to a client?

Wireframes can often lead to confusion, especially during usability tests with users who don’t know much about the project. But you can use a new agile methodology that will put everybody on the same page.

Wireframes VS user tests

In any IT project, usability tests are essential to get feedback on the overall user experience from random users. Unfortunately, most of them are not quite sure how to respond or interact with a wireframe. Often, they don´t know what they should be doing, and some don´t even realize they´re actually looking at a webpage. This lack of context adds cognitive troubles to every step of the process. In the end, this confusion means less relevant answers and opinions.

Most wireframe tests occur with good-willing, though unsophisticated users. They generously agree to test, figure, be puzzled and answer questions as best as they can. This cognitive gap is often due to blurry definitions on what they should or should not be focusing. “Look at the forms but don´t pay attention to images.” “forget about the design, tell me what you think of the layout” “check the font size but not font itself.” Anyone would get mixed up with such questions.

Design and visual impressions like colors, fonts and images are key to using a site, and these details are important to any usability test. Users won’t be able to use a page properly if they don’t see links or can’t read what you expect them to. Information architects, however, tend to stay away from these features so that they don´t step on designers’ shoes. After all, “a wireframe is no design”.

Design & wireframes

Or is it? The role of an information architect should really be focused on clarity, and getting the message across.

Originally a “wireframe” was a quickly rendered 3D model showing the model’s structure while engineers were still working on it. They were much faster to work with than the full rendering. Interestingly, they are not used anymore since modern tools and techniques are fast enough… that should give us a hint!

Why build wireframes and not straight final design?

Information architects don’t design final webpages, instead, they build wireframes instead of designing final pages. There are several reasons to this:

- Wireframes are faster to build and work on

- A wireframe forces the viewer to focus on the content and not on the visual design.

Unfortunately, all these tasks are geared for the project-team. Wireframes aren’t built for external audiences and this is why most users have a hard time grasping the essence of wireframes.

From wireframe to high-fidelity prototype

IT professionals are thus increasingly mixing wireframes with more functional HTML prototypes. These interactive prototypes are so close from the final output, in their design and interactivity, that it became a lot easier to carry on relevant user tests. These HTML prototypes can even integrate analytical tools like Google Analytics to carry out remote user tests. This use of wireframe and prototypes is changing the way IT project are carried out as it´s now possible to know what´s the best app to build for users before having even started the development process.

Projects can benefit a lot from this more agile methodology as it avoids long, time-consuming changes and cut rework drastically.

Wireframe is a very blurry notion that has been changing over time. We´ll see what it used to mean 10 years ago, what it means today and where it’s going.

Wireframes for specification purpose only, a thing from the past

A few years back, a wireframe was mainly a document cataloguing a long list of page elements… pretty dull to read. Its main goal was to specify a website or a piece of software. This kind of documents was useful to developers but that´s about it! Final users couldn´t get a clear idea of how the final website or app would look & feel like. Of course, here, we´re talking about the pre-historic stage of Information Architecture and UX design.

Wireframes to improve user experience, the new trend

Wireframes thus switched from a purely functional role to a more visual one. This kind of wireframe can be used to convey not only the general architecture of information but also the overall user experience. While before, you created as many detailed wireframes to offer different options to the client, wireframe then changed to be less static and more fluid. Wireframes now tend to be less detailed and much more evolutive through time.

The Agile approach

With the new Agile methodology, wireframes have switched from being focused on dull specification documents to a more functional prototype actually usable, and focused on users. “Is this right design for users?”, “how to improve the user interface?”, dialogue became essential to change and improve the wireframe. They also tend to be not only focused on specification but also increasingly on the user experience. HTML prototype can thus be used to carry out user tests, and not just as a showreel for clients and stakeholders.

Everybody says “wireframe”

Wireframes and their brother-in-arms prototypes, are now a lot more user-centered. Thus, they shouldn’t be restrained to IA (information Architect) or UX designers. Wireframes belong to everybody. From designers to final users and even stakeholders, everybody should be able to create, test and comment them.

From wireframes to quick prototyping tools

Wireframes and prototypes are increasingly used all along the production process to instantly experience changes operated. Paper wireframe will hence be increasingly combined with more functional prototypes to follow the design and development process up until the very end.

Wireframes are without a doubt the key to an efficient interface. They have been used to think and define webs and apps before developing them. From sketchy drawings to high-fidelity functional prototypes, a wireframe can be used for many purposes, before and even during development. Here we´ll see how you can significantly improve your user interface by using wireframe and/or prototype.

Defining personas
Once you´ve got a first idea of your website, you need to think about the kinds of person that will use it. These user profiles are called personas. Once you ´ve done this, you can start thinking about your web interface always thinking about human interactions and your personas behaviours.

Wireframing user interface
You can now start sketching your website on a piece of paper. More for clients than final users, this part is important for client as wireframes help defining specifications and ultimately are used for the client validation.

Prototyping user interface
It´s important to prototype the user interface with at least, the main interactions being functional. The server side doesn´t need to be protyped, however, with the arrival of the web 2.0, RIA and dynamic websites, data request can be essential to an interface. Some prototyping software like Justinmind Prototyper actually allow you to create the interface and even simulate data, dynamic behaviours.

Carrying out user tests
Once the HTML prototype is done, it´s essential to share it to gather critics and feedbacks on what should be changed or not. This does not only help you to improve the interface but will also help you to gather requirements to include in your specification documents. Along with the prototype, it´s also important to include all kinds of diagrams and navigation flows that will help people and users to understand the information architecture of your website or application. Justinmind´s  HTML prototype even allows you to integrate analytic tools to track clicks and views (Google Analytics, CrazyEgg or ClickTale..).

Whether you want to build a brand new interface or simply improve user experience of your website, all these processes are keys to an efficient usability. This part of defining and conceiving your interface is by far the most important one, as the development and success of your app depend on it.