“Shadows and Visual Hierarchy”
When using shadows, you have to be aware of the great impact using different types of shadows will have on the user’s focus.
In the first image above, you can see an example of this. There is an “inset” shadow projecting onto the left pane. This creates an image inside the user’s mind where the left pane is farther back than the main pane on the right, therefore describing the pane on the right as the main focus and center of attention.
On that same image, there is another inset shadow, on top of the entire window, projecting onto the window’s title bar. This describes the title bar as the farthest back, and that everything else is more important than it.
On the second image pictured, you can see the pane on the left, which is an expanded hamburger menu, has a standard shadow, not inset. This is because the menu is UI that was opened and initiated by the user, so it is the most important. Therefore the shadow would be standard, not inset, so the user would see the menu as most important.
There are countless things you can do to provide a great visual hierarchy, but simple changes like this can be more effective than you’d imagine. You should not just use this, as it would not create a complete visual hierarchy, but it is definitely very important.
1. Carmellolb on Deviantart.
2. Google Sheets screenshot.
#ui #ux #uiux #design #designinspiration #designer #microsoft #microsoftdesign #fluentdesign #userinterface #userinterfacedesign #userexperience #designtip #surface
#uwp #beautifului #uiinspiration #uxinspiration #digital #creative #dailyinspiration #uitrends #dribbble #behance #app #webdesign #appdesign #inspiration #minimal