1

everyone! This is a problem that I've been struggling with for a minute and I thought I'd just write to see what everyone else is doing.

Back in the day when we presented wireframes, we always tucked them into a nice .PDF with a frame around it for our company that looked nice and sexy. But that was before we were making so many super-long one-page wireframes and designs.

How are you guys doing it now? Are you wireframing and designing as one really long .sketch file, then exporting it in one piece to .pdf to present? Or are you slicing it up and showing the different sections of the one-pager on different pages of a .pdf?

I'd like to show it all in one piece, but I also want so retain the company branding, so I'm stuck. I'm super keen to hear how you're doing it.

Thanks!

Improve this question
2
  • 1
    We print them in several (paper) pages, then pin them to a big board - the size is more or less realistic. When they need to be sent by email, we just use a long PNG / JPG / PSD. Do you ONLY need to send them digitally?
    – Yisela
    Commented Sep 23, 2015 at 12:54
  • At the companies I've worked at we've used .psds
    – Zach Saucier
    Commented Sep 23, 2015 at 16:23

4 Answers 4

Reset to default
2

I use Invision App for this. If you read the tutorials there is a way to get the nav to stick so you can make a bar at the top with your branding and have it stay at the top when the user/client scrolls down the page. Hope this helps.

www.invisionapp.com

https://support.invisionapp.com/hc/en-us/articles/203730455-How-do-I-set-fixed-headers-and-or-footers-

Improve this answer
1
  • Sweet. I tried Marvel App, but I haven't tried Invision yet. Thanks so much!
    – thebrownsquare
    Commented Sep 24, 2015 at 12:09
2

My 2 cents.

Lets say I made a wireframe or predesign in Ilustrator.

I simply export a big long jpg and place it inside an html containing:

<html>
<head>
<style>
 body {margin: 0; padding:0;}
 img {width: 100%}
</style>
</head>
<body>
 <img src="MyBigImage.jpg">
</body>
</html>

And I'm done.

But If you think your mockup is tooooo long... probably the finished one will be too, so don't do it that long.

Want to do it more interactive?

Export each section as a separated img and add an ID

<img id="One" src...>
<img id="Two" src...>

And make a floating menu.

Of course you can add some Jquery to make the jump smooth. For the first delivery probably sounds too much work. But it is a template you can use and re use. So it is worth it.

Improve this answer
1
  • Thanks, dude. This is exactly what I'm thinking about doing next time.
    – thebrownsquare
    Commented Sep 24, 2015 at 12:16
1

For web I usually code the wireframe and let the client run through it. If this is not an option and you're in a preliminary stage of the wireframe you could separate it by section in the PDF. If this is for a device you could always create a mass storyboard and allow the client to come in or email them something like this:

enter image description here taken from speekboy

or like this on a white board:

enter image description here

from UI Stencils

If this isn't an option I would suggest maybe a hangout or some type of video meeting so you could explain the wireframe. All this still depends on what stage in the wireframe process you are in.

Improve this answer
4
  • 1
    I can't decide if I love or hate that whiteboard stencil. :)
    – DA01
    Commented Sep 23, 2015 at 17:38
  • ya they do have other tools but if you have three 4 x 8 dry erase boards next to one another it does come handy
    – user9447
    Commented Sep 23, 2015 at 17:49
  • @DA01 I think I'll go with love the concept, hate the colour. Seems like a balanced solution.
    – Janus Bahs Jacquet
    Commented Sep 24, 2015 at 1:31
  • Thanks for the feedback, everyone! Sometimes I'm doing mock-ups or placing things in Marvel App, but for when I'm not, I was just super curious how others are handling it. I love whiteboards, but I don't think I need a stencil.
    – thebrownsquare
    Commented Sep 24, 2015 at 12:14
0

How are you guys doing it now?

By not using PDFs to present web sites. Web sites are dynamic documents where it's best to present it in the browser as a working site. We may still show some wireframes (but those aren't ever supposed to be 'sexy') and maybe some visual comps to give a feel of the overall look, but we avoid 'full page mockups' as much as we can for a number of reasons...the least of which is dealing with responsive layouts.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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