Paper prototype generator for Gravity

[james-nash]

This is an idea which might lead to an entirely new repo and project. I am adding it here in gravity-ui-sass simply because there isn't a better place to capture this right now

Background

I was recently reading Pencils before Pixels and it reminded of the usefulness that simple pencil and paper sketches of UI ideas can have in the early stages of design. It's certainly a process I've found very helpful over the years.

Often, rough pencil sketches will essentially be basic wireframes of pages or screens. Countless printable templates with device frames exist to help making such pencil wireframes (e.g. https://www.smashingmagazine.com/2010/03/free-printable-sketching-wireframing-and-note-taking-pdf-templates/).

However, in my experience, such templates can sometimes encourage or reinforce narrow attitudes towards UI design. E.g. if you're always working in an iPhone-sized frame you might not be considering how things could or should stretch and change on other devices. Conversely, if you're working in a large-screen frame you might not be thinking content- or mobile-first all the time. Whether we like it or not, we cannot control how users consume our web things - therefore we always need to design and build to work on any device / browser.

Other common gotchas are designing for the entire screen and forgetting that, at least initially, part of the available screen will be taken up by status bars, address bars, navigation controls, etc.

Idea

So, perhaps a better template could encourage content-first, device-agnostic thinking right from the start. I therefore propose we build a tool to generate printable templates from the Gravity design system.

In the output (maybe a web page with a print style sheet or a PDF?), every sheet of paper should have 3 columns. From left to right, they'd be

1. An IA column, where you simply write out an initial heading outline. This might just be light horizontal lines, like a ruled exercise book, for writing on. I can't find a good link to reference right now, but I've seen people like Dan Mall and Brad Frost advocate mocking up a page's content outline in a spreadsheet column.
2. A small-screen column, this would have a small-screened device frame (e.g. a smartphone), including the browser's addressbar that is visible until you scroll the page (to remind designers just how little screen height they really have!).
3. A large-screen column, this would have a large screen frame (e.g. a desktop browser window or a large tablet device) also complete with browser UI.

To make it all fit, the sheets may need to be printed A3 sized.

The thinking is, by making every template contain blank spaces for content and small screen and large screen, designers will be encouraged to consider all in parallel and not get stuck in one or the other.

Here's the magic sauce though:

• The device frames would be randomised on every sheet of paper. Small screen on one might be an iPhone 4 on one page and a Galaxy S9 on the next. This is to prevent people thinking too much about specific devices (especially the latest and greatest ones they themselves happen to own!) and thus to encourage them to be more device-agnostic and considerate of older, less-capable devices. Similarly, the large -screen frames would be slightly different sizes and/or browsers per page.
• You can optionally include Gravity's page header component at the top of your page and it would be taken from the live pattern in our living style guide.
• Dotted vertical lines could indicate the boundaries of the content area - again, driven by Gravity's actual SASS or CSS

Here's a sketch of what I mean:

Possible implementation

Off the top of my head, one way of building this might be a web app. One screen with a simple form - how many pages to generate, whether or not page headers should be included, etc. and a submit button.

That then returns a printable page. The device frames could be <iframe>'s behind the scenes that embed the live header component (which, being responsive, naturally adapts to the width of that viewport). The iframed page could also include some CSS to visualise the edges of the content area - e.g. by adding vertical borders to the <main> element.

There will be other, quite possibly better, ways of doing this. Whoever works on this is encouraged to explore alternative approaches.

[marcospeebles]

That back and forth, AI + your average joe/jane intelligence/intuition and we have a 360, who needs us anyway? :D