GSoC/GCI Archive
Google Code-in 2010 WordPress

Mockup a New UI For The WordPress Image Editor

completed by: Will Haynes

mentors: JohnONolan

One of the biggest UI tasks for WordPress 3.2 is an overhaul for the way in which we handle media files with WordPress. One area of this is the built-in image editor contained within WordPress. In order to access this go to the "media" section of the main menu, upload an image, and then click on the "edit" link. This is a basic image editor, a little bit like Photoshop, which we want to improve. Here are some of the main issues with the current UI:

  • The screen feels cramped, and doesn't utilise available space well
  • It's not always obvious what all the icons for tools mean
  • Some action links are icons, while others are text
  • There are multiple confusing save and update buttons
  • The help information is in the wrong place
  • The editor doesn't feel at all similar to image editing UI's which people might already be used to

The deliverable for this task is a complete (and neatly organised please!) graphics file containing a completed mockup. You can use any graphics application, however we would prefer PSD if possible. When saving files please export with compatibility for 2 versions earlier than the latest version of the program. For example if you are using Photoshop, the latest version is CS5, so please save the file with CS3 compatibility.

Along with your mockup, please provide a detailed set of notes which describe your work in detail. Explain any specific parts of your design which are important, or any specific user interactions which you think are fundamental to how people would use your design. The more you can explain why you made specific design decision, and what you based those decisions on, the better.

This task includes 1 set of revisions, which are crucial to passing the task. Once you have submitted the inital mockup to us on the GCI blog (link to follow) - we will give you feedback and suggested revisions. Remember that we are working all over the world in different timezones, so leave plenty of time to receive feedback and act upon it before the end of your task. As a rule of thumb it would be good to get your initial mockup in for review within 2 days of starting.

Here's the related ticket associated with this task, which has some existing ideas and issues.

Before you get started, please read through the GCI Student Information for UI based tasks.