process

One interesting thing about making visual design, art is that the process is by nature self documenting. Every sketch, trial print is an artefact that illustrates the progression towards a final result. It’s super interesting to be able to see and reflect on your progress/process in such quick and immediate feedback loops.

Tags

process

printmaking

art

50 birds

An experiment in removing friction

Roy — Wed, 07 Feb 2018 22:28:07 +0000

Sub title

A smoother path to posting pictures from phone to site

/sites/default/files/styles/large/public/form-display.png?itok=heIg7oII

An experiment triggered by Dries’s blog post To PESOS or to POSSE? and my comment there about the friction in the UI’s for the POSSE approach. The Drupal content creation UI is not as optimized as the ones in native, mobile apps for Twitter, Instagram and the like.

I was curious how far I could take things just by stripping down the default Drupal content creation UI, optimizing it for posting an image + caption as an entry to this here blog.

What I did:

Create a custom, stripped down content creation form
Use evil CSS to hide superfluous items

Custom form mode

The first step was to remove most of the fields that are not required to create a post. The Form Mode Manager module lets you do just that. I set up a “Minimal piece” form mode which hides the fields for inputs like a separate summary, tags, file attachments, url alias, author, date, sticky and the “promoted” checkbox. These are optional (not required) fields that can be left empty or provide sensible defaults (me as the author, use “now” for the publishing date).

This alternative form comes with its own URL I can go to to create that new post.

Evil CSS

The stripped down form still shows bits and pieces I don’t really need to be reminded of every time I go to post something. Nothing a few display: none; CSS staments couldn’t fix. But, I’m using the default Seven admin theme here, which does not provide a body class to uniquely identify a specific page. I couldn’t add my CSS hacks to that theme’s (or sub theme’s) stylesheet because those would then apply to all admin pages.

I use the Firefox browser on my Android phone. Stylish to the rescue. We’re definately in proof-of-concept territory now! Stylish lets you define custom styling for all sites, a site or one or more specific URLs. I made one specifically for the URL where the minimal entry form lives to clean up that screen even more: hiding the header, breadcrumbs, form field descriptions, etc.

And, does it work?

Yes. It’s far from elegant but it’s already a much more focussed and faster experience. I think I already knew but was happily surprised to see that the regular image field does provide access to both the camera (for taking a new picture) and the gallery (for choosing an existing image).

What could be next

One thing that makes the Drupal approach feel old school is the required title field. Twitter, Instagram, Tumblr all let you just type something into what basically amounts to a “body text” field. In Drupal it has to at least be just like email: a subject and a message: a title + a body. I can make the body optional but I want my text to go in there. Hiding the title field is not straightforward, I think because it is tightly coupled with the unique ID for that content item. There’s modules that let you hide the title input field but those still automatically generate a (gibberish) title.

Still, my focus was on smoothing the path for posting an image to my blog from my phone. That “Browse…” button is old school too, but it does provide access to camera and camera roll. Saving a bookmark for this comes with the option to create a shortcut icon for it on the phone home screen for quick access. Not bad for an hour or two of experimenting without coding :)

A couple of years ago swentel created Drupoid, an Android app that let you save an image from your phone as a content item on a Drupal site. It would be an interesting exercise to recreate something like it with React, Drupal’s (future) JavaScript toolkit of choice and figure out how smooth and snappy we can make it there.

Tags

Drupal

drupalplanet

process

Can you find the hub?

Roy — Tue, 16 Jan 2018 22:28:49 +0000

Sub title

A sitemap/ flow hybrid overview that lets me zoom in and tweak details as necessary

/sites/default/files/styles/large/public/20180116-hub-and-spokes.png?itok=ilCiABBD

Because I’m old and skeptical I’m now slow to adopt new digital tools in my toolkit. I’m still in my first year of using Sketch for screen designs. Over time I’ve moved away from creating high definition visual designs, but lately it’s become part of some project work again and as a team we decided to standardize on Sketch.

It’s really important for me to get at least some idea of and grip on the whole before I’m able to plot the details on individual screens. Which is why I was reluctant about Sketch. Too easy to get distracted by details that just don’t matter yet. Plus, it did not provide ways to link screens together for checking the flow of things.

Enter Craft. A plugin for Sketch that lets me link screens together, from inside Sketch. In combination with the endless Sketch canvas this works well and fast. A sitemap and flow hybrid overview of the whole that lets me zoom in and tweak screen details as necessary. Nice.

Tags

Acrocephalus scirpaceus

Roy — Tue, 09 Jan 2018 22:19:48 +0000

Sub title

A rather indistinct, plain, un-streaked warbler

/sites/default/files/styles/large/public/20180109-Acrocephalus-scirpaceus.png?itok=wBeBUh2f

Podiceps nigricollis is on there as well but next up is the Eurasian reed warbler (kleine karekiet). Warbler is a nice word is’t it.

Tags

First things first

Roy — Mon, 08 Jan 2018 22:05:14 +0000

Sub title

Get a grip on the whole before diving into details

/sites/default/files/styles/large/public/20180108-first-things-first.png?itok=c6JIU2IX

The architect designing a house does not start with choosing and arranging the furniture in the living room. Even if the client really wants that one specific large corner couch.

No matter how custom the eventual design, for each house there’s some basics that need to be taken care of. A way to enter it, some holes in it to let sunlight in, dedicated spaces for cooking, sleeping, washing up, etc.

Any tool or app that is not super small can easily be as complex as building a house.

Establish foundations first

Don’t get lost arranging details on a single screen if you’re not yet clear of the fundamentals. How can you enter? How many different types of rooms do you need? How are they connected?

Individual screens are easy to create in isolation but if you start there, you’ll have a hard time arranging them into a coherent structure. At the same time you’ll likely need a home screen, listings, detail pages, forms and the like. Establish the main paths, flows, scenarios as guides for stringing those basic page types together.

Get a grip on the full set of things that your new design needs to accomplish. It’s easy to get lost in polishing the details of a particular screen component when working in high resolution tools like Sketch. First establish that you need a list of items on this given screen because of some search or navigation action on a previous screen. Only later figure out the specifics of what to show for each item in the list.

Sitemaps and flows before wireframes. Pen and paper before digital. Not having an undo is not a bug but a feature. Redo instead of undo to get a grip on the whole.

Some resources

Luke Wroblewski has an older talk about this: Parti & the design sandwich
Page description diagrams are an old school, more text based version for creating the big picture
Haven’t tried it but looks like Flowmap wants to provide that sweet spot between global (sitemap) and local (wireframes). (You should still start on paper though.)
Think of your app like a collection of hubs and spokes
You’ll probably need these types of pages

Tags

sketch

process

Het beoefenen van de beeldende kunst…

Roy — Fri, 05 Jan 2018 19:10:23 +0000

Sub title

Beljon weet hoe

/sites/default/files/styles/large/public/20180105-zodoejedat_0.png?itok=1Rlre7aG

Het beoefenen van de beeldende kunst is het begrijpen van het leven vanuit het doen. Dat is iets anders dan het begrijpen van het leven vanuit het denken. Wat stapelen is, wat binden is, kun je niet leren uit een boek. Je moet het doen. Alleen wie iets ervaart met zijn handen, met pijn en met zweet, weet iets.

— J.J. Beljon, Zo doe je dat

Tags

Reminded again

Roy — Thu, 20 Oct 2016 23:29:45 +0000

Sub title

So true

/sites/default/files/styles/large/public/wireframing-is-slow.jpg?itok=vxO16wxS

https://twitter.com/jonesabi/status/788054309682282496

Tags

process

quote