6

I do mockups and prototypes of sites and designs all the time, but I've always wondered if there is a standard size or width I should be using. Generally I'll make my document either 1024, 1200, or 2560px wide, depending on what I'm doing.

So what do you think? What is a good or standard size for this?

Improve this question
1
  • Not sure what you're really asking when yopu say "document width" - doesn't it depend mostly on your content width - which might also vary per device ('liquid' or 'elastic')?
    – e100
    Feb 20, 2012 at 19:14

4 Answers 4

Reset to default
6

For mockups and prototypes:

  • I use 960px with 940px usable area and 10px gutters on each side. This is pretty accurate to the 960.gs PSD and other format templates you can download.
  • I use Twitter Bootstrap for HTML prototyping and tend to make my photoshop wireframes resemble many of the bootstrap elements

Twitter Bootstrap now has responsive design features and media queries so you can prototype for large screens and mobile devices pretty effectively.

Improve this answer
3
  • Note that in 2012 this would have been as good of an answer as any, but today if 'responsive web design' isn't part of the conversation, that's a huge miss. (though prototyping absolutely addresses that, but not sure this answer makes it clear to those not familiar with it)
    – DA01
    Sep 2, 2015 at 22:38
  • 1
    Downvoted for the reason @DA01 stated, this answer is not as useful anymore.
    – Ryan
    Sep 2, 2015 at 23:58
  • 1
    @Ryan: Why Downvote? The answer was good when he wrote it. So a downvote is not really fair. I would find it better (for the whole stackexchange) that you can mark a correct answer as "deprecated" and ask for a new answer. So the user with the deprecated answer doesn't get negative points and the reader is noticed that the answer isn't correct anymore.
    – Michael Schmidt
    Dec 5, 2015 at 9:05
2

This is (one of) the problems with prototyping outside the medium you are building in. Ideally, you'd be prototyping in the browser itself. That way you can easily and quickly account for browser variances.

Sans that, you really can only make a best guess based on the particular project you are working on.

For example, everyone in this thread is mentioning 960px. That's a fine assumption in a lot of cases, but a dangerous one in a lot of others.

Today, a good general size is 320px wide. In other words, mock up the mobile version of a responsive web site first. Then work your way out for larger views as needed.

Improve this answer
0

960px is best in my opinion for content, but assume 1100px is visible.

See here

Improve this answer
0

1000px for content area. on the background it depends on if your background is repeatable or just a solid color.

Improve this answer
1
  • Welcome to Graphic Design! There's nothing wrong with your answer, but it would be preferable to see some extra information in the answer explaining why (for example) 1000px is a good number.
    – Farray
    Feb 16, 2012 at 16:01

Your Answer

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

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