Tour Agency Wireframe

I have this prototype of a Tour Agency, and I want to create a pop up that shows a map.

Here, in the red dot, I need a link that says: “Click to see map”, and when clicked, a pop up shows the map. For this tutorial, I’ll create just a grey box, but later, it’s possible to embed Google Maps objects easily in Justinmind Prototyper.

First, we go to the Masters Panel, and create a new master. We’ll see a blank main screen. This is the area of the map.

Let’s put a link, and the grey box where the map code will be.

The objects inside the master

I’m going to place the box above the link, so let’s first create the events and then put them in the right position. Also, it’s important to mark the grey box as hidden. It means the box won’t be show in the simulation, except if something happens.

Properties: Hidden

The first event is for the link. Go to the Events panel, create a new event and choose: OnClick – Show, and choose the grey box.

Event: OnClick - Show - Grey Box

The event is ready. If you simulate, you’ll see the box when clicking on the link. Now, the second part. We’ll create a big red X button, to close the box when clicked. To create this, just follow the same steps. Create an X, place it inside the grey box, and add the event OnClick – Hide, and choose the box.

Next step is the layout. Place the box where you want, and the link too.

Go back to your main screen. Just drag and drop the master on the screen, and it will be there. You can place several masters on several screens and them edit them all later by just editing the first one. For this wireframe, we won’t put graphics, but later on the project I’ll put colored buttons, gradients and other things.

Place the master wherever you want

Place the master wherever you want with drag and drop. Then, simulate and test it.

These are frames of the link working:

You click on the link

The map pops up!

I found in this tumblr a great example of a navigation flowchart, made by Jeannie.

Flowchart of the song Total Eclipse of the heart

This Sunday, Suze Ingram tried out Justinmind Prototyper and published a video with it. To show you how easy it was, here’s the video, where she does a wireframe in a few minutes.

The great folks at Fuelyourinterface have a contest where you can win 2 full licenses of Justinmind Prototyper. As easy as telling why you want it. Ain’t it great?

Visit the contest page at Fuelyourinterface and drop us a nice line!

I found this image in this  great brazilian blog about IA. Vinicius Krause explained with a simple image the difference between wireframes, prototypes, mockups, and all that fuss and doubt many people have.

Wiraframe of a cow, by Vinicius Krause

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.

Every project plan has some elements in common. Before starting to create the prototypes, drawing wireframes or hiring coders, it’s important to:

1.    Define what you will do
2.    Divide it in small tasks
3.    Define who’ll do each part
4.    Assign an amount of time to each one of them (start and finish dates)
5.    Create a way of measuring progress
6.    Register tasks finishing dates
7.    Tasks needed before a given task begins
8.    Create a timeline
9.    Assign someone to control and manage everyone’s activity

Avoid failing the project by careful planning
There are several reasons why projects fail, and most of them can be avoided by careful planning.

Not enough time or money: Without proper scheduling and budget control, it’s easy to have a project dismissed due to lack of resources. Besides, even when they not fail, the final project can be sloppy, with bugs or dysfunctional if this kind of planning fail. That’s why it’s very important to have everything that’s needed clear on every team member’s mind before starting.

Poor communication: A client asks for a simple website, and then wants to add functionality that’s hard to implement; the designer makes a wireframe awful to code; the coders say it’s impossible, but it isn’t. Everyone saw that situation sometime, and most of the time it’s a problem of communication. Websites and software can be pretty complex sometimes, and words aren’t very specific to describe them, or jargon can be very hard to understand for non-technical people. It’s important to always speak clearly and make sure that everyone understands what’s being expected and required from them.

Inadequate testing: Most of the time, due to problems in timing. Since launch date is so close, people decide to simply launch it, and then fix the errors. Sometimes it works (as Google Beta apps do), but others they fail miserably. Testing should be done, and it’s even more crucial for first time launches.

Lack of quality: Those come often from time management problems. Not enough time to test, to guarantee that everything is just as it should be, so we’ll correct everything as the problems come. Sometimes works, sometimes it’s a trainwreck.

All of those problems should be avoided with careful planning.

I’ve been creating some screencasts to publish on Justinmind’s site, and did some wireframe examples in some time. The first one took me more time, about 20 minutes.

Version 3.0 is not out, I’m just testdriving some new features.

Have you ever created an early project plan, or a simple wireframe — maybe to get approval for the project — only to find it unworkable when you started tracking progress? With the right start, you can ensure that the plan you create at the beginning of your project is an effective management tool throughout the project.

The first step is to understand all the requirements. In this stage, you’ll need to gather everyone involved in conceptualizing what’s going to be done, and write that down. You can draw a simple wireframe and sketches of the final project too.

Business Analysts and Project Managers are vital for this, and also Key Users, to understand what they need and want from the final product. We recommend a team of 5 people maximum, to avoid empty discussion and eternal meetings.

They’ll get together and write the first list of requirements needed, as much detailed as it can be. The Requirements list will be a briefing of the project, for developers, designers and coders.

Understanding the audience
The users of the projects must be studied. The usage, too. How people will use it is very important and can decide the success or fail of any development project. It is very important that your project is useful and severs a purpose for your selected audience.

People are not equal, and not everyone use software or websites the way you do. It’s important to step on the users’ shoes and understand their thinking, needs and values. After all, they are the ones who’ll use it.

This is why we recommend to have key users involved in the planning phase, and, if it may be, future or potential users.

Creating killer content
It is very important to think about what really interests people and how will they react to what you are offering them. Earning peoples’ attention is normally a one timer: if they don’t get interested in the first time, it’s probable they won’t be a second one. So, think about your users and amuse them.

Designing for human beings – help people
Some people just cannot focus enough on design, on thinking how form and function interact and how people interact with them. There are several unconscious and sub-conscious elements that can change users’ perceptions about a website or a program, and simply helping them find the specific button, or understanding how the program works, or even simpler: having the application have a pretty look. The design can improve a lot with the use of wireframes. Nowadays, there’s no excuse for having a poor looking app.

Technology – it cannot be possibly done
We all know the story of the beetle that cannot fly, according to aerodynamic laws. However, sometimes project fail because someone thinks that creating something is possible, or can be easily done, but actually takes too many work hours or too many people involved or some technology that’s not currently available to all. So, it’s very important to plan everything and discuss with technicians and experts to understand what’s going to be done.

Project Management – following the plan
Even when we get a map, sometimes we get lost. Why? Because somewhere during the travel, we forgot to keep track of where we were. This is to show how important it is to control the evolution, the iteration cycles, the steps and accomplishments. They’ll avoid the feeling of being completely lost, of not knowing where you are and how you got there in the first place.