0

Thought I'd throw this out there.

At which scale does everyone produce their wireframes/user flows? For mobile, I usually design at 1:1 scale using iPhone 5 dimensions (320x568), but I've found that when creating user flows at 1:1 scale that it can usually lead to a large canvas size (in Illustrator or Sketch or what have you) once you have multiple instances each wireframe and annotations.

Something like this would require a very large canvas if designed at 1:1 scale: https://dribbble.com/shots/2483852-Lifeonit-Mobile-Onboard-Wireframes/attachments/486957

  • One approach could be to design at half scale, but then you're really not making an honest representation of what can fit within the viewport. Other downsides to this is that you have to always keep 1/2 scale in mind (e.g. 12px type is now 6.5px), text may be hard to read, etc.
  • Another approach could be to design at full scale, and then reduce the size when placing into the user flow. Downsides to this is that it makes editing after resize more complicated.
  • A third approach is to design at completely arbitrary dimensions. Everything will still be relative which will help with balance and the general idea, but still it's hard to plan with pixel dimensions in mind. I've seen some UX kits that do this. Their many different UI patterns can't all fit within a single artboard, so I find that the viewport on a mobile phone is like 302px wide instead of 320).

Anyway, I'm curious how everyone approaches this and what are some of your best practices.

1

I work somewhere in between the first and second option.

In mobile I prefer scale so I can test the wireframes on an actual phone, which is very important.

But on any other screen, the main issue in my opinion is to keep the relative resolution, not the actual size. If you wireframe for desktop I'd design on a 16:9 screen, this way you can take into consideration what a full screen includes , where you scroll, what the user sees first, etc.

  • Seconded. I design at 1:1 for prototyping first (I personally use InVision), then when my tappable/clickable prototype has been validated with a few testers, I start working on my wireframes/flows and usually scale things down to make room for my annotations. It varies depending on what platform I'm designing for, but I try to scale things down to fit nicely on the screen at 100% for whomever is going to be using my wires for development. My engineers don't love huge images they have to zoom in to read, so I lay things out with that in mind. – Vicki Mar 8 '16 at 22:08

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.