How to determine the dimensions of a wireframe/mockup


#1

How do designers determine what the dimensions of a wireframe or mockup will be? For example in a wireframe you sometimes see a box with dimensions 300 x 400 for example and othe boxes have their own sizes as well.


#2

Hi @ralphc-nyc – I’m not sure that I understand your question. Can you elaborate a little? Do you mean the overall dimension, the dimensions of the individual parts, or something else?


#3

yea I mean the dimensions of the individual parts.


#4

Hi ralphc-nyc, the way I do it is to determine the width of individual elements by working forward from wireframe sketches. I work out the scale of the wireframes themselves based on user research about the types of devices the audience prominently uses, and then I design for an appropriate range between any necessary breakpoints. Noting their devices during interviews or site visits, checking Google Analytics for device and resolution metrics, reading secondary research about the way things are moving, and comparing to where the client wants to head.

My wireframes are very sketchy and measuring them isn’t really going to give any meaningful numbers. But it does allow me to start setting up columns and baseline grids for consistency and content reflow across adaptive designs. Lots of iterations and testing. I can plan how things squeeze/stretch with the adaptive layouts, and what those percentages and constraints are in the “final” design. At some point I’ll jump into a digital tool like Balsamiq, Axure or Sketch and refine the design.

Once I’ve got an understanding for how the layout works, I sit down again with the front-end developer and crunch through all the measurements they need for slicing the design into a digital prototype. Skype and Axure are great for this as they give you measurements pretty easily.

It’s less about specific element sizes, and more about placement and prominence within a defined range. Specific pixel dimensions are a bit restrictive, so I tend to refer to the number of columns the element uses, also specifying margins and gutters and baseline grid. If you’re designing for a very specific screen size, you can allow for screen density by working in scaleable pixels (sp) for fonts or density pixels (dp). For example, Google’s Material design language references elements in this way. They also have [URL=“https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints”]a good model for approaching column based design.


#5

thanks for the information. regarding the grid, are all grids the same? I learned about the 960px grid before but I have been looking into this grid:

https://projects.invisionapp.com/share/X8U0C9WF#/screens/23186778

Is it the same concept for both?


#6

They’re the same concept and similar execution. They’re both 12 column grids. Twelve is a good number because you can divide it into halves, thirds, quarters pretty neatly as well as maintain a flexible layout with non-even columns without getting too simplistic. You can’t do this with less columns, but you can with more—16 and 24-column layouts are commonly used too, but I find them a bit fiddly for most projects.

There are dozens of grid systems, often built around a particular framework/philosophy. For example: https://responsivedesign.is/resources/frameworks


#7

Thanks, I appreciate the help.


#8

You’re welcome. =)