10

I just got a freelance project to design the UI for a website. Can someone tell me what layout (dimension) is used to design a website front end in Photoshop? What are the basic dimensions used?

Improve this question
0

3 Answers 3

Reset to default
16

Screen Size

Higher screen resolutions ultimately make everything look smaller. enter image description here enter image description here

A very small percentage of Internet users are still using older resolutions like the once popular 800×600.

Sites using a 720px width appear very small on high resolution screens, and don’t leave room for a sidebar. Now most websites are staying somewhere around 960px wide. Some sites are even catering to the latest technology with much wider sites.

| Website                 | Max-Width |
|-------------------------+-----------|
| Stack Exchange Websites | 980px     |
| facebook.com            | 980px     |
| yahoo.com               | 990px     |
| msn.com                 | 970px     |
| wikipedia.com           | 100%      |
| walmart.com             | 720px     |
| bestbuy.com             | 790px     |
| apple.com               | 985px     |

Although it is important to consider the newest devices, I believe the optimal website width is still 960px wide. This width caters to the majority of devices and makes your site fit nicely in both 1024px and 1366px wide screens.

960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, and 15. It is a dream for making a perfect grid site. This leads to the popular resource called the “960 grid system“.

Readability

A blog, news site or any other type of content-drive site then take readability into consideration.

“The ideal line length for text layout is based on the physiology of the human eye. At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line.”

Reading rate and retention both drop as the column widths increase. It is much more difficult to read a wide page than it is to read a moderate column of text. For the web designer, take font-size and resolution into account. In most cases a safe width for a reading column is between 400 and 700 pixels, and choosing the right font size will greatly help your readers.

Improve this answer
3
  • Not a disagreement with the stats.. However, as of 2013 the majority of web users are now using mobile devices to access web content. Therefore the "99% of users use a width of 1024" is a bit inaccurate due to missing the disclaimer that those users are desktop users, not all users.
    – Scott
    May 7, 2014 at 9:48
  • Yeah! I second you on that, 960px wide is just fine for a non-mobile-optimized site. It is very important to optimize your website for mobile devices, and in this case width should be obviously 100% of the width of the device or to create a mobile version of the website! or making your website responsive with max-width defined 960px. I thought when OP asked "What width should I design for when creating a website?" he meant the higher Screen width devices.
    – 4dgaurav
    May 7, 2014 at 10:12
  • source and date of stats?
    – Handsome Nerd
    Oct 20, 2017 at 22:28
7

The real question is not "which document size?" but "which document width?".

I would recommend to design at 1440px X 900px, this way you're in the average of browser sizes (put some guides at 1000px for smaller browsers and ipad).

Don't stop your design at 1000px, stop your content at 1000px.

Usually I start at this size then I increase my height according to my content. Remember that you can't have the same height for all users because they all have different browser size / different screen resolution.

You should use a grid within your design, it's not required, but it'd help you in several things:

  • Have the same column width between each section, same gap
  • It'd be way easier to convert it to css if you plan to use a grid system

(You can install a Photoshop plugin to generate grid or download some .psd with all the guides)

You can have a summary of the 2014's browser sizes here (and be sure to check other high).

Improve this answer
2
  • Thanks Stephane, i installed the 960 grids plug in....it really helped. I am trying to learn UI designing. Thanks for the info
    – Aby
    May 7, 2014 at 8:00
  • 1
    If you work across UI, don't forget to design "states", for instance all buttons states (disabled, hover, normal, active...). Do not use layer blending and try to use vector shapes if possible instead of layers. This way your design would be scalable.
    – Stéphane
    May 7, 2014 at 8:03
2

Commonly users now surf with a browser set to 1024 x 768 or larger. It's generally acceptable to use 1000pixels as a max width

i mostly use mockups at 1100px wide even I'm designing for 1024px resolution. I set up guides within the mockup for 1000px. Because entire content come with in my place, The height may varies.

once u check out http://960.gs/

Improve this answer

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