Subscribe to our monthly dose of design. No spamming, we promise.

Back to agilo.co

White space is to be regarded as an active element, not a passive background.—Jan Tschichold

Schiele in Vienna—The Form of a Signature

Array of: Dublin

Type+Vienna, Serving #2

Type+Vienna, Serving #1

Array of: Amsterdam

The Wonderful World of Designing WordPress Dashicons

Posted by | on

Dashicons

Ahh—the wonderful world of WordPress Dashicons. Icons and fonts were the first things we decided to work on as we began to discuss the visual changes to the WordPress Dashboard. Since almost all the information is textual, the type layout must really be taken care of. The icons should complement the font choice. They should appear as if they’re from the exact same homogenized system so the information can be processed more easily without any interruptions.

As we are using the free (Google) font, it seemed a reasonable solution to create grid-based linear, flat and stroke consistent icons. Also, these new icons should suit the personality of the dashboard facelift we did previously. Let’s take a look at the current WordPress Dashicons and see what we’ve done to improve them.

Current WordPress Dashicons

Current WordPress Dashicons

Current WordPress Dashicons

The existing WordPress Dashicons are very diverse in their visual style. Having such complex and diverse shapes throughout the entire dashboard makes processing information on the page harder and slower. Information should be processed as efficiently and as fast as possible. The key aim of an icon is to be helpful and useful.

Let’s take a look at why these icons might not be the best solution.

Shapes — there’s a lot of variety among shapes. Some are quite abstract while others are very literal. It would be a good idea to keep them all within one system that codes symbols in the same visual language. This way the user gets used to decoding that system.

Diversity of concept behind the icon shape

Diversity of concept behind the icon shape

Complexity — certain icons have lots of details and segments. On the other hand, there are some icons that are very simple and straightforward. Since these icons will be used in small sizes only, complexity just adds visual noise. The smaller the icon, the less details it requires.

DashIcons variations in complexity

DashIcons variations in complexity

Endings — there are endings that are sharp, rounded, straight or curvy. It would be good to match these details with the font. It’s not something that you will notice at first, but fixing all these details creates a big change.

Sharp and rounded ending points

Sharp and rounded ending points

Fill — as WordPress Dashicons are mostly fill–only icons, it would be good to make them equally visually dark / filled. There are inconsistencies in icon size and complexity so some of them appear to be much darker than others.

Some appear much darker than the others

Some icons appear much darker than the others

Strokes — some parts of the icons are stroke only so it would be beneficial to coordinate stroke thickness and use one or two different stroke weights.

Inconsistencies in thickness of the linear parts

Inconsistencies in thickness of the linear parts

Negative / positive space — there are some inconsistencies with the use of black and white areas. Whitespace acts as a stroke or divider between sections on some icons while on others it is more relevant. It actually represents the essence of the icon. Such roles switching when negative space becomes a significant shape, makes comprehension of icons difficult.

On the first two icons, white shapes are the key to understanding the icon. On the third one, white shape/line is actually non-existent as it separates two parts on the shape. Fourth one falls out of the system and I don't even know what white line was supposed to do there.

With the first two icons in a top line white shapes are the key to understanding the icon. With the first icon in the bottom line white shape/line is actually non-existent as it separates two parts on the shape. The last icon falls out of the system and I’m not sure what white line was supposed to do there.

Size — some icons tend to be or at least optically appear to be smaller and larger than the average size. This adds to visual confusion and it would be good to adjust icon sizes.

Differences in icon size

Differences in icon size

The new set of icons

We tried to draw a new set of icons where we could fix those inconsistencies and shortcomings and eventually add to Dashboard functionality.

Now, here are characteristics of this icon set.

Unified—all icons follow the same logic and are created from the same system with a homogenized structure.

Unified system

Grid system—icons are constructed within 30×30 px grid system.

Icons follow 30×30 px grid

Pixel perfect—icons are based on a pixel grid system in order to work efficiently in the digital media. All elements are aligned to the pixel grid.

Icon Grid

All icons fall into pixel grid

Correlated to logo—icons are positioned inside a circle to keep the size and shapes visually consistent, composition stable and to be related to WordPress logo design.

Icons and WordPress logo

Icons and WordPress logo

Flat—icons follow the same flat visual style that matches the personality of the font.

Icons and Martel Sans

Icons and Google font Martel Sans

Simplified shapes — shapes are simplified as much as possible in order to be easier for the eye to process. Complex shapes require additional attention so our eyes are kept more busy while processing data.

Current come icon and new simplified home icon

Current Home icon and new simplified Home icon

Same stroke— icons feature a 1px stroke that is consistent with all shapes.

Same stroke for all shapes

Same size— size of all icons is 30×30 px and is consistent on all pages. Keeping the same size makes it easier for the eye to process the icon symbolism since it gets used to the same proportions throughout the design.

Same size of all icons

Same size of all icons

Linear — icons are linear so that they would match the font personality and size as much as possible. Keeping them linear avoids problems with proportions of positive and negative space. Some are with fill icons some might appear too dark while some appear light and small. Since the WordPress Dashicons system is ever growing, it’s best to avoid such visual style and keep it linear.

Fill Icons vs. Stroke Icons

Colour—icons work well in black, negative and in color.

Icon in black, negative and color

Icon in black, negative and colour

Extensible system—since WordPress Dashboard uses a large number of icons and many more will be added as needed, this system allows much more shapes to be drawn with the same characteristics.

Here is the entire set of icons for the Dashboard, All Posts and Add Post pages. We’ll keep adding more icons until we have the entire set so please subscribe so we can keep you updated! 🙂

New WordPress DashIcons

New WordPress DashIcons

And that wraps up the wonderful world of WordPress Dashicons. It’s now over to you.

Tell us your take on anything you've just seen. We'd love to hear from you.

 

About Zrinka Buljubasic

Zrinka Buljubasic

Zrinka is a type designer working as a Lead designer at Agilo. Type@Cooper 2015 graduate. Has BA in Visual Communication Design and MA in Type Design from Art Academy of Split, Croatia.

Read all posts by .