Why you should choose your plugin icons carefully

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 7 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet ...

At WordCamp Europe 2016 in Vienna Caspar talked about the plugin UI and why we should care about it to keep the admin area clean of distractions. Looking at the plugin icons in the admin area after changing the color scheme I think we have to add another point to his list.

Caspar looked primarily at all the notices coming from plugins and the place where the plugin puts itself. But there is another item which all the plugins appearing on the first level have in common. They are all using an icon. You can use on of the dashicons or you can use your own icon. Using your own icon shouldn’t be a problem, right?

This is important four your branding, you should use your corporate design and your corporate colors of course:
nice-visual-composer-dark
all-in-one-seo-dark
nice-envira-dark

But what if I change the color scheme?

BTW Changing the color scheme is a great way to differentiate between a live and a staging site for example.

Now the icons doesn’t look so good anymore …

Color contrast high enough?

Color contrast high enough?


good-bad-ugly
Ouch, that's a bold outline ...

Ouch, that’s a bold outline …

Caspar is looking regularly at WP Admin as a support guy and sums up the problem in one important sentence:

Unless you check in on customer systems regularly, chances are you develop in a standardized environment that has little in common with what WP Admin looks like out there in the wild.

And furthermore he says that we should care about it:

Plugins and what they do to WP Admin or not in terms of UI are absolutely significant for the interactive experience people have with WordPress as a CMS.

So what can you do?

Of course you can use your own icon, but you should use the WordPress way of implementing. Use an icon font of your own or a SVG file. This is important to provide retina support.

Example for this is BackWPup:
own-icon-backwpup

Or you can use one of the dashicons which are already used by WordPress, like Advanced Ads:
dashicons-FTW

If you are a plugin developer and you are using a custom icon, please test the default color schemes coming with WordPress. You can switch the color scheme in your profile at /wp-admin/profile.php.

Thank you!

This is the first english post on this blog. Please be nice to me. Thx. 🙂

2 Antworten auf Why you should choose your plugin icons carefully

  1. Pingback: Plugin-Logos im WordPress-Backend durch Dashicons austauschen › Torsten Landsiedel

  2. Thanks for your efforts.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert