How to create shapes with rounded corners that follow the Windows 11 style guide

Started by Visisthebest, August 25, 2021, 12:15:48 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Visisthebest

Windows 11 has some very nice designs, I particularly like the specific settings on the rounded corners for Windows and buttons.

I have no idea however how to convert the Windows 11 style guide for rounded corners to a shape's shapesheet setting.

My idea is to use the spec for Windows & dialogs (see below) for large shape containers and to use the spec for buttons and list (item) backplates to individual shapes.

In this spec they are talking about 8px and 4px corner radiuses, no idea about how to convert this to a shapesheet setting on a Square/Rectangle shape to get this exact corner rounding.

Thank you for sharing ideas for how to accomplish this!


Win 11 style guide: https://docs.microsoft.com/en-us/windows/apps/design/signature-experiences/geometry

Windows 11 applies rounded corners to all top-level app windows. The same applies to most common controls such as Button and ListView. (For more information, see Use the latest common controls.)

Windows 11 uses three levels of rounding depending on what UI component is being rounded and how that component is arranged relative to neighboring elements.

ROUNDED CORNERS
Corner radius   Usage
8px   Top-level containers such as app windows, flyouts and dialogs are rounded using an 8px corner radius.
4px   In-page elements such as buttons and list backplates are rounded using a 4px corner radius.
0px   Straight edges that intersect with other straight edges are not rounded.
0px   Window corners are not rounded when windows are snapped or maximized.
Visio 2021 Professional

vojo

in the line and fill drop down, there is fields for curved corners.  Use that to curve your corners.
If you want to use shapesheet, there is a specific cell  called "rounding"....put in your 8px there.
(need to be running visio in developer mode).

Visisthebest

Thank you Vojo!

I cannot enter 8 px but I can enter 8 pt (points). Is that exactly the same thing for the purpose of getting the same rounded corners as Windows 11 uses?
Visio 2021 Professional

wapperdude

I don't believe those are the same.  Pixel has to do with screen resolution, whereas point is related to line weight.  For Window / GUI related objects, pixel makes sense.  For drawings, point is more appropriate, as it scales with line weight.  Ultimately, there would be some rendering process to go from point to pixel.
Visio 2019 Pro

Visisthebest

Is it possible go convert points to pixels somehow? I guess some runtime variables about pixel density/zoom level figure in to such a calculation, not sure.
Visio 2021 Professional

Surrogate

Quote from: Visisthebest on August 25, 2021, 02:35:05 PM
Is it possible go convert points to pixels somehow?
I am not sure that it have sence!
Each computer have different monitor resolution

Visisthebest

but it is exactly what Windows 11 does, I guess we need a setting that creates de facto the same effect as Windows 11 on rounded corners, even if we're not setting it to pixels.
Visio 2021 Professional

Surrogate

IMHO Visio engine has not been upgraded since 2013, so it is ridiculous to expect that it will support beautiful design from Windows11

Visisthebest

Fortunately a lot of the rendering options in Visio (beautiful shadow effects that create depth) can get us really close, but agree Visio Desktop needs to move forward with new functionality as requested by its existing users!
Visio 2021 Professional

Surrogate

Quote from: Visisthebest on August 25, 2021, 05:03:54 PMVisio Desktop needs to move forward with new functionality as requested by its existing users!
But if you take a look at the slides from the last event MS Ignite 2020 (Visio – now and beyond), you won't find any new features planned for the desktop version in the roadmap !

Yacine

why not use a lenght unit instead of pixels and points? Use inches or millimeters. You can even generalize your style either by formats or by referring to a page or doc prop (eg rounding = thepage!prop.radius1)
Yacine

Visisthebest

Thank you Yacine yes that could be a way to create de facto the same as in Windows 11 rounded corners.
Visio 2021 Professional