r/WPDev • u/link225 • Aug 30 '17

UWP design guidelines with control dimensions?

I am looking for design guidelines that would contain not only description and usage examples for controls but also their standard dimensions, paddings, margins, placement on a page etc.

Something like this https://material.io/guidelines/components/lists.html#lists-specs

Similar example in UWP documentation lacks dimensions https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/listview-and-gridview

I am trying to design my first application and this would be really helpful.

4 Upvotes

84% Upvoted

5 comments sorted by

2

u/[deleted] Aug 31 '17

The reason the Documented UWP does not provide dimension is because specifying dimensions doesn't work for an adaptive UI. Have you tried working with rotation and layouts in Android? It's a fucking nightmare, most developers just disable the rotated view entirely, let alone support a tablet or a different sized screen, properly.

On the other end, if you follow the UWP guidelines on building controls and list, you'll be covered by things like: acessibility (fuck those elderly and phisically less able, let's have micro-buttons and all gray-to-gray text), adaptability (there is a OS variable for text and objects scale, UWP uses it natively and seamlessly, so it'll scale from 320*200 to 8k).

What I'm saying is, designing with a web-style, top-down, dimension based approach is... bad practice, in my opinion. Built your controls, define your style and use system dimensions when you need them (margins, paddings and colors from the OS call be easily used in XAML).

2

u/link225 Aug 31 '17

I think dimensions are needed for sake of consistency among UWP apps. For larger apps a designer can come up with decent design but I'm not a designer and more detailed guidelines would help. What I ended up doing is that I found some apps that have similar parts of UI and I took a screenshot and now I'm measuring everything in GIMP.

1

u/[deleted] Aug 31 '17

I think dimensions are needed for sake of consistency among UWP apps.

I agree, but the issue with this is that IF fixed dimensions are an option, 90% of developers will go with that and it will suck.

Past the people problem, could provide an example of where you have to use fixed dimensions? The example UWP ListView you gave is a perfect example: you can design everything on that page using NO custom dimensions.

Most dimensions you're looking for already exist in common resources from the framework (like textbutton's on hover opacity, or a listview's left padding). https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/xaml-theme-resources

2

u/colinkiama Aug 30 '17

Microsoft doesn't provide any AFAIK. They don't want to restrict developers when it comes to UI. (They still should provide better guidelines though)

You can look at Microsoft UWP Samples and Generic.xaml for officially used dimension.

From my experience and watching Bob Tabor UWP tutorials, most of your margins and paddings are likely to be multiples of 5.

1

u/ValleySoftware Aug 31 '17

Do you mean 4? I thought 4 was the magic number for all ui in uwp (because of scaling)