User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm just starting to learn web design and ux and I have a very simple question. What is the best resolution to design for?
For example, I want to design a WP Plugin settings page, what resolution should it be? What resolution should I use for the buttons?
With the rapid growth of mobile devices over the past five plus years, you can no longer design an interface targeting a specific resolution.
It was during the process of resolution fragmentation that mobile first design became popular.
The concept with mobile first is that your design (starting with the information architecture all the way through wire-frames and eventually prototypes) should start with the smallest screen size. This is where you have to make the hardest design decisions when it comes to organizing your content and presenting the user with an intuitive interface.
From there you can increase your resolution and add the "nice-to-haves" to the core of "must-haves".
If you are just getting started, I would recommend you read the following to give you a jumping off point:
It sounds like you're asking "Which PPI value do I use in PhotoShop when creating images for the web".
The answer is: It doesn't matter.
Image resolution in PhotoShop only affects printing the image. It has no affect on the image when displayed in a web browser. All that matters is the pixel dimensions of your image. If your image is 100px x 100px, regardless if you set it at 72ppi or 300ppi, it will look exactly the same on screen.
Most people use 72ppi which is a fine, acceptable default, but it really has no bearing at all on the final output.
The only other time that resolution will likely come in to play is if you need to support high ppi devices--at which point you'd need to create an image with double-the-size dimensions.
So if you want a high resolution image for a Retina iPhone, you'd need to create a 200px x 200px version of your earlier image.
The best resolution to design for is what your target market uses.
That may mean multiple sizes. For web design, check our Responsive Web Design (RWD).
Mobile First Design is a popular trend as well, meaning you start by designing for mobile first and then worry about other contexts.
Also, you should be wireframing first (most of the time).
I just want to give you a hint concerning nowadays user requirements and needs due to multiple devices. the hint is not really new but maybe it will help you: "responsive design". -> short introduction including mobile first approach: http://www.youtube.com/watch?v=SJK_fRfOuLc -> i'm not really into WP but as far as i know responsive design is also the most important "feature" introduced to WP within last 2 years. -> e.g. http://wordpress.org/themes/responsive and yes.. it's not any more about one single "resolution" ... thats why many designers re-think their photoshop use instead of using html(5) prototyping (but that's another discussion)
Photoshop's "resolution" is different from a computer's resolution. In Photoshop, resolution is in pixels per inches while a computer's resolution is the dimensions of a screen which is pixels by pixels.
For website, the resolution in Photoshop should be 72 pixels/ inch
Source: Photoshop Tutorial - 3 - How to Create a New Document (Youtube tutorial video)
Well, the first thing to do is start with your biggest screen and work your way down. Also you'll probably have to do two designs, one for full width browsers and one for mobile. Now they maybe exactly the same, but it's great to plan for wide and narrow.
As far as what resolution, W3Schools, has a browser resolution statistics page. It shows that about 9% of the people as of January 2013 were using 1024 x 768. This means you should probably still look at designing something along the 960 grid for fixed width or decided if you want your design to be fluid.
