Mobile app version of vmapp.org
Login or Join
Murray976

: How Do You Present Wireframes & Designs For Long One-Page Website? 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

@Murray976

Posted in: #InterfaceDesign #Wireframing

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!

10.04% popularity Vote Up Vote Down

Login to follow query

More posts by @Murray976

Login to post a comment!

4 Comments

Sorted by latest first Latest Oldest Best

 

@Si6392903

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.

10% popularity Vote Up Vote Down

 

@Sent7350415

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:


taken from speekboy

or like this on a white board:



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.

10% popularity Vote Up Vote Down

 

@Holmes874

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.

10% popularity Vote Up Vote Down

 

@Phylliss782

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.
invisionapp.com
support.invisionapp.com/hc/en-us/articles/203730455-How-do-I-set-fixed-headers-and-or-footers-

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme