I’m going to date myself right out of the gate and get it over with. The first couple years of college I learned mostly print layout and mechanical drafting (I checked my Pine account twice a week in the basement of the math building…tease away). The mid-90’s was a chaotic time to step into technology. But, there were some nice benefits. Fast forward a few years and I would have missed perspective drawing, light and color study, and lessons on exploded assembly, eye flow, alignment and positioning.

Should it really matter that I used a t-square and cut print layouts from acetate sheets?

 
Yes, these are better days. Broadband internet and high resolution screen space has allowed us to return to the foundations of design. The eye candy of a style magazine, the full page hero image with beautiful text flowing atop, is now in an app designers’ bag of tricks. What’s old is new again. More accurately, rich, pleasing design practices are possible digitally. Here are some simple print lessons I love.

 

Full page photo-editorials

Hero prototype for Windows 8

In web design terms, a hero shot, describes high impact imagery either illustration or photography. This doesn’t have to be at the exclusion of your content, however. Fast Company Design does an amazing job with images. Watch as the page loads a full page hero shot and then loads the content around it. As you scroll down through the articles, you are offered an almost entirely visual browsing experience.

 

Eye flow

Visual movement helps you move a user’s eye through the content. Eye flow is important in any experience (you notice when it’s absent), but it becomes critical when you need to visually explain what your product does or what users need to step through to either get started or discover functionality.

Visual Flow Patterns

The eye tends to like what the eye likes. We see this time and again with eye tracking studies. Even when the page is poorly constructed, the eyes trace back and forth searching those familiar places. The patterns I learned to follow are ‘C’, ‘L’ and ‘S’ flows. Placing content and/or hinting along those lines can guide users though an experience quickly and without confusion.

There’s many more great print practices I could have included. If I missed your fav, let me know!

In preparation for a busy fall conference season, I’ve been furiously testing, retesting then codifying the methods I used to help brands prototype their Windows 8 app experiences. Afterwards each process trick gets a photo shoot (I’m not the best photographer, but the tripod helps).  Once I’ve paid the ideas due process, I can start putting them to words. What follows is a quick trick I discovered while tinkering with content proportioning.

Proportion is almost always referenced as; the rule of thirds, golden ratio, golden mean, golden number…apparently anything beginning with ‘golden’ will do. Windows 8 has already baked the rule of thirds right into the pie filling with OS functionality like Snap view. So I look at proportion in app design by its basic definition: relative size. Relationship of each piece to one another, like folding a sheet of paper in half and half the half, etc…

Early Days

Prototyping content sizing and placement is an action that comes early in the process but after you’ve decided the goals of the app and the coordinating user scenarios. Relative sizing choices come from that clarity. And once you understand users’ priorities you can then give those back to them visually with the experience. I call that empathy, but it’s simply facilitating great UX.

Post-it Notes for Prototyping Proportion  

 

I found that the easiest way to play with content layout and variety is with Post-it notes. Here I’ve printed out the gridded tablet sheet (steal it here) and cut the standard 3 by 3 inch Post-it in descending sizes. This configuration could be used for a piece of featured or new content with its related companions clustered around it. Of course, this is just one way to express a content group. Experiment liberally as a reminder that visual variety and playful content flows are a key piece of a great app.