In which the author drinks a decaf flat white at Newtown Social Club, works a short day at the floating desk, and ends with a merry hour of coding on the train to the country for weekend.

Sometimes it’s not worth going to the Photoshop to make mockups. Case in point – picklet draft creation.

Drafts popover wireframes

When a picklet has been assembled on Picklet Builder and the author wants to either test on a device, or get someone else to test, a picklet draft is created. A draft is essentially a copy of the picklet which is not editable, but provides a public URL for the purpose of testing. It is the draft which is tested, then submitted and reviewed for the Picklet Store.

The process of draft creation is articulated and resolved in the above page of shonky yet sufficiently detailed wireframe sketches. I didn’t bother with any more detail, since they will inherit the visual style of the popover and dialog elements, when I get around to deciding on it.

Current live version of picklet-builder with legacy forms in sidebar

Here are screen grabs of the current live version and my most recent mockup. The mockup is not precise and has aspirational elements that may not make it into the next iteration. There are a couple of key design changes apparent.

The new design clears away the stuff in the sidebar leaving it as hierarchy of picklets navigation element only. Most of the sidebar content visible in the existing layout gets collapsed into popovers triggered by buttons in the workspace toolbar. The other change is to put buttons for manipulating the current layer into the workspace itself, instead of text fields in the sidebar.

Photoshop mockup next iteration of editor workspace

I really like the web site for Silvio Rizzi’s Reeder iPhone app. The use of flat shading and drop shadows to communicate navigation hierarchy. Something of an inspiration for the mockup.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>