Make WordPress Design

Recent Updates Toggle Comment Threads | Keyboard Shortcuts

  • lessbloat 2:24 pm on July 31, 2015 Permalink |  

    Calling all designers 

    With a location and date officially announced for WordCamp US (Philadelphia, December 4th–6th), it’s time to start thinking about design for the event.

    We’d like to include the entire WP community in this call for designers. If you’re interested, please continue reading:

    Concept proposals

    For those designers interested, we’d like to see a rough design proposal:

    We’d like to see:

    1. Branding concept (logo, colors, typography for the event)
    2. Attendee badge design concept (dimensions: 4in x 3in)

    NOTE: Please free to submit designs in whatever fidelity you have time for (from sketches to pixel perfect mockups).

    Deadline for proposals
    Aug 10, Noon (PDT)

    To submit a proposal, please ping me privately on Slack (lessbloat is my username) including a link to your proposed design concepts.


    When will I hear back?
    We’d like to get started relatively quickly. Please give us a week or so to sort through proposals after the the 10th. Note: I will reply to everyone who submits a proposal (whether you’re selected or not).

    What specific things would I be responsible for designing?
    If you’re selected, you’d design the following:

    • Branding
    • Badges
    • Signage (to be used on location)
    • Website design
    • T-shirts/Swag

    Will I be compensated for my work?
    Unlike most other conferences that charge hundreds or even thousands of dollars to attend, WordCamps tries very hard to keep attendance fees at a bare minimum. We do this by relying heavily on our amazing volunteers. That said, while you won’t receive financial compensation, this is a high profile event, and your work will be seen by everyone in attendance.

    Anything else I should consider?
    It might be helpful to check out the WordPress.org design handbook, specifically the sections on identity, colors, and typography.

    Additional questions?
    Please feel free to ask additional questions in the comments below, in the #design Slack channel, or via a private ping to me in Slack (lessbloat). Thanks!

    • lessbloat 9:01 pm on July 31, 2015 Permalink | Log in to Reply

      Two follow up answers from pings I received:

      1) Someone asked about the following sentence:

      That said, while you won’t receive financial compensation, this is a high profile event, and your work will be seen by everyone in attendance.

      Please know that I did not mean this in a “you won’t get paid, but you can add it to your portfolio” sort of way. Though now that I re-read it, I can see how it would come across that way, especially in my use of the words “high profile”. I feel bad. That sort of sentiment is gross.

      To clarify, what I meant to say was, this is volunteer work. The design work done for most WordCamps is done by volunteers. Since it’s volunteer work, naturally you won’t get paid. That said, if you have the time, and inclination to work on this, it should be a pretty great event, and plenty of people in attendance will benefit from your work.

      2) Someone asked if the could apply by submitting a portfolio site, instead of spending time to create proposal/concept designs (rather than spend time on a design with the chance that they might not be selected).

      Yep, that works too. If you’re interested in applying, and you’ve got a strong design portfolio that you feel represents your work well, please feel free to just shoot me a link to it.

      I hope that clears these things up. :-) Let me know if you have any additional questions or concerns. Thanks!

  • Stephane Daury (stephdau) 6:13 pm on June 25, 2015 Permalink |  

    Core UI Chat, June 25th 2015, WC EU edition 

    Today’s chat did not really happen, for the best of reasons, since most of the regular contributors are currently making their way to the massive WordCamp Europe 2015. The good news is that many Core UI related chats are expected to take place there, as many gather in person.

    Since I ran the meeting for similar reasons last week, I figured I’d post a quick summary of what happened since then in Core UI Land instead.

    Tickets with notable UI-related commits

    #28820, #32213, #32015, #32325, #21845, #30157, #31336, and #31216

    Some active tickets

    • #32346 is being discussed
    • #29906 is alive and well, nearing commit state (needs testing)
    • #32395 got a brand new patch, needs testing
    • #16434 is seeing some patches and chatter
    • #30902 is on fire!
    • #19257 was set to fixed; #30729 got punted to a future release, and #31240 looks like it might as well

    Looking stalled, could use some help, with beta 1 approaching

    #31654, #32398, #26550, #29958, #32152, #32493, #29158, #30154, and #31655

    Main recommendations for commits this week

    I’ve chatted with the accessibility group about a series of List Table and accessibility ticket they have, and I’ve recommended they tag them as commit ASAP. They are all, IMHO, in good shape to be considered. They’ve also clearly been abundantly discussed, iterated upon, etc. Some commit-time tweaks might be required, but nothing I’d consider related to the actual functionality.

  • Kelly Dwan 7:04 pm on May 28, 2015 Permalink |

    Dashicons Returned!

    We’re meeting every Thursday at 18:30 UTC (2:30 ET) in #design-dashicons, after the #design meeting. As a reminder, our goal is to switch Dashicons to a collection of SVGs, rather than a font.

    Slack Archive

    We discussed

    To Do

    • Continue working on the feature plugin, starting with identifying code for all current icons
    • Write up the announcement. We have an outline, any help writing the full post in the next week would be much appreciated. Otherwise we might just post an outline :)

    As always, check in to #design-dashicons if you want to help out! We’ll meet again Thursday, June 6, 2015 14:30 UTC-4

  • designsimply 4:13 pm on May 27, 2015 Permalink |
    Tags: , ,   

    User Testing for Customizer Menus 

    Following are testing tasks/questions, my initial walkthrough of the plugin at this stage, and some feedback with blockers separated from nitpicks. I will post testing videos in the comments as they come in.

    Please reply to each comment with the biggest takeaway you learn from the video if you watch any of them. Thank you!


    Intro: You have a blog about travel, and you would like to setup a custom menu for your blog.

    1. Log in with username ******* and password *******
    2. Go to Appearance > Customize and then click on Menus.
    3. Add a new menu named “Main Menu.”
    4. Add all of the pages already saved on the site to the menu.
    5. Reverse the order of the menu items.
    6. Set the “Main Menu” as the primary menu so it shows in the live preview.
    7. Add the “Travel” category to the menu.
    8. Move “Travel” so it is a child of the first item in the list.
    9. Add a link to Twitter and make it a submenu item next to Travel.
    10. Move Travel and Twitter from the first item so they are submenu items under the About page. Save changes.
    11. Create a new menu for social media with at least one social media link in it and add it to the sidebar.
    12. There is a way to use advanced menu settings to enable descriptions for menu items. Try to find it and add a description for the “About” page.


    • Would you recommend this feature to a friend who needs to create menus on their website?
    • Have you used WordPress before? If yes, have you used the Menus feature inside the WordPress dashboard before?

    (More …)

    • designsimply 7:09 pm on May 27, 2015 Permalink | Log in to Reply

      Test 1

      If you watch the video, please post a comment with your takeaways as a reply here. Thank you!

      JavaScript required to play Core Customizer Menus 001.

    • designsimply 2:12 am on May 31, 2015 Permalink | Log in to Reply

      Discussed questions/nitpicks in Slack.

      Resulting tickets raised in GitHub:

      1. 52 – Make item ordering based on usage instead of a random order
      2. 53 – Help people who try to add menu items before they have created content
      3. 54 – Shorten “Currently set to:” to “Current:”
      4. 55 – Use a gear icon for advanced settings toggle instead of the screen options icon
      5. 56 – Unclutter the “Reorder” view by using more streamlined arrow icons
      6. 57 – Cannot delete new menus previously set to a menu location
      7. 58 – Duplicate “Home” page items could be confusing
      8. 59 – Update the menus panel description to make it more clear menus are for already-published content
    • designsimply 11:13 pm on June 22, 2015 Permalink | Log in to Reply

      Test 2 (done May 27, posting it here for reference)

      JavaScript required to play Core Customizer Menus 002.

      • designsimply 11:16 pm on June 22, 2015 Permalink | Log in to Reply

        Notes from https://wordpress.slack.com/archives/core-customize/p1434420874000649

        • She misses the “+ Add Items” completely when asked to add pages to the menu. Missing the step to add pages kind of messes up the rest of the test. :)
        • Preview looks fast/good!
        • There are some weird cursor artifacts that I haven’t seen before (might have just been a video/recording/playback problem, but should watch out for more).
        • The red outline as a notice that you need to fill in the “Link Text” field worked nicely.
        • She doesn’t seem to have any trouble creating submenus, very cool.
        • Testing note: I might need to clarify the last step to specify they should look for advanced menu settings within the menus panel (if that’s not too big of a hint).
    • designsimply 11:24 am on June 23, 2015 Permalink | Log in to Reply

      Test 3
      (WP 4.3-alpha-32909 + 32678.2.diff)

      JavaScript required to play Core Customizer Menus 003.

      If you take the time to watch this user testing video, thank you! Please reply below with one or two of the most important takeaways you found while watching the video.

      Testing note: I’ve figured out that sometimes a tester from usertesting.com starts a test and then stops in the middle (for whatever reason). If that happens, then a main menu is already present when it shouldn’t be as the next tester starts. I’m not sure what to do about that except to say it’s just something that happens and something to be aware of when evaluating tests, and it happened in this test.

      • Konstantin Obenland 12:22 pm on June 23, 2015 Permalink | Log in to Reply

        The bug you opened about duplicate menu names is important. Loosing a created menu that way is bad.

        When she tried to find the twitter link that first time, I kept thinking that the average user probably differentiates between a “common” link, and posts/pages on their site. I’m pretty sure they don’t realize that the whole menu experience is just a fancy way to create links to their own posts/pages.

        Overall it seems like she felt comfortable with the feature. I think if you take away instructions and have users that are on a mission, this will be really fluid and easy to manage.

        Not once was it mentioned that the left sidebar was too small or it felt cramped, either.

      • Stephen Edgar 12:52 pm on June 23, 2015 Permalink | Log in to Reply

        Moving on past the “main menu” already existed stuff…

        • At the 10:20 mark user is searching for the next 40 seconds a way to close the add new posts/pages/category etc panel, cannot find it, gives up by clicking `reorder` and that closes the panel

        • At 12:50, again looking for some type of “close” action out of the current view and clicks the `x` on the Travel Category and deletes this menu item

        • At 13:10, looking for the “close” panel option again, cannot find, clicks “add item” to close the panel

        • The _arrow directional_ reorder navigation does not appear intuitive to the user, resorts to exiting and using drag-n-drop

        • At 15:15 clicks _Save & Publish_, and the reorder arrow navigation action/option stays enabled, shouldn’t this reorder action/option now be closed/finished because the user has _saved and published_?

        • At 16:05 a new menu is about to be created, but for the previous ~30 seconds user clicked various items but essentially no changes were made to the existing “main menu” though the button is displaying as “save & publish”, shouldn’t this remain in the “saved” state as no changes have been made to the menu that need saving?

        • At 17:10 user looks to expand the “about” item to add a description but due to the issue above at 15:15 the “reorder” action/option is still in play so the intuitiveness of clicking something to expand it is missing, at 17:26 user clicks “done” that closes the “reorder” action/option, at 18:30 user ends up where they should have at 17:10, clicks “about” and it expands as per what was originally expected.

    • designsimply 11:27 pm on June 23, 2015 Permalink | Log in to Reply

      Test 4
      (WP 4.3-alpha-32909 + 32678.2.diff)

      JavaScript required to play Core Customizer Menus 004.

      If you take the time to watch this user testing video, thank you!

      Please reply to this comment with the most important takeaways you found after watching the video.

      • Nick Halsey 10:49 pm on June 27, 2015 Permalink | Log in to Reply


        • Redundancy is important – if one thing fails (ex. drag & drop), it’s good that we have an alternate approach available (reorder buttons) – taking inspiration from structural engineering here
        • If we have a bug, the user will think they’re doing something wrong (ex. preview fails to load changes) – we need to be very careful with this
        • We should probably debounce the partial refresh a bit when editing ex. a menu item title or description. Constant refreshing while typing gets pretty distracting
        • Our screen options approach here seemed much easier to find for the tester than they are in the admin, based on several user tests that have been done in the past
        • Overall the tester seemed to enjoy the experience and was able to find things with some clicking around. Generally had a positive reaction once they found something, and only really got “stuck” when running into bugs with the preview and drag & drop
    • Stephen Edgar 1:13 am on June 24, 2015 Permalink | Log in to Reply

      • 6:53 “This is a very complicated reversing method” Initially tried to drag’n’drop to reorder the menu items but couldn’t, also tester notes would prefer drag’n’drop, throughout the remainder of the this users testing tester never tries again to use drag’n’drop to reorder menu items

      Some similarity with the reorder vs drag’n’drop notes I added for the previous test

  • Helen Hou-Sandi 6:43 pm on May 11, 2015 Permalink |  

    I’ll be kicking off weekly core UI meetings again, starting this Thursday, May 14, 2015 13:00 UTC-4 in the #design Slack channel.

  • Siobhan 5:21 pm on April 16, 2015 Permalink

    Just a reminder that the image flow meeting is now on Thursday at 20:00 UTC. That’s:

    • 21:00 London
    • 16:00 EST
    • 13:00 PST
  • Hugo Baeta 7:59 pm on April 5, 2015 Permalink
    Tags: 4.2, colors   

    Default Admin Color Scheme Update 

    Earlier in the 4.2 cycle, I opened a ticket proposing changes to the default color scheme for wp-admin. After much consideration and a few changes, it is being brought into core. I’d like to explain the changes made, and the reason for them in this post!

    This started as part of an exercise to document the colors used by core for the Design Handbook (work in progress). My instinct to iterate on the colors and try to make them more harmonious kicked in, and so I ran an experiment that resulted in this:


    Here’s a breakdown of HEX color changes:

    Old New
    #111111 #191e23
    #222222 #23282d
    #333333 #32373c
    #4b4b4b #464b50
    #888888 #82878c
    #aaaaaa #a0a5aa
    #bbbbbb #b4b9be
    Old New
    #0074a2 #0073aa
    #2ea2cc #00a0d2
    #45bbe6 #00b9eb

    In essence, the grays were given a slight blue hue, and the for the blues I removed the red channel almost completely, for a purer blue. In both cases, I attempted to keep the value of the colors (lightness/darkness), so the change would be as seamless as possible, while giving the admin a new sense of refinement and identity.

    @iammattthomas commented on the ticket, summarizing this change quite eloquently:

    My subjective feeling is that the shift in colors is so slight, it doesn’t really change the feeling we intended to convey with the original MP6 colors. If anything, it makes the grays look more intentional, a color palette designed to work harmoniously rather than pairing a signature shade of blue with a lot of neutral grays.


    And here’s a side-by-side comparison of the old (left) and new (right) colors in use on the admin:


    I believe this updated color scheme can still be iterated upon, specially regarding concerns of contrast and accessibility (that weren’t addressed in this round, but are certainly a priority for the next release cycle).

    I’d love to hear your thoughts!

  • Siobhan 5:52 pm on April 2, 2015 Permalink

    Image Flow Update 2nd April 

    Thanks everyone who attended the meeting this week. Note that in future the meetings will be at 16:30 UTC, i.e. normal time for everyone now that daylight savings has happened.

    Here’s what we discussed:

    1. Feedback – there’s a lot of feedback scattered around which we need to get into one place so we can make sure it’s properly addressed. We have a Google Doc here which we’ll consolidate it into.
    2. @teamadesign has tried an edited flow with the metadata first. It’s available for testing should anyone want to.
    3. Once @wonderboymusic is caught up on where we are, we’ll start ploughing forward with the plugin.


    • @siobhan to pull together feedback from UT videos, make/ui post, and boren notes
    • @teamadesign to review feedback in Slack channel
  • Kelly Dwan 7:09 pm on March 19, 2015 Permalink

    Dashicons 3/19 Notes 

    Slack Archive

    We Discussed

    To Do

    Next week, we’ll have a discussion to confirm what approach we should take, and how to get there. If you want to join in, that’ll be March 26th, at 18:00 UTC in #design-dashicons.

  • Siobhan 10:29 am on March 18, 2015 Permalink

    Image Flow Catchup 

    Now that we’re ready to start making a plugin, this post will catch you up on some of the important things to read before diving in.

    Wireframes and Flow Charts

    The interactive wireframes will give you a pretty accurate visual overview of where we’re going with the project. Note that the wireframes are based on a large amount of research into how different platforms and applications handle image storage, upload, and editing.

    There are also user flow charts which show the planned user flows through the interface. It’s worth comparing these with the current flows through the modal.


    The in-browser prototype is a skeleton representation of how we see the basics working. It isn’t perfect, but the basics are there. We’ve decided that at this point it’s best for us to move onto the plugin. However, @mor10 is doing some user testing on the prototype and we’ll use that feedback for refining the plugin.

    Prototype Resources

    Background Reading

    if you’re interested in some more background reading that should give you insight into various decisions, these are some things worth looking at (this is not essential to read before getting started):

    Next Steps

    The next step is to break the plugin down into discrete, achievable tasks. This should get things moving more quickly. we can use the Image Flow Github account. As soon as it’s in a usable state we’ll put the plugin in the repo so it’s easy to test and we can get feedback.

    The regular meeting is at 17:30 UTC on Thursday.

    • Ryan Boren 4:23 pm on March 18, 2015 Permalink | Log in to Reply

      My initial impressions from my first time running through the prototype a few days ago.

      I went in with the goal of publishing a single captioned image. After clicking add media, I’m greeted with a media lib type view. There’s no greyed out button bottom right to indicate the possible next step. When comparing the prototype flow to production flow, I realized I missed having a persistent button bottom right. That’s what I’m used to after years of using the media modal.

      I click an image, again with the goal in mind of creating a captioned image. I go from no buttons to three. That More button feels very in the way. I tend to like the primary action anchored right and aloof from other buttons. So, I have three buttons, three decisions lined up in a row now. I want to caption, so I shouldn’t insert yet. More is just something I’m going to have to develop blindness to, so I get started on that by ignoring it. I click View.

      Still no details. I have Insert and more bottom right and a ton of stuff at the top. Grid, Select Media, info, Edit, close. Plus two arrows. And a big checkbox. And image numbering (1 of 7). This is overwhelming. I came here looking to add a caption. I think someone looking to add a caption could very naturally try Edit, but that’s not it. Info is what you want.

      Once info shows, I put in a caption and make another decision. Am I ready to publish? The Insert button is active and ready, but what exactly am I publishing? The arrows and numbering make me wonder if I’m publishing a gallery. I’m here for one image and don’t want to do that. Do I need to back up a level? How do I do that? Where am I? When I get lost, I seek context and a way back. I look for a persistent context keeper and escape route. I don’t feel a nav anchor.

      I appreciate the power of all of this, but this attempt at a single captioned image has me doubting the image details flow. The non-persistent, top left escape route nav feels inadequate as a nav anchor. The latest customizer work uses a persistent header and stacked nav. The MT riff mock has a persistent bottom left escape route. I like the way those give a consistent escape route.

    • Andrew Ozz 5:56 pm on March 18, 2015 Permalink | Log in to Reply

      I also went through the different flows in the prototype. Did that before reading any feedback or looking at the conversations in Slack in an attempt to be as impartial as possible :)

      Was surprised by the “dynamic” buttons at the bottom a bit. Probably better to have at least the “Insert” there at all times, greyed out when nothing is selected? Wouldn’t mind if the other buttons were there and greyed out. Can probably get used to them being dynamic, just a bit surprising how the whole modal goes from being pretty plain/minimalistic to having many places to click/draw attention as soon as you click on an image. Also the width of the buttons should probably be constant/unchanged when showing more or hiding existing.

      Really dislike the horizontal list of selected images at the bottom left. It is pretty much unchanged from the current modal and has no good functionality. It is really hard to see what is on the super tiny thumbnails. Also the horizontal scrollbar that shows when more images are selected takes about 1/4 of the space and makes the whole thing look like something went wrong or something is buggy. This is hidden on smaller screens, IMHO best to remove it completely.

      After selecting several images another surprise was that clicking on “View” removed that button and shifted the name/label from the top/left (the opposite part of the modal). Then a “Grid” button appeared there. Had to click that small/different/far away button to go back. Also “Grid” being the opposite of “View” (as you have to click one to reverse the other) doesn’t feel right. Perhaps better if “View” was “Single view” and changes to “Grid” instead of being hidden after clicking on it.

      Having to click the smaller “Info” button in the top bar to get to the image properties was pretty hard to find/understand. The label “Info” doesn’t seem to correspond to “Edit Metadata”, “Image Details”, “Post Settings” (the names/labels of the sections that are shown). Maybe “Settings”? Generally I wouldn’t mind having a gear icon next to the checkmark icon for accessing the image properties/settings. Also I am (probably like most people) used to have “controls” at the top/right or top/left, having that big checkmark at the bottom/left feels somewhat out of place.

      All of the rest feels pretty good. Really like the ability to browse the selected images either as big “previews” or as image settings “boxes”. Starting to wonder why it is only for selected images, should probably be available for all the media library.

      Of course there are still places where behaviors can be improved. For example after selecting more than one image, the default should probably be “Create Gallery” instead of “Insert”. It is relatively very very rare for more than one image to be inserted in a post at the same time (frankly, not even sure we need to support that). In almost all cases a gallery is created.

    • Siobhan 6:30 pm on March 18, 2015 Permalink | Log in to Reply

      Thanks for your feedback! I’m not going to be at the meeting tomorrow but that’d be a great time for everyone to process it.

      Just a note on this:

      For example after selecting more than one image, the default should probably be “Create Gallery” instead of “Insert”. It is relatively very very rare for more than one image to be inserted in a post at the same time (frankly, not even sure we need to support that). In almost all cases a gallery is created.

      When I was doing a lot of longform article writing I used that -all- the time. It makes it easy for me to insert all of the images at once and then move them around within the content. What I used to have to do was:
      1. Insert all of the images in one go
      2. Go to Text View
      3. Copy and paste the html for the images into the right place

      That was fairly hacky. I can just drag the images into position now :)

      Anyway, I’m just saying that it’s something that I would really, really miss.

      • Andrew Ozz 9:04 pm on March 18, 2015 Permalink | Log in to Reply

        Yeah, that is an “advanced user” feature” :)

        Dragging images inside TinyMCE is somewhat problematic and not really recommended. Currently it is disabled if the images have a caption as you will drag them out of the caption elements. Also links are typically not dragged together with the images.

        So for most users that workflow will be quite harder than inserting 3-4 images separately :)

        This shouldn’t be the default IMHO.

    • Konstantin Obenland 10:24 pm on March 18, 2015 Permalink | Log in to Reply

      Some small observations from me:

      The first thing I notice after opening the modal is the big blue Add New icon. It reminds me of the one on the Appearance screen, but there it’s the last item. It probably makes sense to have it be the first item in the media modal, especially once there are more than ten media files. I’d expect the entire square to be clickable though.

      I click on the second picture to insert it and the action bar appears. Personally I’m not a fan of transitions, it makes the interaction feel very slow. The tiny thumbnail of the selected image is not really helpful, it makes the bar just feel more cluttered, in addition to the three action buttons. I also wish it would be more obvious that I selected that picture. A big blue border like in iPhoto or something. That check mark is small and not easy to see.

      I click on view. I don’t know why it’s there, I can view the image right now, but it must be important otherwise there wouldn’t be a button. I get a magnified view of the first available image, not the one that I selected. It also has a check mark even though I did not select it. I click the X on the top right to get back to the overview but that closes the modal.

    • teamadesign 4:54 pm on March 19, 2015 Permalink | Log in to Reply

      Thanks for the feedback folks, much appreciated! We’ll discuss these at our next meeting and iterate the prototype to incorporate these notes and get feedback.

compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc