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!

  • 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 Sep 23 '15 at 12:54
  • At the companies I've worked at we've used .psds – Zach Saucier Sep 23 '15 at 16:23
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-

  • Sweet. I tried Marvel App, but I haven't tried Invision yet. Thanks so much! – thebrownsquare Sep 24 '15 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.

  • Thanks, dude. This is exactly what I'm thinking about doing next time. – thebrownsquare Sep 24 '15 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.

  • 1
    I can't decide if I love or hate that whiteboard stencil. :) – DA01 Sep 23 '15 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 – DᴀʀᴛʜVᴀᴅᴇʀ Sep 23 '15 at 17:49
  • @DA01 I think I'll go with love the concept, hate the colour. Seems like a balanced solution. – Janus Bahs Jacquet Sep 24 '15 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 Sep 24 '15 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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