Correct window dimensions

Question

Update: Just to clarify that this question is not about imitating the OS but more about what the ideal dimensions should be, especially when they seem so random natively.

I am building an application in Adobe AIR that will run on both Windows and Mac OS X.

I'm giving the window chrome its own UI but keeping in with the OS its running on (so for example titlebar buttons will be left or right aligned etc.).

I've not been able to find any guidelines on either Apple or Microsoft developer networks so I've opted for screengrabs of Windows 8 and then redrawn the windows for my own versions.

What I've found for Windows 8 (desktop mode) is that a window has 6px spacing around the edges with 1px inner shadows and outer shadows. The title bar is 29px high and 22px when maximized.

The titlebar buttons are even more obsure, 26x20px for minimize, maximize and 45x20px for close button. The height is reduced to 19px when in maximized mode.

Here's a graphic I've made to demo all the above sizes:

The question is why the random sizes? As usually when I do anything like this I would do something like a 44px title bar, with either 16px, 24px or 32px icons. So that everything is an even number and is easy to do padding and position.

For example that close button is 45px wide, but the icon is 8x7px so it has 18px of padding one side and 19px the other side, and 7px top and 6px bottom (it's 6 top and bottom when reduced to 19px height on the maximized state). Is there some method in the random spacing?

What I've noticed most of all in Windows is that all the different apps have slight variations of icon sizes and window border dimensions (e.g. Visual Studio, Office, etc.)

What dimensions do people use for their window chrome? And are there any guidelines for this type of thing?

Answer 1

Why the random sizes? Is there some method in the random spacing?

Just because they differ between full screen mode and free floating screen mode, doesn’t make them random. The difference may kome from test, where it would be easier to hit the top bar in full screen mode than in a free floating window. In full screen you can run the mouse to the top, and it stays there. In a free floating window, you need to aim more careful, thus the bigger header. But to know for sure, one need to be a Microsoft Employee at the right department, which I am not.

What dimensions do people use for their window chrome? And are there any guidelines for this type of thing?

Microsoft have published a good article on the matter Guidelines for window sizes and scaling to screens (Windows Store apps) where the say the following on window chrome:

The following tables show the most important screen sizes to consider when designing your app.

Fullscreen screen size 
(effective pixel resolution)  |  Device description
1366x768                         Tablets, convertibles, and many laptops (16:9 aspect ratio) 
1920x1080                        Large laptops and devices (16:9 aspect ratio) 
800x1280 and 1280x800            Portrait-first small devices (16:10 aspect ratio) 
1024x768 and 768x1024            Landscape-first small devices (4:3 aspect ratio) 
1371x857 and 857x1371            Small devices (16:10 aspect ratio) 
2560x1440                        Very large all-in-one device (16:9 aspect ratio)

Even though it's targeted toward apps in general, it works just as well on forms windows.

Answer 2

I personally tend to go with even numbers like you do. I often space and size things based on units of 10. Mostly, this is because when designing in Photoshop, and a lot of other Adobe products pressing Shift+some arrow key will move the element by 10 pixels. This prevents me from not being able to just stick with a number.

Sometimes going by units of 10 is too much. That's when I use 5. For example, an icon might be too small at 30px but too big at 40px, so I'll try 35.

If things still don't "look right" then I size up or down by a pixel at a time. This is where I tend to get measurements like 26px or 11px.

---

I also think units of 12 work really well. You can divide it evenly by 2, 3, 4, and 6. Pretty useful.

For small elements like borders I tend to use 1,2, and 4. That's a personal preference not based on science, just preference.

Answer 3

According to The Counter.com 1024 x 768 was the most popular monitor resolution in January 2007. 53% of their stats used that resolution. That's a lot.

On the other hand, most Web designers use monitors that are even larger than that, in the 1280 x 1024 or even 1600 x 1200 range. (And if you have a 1920 x 1200 monitor, I hate you... According to The Counter.com 25% or more had a monitor resolution higher than 1024 x 768.

There isn't an exact correlation, browsers and monitors are different, but here is what I use:

640 x 480 = 620 x 310
800 x 600 = 780 x 430
1024 x 768 = 1000 x 600
1200 x 1024 = 1180 x 850
1600 x 1200 = 1580 x 1030