Rapid Prototype Blog

Posts Tagged ‘wireframes’

You’re going to start a new web project. Thrilling. You have a great idea, or maybe a big assignment, and have to work it through the initial ideas to the final launch. From wireframe to done. How to get there?

Justinmind Prototyper is a software suite done to help you along these steps. It’s meant to organize and facilitate communication between several professionals involved in any site or application development.

Justinmind Agile Methodology for Software and App Development

At Justinmind, we suggest a Methodology based on Agile, with four main steps:

Functional Requirements Capture, in which users research, discuss and decide what is the requirements, what should be done and create a document where it should be explicated. Low Fidelity Prototyping, in which professionals create a wireframe of the project, which describes how’s it going to be, what are the links, the content and the basic layout. How it’s going to work, all the steps, phases and requirements? With text? A simple wireframe that shows where things will be? High Fidelity Prototyping, in which users simulate the final product with an easy drag and drop application creator. Sometimes, you need to show relations. What kind of information a box shows when a button gets clicked, and how that colour changes when the mouse goes over. All this must be in the final product, so it has to be planned, specified and coded. So, you have to put this kind of information on the final project. In this case, a lo-fi wireframe is not enough. These wireframes work just as a map of the web, but for a bigger site, you’ll need to show the relations. So, the ideal solution is a high-fidelity screen mockup. A file that works just as if it was the real website, reacting and interacting with the user. That cannot be done with a simple drawing tool, neither with paper. Validation, in which the simulation is tested with real users, project managers, and client/co-workers. Then it’s all documented and registered to allow the final developers (coders, designers, etc) to build it exactly as it was approved.

This four-iteration cycle should last for approximately a month, from scratch to fully functional project, with a team working full time. The prototyping phase normally takes 10-15 days on average for a project with 80 screens.

If you liked this article, follow our blog’s feed or follow us on twitter.

These are some tips to creating wireframe navigation flowcharts for your projects using Justinmind Prototyper. Use them to understand how users will interact with your website or software.

Guide your users every time

In choosing styles for navigational elements you should try to reach a balance between aesthetics and functionality. Every page must tell the users where they are, and what they’re going to do after. The navigation flowchart is also known as navigation map because of it. The project managers must understand what users do in each and every step, and the designers must take care to show it to the users.

You don’t control how users get to your site. They don’t always come to the homepage, so you must show them there are other pages with content that might interest them. Also, a home link is always recommended.

Simplify the paths through your wireframe

Users don’t want to click several times to reach some information. So, you must create funnels and understand how they move throughout your site to simplify their ways. For example, if almost everyone that gets to your homepage goes to the product page, and then to a specific product, you should consider inserting a direct link from your home to that product.

Sometimes, product managers want users to read everything about their product or service, but that’s not the way users think. It may hinder them from visiting you again.

Think about accessibility issues

Even in the flowchart, you must think about scenarios that involve requirements for people with disabilities. Your project must have a scenario that guides these users and help them find their way.

Start with the main routines but don’t forget the subroutines

Most users will use your site for just one thing: the main one. But sometimes users will use it in several unexpected ways. These can be traced and thought about when you’re planning the navigation map.

Try to include all possibilities and avoid being surprised. Some users can be lost somewhere, because you didn’t think about that possibility. Other way of detecting it is doing usability tests with a simulated hi-fi prototype. That could help you detect a problem long before it happens in a real live website or program.

Justinmind Prototyper is an authoring tool for high fidelity wireframes and prototypes. If you’re interested, follow our blog’s feed or follow us on twitter.

There is a tendency nowadays of doing HTML prototypes for client presentation or to test projects. This is a more realistic approach to paper, but it’s very much more time consuming. Justinmind is a tool made to join together the functionality of a HTML wireframe with the ease to use of diagram tools such as Visio and Omnigrafle.

There is not a conflict between HTML wireframes x paper. Both have problems: not everyone has HTML knowledge, it’s time consuming and people tend to spend more time checking for HTML mistakes than for thinking about the final product. Paper is not the real thing. Cannot simulate very important situations, and don’t work in several tests.

With Justinmind Prototyper it’s possible to generate this HTML just as if it was a diagramming tool. The final code should be created after approval, but it minimize changes and reduce production costs. This way, you’ll have:

An added value to the client, who’ll see something very much alike the final project, with interactions and maybe a mockup of the final layout. Improved client communication. The client will be able to see his web or program working. He’ll understand the links, the effects, and will make his changes before coding phase. Communication through demonstration means that every specification will be clearer, leading to a smoother coding phase. Dump the poor ideas before. It’s better to lose an hour creating a prototype of that functionality than loose a week coding something that won’t get to the final project. Simplified implementation. When everyone knows what to do, and everything’s well documented, the final phases go easy and smooth.

Easier to convince people of the value of a project

Not a long time ago, when people asked for a layout of anything printed, they received something drawn, painted with ink, glued, copied and pasted with scissors and several other objects. Then came digital desktop, which changed forever graphic design. Now, before buying a great project, you see a mockup of the printed version, with almost final quality of colours, shape, etc.

Why selling a website with a static page?

We know coding can be hard, and much more for applications, but that can be simulated to near-real experience nowadays.

You have to build one car to test, then mass produce it

When a car factory builds a car and have it tested, this prototype can be approved, modified or abandoned. They can also be virtually built and simulated with software nowadays, can’t they?

That can now happen to websites and programs.

An HTML prototype is like a real built car. It’s hard to create, but it shows all functionality to perfection. If it works, they’ll build more. A prototype created with Justinmind Prototyper is like a virtual car: you can test almost everything, and simulate to the bones, having all the advantages, but with much less effort.