Webpage design size?

Hi Guys,

I’m doing an assignment where I need to provide a quote on delivering a Word Press Theme design - and I was wondering what size you design the page at in Photoshop?

My understanding from past work as a developer was that the psds came at: 1024x768
But I have a feeling that things may have changed in the last few years?

cheers
Julia

I’m unsure how you came up with those dimensions. Websites rarely have a specified depth; they’re typically as long as they need to be.

As for widths, most all current websites are responsive in the sense that the way the information is displayed (and sometimes the information itself) depends on the width of the user’s browser window. I just finished a site with a responsive design with several standards widths and a rather fluid arrangement of elements within each of those widths.

1200 pixels and over (large desktop)
960 to 1999 pixels (standard desktop)
767 to 959 pixels (tablets and larger phones)
767 pixels and below (phone and smaller tablets)
And a special category for small phones in the 480px range

Those aren’t necessarily standard sizes, though, but they’re sort of somewhere around average since they more or less accommodate most every device. I think it really all depends on the nature of the site, what’s required for that site and whatever underlying base template or framework might have been used.

1 Like

If you are working in psd CC, you can go File>New and click on the ‘mobile’ or ‘Web’ templates, and they give you options for size/devices.

Also, a quick Google search and you’ll find decent psd templates with guides/grid to help you layout content.

If you’re doing mock-ups you’ll probably want to do mobile, tablet and desktop.

Thanks for your comments. :slight_smile:

@Sparrow Pointing towards the Photoshop CC templates was a great idea - thanks! It looks like they list the 1024x768 as ‘Web Minimum’ - but ‘Web Most Common’ is 1366x768.

@Just-B - I think the height is just a starting point, although I remember my days as a developer arguing with designers about the ‘fold’!! >.<
Do you use those breakpoints as your standard set, or was it just this client that you used them for?
Do you do your design work in Adobe products, or do you use other packages? An Art Director friend said recently that they’d moved over to using Sketch because it handled responsive design a whole bunch better.

My experience with web design is sort of a niche thing. The first site I ever designed and built was in 1993 for a newspaper. Every now and again, despite me not liking the work, I find myself putting together some huge website project with thousands of pages of content. Coincidentally, the latest miserable behemoth that I mentioned in my previous post just went live earlier today. It seems that most every site I get involved has most of my time being devoted to content structure and migration, which has become something of a yoke around my neck.

I haven’t designed many small sites, and I have an odd way of going about the sites I do design. I sketch out a few ideas on paper, then launch directly into writing the front-end code, which is typically constrained by some sort of software framework or client requirements that I need to work within. I’ve never really built a Photoshop prototype and handed it off to a developer.

I’ve only opened Sketch a few times — just enough to know that I have no use for it (which isn’t to say that it isn’t useful for others). I don’t have any standard breakpoints since whatever standards there are have typically changed by the next time someone coaxes me into a web design project.

©2019 Graphic Design Forum | Contact | Legal | Twitter | Facebook