PDF Mockups

18 Mar 2010 - 4:40pm
4 years ago
5 replies
1642 reads
mwioncek
2009

Hi,

Has anyone made any attempt at turning mockups or high fidelity prototypes built in HTML with javascript into a usable PDF file that maintains functionality?  I'm looking at ways of preserving this information (in my case mockups that have alternate views controlled by javascript) in pdf form.  If anyone has done this I'm curious what the process was.  Was there specific changes that had to be made to the scripting code etc...

Comments

18 Mar 2010 - 5:37pm
Andrew McKinney
2008

I see the value in what you're trying to do. it would be nice to have a portable PDF version of your prototype to shop around to users/testers. This doesn't address your question as to creating these PDF's, but I recently tested with a PDF click-through mockup and the problem was scrolling. Participants would attempt to use the scroll wheel or scroll bar to see further down the page. In response, the Acrobat would flip through the screens rapid-fire, and the user would be confused.

I'm not sure if there's a way to turn off this scrolling, but for click-through page mockups (even after asking the participants to avoid the scroll wheel) they'll inevitably start scrolling. I would have much rather used an HTML/JS version than the PDF mockup for user testing. Maybe there's a way to turn this off, but I was unable to find a good way to do so.

18 Mar 2010 - 5:46pm
mwioncek
2009

Yeah, that's pretty much the idea of what we'd like to accomplish.  Even showing other states with a flat mockup such as, interactions, visual design, editorial specification on the same document with some type of hide show would be good.  

As a follow up question what are others out there using to show dynamic/interactive mockups for multiple states?

26 Mar 2010 - 5:41pm
Diana Wynne
2008

OmniGraffle's export to PDF supports embedded links. So you can create clickable wireframes with buttons that go to different canvases/pages.
Diana

On Thu, Mar 18, 2010 at 7:12 PM, mwioncek <contact@ixda.org> wrote:

Yeah, that's pretty much the idea of what we'd like to accomplish.  Even showing other states with a flat mockup such as, interactions, visual design, editorial specification on the same document with some type of hide show would be good.  

As a follow up question what are others out there using to show dynamic/interactive mockups for multiple states?

(((
19 Mar 2010 - 8:25am
ha.ulrich
2010

I have tried to create PDF mockups in a slightly different way. I used Adobe InDesign for composing the screen and created 'buttons' which InDesign is capable of making. However, these buttons don't work very intuitively as they are originally meant for navigating through slideshows. So that brings it back to the functionality of Powerpoint, with some benefits like good alignment of objects, colour choice, transparency and use of object styles.

I wouldn't know how to make mockups with html and javascript work as PDFs. Somehow the PDF generator must recognise the links and carry you through the document.

PDF is a widely accepted format and it would in my opinion be very suitable for getting your mockups everywhere. I just think the featureset should be extended, and a right way or tool should be found that transforms interactive mockups into clickable PDFS.

22 Mar 2010 - 11:58am
ChrisDigital
2010

Not sure I get what you're trying to do completely but...

If you're using a recent Mac and the page is "print-friendly"... you can send the page to print and instead of sending to a printer, click on "Save as a pdf" in the pop-up dialogue window. This should give you base pdf files you can work with. I imagine you're going to need to screenshot some elements and aggregate overlays and everything into something like Photoshop or InDesign to markup call-outs for functionality.

Hope this helps.

Syndicate content Get the feed