Basics of Visual Design (Adapted from Saul Greenberg)

Why worry about visual design? Most students will talk about aesthetics and potentially marketability. The second thing that’s really important here is that the design itself is communicating.

Good Visual Design should… Help users to understand the structure of what’s being presented and allow them to quickly find the parts that are relevant to their own tasks or goals. Be visually and aesthetically pleasing.

Quickly… We’re going to look really quickly at an ad.

Communication What was it selling? What were the important features it was trying to get across?

Communication What was it selling? What were the important features it was trying to get across? In both of these cases we’re talking about print ads, but your users are doing a similar thing. What can I do with this interface? I want to do X, how do I do it? How things are arranged, in addition to what the content is, has an impact on an interfaces ability to communicate.

PARC Proximity Alignment Repetition Contrast groups related elements separates unrelated ones Alignment visually connects elements creates a visual flow Repetition repeat design throughout the interface consistency creates unity Contrast make different things different brings out dominant elements mutes lesser elements creates dynamism Robin Williams Non-Designers Design Book, Peachpit Press

Process Establish groups of related items Are there things that have limited/no utility? Get rid of them. Of the remaining stuff, what’s most important? What do you want users to see first, second, third, etc? Start Modifying the design based on one PARC goal at a time.

This is a random flyer that appeared in my mailbox recently This is a random flyer that appeared in my mailbox recently. While I suspect that the person who created it was really trying to make it appealing, it could potentially benefit from applying the PARC ideas. As a starter what do people see?

I started with a stripped down version that’s pretty close to the original. I personally find it easier to go from minimalism and add the elements back in again, particularly if you aren’t trying to keep the original form.

So, the first thing to play with here is proximity So, the first thing to play with here is proximity. We want consumers of this document to be able to see some of the structure of what’s here and decide which elements they want to focus on. I’ve tried to make it so that each of the talks is a separate seeming thing, but kept the speakers close because they are essentially (in this case) a detail. If the speaker affiliations were listed, we’d also group them close to the talk. Then I have a header and a footer. The header groups the Science in St Louis logo up with the “want more talks” title and the link. I’ve used the link back to the science in stl web page as a footer. I’ve de-emphasized it by placing at the bottom because I think the prime thing that people are going to want from this page is 1) a sense of whether or not they are interested in seeing more talks and 2) how to get to them. The Science in St Louis main page contains more information about the group itself, its funding, etc.

Alignment – So, the alignment on the initial document isn’t terrible Alignment – So, the alignment on the initial document isn’t terrible. But we do have a combination of centered and left aligned. Here I’ve shifted to right alignment because it felt like it flowed better from talk title to speaker. I’ve right aligned the bottom header and tried to size the top header so that it follows the same line. Now, to some degree I’m kind of punting on the header bar – this is a space where you can think about more radical shifts in design and if we choose to do that later, we may want to revisit the alignment afterwards.

Contrast and Repetition – Contrast – I’ve chosen to make the speaker names less prominent than the talk titles by both shrinking the text and by making it a gray color. I’ve changed the font for Science in St Louis and bolded it, so that it will stand out more as compared to the other text. In this case, it feels like the Science in St Louis group is an important element to communicate. I’ve used grey blocks with white text to present both the subheader and the footer. This gives some weight to the header and footer, but the white on grey doesn’t jump out as much as a black-white contrast, which seems in line with the web addresses. I want people who want to find them to do so easily, but in a quick glance at the page, they aren’t the most important elements. Obviously, there’s lots more that could be done here. We haven’t played much with color, for example. We could arguably do more with the header again, perhaps in incorporating the logo in a less tacked on way (Google docs, so I didn’t fight too much) Repetition- We’re using the same font (Arial) throughout the document, except for in Science in St Louis for emphasis. We’ve picked the gray color from the logo and used that in picking the speaker font color. We’ve used the same gray bar in both the header and footer for symmetry. Again, there’s lots more you can do and play with here. This is merely one point in the space. But, at the end of applying these we have a document layout that helps to communicate what’s here much better. The eye is drawn to Science in St Louis and we can tell immediately that there are a number of different talks.

Using PARC, what would you do with this? Establish groups of related items Are there things that have limited/no utility? Get rid of them. Of the remaining stuff, what’s most important? What do you want users to see first, second, third, etc? Start Modifying the design based on one PARC goal at a time.

Ok. So the PARC approach works ok for laying out content when I already have everything in place, but what if I want to play with a wider variety of ideas?

Wireframing Image from: https://britzerbo.files.wordpress.com/2013/11/wos_wf_home.jpg

3 Column Grid Image from: http://www.w3.org/TR/2007/WD-css3-grid-20070905/

12 Column Grid Image from: http://tallaricobenaghi.blogspot.com/2011/03/using-grid-systems-for-web-design.html

How would you wireframe this? At this point, you probably have a good idea of what high level pieces you have. In my reckoning, I thought about one header, and two photo groups with titles and text. You may have a slightly different breakdown and if so that’s fine. But how might you lay this out?

Some possibilities…