Visual Language Dictionary for Visual Studio for iconography, colors and other visual concepts applied in ApexSQL tools/add-ins

All new 2018 version of our tools have been updated to be consistent with Visual Studio Shell provided icons, colors, and other visual concepts. The changes we’ve made adhere Windows desktop applications design principles that are presented in this article.

New colors and iconography

All icons are updated using colors and styling according to the Microsoft UX guidelines. Furthermore, all icons that appear in commands, dialogs, templates, etc. are inherited from the 1,000+ images in the Visual Studio Image Library. We took many of the images from the library and redesigned them creating our own custom icons that are more intuitive, simple and are easily recognized symbols.

Base palette

All applications use three base colors:

UsageValue (Light theme) Swatch
Background/Dark 424242 / 66,66,66
Foreground/Light F0EFF1 / 240,239,241
Outline F6F6F6 / 246,246,246


In addition to these colors, icons may contain one additional color from an extended palette. For example, green is used for action modifiers like “Add” (), “Run” (), etc.

Icon design

Icons have no gradients or drop shadows. You’ll see modern-style icons across multiple apps which have clean geometry and a 50/50 balance of positive/negative (light/dark theme), and use direct, understandable metaphors in order to make icons appear properly in dark theme.

Example of icons that have had their colors inverted is shown below:

Ribbon menu bar: Screenshot taken from ApexSQL Audit

In SSMS 17.0 release, Microsoft updated icons to be consistent with VS Shell provided icons, inheriting the modern VS appearance. What this basically means is that ApexSQL add-ins integrate well into both host applications, see a few examples below:

The hint-list from ApexSQL Complete: Screenshot taken from SSMS

ApexSQL add-ins main menu: Screenshot taken from VS

Two-way comparison in ApexSQL Compare: Screenshot taken from SSMS

Split table dialog in ApexSQL Refactor: Screenshot taken from VS

Go to object dialog in ApexSQL Complete: Screenshot taken from VS

Notification icons

To alert the user when necessary e.g. to illustrate a status notification, gain the user’s attention, etc. the following icons are used under different circumstances:

Alerts/Violations
Status/Properties

Examples of notification icons shown below:

Alerts icons: Screenshot taken from ApexSQL Audit

These visual concepts are applied consistently to identify common elements like status bars, dialogs, etc.

Example of a status bar placed at the bottom of the main application window:

Status bar: Screenshot taken from ApexSQL Propagate

Example of the batch formatting dialog shown below:

Format SQL objects dialog: Screenshot taken from ApexSQL Refactor

Other enchantments in all 2018 version of ApexSQL tools/add-ins are new GUI themes and High DPI and 4K resolution support.

Also, if you’re wondering how is SSMS set to the dark theme also available in VS for some time now, check out this article and join the dark force.

 

April 13, 2018