WordPress.org

Make WordPress Design

Recent Updates Page 2 Toggle Comment Threads | Keyboard Shortcuts

  • Kelly Dwan 8:00 pm on January 29, 2015 Permalink
    Tags:   

    Dashicons 1/29 Notes 

    Slack Archive

    We discussed:

    • Merged the grunt task pull request.
    • Dropped in SVG For Everybody for IE support, works out-of-the-box for IE9+
    • IE7-8 will use PNG fallbacks, and we recommend just 2 color sets, a light and dark.
    • Subsetting Dashicons into groups based on use(?), ongoing discussion will take place on Github.
    • We also touched on creating new icons for 4.2, but new icons are not a priority

    To do:

    • @ryelle will update the repo to use SVG For Everybody.
    • @michael-arestad‘s going to work on the grunt tasks; and rename the pngs as needed.
    • Once those things are done, anyone can work on browser testing :)

    There’s also been work on the Dashicons style guide, so check that out & leave comments.

    We’ll meet again next week, February 5, 2015 18:00 UTC.

     
  • sonjanyc 10:36 pm on January 27, 2015 Permalink
    Tags:   

    Meeting Notes and Discussion around Image Cropping 

    A sub set of the #feature-imageflow team met on Slack yesterday to discuss a few things, namely:

    1. Can we tackle to improve the image cropping experience in 4.2 ?
      Should we save versions of cropped images on a post level or crop and overwrite the original?
    2. We’re currently working on a prototype to prove out our UX strategy and to come up with an ideal solution before we go into development. However we wanted to look at features or improvements that could potentially be worked on already. Since the image cropping experience is so broken, we think this could be something we can work on separately and up front – and make a lot of people happy!

    I was meeting with several people in slack to discuss these questions yesterday: @dh-shredder, @ericlewis, @markoheijnen, @royboy789, and @antoniancu – after the official meeting was over we also had @boren, @mor10, @samuelsidler and a few others join in.

    DISCUSSING #1:

    I’ve created some flows for an ideal image cropping experience and shared those with the group: https://docs.google.com/file/d/0Byz0aohoFoOcUi02M1NHdTItVnM/edit

    The conclusion of the meeting in was that we agree that we should make iterative changes to improve the image cropping functionality and experience. We should come up with a full wish list of changes that need to be made to get to the ideal solution, and then decide which ones we can tackle now and which ones we’ll phase out. I will start working on this list and will get some help from the group refining it. Important will be to make this work on desktop as well as mobile!!

    @boren shared Vizrecs of three cropping flows, which helps identify pain points: https://make.wordpress.org/flow/2015/01/26/uploading-and-cropping-an-image-in-the-media-lib-grid-view-and-list-view-macnchrome/

    IMAGE CROPPING WISHLIST:

    • No tool should be selected in initial state of editing mode, image cropping icon shouldn’t look “inactive”
    • When user clicks on cropping icon, full image should have a crop selection
    • User can change crop area with handles and reposition crop area by dragging (this should also work on mobile!)
    • Aspect ratio should have common pre-defined aspect ratios to choose from and an option to input a custom aspect ratio
    • Selecting an aspect ratio should lock selection of aspect ratio, so user can still drag corners to change image selection
    • Action buttons to apply/discart the crop should be “APPLY” or “DISCARD”
    • Should there be an option to crop the “original” vs. create new “post image version”?

    Please add anything in the comments I might have forgotten. Help us refine this list.
    Thanks!

    DISCUSSING #2:

    When an image is being cropped it’s confusing to the end user whether it crops the original image or saves a new version. The discussion what would make most sense I’m sure came up internally many times already. So we talked about it as well. People have different opinions and ideas for this, but I soon realized that this discussion will need to be held in a much bigger circle. The overall consensus was that we do want to work towards what @dh-shredder calls “post image”. This means that if an image is being edited / cropped in a post context it will create and save a version of the image for that post and not effect the same image in different locations. If a user however edits an image within the Media Library, he/she edits the original image.
    This functionality would need to be worked out with a set of rules, there are obviously concerns about over-cluttering the media library… etc.

     
    • Mike Schinkel 2:17 am on January 29, 2015 Permalink | Log in to Reply

      I would really be great if the original image could *always* be maintained and never modified. In the media library modifying it could create a default image, but you should always be able to recover the original image. If the end user needs to think they are modifying the original image, let them, but still make sure to offer a “Recover original image” option.

    • teamadesign 8:26 am on January 29, 2015 Permalink | Log in to Reply

      Looking great, some really excellent points coming out of this conversation. The only element I would add (and it is present in both @sonjanyc‘s flows and her trac ticket) is that the pre-set crop ratios should be presented with a visual rep so that a user can quickly scan the icons and make a decision based on the look, rather than the completely abstract w x h formula.

      I like what @dh-shredder and @mikeschinkel have to say around a ‘post-image’ and an original image. It seems that having a canonical image that all others are iterative of would allow for a simpler organizational scheme in the media library…

    • Fabien Quatravaux 8:54 am on January 29, 2015 Permalink | Log in to Reply

      One feature I would really appreciate and that is buggy today is the ability to crop only the thumbnail version of an image. For example, I upload a picture of a friend in full-length, the cropped scare thumbnail would be centered on his chest instead of his face. I wish I could be able to correct that wrong thumbnail with the cropping tool.

      Today (in 4.1), the “Apply changes to:” settings with “Thumbnail” choice seams to have no effect, and I have no way to check the thumbnail version of the image after the crop. Instead, we could see a list of available picture sizes, with a preview for each, and a click on the thumbnail preview would load the thumbnail version into the cropping tool.

    • Graham Armfield 8:32 pm on February 3, 2015 Permalink | Log in to Reply

      Two points I’d like to add…

      Firstly, in the wishlist please can the list include a point that all functionality should be able to be used with keyboard only – from an accessibility perspective.

      Secondly re Discussing #2. I think a new image should be created from any cropping done. There may be situations when a site owner may wish to show both the cropped and original versions of an image on their site, or potentially show differeing crops of the same image to draw attention to specific elements within the image.

  • Mel Choyce 8:34 pm on January 26, 2015 Permalink
    Tags: community hub   

    Here’s a reminder for those who haven’t seen it. Please take a few minutes to fill in the Community Hub Poll as the poll closes Thursday at 00:00UTC.

    For more information on the Community Hub, please check out this post.

     
  • Kelly Dwan 6:57 pm on January 22, 2015 Permalink
    Tags:   

    Dashicons 1/22 notes 

    Slack Archive

    We discussed:

    To do:

    • AnyoneCheck out the PR & leave any feedback.
    • @michael-arestad‘s going to keep tweaking the tasks – there are some things we don’t need, and can do in other ways. Also looking into alternatives that don’t generate a billion pngs.
    • Anyone: Leave any suggestions/resources/questions for the style guide as comments on that page.

    We’ll meet again next week, January 29, 2015 18:00 UTC .

     
  • Siobhan 10:03 am on January 22, 2015 Permalink
    Tags:   

    Image Flow Agenda 22nd January 

    Image Flow meeting is this evening. First thing to note is that we will move our regular Thursday meeting to Slack. We’ve reached the limit of how many people we can fit on the Google Hangout. Also, Slack is better for encouraging participation and for logging. We’ll likely continue to do smaller user testing meetings on google hangout.

    This evening’s meeting:

    • review of last week’s actions
    • feedback from dev meeting
    • team plan for 4.2
    • anything else?

    See you all at Thursday 17:30 UTC in #feature-imageflow in Slack!

     
    • sonjanyc 3:55 pm on January 22, 2015 Permalink | Log in to Reply

      slack channel is called #feature-imageflow
      // just for those joining for the first time and can’t find it.

  • Kelly Dwan 8:01 pm on January 15, 2015 Permalink
    Tags:   

    Dashicons meeting notes 

    Slack Archive

    The current goal is to move away from Dashicons as a web font and use an SVG sprite instead. This will be easier to contribute to, and easier to manage.

    We discussed:

    • There’s a mockup on Github for anyone who wants to contribute, which still needs more work: https://github.com/ryelle/WP-Dashboard-SVG
    • The process for generating svgs: most vector editors support svg, so you can create/edit them directly. We want to stay with using Grunt to create the SVGs, and avoid using a 3rd party service.
    • A style guide for making new Dashicons.

    To do:

    • The mockup still needs work for browser compat – @michael-arestad will add grunt tasks for optimization & fallback PNGs, @ryelle will work on the JS support for IE.
    • Style Guide for icons, as a page on make.wordpress.org/design, following training’s example. @melchoyce, @empireoflight & @liljimmi seemed most interested :)
    • Potentially create a walkthrough for creating/editing vectors in various programs (Illustrator, Inkscape, etc).

    We’ll meet again next week, January 22, 2015 18:00 UTC .

     
  • Siobhan 6:25 pm on January 15, 2015 Permalink
    Tags:   

    Image Flow Update 15th January 

    Slack Archive

    Thanks everyone who attended the image flow meeting. We discussed the following:

    • @pabloperea has completed interactive wireframes. They should give you an insight into how the flow works. We’re still missing the gallery flow.
    • we discussed having a weekly developer meeting to work on the prototype. This will be Fridays at 17:30 UTC.
    • we should be thinking about what could be done in WordPress 4.2 to prepare the way for image flow in a future release. @sonjanyc discussed making improvements to the cropping feature.

    Actions agree:

    • @pabloperea to finish up wireframes for gallery flow
    • @siobhan to finish adding issues to github tracker (although I can’t do it for tomorrow’s meeting so if someone else wants to do it before then feel free)
    • internal developer meetings at 17:30UTC Friday to work on prototype
    • @teamadesign to come up with list of icons
    • @sonjanyc working on cropping wireframes
    • we need to decide next week what the team should be preparing for WP 4.2
     
  • Siobhan 6:20 pm on January 8, 2015 Permalink
    Tags:   

    Image Flow Meeting Notes – 8th January 

    Thanks everyone who attended the Image Flow meeting! It was a very full Google Hangout :) Here’s what we discussed:

    • we did a quick roundup of the current members of the team, and introduced Konstantin and Stephane who are joining us
    • the prototype has been refactored into angular.js. Roy has also written an extensive readme.
    • if you’re planning on working on one of the flows just ping @teamadesign and he’ll assign it to you.
    • we’re working on a better project management process. We may just use Github. I’ll explore the different options with @samuelsidler when he gets back
    • we discussed having a user testing sub-team. This is going to be led by @mor10. when they start testing he will run weekly meetings and feed back actionable information to the development team.
    • @pabloperea is going to flesh out the gallery flows into full wireframes
    • we discussed doing a walkthrough of the current wireframes to get all of the new developers up to speed. We discussed doing a video of this. However, we could just do a hangout and record the hangout and post it.
    • @teamadesign is going to come up with a list of icons. I’ve spoken to @empireoflight about designing them for us :)

    Here we are:

     
  • Siobhan 3:35 pm on January 8, 2015 Permalink
    Tags:   

    Image Flow Meeting Agenda 8th January 

    Happy New Year everyone! I hope you’re still excited about making those images flow 😀

    Today’s our first meeting of 2015 (17:30 UTC), and to celebrate I thought I’d post an agenda.

    1. Review of current team resources (we may have some additional team members for 2015)
    2. Review of prototype status
    3. Plan for moving forward
    4. Plan for user testing

    I’m still unsure if we’ll meet on Slack or on Google Hangout. It depends how many people show up (we have a limit of 10 people in Google Hangout). I’ll post in the Slack room (#feature-imageflow) to see how many we have.

     
    • Tess 4:15 pm on January 8, 2015 Permalink | Log in to Reply

      Hi Siobhan,

      I’m a San Francisco user researcher and am interested in contributing volunteer user testing to WordPress. I’m not sure if I’ll be able to attend the meeting today (or even how I would do so), but please keep me in mind as you move forward.

      You can learn more about my past work on my website, http://www.tessrothstein.com or by emailing me (tessrothstein@gmail.com). I’d love to chat, so let me know if you have questions!

      Cheers,
      Tess

    • Siobhan 4:56 pm on January 8, 2015 Permalink | Log in to Reply

      Hi Tess!

      We have a room in the WordPress Slack team – #feature-imageflow. If you’re not signed up for Slack yet you can find information here: https://make.wordpress.org/chat/ Generally the team hangs out in there and discusses things in between meetings.

      We have a small team who are focused on user testing and we’d love to have you on board. We’re waiting for more progress on the prototype, then we can start testing it.

      Let me know if you have any more questions :)

    • Tess 2:02 am on January 13, 2015 Permalink | Log in to Reply

      Super. Thanks for the intro, Siobhan!

  • Mel Choyce 6:29 pm on January 4, 2015 Permalink
    Tags:   

    The Future of Dashicons 

    During the WordPress Community Day following WCSF, a group of us (@ryelle, @empireoflight, @michael-arestad, @liljimmi — am I missing anyone? Maybe @markjaquith was there?) got together and discussed the future of Dashicons. Here are the notes from that meeting:

    Icon font, or SVG?

    http://css-tricks.com/icon-fonts-vs-svg/

    Pros:

    • SVGs better rendered in browsers
    • Easier to maintain
    • The grunt process would be in core, so anyone can do it

    Cons:

    • Different steps of building
    • Drop icon (svg) into folder, run grunt
    • IE9,10,11 don’t support external svgs
    • JS library fallback
    • Originally this was a font due to IE8
    • grunt would compile light/dark pngs
    • Modernizr or hacky thing to add a class

    What’s the process for the new font?

    • Icons are all 1 .ai, each as a layer or artboard, exported to SVG
    • Or shortcut to SVGs
    • Grunt compiles a folder of SVGs to generate png, css, etc.
    • Optimize SVG
    • Grunticon to create pngs-> can be different colors
    • Combine SVGs into sprite
    • Pulled into core

    How to BackCompat?

    • Old fonticons would use .dashicons, new would use .dashicon
    • Enqueue old font for a while
    • Check JS to see if anyone’s using old font

    Steps

    • We already have the folder of SVGs
    • Micheal going to Gruntfile
    • Ben use this process for Palm Tree, Tracy bringing in things that missed 4.0
    • Upload SVG to a ticket
    • Stay on the 20×20 grid, for consistency
    • Official guidelines and template (Mel)
    • Style guide!
      • Redirect to dev hub
    • Blog: where we’re going, pros and cons, btw demo page.

    Purpose of Dashicons?

    How far are we going? Everything ever?

    • No new third party icons
    • Keep small as possible, things are hard to remove
    • Keep focus on wordpress admin
    • Approval process for icons
    • Ben is best for stylistics, but whether the icon belongs is democratic

    Following the meeting, we redirected the github resource to Dashicon’s new official home at developer.wordpress.org/resource/dashicons/.

    Next up, we’ll want to start having meetings to get this process rolling. @ryelle has agreed to lead meetings, and has a preliminary mockup for the new process that we can talk about at our first meeting, which will take place some time during the week of the 12th-16th. What day/time works best for people?

     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel