Helen Hou-Sandi 2:10 pm on February 12, 2013

Discuss: Icons

If you’re running trunk, you’ve probably noticed some new icons being tried on for size. There’s ticket #23333 on TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. for them, but it’s quickly becoming overwhelming and I’d like to give design-minded folks a chance to focus in on the icons themselves and discuss without as much distraction regarding the rest of the admin (see #23415, which absolutely goes hand-in-hand), SVG-vs-font-vs-plugins oh my, developer rabbit holes, etc. Trac just isn’t a great fit for some of the discussion, anyway.

I’m seeing a few focal points for discussion:

Icons themselves, from a graphic design standpoint. What works, what doesn’t, what might make this style of icon “WordPress-y”, other things that I personally (as a non-designer) can’t prompt very well.
What kind of treatment flat/vector-style icons need to really work in the WordPress admin, e.g. hover states, colors, etc. Size is also perhaps a part of this, although do keep in mind that we can play with the sizing and styling of other elements as well.
What other icons we need beyond the admin menu – post formats is definitely one, and perhaps we can also start thinking of other places that could use icons as a part of the visual vocabulary.

Some helpful links from the 88 and counting comments on the ticket:

The current icons in a 2x menu sprite, just to view on its own: https://core.trac.wordpress.org/attachment/ticket/23333/menu-2x.png
The above icons as a font: http://bendunkle.com/wp-admin-icons/
Another set of icons, including post formats, from @melchoyce: https://core.trac.wordpress.org/attachment/ticket/23333/icons-18-24-32.png

Helen Hou-Sandi 2:17 pm on February 12, 2013

I’d particularly like to see @empireoflight and @melchoyce combine forces and work to create a more complete set for use around the admin – there are elements in each set that seem very strong to me. Of course, I would think that any contributions are welcome; I’m just going with what’s been done so far so things keep moving.

Post formats needs an icon for each of the 10 formats – not sure if standard should just use the regular pin icon or if there are any other icons than can be reused. I’m also seeing where an icon could be used in the inputs/textareas themselves – URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, quote, quote source, embed code/URL, image, and gallery. @melchoyce’s wireframes used icons and placeholder text rather than visible labels, so I’d like to at least give that look a shot. For the record, so nobody jumps on me, in my current patch, labels are still there, just not visible, and we’d need to keep it that way for accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility).
- Empireoflight 2:31 pm on February 12, 2013
  
  Happy to do that. @melochoyce, maybe we can do a skype screen share?
  - Mel Choyce 4:16 am on February 13, 2013
    
    Sounds great! Let’s touch base through email (melissachoyce@gmail.com) or IRC to plan a time.
- lessbloat 2:41 pm on February 12, 2013
  
  Would also be nice to do the welcome screen icons while we’re at it. 😉
  - Helen Hou-Sandi 2:44 pm on February 12, 2013
    
    Ooh, good call. Feel free to list off any other existing ones that could use a revamp, along with new ones that could be useful 🙂
esmi 2:43 pm on February 12, 2013

Speaking from a purely design/usability pov, I find the darkness/heaviness of http://bendunkle.com/wp-admin-icons/ somewhat intrusive when it comes to readability. Any chance we could lighten them (a la the current icon set) and then revert to a heavier/darker version hover and onfocus? That might also sidestep the accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issues of using red as a highlight color. The Post and Appearance icons look rather similar to me at first glance. Perhaps the Post icon could be swapped out for the more stylised pin in https://core.trac.wordpress.org/attachment/ticket/23333/icons-18-24-32.png
- Chip Bennett 1:35 pm on February 16, 2013
  
  That\’s my biggest complaint thus far: Post, Appearance, and PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party icons are all way too similar. Also: I don\’t get \”paintbrush\” = \”appearance\”. (I assume that\’s what the appearance icon is?) IMHO, a paintbrush implies \”format\” or \”color\”, not headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes./background/Theme options.
@mercime 5:23 pm on February 12, 2013

I’m all for the icon fonts by Ben Dunkle. Instead of making heavy/solid icon fonts, how about making it outlines instead for a cleaner look? Compare bbPressbbPress Free, open source software built on top of WordPress for easily creating forums on sites. https://bbpress.org. and BuddyPress outline icons with solid wp-admin icons https://mercime.files.wordpress.com/2013/02/wp-admin-buddypress-bbpress.png?w=145
Empireoflight 7:53 pm on February 12, 2013

@mercime, the outlined look doesn’t translate to an icon font very easily; hence the solid icons. However, it gives me an idea for an “open face” icon set, as a variation on the theme.
As for the icons looking too large, the intention is for more padding to be added but we’re playing w/that. They do seem a bit dark, but the great thing is you can quickly change the color w/css.
Hugo Baeta 12:14 am on February 13, 2013

What if the icons were a very light embossed look? (it could still be an icon font, with text-shadow to create the effect).

I am with the other comments I’ve seen, the icons look too bold there. One personal opinion about this style of simplified shape is that it really looks better if you keep simplifying, maybe even make them smaller?

On a discussion with @koop he made a mockup of a super minimalist menu, removing the divider lines and adding more padding to the items. It felt so airy and light, I loved it! I’ll try to reproduce it and make a screenshot for y’all.
- Hugo Baeta 7:23 am on February 13, 2013
  ok, talked with @koopersmith before posting this here. One important thing to take note is that I don’t intend to distract from the discussion about the icons with the other changes showed in this screenshot. But it’s an interesting new way to look at the menu. Also keep in mind that the menu simplification is not my doing, but Koop’s and I love it so much I use it on my installations 😛
  
  This said, here’s what I did: ( http://cl.ly/image/0a3S0a2G053I )
  - reduced the opacity of the icons
  - increased the margin around them
  What do you think?
  - lessbloat 8:00 pm on February 14, 2013
    
    Really loving this @hugobaeta. Nice work with that screenshot!
  - lessbloat 8:10 pm on February 14, 2013
    
    Here’s a before and after comparison:
    
    There is so much less for your brain to process with the one on the right. Though I’d argue that we could probably go even smaller with the icons there.
    - Ipstenu (Mika Epstein) 8:36 pm on February 14, 2013
      
      I think that size is really good. Smaller and you start running into readability issues with people who don’t have aces vision. (And telling me to +1 font size in my wp-admin is a crap answer, by the way.) We COULD go smaller, but I think this is a really nice balance between size and all-around readability.
      - lessbloat 2:38 pm on February 15, 2013
        
        As a clarification, I said smaller icons, not smaller text. 😉 Smaller icons would command less attention and actually improve readability for the text.
      - Ipstenu (Mika Epstein) 4:37 pm on February 15, 2013
        
        I dunno, visual ‘readability’ of icons also suffers at smaller sizes. This icon size is really perfect. I feel like I’m not missing out on details and I can clearly see what everything is easily. If you made the images smaller, the thing lines in the images themselves would lose distinction.
      - Hugo Baeta 5:06 pm on February 15, 2013
        
        My point with going smaller with the icons was also to go simpler, reduce detail. If you look at the old icons, they look “smaller” and more elegant comparing to these new ones, because the new ones are a solid blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. instead of gentle lines with highlights.
      - Ipstenu (Mika Epstein) 5:14 pm on February 15, 2013
        
        Hugo, the current ones are so small for me I have a hard time noticing the visual diff between Feedback and Appearance today. Smaller images will lose pattern recognition ability (I don’t know if that’s the right term…) and make it harder to tell everything apart at a quick scan when you collapse the bar. A lot of people cannot collapse the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. now because they lose the ability to tell what’s what when they do.
        
        Since we’re already removing the detail and going with flatter images, which I like by the way, we have to make sure to keep them distinct. I feel smaller will lose that.
      - Hugo Baeta 5:18 pm on February 15, 2013
        
        and, actually, the old ones ARE smaller! Here’s the evidence:
      - Hugo Baeta 5:28 pm on February 15, 2013
        
        Fair argument @ipstenu. But if the icons are getting bigger, then the text also needs to follow that to keep proportion. Maybe that’s exactly what the menu needs… do you guys remember how clear the old (pre 2.7) menus were? yes, the horizontal blue bar at the top!
        
        quick mockup with inspector:
  - Mel Choyce 12:51 am on February 21, 2013
    
    Late to the game on these, but just wanted to comment on how much I like this layout & grouping. I think we could play with spacing and division between content & settings a little more, but this feels like a much nicer fit for the new icons.
- Drew Strojny 2:56 pm on February 14, 2013
  
  One personal opinion about this style of simplified shape is that it really looks better if you keep simplifying, maybe even make them smaller?
  
  I haven’t read through much of the discussion to date, but this is the first thing that jumped out at me when I updated and saw the current flat icons. While I love them, they look disproportionately large and out of place to me in the current menu. +1 for making them smaller and/or re-evaluating the proportions of the surrounding elements. I think Hugo / Koop are on the right track with the screenshot.
  
  I also think @lessbloat echoed similar comments in the TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. ticket and provided a screenshot of a non-gradient version with more spacing, which I also think is on the right track.
  
  I’m also not a big fan of the white hover on the current background. Not enough contrast. I’d say a subtle change to a lighter grey when hovering would work well.
Helen Hou-Sandi 6:22 am on February 13, 2013

Something that came up while I was talking to @koopersmith about something else entirely – the toolbar icons seem to really work well in terms of language and staying power, and maybe even personality, as minimal as they are. The admin menu icons in trunk clash somehow – perhaps it’s the roundness, perhaps it’s something else. That part I can’t quite quantify. What I’m trying to say is that I think the existing toolbar icons are an important starting influence 🙂 The admin menu icons are less a cue and more a unique reference, so they do function a bit differently, but having two different styles of vector icons is going to give a disjointed experience.
Archetyped 8:37 pm on February 14, 2013

Thank you for starting this discussion @empireoflight and thanks to @helen for bringing the discussion out of TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. (is it okay to say it’s chaos in there?).

I’m curious what the “official” goal for this potential icon reboot is? “Scalability and utility” (as put forth by @empireoflight) are good reasons, but are they a higher priority for WP than things like branding and personality?

These icons feel rather “generic” to me. While the official icons have their flaws, they are unique and give WP a particular flaire that helps to identify WP as “different”.

It’s not about flat vs shaded, it’s about identity. Sure, generic icons would definitely make it easier to implement WP as a white-label CMS for clients, but I for one would feel the loss of a certain amount of whimsy and fun that drew me to WP those many years ago.
Chip Bennett 1:41 pm on February 16, 2013

Are these icons being tested with the menu both expanded and collapsed?

Most of the icons make sense, but in the collapsed state, the old \”Appearance\” icon is far more meaningful than the new one, IMHO.
lessbloat 4:32 pm on February 21, 2013

Was chatting with @joen about the icons, and he mocked up:

As a riff on some of the icons styles. Posting it here to add to the existing discussion.
Empireoflight 12:40 pm on February 22, 2013

I did a ton of tweaking, both the images and css last night. Icons are a bit smaller still and include an orange hover state (it should be orange like the text, not white). It’s pretty much what we currently have in 3.5 with new icons. I used @melchoyce ‘s suggestions for the angled plug; Mel, let’s talk soon about the post format and other icon.s I added an active state into the menu sprite. I’ll submit it to tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. today, but here’s the preview: http://cl.ly/image/2j0a3F2W271b (how do I insert images directly to this thread?)
- Hugo Baeta 9:36 pm on February 25, 2013
  
  Hey @empireoflight – I like what you did there, the size reduction makes them feel a bit more proportional. And the all gray treatment (including text) also makes the new icons fit better.
  
  To include an image inline, just write the htmlHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. for it <img src="… 😉

Comments are closed.

The Design Team provides design for the WordPress project.

More information

Discuss: Icons

The Design Team provides design for the WordPress project.

More information

Share this: