VisCom Project: Additional Channels

This post is part of the blog series that documents my design process of a Visual Communication class project.

This week (the week of Apr 18, I kept procrastinating on making the images. Finally, here it is, now I need to go back to more meta-design debt...) I was mainly exploring the mobile layout of the site and making some poster “wireframes”.

Mobile Layout

Working on mobile has always been a pain. With so limited screen estate, I’ve been wondering—how not to just stack things over each other in a single column? That’s easy and safe, but boring. Compared with my interesting layouts on desktop, the single-column is lackluster. My goal, therefore, is trying to retain as much essential traits from desktop layouts as possible.

For the axial version, I use a three column grid to have the axis remained at 1/3. And yes, even taking up two of the three columns, text blocks still feel squeezed too narrow. Not entirely sure about that. Another thought is that for the main service section a horizontal scrolling might work better than tabs—it makes more sense as now we have a touch input.

Axial layout on mobile

And for asymmetric it’s even harder. The signature asymmetric margins just don’t make too much sense on mobile, so only the indentation pattern manages to survive. Still five columns and one-column offset, gutters & margins adjusted accordingly.

Asymmetric layout on mobile

Four columns feel like working better. Moderate variation, appropriate line length, not excruciatingly dull. Maybe I can go back and add more columns to the axial one and see how it works out.

Posters and Patterns

I found it pretty hard to appropriate the concept of wireframe to graphic design. What would be a “mid-fidelity” poster look like? It seems to me now it’s not enough to only have types and images. I need to have some sort of overarching “visual concept” that cuts across different mediums, something that could provide a flexible structure for extending communication channels.

I sourced my inspiration from Pioneer Square’s architectures: the arches, the bricks, and the corners.

The Arches

One dominant feature of Pioneer Square’s Renaissance Revival style buildings is the Roman arches.

Arch inspiration 1

So I was thinking about singling that feature out, abstracting it, and making it a consistent pattern throughout.

Arch inspiration 2

The arch could be a versatile device for organizing elements. Here it serves as a griddy skeleton for distributing texts and framing images.

Poster wireframe, arch as frame

It can also be small repeating patterns for decoration. I decompose the arch into primitive shapes (ellipses and rectangles), playing around with different combinations to look for interesting patterns.

Arch patterns

The Bricks

Another idea comes from the pattern of bricks. Maybe by taking a small part of it and zooming in, these pattern can also serve as an overall structure.

Brick inspiration
Poster wireframe, brick lines as frame

Nothing remotely fruitful. I decided to exclude this concept in the critique session.

The Corners

In the pictures I took I also noticed several buildings have this soft, rounded corners that contrasts their otherwise hard and sharp lines. I extract that out and play around with it.

Corner inspiration 1
Corner inspiration 2
Poster wireframe, corner lines as pattern

This concept is less well received during critique. As one peer commented, it is too abstract and less of a signature of the buildings, which makes its association with the neighborhood weak. But I figured that these overlapping “corners” could serve well as a subtle background pattern.