Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 2 down vote favorite

Is there any tool to explain the interactions between website pages and elements on a big single screen?

I have all screenshot images for all pages of websites, Some are lightbox on same page. some are forms.

I want to show relation between all pages on one screen. By where clicking will come which page , which lightbox , etc.

I have final screenshot (JPG Images) of all 20 pages and stages of condition of pages. Images sizes are 1024x768. I don't want to make slideshow. I want to show all pages in one screen and to explain changes by adding comments with pointing arrows.

I'm looking for Free online/Offline tool.

share|improve this question
This seems quite a reach. – jberger Nov 11 '11 at 17:14

closed as not constructive by Benny Skogberg, JonW♦ Mar 11 at 21:00

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or specific expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, see the FAQ for guidance.

3 Answers

up vote 2 down vote

I am developing WireframeSketcher rapid wireframing tool. It has the ability to create screen flows. You can get the result that looks like this:

WireframeSketcher Screenflow

You can also use existing images to create screens. Create your screens, then link them together, put them in a storyboard and you get the screen flow automatically.

share|improve this answer
Very nice . The screen shot you added I exactly want like this but except wireframe I want to use real images files. Is this tool not free? – Jitendra Vyas Nov 11 '11 at 19:31
The tool is not free. You can use real images too. Create a screens using Image widget, link them using Hotspots. – Peter Severin Nov 14 '11 at 8:00
up vote 0 down vote

Cacoo.com is a free diagram creating site you can use. Features are limited for the free plan but paid plans allow you to collaborate and create additional diagrams, depending on your use the free version may suffice.

You can make wireframes like the below (to any level of details you like) and link buttons to other pages using arrows to create a storyboard. enter image description here

In your case you can zoom out from your wireframe and connect pages like the storyboard below, connecting elements like forms and links to arbitrary items. enter image description here

share|improve this answer
I have already seen it but I want to show all at one screen. Some thing like flow chart – Jitendra Vyas Nov 11 '11 at 18:22
@JitendraVyas Cacoo can scale quite large, so you can create a storyboard of quite detailed screens as necessary, I've uploaded a better example – Ben Brocka♦ Nov 11 '11 at 19:29
In you example you are using wireframe made inside Cacoo and I'm taking about to use real final design files in JPG format. I tried to uploaded my 26 files on Cacoo but it got hanged. – Jitendra Vyas Nov 12 '11 at 3:31
up vote 0 down vote

Here is a link that has 10 different offerings and they are all free!

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.