Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.
There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team.
An all too brief, but ever-so-productive meeting! We ironed out a few points about the prototype build out and intend to get cracking over the next week.
We’ve decided to use Foundation (that might switch, but I’m 90% decided) to speed along the prototyping.
@sonjanyc and I will get the base page template finished up early next week and then I will get the flow skeleton up and running by end of week. We’ll be coding mobile first, and are going to have a toggle on larger screens so allow for previewing at various common screen sizes.
Per our heroic PM (hooray!) @samuelsidler‘s suggestion we are going to be pushing out scenario’s for user testing as they are completed, rather than finishing all of the scenario’s and then doing a single round of testing. For example: as soon as the basic ‘add new image’ scenario screens are finished, we’ll start testing as the next scenario is coded.
As a starting place we’re going to ditch all sidebars on all devices and work with the card metaphor that guides the mobile frames. We are open to re-introducing sidebars on larger devices if user testing points in that direction – as @pabloperea points out we may be introducing more steps by relying on the cards at larger sizes.
We have githubGitHub GitHub is a website that offers online implementation of git repositories that 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 and @siobhan is integrating it with the #feature-imageflow 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/. channel.
Hilarious, joyous, full-color video of the whole affair:
I’ve forgotten anything, feel free to toss it in the comments or announce it on slack.
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:
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:
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 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:
We’ve had another productive day in San Francisco – thanks to all who have been assisting. @sonjanyc @mor10 and I took some initial feedback from @mel and @lessbloat regarding the rough sketches and moved into Balsamiq to make some example flows based on specific scenarios.
We met with @markjaquith, @ericlewis and the remote team (thanks to all who could make it!) this morning to walk through the flows and get some feedback on whether the major build effort required by our approach is worth the possibilities presented by the vision. The consensus was that while there are many details to get right, this is a BIG task worth pursuing.
Later in the day, after we refined the Balsamiq flows more completely, we met again with @dhshredder, @lessbloat, @filletto, @samuelsidler to walk through the flows based on each scenario. There were some specific notes and details that were discussed at length, but the overall feeling was that this should move forward.
The next steps for the team are:
** add a single image (new image)
** add a gallery
** add and edit an existing image
The flows can be accessed here:
https://wordpress.mybalsamiq.com/projects/imageflowmobilefirst/grid
You should even be able to play with prototype, though I am totally unclear on what the Balsamiq sharing experience is.
We’ve had an exciting 72 hours (ish) in San Francisco, and not just because WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. SF was such a well run, fun and inspiring event.
As folks from the team began arriving and looking over our finished wireframes on Invision (thanks to @pabloperea for the hard work) questions began to arise. @ryan (as he expressed on gitter) remained quite concerned with the mobile experience and particularly the icons over the images. The frames seemed a bit awkward – stuck between the current experience and something new. With this in mind @siobhan felt that we should take a look at the problem with fresh eyes and see what we could come up with. We did so. @sonjanyc and myself made some rough sketches on Friday and Saturday, getting feedback from @melchoyce @avryl @azaozz and @mor10 during Sunday’s contribution sessions.
Presented here are the sketches of our mobile approach that I put together and refined from the feedback over the weekend.
The image on the left demonstrated the basic state. The image is presented, uncropped in a square that is the full width of the screen. If a user swipes left or right they can scan through their image library. Along the bottom are buttons (left to right) to select the image for multi-select use, a large insert button, and an ellipsis that reveals further, contextual actions (create gallery, set featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., etc). @mor10 has suggested that the insert button be a next button to allow us to enforce better semantic web and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility): enforcing alt tags, title tags and the rest of the image metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. data. This can be discussed in more detail.
Along the top are buttons (left to right) to show a grid of images, to reveal metadata, to edit the image and to cancel out of the insert media area. Tapping the top left grid icon swaps to a tight grid view of square thumbs – represented in the second sketch here), a user tapping on any image takes them back to the full-size view. If the pull down, a filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. drop down is revealed, they can search, toggle on multi-select, or insert directly from this view if desired.
If the user taps the ‘i’ info icon button (2nd from left in the top) the image flips to reveal the meta-data form and file info (as well as the thumbnail) within the square ‘card’ that contains the image. They can swipe left and right to scan through their library, and all files will be in metadata mode. Users can easily bulk enter data in this way, and they can get a better handle on file versions and other subtle differences with this view. On larger screens they would see a grid of the meta-data view. If a file did not have any metadata entered (or perhaps no title and alt tag) the insert button would be next and would lead the user to fill in the missing data.
Finally we have the edit mode. If the user taps the edit button, the edit tools replace the top menu bar, with an option to go back to cancel out and an ellipsis button on the right to cycle through the tools (the toolbar could also be swipe-able but that’s not particularly intuitive). Choosing a tool would replace the toolbar with the options for that tool. Along the bottom of screen we have the option to undo/redo actions, save the action and to finish and save all. In this edit state the user can still swipe left and right to move through images for editing.
We know this is a significant departure from the work that we’ve done thus far, and are interested in getting more feedback about this direction. Here in San Francisco this seems like a step in the right direction and worth exploring further. We’ll be discussing it tomorrow at the Community Day, as well as on Tues/Weds Contributor Days with the intention of finishing up some high-res more realized frames and flows.
Thanks to everyone who has participated in getting the project this far, and all of the new voices that spurred us to reconsider our assumptions!
Here is the new awesome slack channel for the group, the gitter room is thing of the past. https://wordpress.slack.com/messages/feature-imageflow/
We had a good meeting the frames and went over some of the community feedback we’ve received thus far. I’ll list out the basics here, the details are viewable in the video and you can watch the changes on InVision: http://invis.io/3W1JM5NAH.
We’ll have more frames ready to go by Friday. See all of you that can make it in San Francisco.
Full video:
We had another quite productive meeting about the UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it./UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. of the wireframes.
From the outset, it was clear that we all had come to similar conclusions about the direction to head in. There were a few areas of collision, but we reached consensus around these.
Other than these issues, the concepts from the last meeting all bear out in the wireframes and have been included. @pabloperea is going to lead the push for unified wireframes for Fridays meeting. We will be using Invision (http://invisionapp.com) to collaborate and finalize this set.
You can watch the entire meeting here:
Great work to all involved!
Thanks to those that could make it to the Wireframe sub-meeting. We each presented the wireframes we’ve created so far, and most importantly, the ideas behind the frames. Out of these presentations we found a number of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. common approaches and ideas. They are as follows:
We’ll (@sonjanyc, @mor10, @pabloperea, @teamadesign, @mwhite32 and anyone interested) be meeting again next week, tentatively Tuesday 9a PDT / 12p EDT, to present final individual wireframes based on these insights. From there we will create a unified approach with the intention of having master frames for next weeks full meeting.
Awesome job everyone!
Video of the meeting:
You must be logged in to post a comment.