WordPress.org

Make WordPress Core

Opened 15 months ago

Closed 14 months ago

Last modified 14 months ago

#23333 closed enhancement (maybelater)

New icons

Reported by: empireoflight Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Administration Keywords:
Focuses: ui Cc:

Description

In the name of scalability and utility, I've designed some new icons for the admin. The ones we have now are cool, but scaling them for different OS's/contexts and establishing an easy system for others to make them is very challenging. Furthermore, we are starting to introduce flatter, simpler icons in top level adminbar and right now things seem disjunctive. menu.png and icons32.png would go in the wp-admin/images folder (sorry I'm clueless as to how to submit this as a patch :( ) I've also attached a suggestion for revising background graphics/typography to improve the clarity of the icons, so let's discuss that as it would need some css changes.

Attachments (25)

preview.png (180.5 KB) - added by empireoflight 15 months ago.
suggested new style for admin sidebar
Screen Shot 2013-01-30 at 6.53.59 PM.png (139.3 KB) - added by empireoflight 15 months ago.
look of dashboard without any css work (looks yukky)
Screen Shot 2013-01-30 at 8.30.40 PM.png (52.1 KB) - added by empireoflight 15 months ago.
icons in current admin with modifications to css
Screen Shot 2013-01-30 at 8.41.49 PM.png (40.0 KB) - added by empireoflight 15 months ago.
playing around w/font size and weight
menu-png-grid.png (15.8 KB) - added by azaozz 15 months ago.
30x30px grid @ 200% zoom
icons32-grid.png (9.1 KB) - added by azaozz 15 months ago.
60x60px grid
wp-admin-icons.zip (174.0 KB) - added by empireoflight 15 months ago.
Zip file with psd and pngs set in 32x32 and 64x64 grid
Selection_016.png (2.9 KB) - added by scribu 15 months ago.
menu-colors.png (25.9 KB) - added by azaozz 15 months ago.
23333-menu-colors.patch (2.4 KB) - added by azaozz 15 months ago.
Attempt to tweak menu colors to work with the new icons
Screen Shot 2013-02-04 at 12.24.51 PM.png (74.2 KB) - added by johnjamesjacoby 15 months ago.
core w/ bb's
icons-18-24-32.png (25.5 KB) - added by melchoyce 15 months ago.
Icons experiment
icons32-2x.2.png (12.8 KB) - added by empireoflight 14 months ago.
icons32-vs-2x.png (13.1 KB) - added by empireoflight 14 months ago.
icons32-vs.png (7.2 KB) - added by empireoflight 14 months ago.
menu-2x.png (20.2 KB) - added by empireoflight 14 months ago.
menu 2x for retina
menu-vs-2x.png (20.3 KB) - added by empireoflight 14 months ago.
menu-vs.png (9.7 KB) - added by empireoflight 14 months ago.
icons32.png (7.2 KB) - added by empireoflight 14 months ago.
32px icons
menu.png (9.4 KB) - added by empireoflight 14 months ago.
no shading, less round media icon
colors-fresh.min.css (31.6 KB) - added by empireoflight 14 months ago.
updates.diff (64.7 KB) - added by empireoflight 14 months ago.
icons32-2x.png (12.8 KB) - added by empireoflight 14 months ago.
header icons for retina
Screen Shot 2013-02-22 at 9.50.36 AM.png (52.9 KB) - added by empireoflight 14 months ago.
Preview of icon states
23333.diff (9.8 KB) - added by empireoflight 14 months ago.
Patch of colors-fresh.css

Download all attachments as: .zip

Change History (142)

empireoflight15 months ago

suggested new style for admin sidebar

empireoflight15 months ago

look of dashboard without any css work (looks yukky)

comment:1 SergeyBiryukov15 months ago

  • Component changed from General to Administration
  • Keywords ui-focus added

comment:2 DrewAPicture15 months ago

  • Cc DrewAPicture added

comment:3 follow-up: scribu15 months ago

preview.png doesn't show what a focused menu with submenus would look like.

comment:4 in reply to: ↑ 3 empireoflight15 months ago

Replying to scribu:

preview.png doesn't show what a focused menu with submenus would look like.

I'll comp it up if it's worth pursuing that look further-need more feedback on that...

comment:5 scribu15 months ago

Personally, I think the new look doesn't jive well at all with the toolbar.

The toolbar has items separated by narrow, crisp borders, whereas the menu items have a wider and more diffuse separation between them.

I think we should keep the current style and just tweak the text color and positioning a bit.

empireoflight15 months ago

icons in current admin with modifications to css

comment:6 empireoflight15 months ago

I tweaked css in chrome inspector, mainly giving the icons more padding and changing the font to open sans from helvetica.

empireoflight15 months ago

playing around w/font size and weight

comment:7 follow-up: melchoyce15 months ago

  • Cc melissachoyce@… added

I feel like these icons don't have the right tone. Their roundness makes them seem a little juvenile to me. The light drop shadow applied on them compounds this feeling. When I think WordPress, I think easy, modern, and elegant. I think WordPress.com does a really good job of using icons that feel both fun and professional. (example: http://cl.ly/image/0p3E2N3O1x2U) Not to say we need to be like WP.com, but I think they've captured the tone.

I've pulled out some examples of dashboards with icons from dribble that I think work well:

http://dribbble.com/shots/566311-Rdio

http://dribbble.com/shots/323757-Device-Dashboard-iPad-UI-UX-iOS/attachments/14426

http://dribbble.com/shots/470598-Invoice-App?list=searches&tag=dashboard

comment:8 alternatekev15 months ago

It looks like they're getting closer to the right color but they still feel very chunky and space-inefficient to me for the nav over there. Some delicacy in handling the finer icon details and some more breathing room around the pictograms in general could help them feel less heavy-handed.

comment:9 isaackeyet15 months ago

I like these but I think they're almost too round for their own good - doesn't seem to fit well with the rest of the admin and would need a lot more space to shine/make sense IMO. It'd probably be safer to keep the simplistic style going but just make corners and lines more concise. I also feel like they're not very balanced compared to each other (visual weight, alignment, etc) but that I'm assuming would come at a later stage. For example the Settings icon feels very cluttered with 3 sliders - 2 would do the job just fine and be more in line with the rest. This is a simplification we made for the BlackBerry app for instance, so on HiDPI screens that icon would have 3 levers, but on old smaller screens it would only have two.

Here's the icons we're using for the Android app for inspiration: http://wpandroid.files.wordpress.com/2011/12/dashboard.png

comment:10 isaackeyet15 months ago

  • Cc isaackeyet added

comment:11 in reply to: ↑ 7 ; follow-up: DrewAPicture15 months ago

Replying to melchoyce:

When I think WordPress, I think easy, modern, and elegant. I think WordPress.com does a really good job of using icons that feel both fun and professional. (example: http://cl.ly/image/0p3E2N3O1x2U) Not to say we need to be like WP.com, but I think they've captured the tone.

I too like what WP.com has done, though they're using an icon font IIRC. Wasn't there some discussion in the old UI group about using icon fonts?

comment:12 in reply to: ↑ 11 melchoyce15 months ago

It was tossed around as a potential idea. I think it could be a really cool thing to think more about.

Replying to DrewAPicture:

I too like what WP.com has done, though they're using an icon font IIRC. Wasn't there some discussion in the old UI group about using icon fonts?

comment:13 matt15 months ago

I love these, and would like to get them in so we can "feel" them in context of the admin while we're in alpha stage. Everything aesthetically new always feels weird at first, especially if it's trying to define a unique visual language rather than following a current popular trend everyone will automatically like, so I feel like a week or two of daily use will help inform and temper feedback.

comment:14 empireoflight15 months ago

I tightened the round edges of the media icon a bit; I think that's what was giving them a round look. Also removed shadows entirely. Icon fonts are a great idea, but they look fuzzy at low dpi screens on non webkit browsers at the moment. I'm working on an icon font for these in any case.

Last edited 15 months ago by empireoflight (previous) (diff)

comment:15 drw15815 months ago

These are really great. I love the look and feel of them paired with Open Sans. The paintbrush is especially nice, and I think overall, the tone of the icons is appropriate and blends nicely. The tightening of the roundness in the media icon helps, although the middle hump in the camera is lost a bit. The details in the key get lost, and I think the ridges could be brought out more. They are looking a little lumpy. The wrench seems to be the lightest of the group, and it doesn't fit in as well. You could try and make the base of the wrench wider. If you needed to simplify, I could see the hole in the wrench being filled. Also, to simplify the key, you could lose the ridges altogether. To simplify the settings icon, maybe try losing the vertical bars?

I am 100% behind an icon font, if it is made correctly.

I agree that they looked cramped in the menu, and most of the icons look misaligned vertically. I think some extra padding would solve that problem.

Some icon sets that I think are successful:

http://adamwhitcroft.com/batch/
http://www.webalys.com/minicons/index.php
http://geomicons.com
http://somerandomdude.com/work/iconic/

comment:16 jeherve15 months ago

  • Cc jeremy+wp@… added

comment:17 azaozz15 months ago

To make the new icons easier to test the sprites would need a little tweaking. The new icons would have to be exactly where the current icons are in the sprite. Then the css positions don't have to change.

comment:18 empireoflight15 months ago

They are slightly bigger than the old ones, so it's impossible to line them up exactly. I worked in a 20x20 canvas instead of 16x16 for these. They probably won't look right without adjusting css padding.

azaozz15 months ago

30x30px grid @ 200% zoom

azaozz15 months ago

60x60px grid

comment:19 azaozz15 months ago

Ah, I see. Looking at the current sprites, the positions there are a bit arbitrary too. Maybe we can set the new sprites as proper grids, perhaps 30x30px for menu.png and 60x60px for icons32.png so we fix this once and for all?

30x30px grid @ 200% zoom

60x60px grid

comment:20 follow-up: azaozz15 months ago

On second thought: perhaps 32x32px and 64x64px would be better grid sizes, easier to center?

comment:21 in reply to: ↑ 20 empireoflight15 months ago

Replying to azaozz:

On second thought: perhaps 32x32px and 64x64px would be better grid sizes, easier to center?

I'll post up some sprites asap so we can test

empireoflight15 months ago

Zip file with psd and pngs set in 32x32 and 64x64 grid

comment:22 empireoflight15 months ago

Just uploaded a zip of all the pngs and psds. These are set on the grid @azaozz proposed. We can tweak positioning as necessary once we see them in action.

comment:23 azaozz15 months ago

In 23369:

New icons take one, props empireoflight, see #23333

scribu15 months ago

comment:24 follow-up: scribu15 months ago

The Tools page icon is clipped:

http://core.trac.wordpress.org/raw-attachment/ticket/23333/Selection_016.png

comment:25 azaozz15 months ago

Ended up rearranging the previous sprites menu.png​, menu-2x.png, etc. to match the old sprites. It sounded good to make the sprites into proper grids but that doesn't really fix anything and would make all plugins that reuse these sprites look bad.

Had to tweak the dimensions for the 32px icons so the new icons show properly (they are closer to 36x36).

comment:26 in reply to: ↑ 24 azaozz15 months ago

The Tools page icon is clipped:

So we would need to make the <div> for the 32px icons even larger... Maybe 40x40px?

comment:27 azaozz15 months ago

In 23370:

New icons: make the .icon32 container larger to prevent clipping, see #23333

comment:28 ryanhellyer15 months ago

I've been finding these excessively "fat looking". Ipstenu also pointed on Twitter that they make the rest of the icons stand out quite a lot, although I guess that would change over time as plugins updated their built in icons.

You can see an example of them in action here ... http://stuff.ryanhellyer.net/wp-icons.png

Related conversations:
https://twitter.com/ryanhellyer/status/297987117693403136
https://twitter.com/bjornjohansen/status/297990009938653184

comment:29 ocean9015 months ago

  • Milestone changed from Awaiting Review to 3.6

I have asked my followers what they are thinking about the new icons at this state.

  • similar to the metro style (Windows 8 Modern UI)
  • flat: The current UI has a lot of the "1px deep", see text shadows, the icons not. Not sure if we should switch to the flat style.
  • size: The ratio of font-size and icon size doesn't match, the icons are too big.
  • Also noticed (perhaps through the size): Isn't it time for another icon for posts, the pin isn't really a good representation of posts.

comment:30 follow-ups: melchoyce15 months ago

I took a stab at making the whole Dashboard a little flatter, just for fun: http://f.cl.ly/items/3Q0e0y1E1X231K1s3i0M/wp-flatter.png

One thing I noticed in trunk is that the icon hover color is white, which ends up being really awkward: http://cl.ly/image/130x1a2h2t0k. Could we try three icon states: grey (normal), orange/red (hover), and white (current selection)?

azaozz15 months ago

comment:31 azaozz15 months ago

Keep in mind that the menu colors will need to be adjusted in order for the new icons to match well. Here's a quick attempt:


Not sure if we can change the font to open sans as that would make the text longer which is problematic in some languages.

azaozz15 months ago

Attempt to tweak menu colors to work with the new icons

comment:32 in reply to: ↑ 30 MikeHansenMe15 months ago

  • Cc mdhansen@… added

I agree entirely. The white icon on hover is awkward. The background image for #adminmenuback does not seem to match the new look. I noticed you removed this image in your example. I do like where it is going overall though.

Replying to melchoyce:

I took a stab at making the whole Dashboard a little flatter, just for fun: http://f.cl.ly/items/3Q0e0y1E1X231K1s3i0M/wp-flatter.png

One thing I noticed in trunk is that the icon hover color is white, which ends up being really awkward: http://cl.ly/image/130x1a2h2t0k. Could we try three icon states: grey (normal), orange/red (hover), and white (current selection)?

comment:33 johnjamesjacoby15 months ago

  • Cc johnjamesjacoby added

These icons have a legacy that dates back to December 11, 2008 when 2.7 was released. I know that flat icons are the current trend, but we spent at least several man-hours making the existing icons beautiful with HiDPI details... Seems a waste of effort and resources, and they introduce several issues.

I'm attaching a current menu with BuddyPress and bbPress installed. It looks... ugly now.

Technically, flat icons exist because of a lack of flexibility from using a custom webfont. Not that I'd like them more, personally, but is there evidence to support flattening these icons improves the end-user experience or accessibility?

When the ethos is to "use core as the best example" of what to do, and core makes sweeping UI changes that are not backwards compatible with years of developers doing the right thing, it's frustrating to the core audience of contributors to core. I know you all know this, but it's worth reminding about here, how a seemingly small change has impacts that echo through the community in a negative way.

In my imagination, it's not just developers.. The average user has gotten familiar with the existing icons, to the glow color of the current mouse-over state, to them wondering why a few icons look the same, and a large percentage of them changed.

By switching to flat icons, we also /severely/ limit the range of available icons for plugins to use to distinguish themselves in a classy, core-matchy way. In turn, we disregard every icon that was carefully crafted to match core since 2008. Silhouettes work fine for the limited range of core functionality, but tens of thousands of plugins are going to run out of shapes very quickly.

I.E. Imagine if OS X dock icons could only be 1 color...

The icons, alone, are pretty. Ben does great work. The direction we're going on WordPress.com is nice, too. I like the icons there, because they fit an overall brand decision for WordPress.com. For the larger audience of self hosted WordPress installations, if it's not obvious by now, I think flattening these icons is a bad idea.

comment:34 wonderboymusic15 months ago

I vote -1 on icons and on any use of Open Sans in the admin

comment:35 in reply to: ↑ 30 johnjamesjacoby15 months ago

Replying to melchoyce:

I took a stab at making the whole Dashboard a little flatter, just for fun: http://f.cl.ly/items/3Q0e0y1E1X231K1s3i0M/wp-flatter.png

Flat UI is very soothing to me, and reminds me of Encarta with it's ethereal feel. In a world of strong bevels and edges, Encarta always had a way of blending into the background and letting the articles be the focus.

Last edited 15 months ago by johnjamesjacoby (previous) (diff)

comment:36 taylorde15 months ago

  • Cc td@… added

Switching to a flat icon without also switching to a vector icon seems without much benefit... Basically, echoing what JJJ said above. Though, it is easier to find/create flat icons... so maybe we could get more plugins to actually provide custom icons for both the menu and the admin screen icon?

Flat UI is popular right now. But I don't think that we need to incorporate it just because it is the current design aesthetic. On the other hand, I really think we could do some good in letting the sea of meta boxes and nav menus recede visually. Flat gets us there, but that shouldn't be the goal.

comment:37 philiparthurmoore15 months ago

  • Cc philip@… added

+1 to pretty much everything @johnjamesjacoby has written. The icons in /trunk/ right now feel incredibly out of place with the overral Dashboard and have an awkward relationship with other plugin icons. Rebranding one part of the Dashboard without flattening the entire thing makes the icons look like they don't belong. As mentioned, the icons in their own right are beautiful, but I think rolling this in without making visual changes to surrounding elements is a mistake.

comment:38 follow-up: wonderboymusic15 months ago

It's kinda bizarre that we all of a sudden have new icons like this, and almost everyone's opinion on them has been mixed at best - a huge visual update like this seems more fitting for an alternate admin theme.

comment:39 in reply to: ↑ 38 ; follow-up: johnjamesjacoby15 months ago

Replying to wonderboymusic:

a huge visual update like this seems more fitting for an alternate admin theme.

Ooo. Great suggestion.

comment:40 in reply to: ↑ 39 melchoyce15 months ago

I love this idea, and am happy to volunteer to make it if people agree.

Replying to johnjamesjacoby:

Replying to wonderboymusic:

a huge visual update like this seems more fitting for an alternate admin theme.

Ooo. Great suggestion.

comment:41 follow-up: matt15 months ago

Scott, also the legacy look could be made into a plugin or theme so people who prefer it can continue with it. Any change we make to the admin, where people spend countless hours every day, will naturally have resistance. We saw it in 2.7 and 2.5 with the big changes, but also trivial ones like when we introduced blue to the admin in the early days. To me the important thing is are we building a visual vocabulary we can build on for the next 3-5 years. I don't really care about whether "flat" is a trend or not, it's more about an elegant reduction of our visual elements to streamline superfluous elements, lines and iconography that work equally well at small and large physical sizes that the proliferation of non-PC devices is going to bring to our user base. I'm open to other ideas or approaches about a visual language that solves those same problems, but our current status quo does not.

JJJ, by your argument we could never change anything aesthetically with WordPress. It's true that things built for old platforms will look old, but for anything more complex than standard UI elements we can control with CSS we're going to have this "problem" and there really isn't any way around it besides locking in all our visual elements to the look we chose 5 years ago.

comment:42 in reply to: ↑ 41 helen15 months ago

Replying to matt:

Agreed that we can't stay stuck in something forever on account of time previously spent.

I have a couple questions - what exactly is the focus of this ticket? Should discussions be held on the merits of the icons on their own and then tackle changes to the rest of the admin UI styling elsewhere, or should they all go together here and we call this "the flattening" (or whatever) rather than just new icons? Also, are others invited to contribute with icons or is it feedback that is sought? Asking for the benefit of all, because I think without clarity about what the purpose of this is (experiment, trial run, solicitation for ideas, or otherwise), we're going to get derailed pretty quickly with pile-ons about fonts and vectors, etc.

comment:43 follow-up: empireoflight15 months ago

It's difficult to properly design and even more so to scale the old ones as they are currently designed. The icons I've seen designed in the wild are a mixed bag; unless someone is decent at photoshop, they tend to look muddy and just "off" and they're usually not properly scaled or aligned, shadows are wrong, etc. We need a style that anyone can recreate fairly well.

When I first did them back in 2008, retina wasn't a buzzword yet. 16x16 and 32x32 was easy enough. Now we need 2x, or 64x64, or who knows what; the naming of the files themselves is problematic. Icons and fonts are merging. We read icons as we read text, more than ever before. When icons are like little paintings next to their labels, there's a disconnect. It's like before the printing press, books were hand-written and filled with all kinds of embellishment, but after printing came about all the letters looked the same. Sure, there was beauty lost there, but ultimately it had to happen.

@jjj—App icons are a different animal; they are more about branding a product than anything else, and therefore should be colorful and attention grabbing. UI Icons should be vector-based (if that means "flat", whatever) like text; whether that ends up being SVG or a web font remains to be seen, but in the meantime these set the groundwork for that.

@melchoyce—funny you should compare them to the WP.com icons; I designed those too!

@helen—that's exactly it; I want to make it so anyone can design these and you don't have to rely on me when we need new ones or versions.

comment:44 empireoflight15 months ago

Here's a version of the menu with the icons embedded in a font:

http://bendunkle.com/wp-admin-icons/

Only really looks good in webkit, just did it as a test.

comment:45 kopepasah15 months ago

I too agree that we need something that is scaleable for the future. However, the current icons in trunk simply do not mesh well with the design of the admin area.

I am also with @helen on this. We need to clarify on what needs to improve within the admin UI and not limit our discussion on the icons alone.

On a side note

I feel that making the icons too simple will cause issues in the future with something so extendable as WordPress.org. You have thousands of developers and designers contributing (plugins/themes), but you are now limiting their branding to a fixed amount of shapes.

Many users rely on the icons only when choosing a menu item (when the menu is collapsed). Flattening the icons limits the developers and designers ability to differentiate it plugin/theme from others. Take Jetpack for example. Here is a sample of the new menu, collapsed with Jetpack enabled. How would we suggest the designer of this icon differentiate itself from other menu items? How would you suggest the other thousands of plugins/themes handle the change?

I am not saying change does not need to happen, we just need to consider the consequences before hand instead of shoehorning these new icons into Core.

melchoyce15 months ago

Icons experiment

comment:46 melchoyce15 months ago

I decided to experiment and take a stab at making some vector icons for both the admin and new post formats ui modeled off of both empireoflight's originals and new icons. I wanted to see if there was some sort of compromise between old and new. I snagged his lock and wrench icons, since I thought they looked pretty perfect as-is, and kept the concept of the paintbrush for appearance. Obviously the quality of these are not as good as empireoflight's, so please treat them as concepts more than finished icons.

For reference, the post formats are: image, chat, gallery, status, quote, aside, links, audio, video.

comment:47 in reply to: ↑ 43 ; follow-up: helen15 months ago

Replying to empireoflight:

We read icons as we read text, more than ever before.

I like that sentence and wanted to note it :)

I have a few non-graphic-designer observations, now that I've actually looked at more than one set and have been able to separate my thinking from the rest of the admin styling:

  • I really like the change away from a generic layout icon for Appearance. I do wonder if the paintbrush is not quite right for some of the management screens, like Widgets and Menus, but I like it just in the context of Appearance.
  • It's a little odd to me that the plugin icon is horizontal as opposed to angled, something I see melchoyce altered in her experimentation.
  • I like that melchoyce did a little remixing on empireoflight's original set in her take, because they are good and definitely stood the test of time! I think the Users, Settings, and Media icons are particularly nice, especially that the Media one represents more than "just" photos. Whether or not we have good support for anything more than photos/images right now is suspect, of course, but you can at least upload other types of media :) I also like the Comments one on its own, but it may be less of a fit in some ways given the appearance of other comment bubbles around the admin (list tables, which have the number inside).

I'm also really glad to see what icons beyond the admin menu could look like, like post formats. It helps snap me out of thinking about just the admin menu and into our overall UI language and helpful visual cues for users instead. empireoflight - your eye and feedback about melchoyce's format icons would be really valuable, because those will be really useful for the post formats UI we are working on. Design by committee is not desirable by any means, but I think sharing some of the vision and work will help us keep moving and not put all the pressure on one body.

Last edited 15 months ago by helen (previous) (diff)

comment:48 follow-up: johnjamesjacoby15 months ago

Replying to matt:

JJJ, by your argument we could never change anything aesthetically with WordPress. It's true that things built for old platforms will look old, but for anything more complex than standard UI elements we can control with CSS we're going to have this "problem" and there really isn't any way around it besides locking in all our visual elements to the look we chose 5 years ago.

That's not really fair to say. It's more that WordPress core has a responsibility to provide a stable foundation for the growing audience of users and developers. As such, we improve UI that needs it, and commit to keeping UI that works for which third party plugin authors are invested in. Locking in some visual elements has to happen. We're married to them, even if we don't love them the same as we used to.

Top Level Menu icons and icon-32's have been the only UI elements that were *encouraged* to be unique by the core team. Deviating from core design cues for list-tables, settings-fields, and metaboxes has been *discouraged* for several years now, and often came with a public shunning at WordCamps, Twitter, blog posts, etc...

Changing the core icons now, after years of UI evangelism, abandons the standards we've set, and punishes plugin authors for years of doing the right thing by taking away the one rewarding thing they could use to identify their work.

These icons are badges of honor given to users that opt into using those plugins. They symbolize sometimes years of development time, all tucked under one tiny, expressive little image. I suspect plugin authors have as deep of a connection with their icons as you do with the WordPress logo itself.

Also, consider that plugin authors will need to include eight sets of top level menu icons just to keep up: regular, retina, silver, blue, old, new. Changing the icon style immediately doubles the work and increases filesizes because of larger bundled png's.

I understand if my opinion isn't the popular one. I also don't contribute as much to core UI as I have in the past, so I likely won't influence the result or design direction as heavily as others in the community can. I'm appreciative of the opportunity to share my thoughts, and to have a friendly discussion about the ideas presented in this ticket.

Replying to empireoflight:

@jjj—App icons are a different animal; they are more about branding a product than anything else, and therefore should be colorful and attention grabbing. UI Icons should be vector-based (if that means "flat", whatever) like text; whether that ends up being SVG or a web font remains to be seen, but in the meantime these set the groundwork for that.

Top level menu icons are the only natural way plugins identify themselves within WordPress's administration area. They are how a user navigates to the hidden functionality underneath that menu. For plugins, hovering over/clicking those menu's has more in common with opening an application with new functionality than it does with complimenting existing WordPress core functionality.

It's difficult to properly design and even more so to scale the old ones as they are currently designed. The icons I've seen designed in the wild are a mixed bag; unless someone is decent at photoshop, they tend to look muddy and just "off" and they're usually not properly scaled or aligned, shadows are wrong, etc. We need a style that anyone can recreate fairly well.

It requires more imagination to paint with 1 color. Flat icons place unrealistic limitations on iconographers to only use shapes instead of using depth or details. If making icons easy is really the goal, I'm reminded of a quote about doing things not because they are easy, but because they are hard, and because they serve to measure our best energies and skills. I don't think this UI change represents us, the project, or our energies or skills very effectively.


Let me approach this from a different angle... Imagine updating to Adobe CS6. When you first open it, you notice there are 4 random icons in the traditional left toolbar that retained the old full-color look, and 30 of the stock icons had the new, darker, flatter style. The questions I would have, would be something like: Why didn't those 4 icons didn't change? Did I do something wrong? How do I get them to match? Is there special meaning associated with these different looking icons? etc...

We need to ask ourselves: is this UI change for us, worth these possible confusions?

comment:49 joen15 months ago

  • Cc joen added

I love the effort here, and I think the icons can definitely work (though I appreciate sharper vs. rounder edges), but not without a few small changes to the surrounding UI.

A lot of the discussion here has emphasis on the "why" of changing the icons. This is a pragmatic approach, and we do need a good answer for that (because the current icons are also lovely).

Mel Choyce did something wonderful in http://core.trac.wordpress.org/ticket/23333#comment:30 and http://f.cl.ly/items/3Q0e0y1E1X231K1s3i0M/wp-flatter.png (though I wouldn't go full Microsoft with the buttons) and I think it captures what simpler icons can bring to the admin UI: a lighter, faster, more functional feel.

Having worked quite a bit with icon fonts recently, these icons seem almost made for being such. I think that combining a more streamlined admin UI with an icon font is a very good answer to the question "why". Because an icon-font would bring the following benefits to further development of the UI:

  • No image files to maintain for icons
  • Built-in retina
  • Icons can be shown in the pixel size they were designed to as well as 2x multiples thereof (for example the posts "pin" icon could be shown 1x in the sidebar, 2x at the top of the posts page)
  • Icon colors can be changed with one line of CSS
  • File size is through the floor.
  • Making changes to the HTML or CSS becomes much easier since the icons are essentially "letters". For example, the blue color scheme wouldn't require a separate PNG sprite.

I see only two downsides to using icon fonts:

  • Slightly bigger overhead in creating the font (I volunteer to help out here if need be)
  • On Firefox, the -webkit-font-smoothing: antialiased; CSS property doesn't exist, which means Firefox and IE users will see a barely perceptible red and blue haze around the icons (the letters you're reading right now have the same red/blue haze -- more info here: http://noscope.com/2012/font-smoothing/)

So I'm definitely in the camp of going flat and light-weight on the icons, provided they become part of a font. Trendy or not, in my experience, the strong silhuette and simplicity of flat icons can almost become a visual identity unto itself.

Last edited 15 months ago by joen (previous) (diff)

comment:50 lessbloat15 months ago

  • Cc lessbloat added

comment:51 kadamwhite15 months ago

  • Cc kadamwhite added

comment:52 bftrick15 months ago

  • Cc bftrick added

comment:53 jtsternberg15 months ago

  • Cc justin@… added

After reading this entire thread, I'm pretty torn, with excellent points presented from both ends. I understand the desire to move forward, but I almost feel this consideration would go better with a complete rework of the Admin css/ui http://www.noeltock.com/web-design/wordpress/rethinking-wp-admin/. The whole idea of using icon fonts, flat icons, etc seems to be geared towards mobile usage and I know mobile is a huge priority, but until the admin css is reworked, replacing icons seems to be similar to putting lipstick on a pig, since the mobile experience is still painful at best.

My two cents.

Last edited 15 months ago by jtsternberg (previous) (diff)

comment:54 follow-up: bftrick15 months ago

Replying to matt:

Scott, also the legacy look could be made into a plugin or theme so people who prefer it can continue with it. Any change we make to the admin, where people spend countless hours every day, will naturally have resistance.

I agree. There will be resistance and creating a plugin or theme for users who want to stick to the old UI should be made possible.

Replying to joen:

Having worked quite a bit with icon fonts recently, these icons seem almost made for being such. I think that combining a more streamlined admin UI with an icon font is a very good answer to the question "why". Because an icon-font would bring the following benefits to further development of the UI:

  • No image files to maintain for icons
  • Built-in retina
  • Icons can be shown in the pixel size they were designed to as well as 2x multiples thereof (for example the posts "pin" icon could be shown 1x in the sidebar, 2x at the top of the posts page)
  • Icon colors can be changed with one line of CSS
  • File size is through the floor.
  • Making changes to the HTML or CSS becomes much easier since the icons are essentially "letters". For example, the blue color scheme wouldn't require a separate PNG sprite.

I see only two downsides to using icon fonts:

  • Slightly bigger overhead in creating the font (I volunteer to help out here if need be)
  • On Firefox, the -webkit-font-smoothing: antialiased; CSS property doesn't exist, which means Firefox and IE users will see a barely perceptible red and blue haze around the icons (the letters you're reading right now have the same red/blue haze -- more info here: http://noscope.com/2012/font-smoothing/)

So I'm definitely in the camp of going flat and light-weight on the icons, provided they become part of a font. Trendy or not, in my experience, the strong silhuette and simplicity of flat icons can almost become a visual identity unto itself.

I think the only downside that you left out is that any developer can figure out how to create an icon in photoshop (even if it looks bad). I have no idea how to create an icon font so if I want to create an icon for my plugin what do I do?

I love the idea of an icon font but I don't think we should have to know how to create an icon font to use an icon for our plugin.

Replying to jtsternberg:

After reading this entire thread, I'm pretty torn, with excellent points presented from both ends. I understand the desire to move forward, but I almost feel this consideration would go better with a complete rework of the Admin css/ui http://www.noeltock.com/web-design/wordpress/rethinking-wp-admin/. The whole idea of using icon fonts, flat icons, etc seems to be geared towards mobile usage and I know mobile is a huge priority, but until the admin css is reworked, replacing icons seems to be similar to putting lipstick on a pig, since the mobile experience is still painful at best.

My two cents.

Thats a good point (and an excellent article). In the long run rebuilding the admin theme with LESS is very beneficial but right now WP doesn't even ship with LESS. It will take a while before we get all of the pieces in place to build anything /w LESS. We could create a new admin theme in the near future and then convert it to LESS when that becomes an option.

comment:55 jtsternberg15 months ago

I love the idea of an icon font but I don't think we should have to know how to create an icon font to use an icon for our plugin.

Even though the core icons would use an icon font, new icons could be added the same way they are now.

Thats a good point (and an excellent article). In the long run rebuilding the admin theme with LESS is very beneficial but right now WP doesn't even ship with LESS. It will take a while before we get all of the pieces in place to build anything /w LESS. We could create a new admin theme in the near future and then convert it to LESS when that becomes an option.

The idea of using a preprocessor is definitely intriguing, but really the thing I think needs to happen is a complete css refactoring to become mobile friendly (responsive, etc). The article of course is proposing that that should be done from the ground up with a preprocessor, but I think it needs to be done despite HOW it gets done. The admin will never be easily skinned (a different argument entirely) or fit well in mobile until this is done.

Last edited 15 months ago by jtsternberg (previous) (diff)

comment:56 in reply to: ↑ 54 ; follow-up: joen15 months ago

Replying to bftrick:

I love the idea of an icon font but I don't think we should have to know how to create an icon font to use an icon for our plugin.

Excellent question.

I have one idea for how to solve that conundrum, but it's hard me to convey without sounding controversial (so please don't burn me at the stake for sharing).

For as long as I can remember, the Codex has suggested people be mindful of creating new top-level menus. The ultimate risk is a Microsoft Office-like menu overload.

A solution that would allow plugin developers to keep top level menus, would be to bundle a stack of semi-generic icons within the font, which authors could then pick from. These semi-generic icons could range from newsletter icons over paint-brushes to knobs and dials and cogs. A side-benefit to this would be the fact that all icons would use the same overall visual language and styling, not visually weighing down the overall appearance.

The obvious knock to that argument would be from the commercial plugin vendors that like to brand their plugins through that icon. But they'd still be able to do so on the actual options page not to mention the plugin title itself. So personally I'm still in the camp that we can gracefully introduce an icon font, and that the 20x20px less branding afforded to plugins would be an acceptable trade-off.

comment:57 matt15 months ago

Let's also remember to not let a perfect ideal we have in our heads be the enemy of something better today. Just because we iterate in this release doesn't mean we can't (and shouldn't) keep refining and trying new things in 3.7, 3.8...

comment:58 in reply to: ↑ 56 ; follow-up: empireoflight15 months ago

Replying to joen:

A solution that would allow plugin developers to keep top level menus, would be to bundle a stack of semi-generic icons within the font, which authors could then pick from. These semi-generic icons could range from newsletter icons over paint-brushes to knobs and dials and cogs. A side-benefit to this would be the fact that all icons would use the same overall visual language and styling, not visually weighing down the overall appearance.

Good suggestion. I'd wager that 90% of the plugins out there could be represented by maybe 10 icons–a calendar, form fields, social media icons come to mind.

comment:59 in reply to: ↑ 58 melchoyce15 months ago

Replying to empireoflight:

Replying to joen:

A solution that would allow plugin developers to keep top level menus, would be to bundle a stack of semi-generic icons within the font, which authors could then pick from. These semi-generic icons could range from newsletter icons over paint-brushes to knobs and dials and cogs. A side-benefit to this would be the fact that all icons would use the same overall visual language and styling, not visually weighing down the overall appearance.

Good suggestion. I'd wager that 90% of the plugins out there could be represented by maybe 10 icons–a calendar, form fields, social media icons come to mind.

Same thing for custom post types. Building extra icons would be a great way to make it easier for both plugin authors and developers building CPTs to have nice icons with minimal hassle.

comment:60 follow-up: lessbloat15 months ago

Overall feedback

  • While I wasn't sold when I first saw these, having used them daily over the past week, they've really grown on me.
  • This is less about being trendy, and more about decluttering and increasing clarity within the admin UI.
  • As @melchoyce showed us, when paired with a de-gradientification, de-shadowing & overhaul flattening of the admin, we have the opportunity to dramatically reduce visual noise within the admin (but I'd use a separate ticket for that). If you don't believe me, compare the two (there's so much less for your mind to process with the simplified menu on the left):

http://f.cl.ly/items/2A3z2X1W3i3L0p2w0635/menus-compared.jpg

  • With that said, I do almost feel like the two need to be done in unison. The flat icons do stick out on their own (in the existing gradient filled admin).
  • This change should be uniform. Every icon in the admin will need to be brought in line IMO.
  • Using a preprocessor seems out of the scope of this particular discussion (doesn't mean it can't be discussed in another ticket thought ;-))
  • Regarding thoughts that doing this would limit the range of available icons, I say: Balderdash! ;-) Don't underestimate the unlimited array of possibilities available for combining simple shapes. Of all the reasons not to proceed with these icons, this should not be one of them.
  • @jjj Regarding sensitivities for existing plugin authors. I hear ya. I've not heard any (great) solutions for that so far.

Icon specific feedback

  • They're all still slightly too large for my liking.
  • I think making the corners on the comment icon less round would go a long way towards making these less bubbly overall, and maybe even go with a flat line under the users icon.
  • Could we get away with two sliders on the settings icon instead of three?
  • +1 for making all core icons into a icon font (for all of the reasons @joen mentioned). As for plugin icons, I'd imagine they'd have to remain as images, unless we open sourced a WP specific vector icon font generator of some kind. ;-)
Last edited 15 months ago by lessbloat (previous) (diff)

comment:61 markmcwilliams15 months ago

  • Cc mark@… added

comment:62 JohnONolan15 months ago

Icons look very good - but the sizing is not working at all. I would also use this opportunity to move away from the obscure mixing-desk settings icon to the standard/far-more-common cog icon - particularly when talking about introducing icons which are more cross-platform/mobile friendly.

comment:63 ldebrouwer15 months ago

  • Cc info@… added

comment:64 kopepasah15 months ago

Replying to empireoflight:

Replying to joen:

A solution that would allow plugin developers to keep top level menus, would be to bundle a stack of semi-generic icons within the font, which authors could then pick from. These semi-generic icons could range from newsletter icons over paint-brushes to knobs and dials and cogs. A side-benefit to this would be the fact that all icons would use the same overall visual language and styling, not visually weighing down the overall appearance.

Good suggestion. I'd wager that 90% of the plugins out there could be represented by maybe 10 icons–a calendar, form fields, social media icons come to mind.

Don't worry. I am not here to burn you at the stake. However, thinking this way is very narrow minded. You not only eliminate the opportunity for branding, but you also assume that no two plugin authors will choose the same icon.

comment:65 in reply to: ↑ 60 ; follow-ups: aaroncampbell15 months ago

Replying to joen:

The obvious knock to that argument would be from the commercial plugin vendors that like to brand their plugins through that icon. But they'd still be able to do so on the actual options page not to mention the plugin title itself. So personally I'm still in the camp that we can gracefully introduce an icon font, and that the 20x20px less branding afforded to plugins would be an acceptable trade-off.

I don't think it's acceptable to take away a plugin's ability to use a custom icon in the menu. If we go with an icon font I think they need to be able to continue adding custom icons as they currently do OR make their own icon font to use.

Replying to lessbloat:

  • As @melchoyce showed us, when paired with a de-gradientification, de-shadowing & overhaul flattening of the admin, we have the opportunity to dramatically reduce visual noise within the admin (but I'd use a separate ticket for that). If you don't believe me, compare the two (there's so much less for your mind to process with the simplified menu on the left)

The image on the left (with the new icons) is longer even though it has two fewer top level items and one less subnav item. While it looks great, integrating the larger icons costs a lot of vertical space in that menu.

comment:66 kopepasah15 months ago

Replying to lessbloat:

  • They're all still slightly too large for my liking.

I agree. The icons are too large. In addition, the extra padding added around the menu items will definitely cause issues for users on smaller screens with lots of plugins (with top level menus) activated.

comment:67 in reply to: ↑ 65 lessbloat15 months ago

Replying to aaroncampbell:

The image on the left (with the new icons) is longer even though it has two fewer top level items and one less subnav item. While it looks great, integrating the larger icons costs a lot of vertical space in that menu.

Most of that simply comes from the additional padding @melchoyce chose to include in her mockup (not from the height of the icons).

Last edited 15 months ago by lessbloat (previous) (diff)

comment:68 in reply to: ↑ 48 bpetty15 months ago

Replying to johnjamesjacoby:

I understand if my opinion isn't the popular one.

Based on the feedback on this ticket, your opinion seems to be shared with quite a lot of people actually, including myself. There's some good points here that shouldn't be overlooked.

Certainly the icons look great when it's just the core set, but this change is heavily biased against self-hosted WP with thousands of different plugins installed (that don't auto-upgrade with core upgrades btw) where the plugin is often out of the user's control (or their technical and artistic expertise to manually update themselves). On WP.com, happytables, and others, the plugin stack is under full control where these icons can be quickly and easily updated to reflect the new style.

You are right, we are married to this style, and it's going to be an ugly divorce if this is pushed in 3.6, with WP.org users caught in the middle left with a bad experience.

comment:69 bpetty15 months ago

Just tossing an idea out there, but what if this change was only activated under the conditions that all plugins installed declared that they were tested up through 3.6? That could be some reasonable middle ground.

comment:70 saracannon15 months ago

  • Cc sararcannon@… added

Where this is going is GREAT!

I love the flat "less is more" icon and admin approach. and putting the old icons into a plugin for people who still want them. Plugin and theme authors will just have to follow suit and modify their icons, just like how they have to update code. I dont see that as a huge issue.

I do agree that smaller icons are better, and agree with @johnonolan that I'd like to see a gear as "settings"

Implementation: I like @joen's idea of it being an iconofont, which will bring us more toward a skin-able admin. Pluses: The ability to modify icon color easily- ESPECIALLY for High-Contrast themes. The ability to modify icon scale: to easily make a theme for people with eyesight issues.

I think it would be great to test the iconofont approach out in a variety of circumstances/devices and see how it does, and what drawbacks there might be. I'd love to help @joen or whoever with this

comment:71 in reply to: ↑ 65 joen15 months ago

Replying to aaroncampbell:

I don't think it's acceptable to take away a plugin's ability to use a custom icon in the menu. If we go with an icon font I think they need to be able to continue adding custom icons as they currently do OR make their own icon font to use.

Just putting the idea out there to be aired against the cold harsh light of reality ;)

Another obvious alternative mentioned just above my previous comment is to combine the icon font with keeping plugin authors ability to bundle PNGs intact. Here's a sort of half-assed version of how that could look based on Mel's mockup: http://cl.ly/image/1d47393E2l0W -- Let's not let perfect be the enemy of good.

On Mels mockup, while I think it's very lovely, I think that icons in general should be a bit smaller, and if we combine that with a trimming of the padding, there's no reason the menu should be larger than the current one.

Last edited 15 months ago by joen (previous) (diff)

comment:72 iammattthomas15 months ago

I was excited to see this discussion, and wanted to add some thoughts with a historical perspective (I did the visual design of 2.7 if you don't know/remember me). My thoughts here align pretty closely with Dave's. Wasn't sold on first glance, but after a bit of consideration, I like the idea here. It's true that simplicity in design is trending hard (and thank goodness for it) but as Dave mentioned, the simpler icons are far clearer and easier to discern at a glance. And let's not forget that the heavily gradated, embellished look of the 2.7 admin was also pretty heavily influenced by what was in vogue at the time it was designed.

Joen's suggestion of using an icon font is a good one; we've had lots of success with our Noticons font on WordPress.com. Being able to change icon colors without creating new assets is pretty dreamy. We've also done a good bit with SVG graphics; browser support for SVG is solid enough to make that a good solution for plugin authors.

While it's true that it will require work of the plugin authors who have chosen to create top-level menus for their plugins, it seems like a reasonable amount of work to ask of those authors. Ben, above, was correct in pointing out that it should actually be far easier for plugin authors to create 1-color icons that are a good match for the core set -- replicating the exact lighting effects, shadows, and shading in the current core icons takes far more effort. Helveticons and the Noun Project pretty much prove that there's no limit to what you can do with 1-color icons. There's certainly plenty of time for new icons to be designed. Will out-of-date plugins look out-of-date? Yep. That's a symptom of something else, though.

I do agree that the sizing of the icons isn't quite right (see: http://cl.ly/image/1B383D2e3Z3M ) -- I'd recommend basing them on 16px/32px/etc multiples like we did with Noticons. I think the color isn't perfect either -- since they're flat, I think they need to be darker, so they contrast more with the background. Medium gray on light gray looks a little dull to me. But overall, I really like the idea.

Version 0, edited 15 months ago by iammattthomas (next)

comment:73 scribu15 months ago

Ticket for revaming the admin style: #23415

comment:74 markjaquith15 months ago

No matter when we change the icons, plugins will have to adapt. If that argument is valid now, it is perpetually valid. And that would mean we're prevented from making all but the smallest tweaks to our icons. We have a lot of backwards compatibility baggage that we can't shed. Our icons shouldn't be added to the heap. They've been mostly the same for 4+ years.

It's not the end of the world if some third party icons don't mesh at first. To be honest, a lot of them already don't mesh. I also think that making a top level menu is not something that should be done in very many plugins, and that by choosing to do so, you've opted in to some amount of extra design work.

comment:75 azaozz15 months ago

From a non-graphic-designer perspective the choice here is clear: out with the old, in with the new. An icon font has many advantages and is the way to go.

Plugins with top level menus will adapt, @markjaquith put it really well:

It's not the end of the world if some third party icons don't mesh at first. To be honest, a lot of them already don't mesh.

comment:76 empireoflight15 months ago

If branding is about standing out, maybe this will make the plugin icons even better.

If anyone want's to see my illustrator/fontalb setup, it's at http://bendunkle.com/2013/02/06/wp-icon-font/

Thanks to @joen for being super helpful in getting me started on this...

comment:77 empireoflight15 months ago

If branding is about standing out, maybe this will make the plugin icons even better.

If anyone want's to see my illustrator/fontlab setup, it's at http://bendunkle.com/2013/02/06/wp-icon-font/

Thanks to @joen for being super helpful in getting me started on this...

comment:78 follow-up: matt15 months ago

Curious on the too-large front -- I like how they fill up the space a bit more by getting a bit larger than their adjacent text, this is also what we do with the WP logotype, the W in the admin bar, and for those of you on Macs notice how the apple in the top left is almost too large for the top-bar, almost like it wants to burst out and is certainly larger than the text next to it. We might not have nailed it in this iteration, but I really like that design pattern when it's done right, it flows more naturally with the text and in the eye. I don't think we should constrain ourselves to the arbitrary historical 16/32 increments, especially since whenever we do a touch-oriented stylesheet all of those menu tap targets are going to need to be larger anyway, but probably not double, maybe just 20-40%.

comment:79 in reply to: ↑ 78 ; follow-up: aaroncampbell15 months ago

Replying to matt:

Curious on the too-large front...

For me it's not necessarily the icon size. I was worried about the menu taking a lot more space. If the icons can stay this size without increasing the height of the menu item (or without increasing it much), I'd be fine with them. I need to see it to really picture it that way though. Mel said she'd put a patch up on #23415 tonight, which should help people play with things like padding and see how it looks in action.

comment:80 follow-up: drw15815 months ago

Replying to joen:

  • Slightly bigger overhead in creating the font (I volunteer to help out here if need be)

Ok this might help (possibly)...the IcoMoon App http://icomoon.io/#app-features

A nice HTML5 app that is free and open source.

Not sure how it could be done, but if we used IcoMoon to build a custom font builder for WordPress that would be really awesome!

Replying to joen:

A solution that would allow plugin developers to keep top level menus, would be to bundle a stack of semi-generic icons within the font, which authors could then pick from.

This is exciting, and I do not think it is narrow minded to think this way. The admin menu is very functional and I think there are more appropriate areas for the branding of the plugin to shine. The admin menu should not be the main outlet of branding for a plugin. The icon should represent the functionality of the plugin and not the plugin itself. On the other hand, if a plugin author wants to put a unique icon in the menu (or if they don't find the generic ones suitable), then they may do so. It's ok if two or more plugins use the same generic icon.

comment:81 in reply to: ↑ 80 drw15815 months ago

Replying to drw158:

Actually, they used very small hatching to achieve this effect (looks solid when zoomed out). http://cl.ly/image/2n3r2M2e3M0N

comment:82 in reply to: ↑ 79 matt15 months ago

Replying to aaroncampbell:

For me it's not necessarily the icon size. I was worried about the menu taking a lot more space. If the icons can stay this size without increasing the height of the menu item (or without increasing it much), I'd be fine with them. I need to see it to really picture it that way though. Mel said she'd put a patch up on #23415 tonight, which should help people play with things like padding and see how it looks in action.

Vertical space or horizontal space? On an iPad in landscape mode it takes about 10-15% more vertical space, but still plenty of room for everything to fit in without scrolling, and that's with Jetpack adding two top-level menus (Jetpack and Feedbacks). Horizontal it looks identical.

comment:83 in reply to: ↑ 47 ; follow-up: empireoflight15 months ago

Replying to helen:

empireoflight - your eye and feedback about melchoyce's format icons would be really valuable, because those will be really useful for the post formats UI we are working on.

Happy to do that; should we open a new ticket or discuss this somewhere else?

comment:84 in reply to: ↑ 83 helen15 months ago

Replying to empireoflight:

Happy to do that; should we open a new ticket or discuss this somewhere else?

Good question. I feel like it should go with the overall icon discussion, because it should be a coherent experience, but Trac isn't really the greatest place for that at all. I'm tempted to say maybe the discussion could happen on the Make/UI P2, unless there's a objection to that that I'm not thinking through at the moment?

comment:85 follow-up: rmccue15 months ago

If we do go the icon font way, can we please ensure that we use the private use area of Unicode? Otherwise you end up with horrible, horrible problems if the UI font doesn't load fully, plus screen readers will read the text.

comment:86 in reply to: ↑ 85 joen15 months ago

Replying to rmccue:

If we do go the icon font way, can we please ensure that we use the private use area of Unicode? Otherwise you end up with horrible, horrible problems if the UI font doesn't load fully, plus screen readers will read the text.

A theoretical new icon font for WordPress should definitely be private use unicode range, +1.

The tweet you linked, by the way, was referring to an old version of an in-development font, of which a newer version already uses only the private use unicode range. The open-source variant of that font, "Genericons", is also entirely private use unicode range.

comment:87 swissspidy15 months ago

  • Cc hello@… added

comment:88 jb51015 months ago

Been follow things, waited until living with the icons for a week before commenting.

A week later I still don't like them and I'd LOVE to see some that were dual tone using cross hatching like has been suggested.

I agree with those that the icons are too big for their fields/background, too flat and just look wrong next to the text links.

FWIW, the flat icons look a little better when the responsive design hides the text fields, but still seem to crowded, add 2-3 px of padding and they feel right.

comment:89 alexvorn215 months ago

Can you guys please make icons and for bbPress too?

comment:90 helen15 months ago

Posted http://make.wordpress.org/ui/2013/02/12/discuss-icons/ for discussion about the icons themselves. Let's try not to derail that conversation with technical implementation details or talk about the admin styling that's already been spun off into #23415 (which is also really an implementation detail in itself).

comment:91 saltcod15 months ago

  • Cc saltcod@… added

comment:92 follow-up: johnjamesjacoby15 months ago

I gave it a few days, and I haven't come around yet.

Regarding packing extra icons into the core set, once we pick them, we can't change them, as plugin authors will rely on each and every icon being what they are, in the same position in the typeface, in perpetuity. If my shopping-cart icon magically turned into a snapping turtle, I would be a little frustrated.

Going with my previous comparisons to existing conventions, the top level menu icons in WordPress are more closely akin to the preferences icons in OS X apps, in that they visually draw attention to the hidden fields beneath them because of their color, shape, and connection between words and iconography.

In a completely anecdotal survey of my most commonly used apps (Linkinus, Skype, Firefox, Sequel Pro, MAMP, iTunes, 1Password, Sparrow, and a few others) every application uses the same color-icon & text convention. It's familiar and consistent.

Ironically, the app I spend the most time in (Chrome) has very few of it's own icons anywhere, relying mostly on favicon's for history, and a sparse iconset for setting up multiple users. (These icons, I'll add, are color.) Not surprisingly, I personally find Chrome's settings panel to be difficult to grok, and resort to using the search input box to find things, which I suspect was the intention anyways.

I'd like to see what a muted set of icons looks like, with stronger outlines and no shadows (basically to more closely match the bbPress icons' stroke size.)

Posted ​(...) for discussion about the icons themselves...

Forgive my ignorance of your process, but I get confused when conversations get forked in the middle (especially when both forks are about the same thing.) In the future, should I post comments like this here, or there?

comment:93 in reply to: ↑ 92 helen15 months ago

Replying to johnjamesjacoby:

It definitely wasn't a light decision to split the conversation. However, even within your comment, there are a few aspects, all valuable but quite different in terms of what they touch on. There are concerns about what this would lock core into in terms of a typeface (assuming that it would be a typeface, which may or may not be true, as obvious as it may seem to many), notes about connections between words and iconography, observations of common practices elswhere, and a proposal for an alternate style of icon you'd like to see. The first is, to me, a detail that certainly needs to be considered but we're not there yet. The rest would be great on the Make UI post, because they are about what I cheaply called "the icons themselves" :) Certainly P2 discussion should be brought back here in summary as well.

Really, Trac just doesn't work well for this kind of multifaceted discussion or for design decisions (or many design-types), and I'm hoping the focused P2 discussion will help keep things from stalling out, because I get a sense of that happening already. It gets said fairly often, right? "Trac is for hammering out the implementation" or some such. Honestly, I don't think we're really at implementation right now. There's a new sprite in trunk for trying on, and that's about it. Let's get focused in and figure out what does and doesn't work for a visual language with icons, and then go from there with the rest. That's not to say that what's been presented so far will just be ignored in that side of the process - I just think some focus would be good. We've got a good bit more to worry about than just the admin menu icons, after all, and it needs to be a cohesive experience around all parts of the admin.

comment:94 follow-up: bpetty15 months ago

So it sounds like it's generally agreed that there's a lot more work that needs to go into this. Given that's true, and that this entire project was never even mentioned in the planning and scheduling of the 3.6 release (and it's obviously a much bigger change than a small enhancement that can be included beyond initial planning), can we at least get these changes reverted and back into patch form for further testing and work until it's ready to be planned for a future release?

The core team is always encouraging everyone to submit new feature proposals as plugins to play with first, then move to patches when everything looks good, and then only commit when it has gone through rigorous testing and discussion and is literally ready to be released (given some additional time for post-commit testing before release). This blew right past the first two steps and straight to commit, and it's not anywhere near ready. You don't even seem to want to start the discussion on the technical implementation details still, which will be required eventually.

comment:95 in reply to: ↑ 94 helen15 months ago

Replying to bpetty:

You don't even seem to want to start the discussion on the technical implementation details still

I am only one person, and there's nothing to discuss without actual icons.

comment:96 scribu15 months ago

That's not the point bpetty was making though. +1 on reverting until we have some actual icons to put in.

comment:97 helen15 months ago

I was only responding to the part I have any say about/was directed at me :)

comment:99 in reply to: ↑ 98 ; follow-up: bpetty15 months ago

Replying to aaroncampbell:

It was brought up at the planning meeting: https://irclogs.wordpress.org/chanlog.php?channel=wordpress-dev&day=2013-01-02&sort=asc#m526536

I stand corrected, thank you.

Again, that's not the point though. I'm not trying to argue whether the community was given a chance to get involved in these changes (even though it is true that they weren't even asked for an opinion for a month after work started on it). All I'm saying is that it's not ready.

To be clear, I'm not saying stop all work on it, or that what work that has been done should be scrapped, or that the icons are terrible. I'm just saying that it should go back to a patch until it's ready.

It seems like everyone is just assuming now that the flat admin styles are also specifically included with this work on the icons, and that hasn't been done yet either. No one is saying they aren't, and the designers involved in these icons are already started on the admin styles, and there's already a ticket for that too (but there's not a patch for that either still).

comment:100 in reply to: ↑ 99 helen15 months ago

Replying to bpetty:

there's already a ticket for that too (but there's not a patch for that either still)

There are five patches on #23415, unless you meant something else.

comment:101 aaroncampbell14 months ago

We still need icons for the blue theme. I know that if we eventually move to an icon font that we'll be able to use the same font, but for now I think we just need to get the same sprite in the blue color so we can start playing with them on that theme as well.

comment:102 Archetyped14 months ago

  • Cc Archetyped added

comment:103 sunnyratilal14 months ago

  • Cc ratilal.sunny@… added

comment:104 ciobi14 months ago

  • Cc alex.ciobica@… added

comment:105 follow-up: alexvorn214 months ago

  • Keywords reporter-feedback added

I installed the last trac and I can say that I don't like these new icons!
Old fashioned gray color... Maybe to make them colored or to change with other icons? :)
The second idea is to ask a good icon designer to contribute with a special collection with icons that will replace existing icons at a glance.

comment:106 in reply to: ↑ 105 helen14 months ago

  • Keywords reporter-feedback removed

Replying to alexvorn2:

The second idea is to ask a good icon designer to contribute with a special collection with icons that will replace existing icons at a glance.

You should probably look into who empireoflight is.

empireoflight14 months ago

empireoflight14 months ago

empireoflight14 months ago

menu 2x for retina

empireoflight14 months ago

empireoflight14 months ago

empireoflight14 months ago

32px icons

empireoflight14 months ago

no shading, less round media icon

empireoflight14 months ago

empireoflight14 months ago

header icons for retina

empireoflight14 months ago

Preview of icon states

comment:107 follow-up: empireoflight14 months ago

I revised the icons a bit-they're slightly smaller and incorporate some of mel's suggestion. I also did a hover and sctive state, so they are always the same color as the text. We need to do the blue theme still; the css is all messed up in that.
I completely overhauled the sprite and css so everything is in a 28x28px space, and all the css positioning follows those increments.

comment:108 in reply to: ↑ 107 ; follow-up: aaroncampbell14 months ago

Replying to empireoflight:

Can you put your CSS changes into the non-minified file and upload the diff for that one? You can add this line into your wp-config.php file to use the non-minified versions of the files when you're testing:
define('SCRIPT_DEBUG', true);

comment:109 in reply to: ↑ 108 empireoflight14 months ago

Replying to aaroncampbell:

Replying to empireoflight:

Can you put your CSS changes into the non-minified file and upload the diff for that one? You can add this line into your wp-config.php file to use the non-minified versions of the files when you're testing:
define('SCRIPT_DEBUG', true);

will do...I'm better at designing icons than submitting patches :)

comment:110 follow-up: empireoflight14 months ago

I edited the right file this time, I think; let me know how it looks!

empireoflight14 months ago

Patch of colors-fresh.css

comment:111 in reply to: ↑ 110 lessbloat14 months ago

Replying to empireoflight:

I edited the right file this time, I think; let me know how it looks!

A couple thoughts:

  • Looking good Ben! Nice work.
  • I still think the comments icon looks a bit too rounded (when compared to the other icons). Could we try it a little less curvy?
  • I'd stick with blue for the default navigation link colors (i.e. #21759b).
  • I'm not a huge fan of the red icon with the red text. At a glance, it almost feels like I've done something wrong. I'd stick with gray for the default icon color as well as the mouseover icon color. In chatting with MT, he suggested maybe darkening the grey icon a bit so that it works better in both scenarios (something in the #6c6b6b range might work).

comment:112 griffinjt14 months ago

I've been working with trunk the past couple of weeks and have been gathering my thoughts as well as thoughts from my wife and two local clients. Here is the combined info:

  • The icons are too large for the space. Either the icons should get smaller or the padding around the menu items should increase. It just looks disproportionate.
  • The hover state is super tough to see on screens that don't have a high resolution. It almost blends into the background, which can easily cause confusion for users who have never used WordPress before and aren't familiar with what the icons represent yet.
  • The icon design does not match the font of the admin. The icons lack the sophistication that the new buttons and slender fonts represent, so while the icons might fit with another font, they certainly are not visually appealing with the current feel of Helvetica Neue.

comment:113 chriswallace14 months ago

  • Cc chriswallace added

comment:114 chriswallace14 months ago

I have to agree with Thomas, I've been following along for a while now and I much prefer the old icons. I think these new icons feel more like we're losing a lot of clarity in the image association (which I assume is the whole point of associating images with links). They're large, bulky and less detailed which makes it more difficult to easily identify the various menu items. I think it would make sense to design a set of icons that use outlines heavily in order to maintain the level of "crispness" that the current image icons offer.

Example: http://www.finegoodsmarket.com/product/lino-icon-set

comment:115 lessbloat14 months ago

I've opened another thread on the make/ui P2 to discuss the design of the icons in 23333.diff​. If you've got any concerns with the existing flat icons, please find some time to help us iterate and improve. I'd love to hear your thoughts over at: http://make.wordpress.org/ui/2013/02/26/icon-feedback/

Last edited 14 months ago by lessbloat (previous) (diff)

comment:116 helen14 months ago

In 23501:

Revert [23369] and [23370]: the icons. see #23333.

comment:117 helen14 months ago

  • Milestone 3.6 deleted
  • Resolution set to maybelater
  • Status changed from new to closed

Marking this "maybelater", although we'll probably want to start a new ticket for future efforts and just refer back to this one for history. 115 comments is enough for one ticket. :)

Last edited 14 months ago by helen (previous) (diff)
Note: See TracTickets for help on using tickets.