Image Flow Update 7th November: Prototypes and Frames

We had a quick meeting this morning to discuss next steps and near term goals. As mentioned previously we need to create a few wireframes for different screen sizes (browsers, landscape mobile, tablet portrait) to represent the following views:

  • Grid View
  • Full Width View
  • Edit Metadata View
  • Edit Image View

These views should expand upon the mobile frames: no sidebars, and should be harshly minimal on functions. We discussed adding a thumbnail row to the browsers size view and decided to nix it at the outset. As much as possible we want to be intensely focused on the must haves for this round, it will be far easier to add based on user feedback than de-clutter the interface. @pabloperea is going to take a stab at creating frames with the browser and mobile landscape. Anyone else who wants to take a stab at these should do so by Wednesday morning (PST) next week.

For, literally and figuratively, smaller design tasks we need to get some rough ideas for all of the icons we’ll be using. All are up for debate, but we need particular attention on:

  • Insert
  • View – full width screen
  • Save – something that can have a saved state would be great hopefully not a disk!

Please take a peek at these frames to see the icons in context. https://www.dropbox.com/s/abuaql0hkgdodti/Image%20Flow%20Mobile%20First%20v2.pdf?dl=0

As we’re moving forward with these frames we need to get a GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repo up and running to host the flat prototype. To get the ball rolling we’ll create a skeleton of HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. pages with the current mobile wireframe image, links to the next steps available and a list of the details about the represented state. These pages will create the basic flow and can be built on to create the final prototype. I am working with @samuelsidler to organize these next steps.

@klosi has created a Google form to collect data about what aspect ratios users want for the crop tool: https://docs.google.com/forms/d/1dEn6IiKjvgFuKh0Mv5Z9nxXaePbpmEIlLPy3ttYk8pM/viewform?usp=send_form

This will also help with @sonjanyc‘s trac ticket https://core.trac.wordpress.org/ticket/30155

@avryl and @azaozz are pushing to get the post editor alignment buttons into 4.1 and @melchoyce has produced some great icons for that purpose. Victory by inches!

Thanks for all those who could make it! We’ll post progress reports on slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. #feature-imageflow and in the comments here.

If you want to see all the gory details, here is the video:

#image-flow