Comments on: Visible Narratives: Understanding Visual Organization

By: Andrew

Andrew — Wed, 30 Nov -0001 00:00:00 +0000

Nice. A lot of IAs still don’t know this kind of stuff. A really great explanation of basic visual principles is in Scott McCloud’s first book “Understanding Comics.”

By: Christian Mogensen

Christian Mogensen — Wed, 30 Nov -0001 00:00:00 +0000

Really nicely presented article. It condenses much of Mullet+Sano’s book Designing Visual Interfaces into a couple of pages.

Very handy for classwork or for handing out to other team members who don’t know too much about the ideas behind visual design.

By: Ron Wild

Ron Wild — Wed, 30 Nov -0001 00:00:00 +0000

Visual contrast can also include varying degrees of image opacity / transparency. For example, I bet you'll find Oprah before you will find Britney on this map... http://www.1-900-870-6235.com/SearchMap.htm

By: Paula Thornton

Paula Thornton — Wed, 30 Nov -0001 00:00:00 +0000

Fabulous seminal piece! You don’t know how many hours I looked for stuff like this in the early ’90s. Short, concice and very full of core principles.

By: Michael tribone

Michael tribone — Wed, 30 Nov -0001 00:00:00 +0000

Another great article at boxes and arrows. I am a graphics person that has recently been involved in IA and can both learn and share information and knowledge with my team learned from relevant articles. The article is digestible and to the point.

By: Ben Chun

Ben Chun — Wed, 30 Nov -0001 00:00:00 +0000

Great article. I would love to see something similar dealing with motion graphics and/or animated interfaces. Seems like this only gets tricker as the design elements start moving around in response to the user interactions in a more immediate and responsive way.

By: vaska

vaska — Wed, 30 Nov -0001 00:00:00 +0000

I think this is a good article, however, you have completely left out Typography – I see no mention of it.

In your discussion concerning “principles of perception” or “visual hierarchy” you are discussing age-old techniques in typography. Why am I mentioning this? Too often, the design/code processes are separated and a common language between them is never found. Your article is a bridge, but typography is very important as well.

Many designers have taken up “code” as they possess this intuition whereas many code professionals sometimes do not even speak or know of typography. Unfortunately (and I know this from experience), they think that a term like “typography” means “design” – but it generally emobies the same principals your article explains.

The web is awash with so many with visually indecipherable websites because the most basic concepts which graphic/web designers employ (grid, typography) have been left out of the discussion far too often.

They are not merely tools for designs’ sake, they are important factors in common sense visual communiations – I think that this audience should recognize that designers and code people can speak similar languages.

Have no fear of design or typography or grids – they are coders friends as well…

I recommend Val Casey’s [http://www.valcasey.com] site for some solid information and examples of good web design.

By: LukeW

LukeW — Wed, 30 Nov -0001 00:00:00 +0000

Type (in the context of visual organization) is simply another visual element. All the type within a layout needs to be considered part of the overall visual hierarchy. Type also has it's own "internal" visual hierarchy within groups of text and even within individual letters and words. (this is why some faces are easier to read than others: contrast, white space, etc.) However, if by typography you mean selecting appropriate typefaces that communicate the proper message to your audience, you might be interested in what I call the "second part" of visual communication: look and feel (or personality). A brief discussion of personality can be found at: http://www.lukew.com/bio/design_philosophy/personality.html

By: Vaska

Vaska — Wed, 30 Nov -0001 00:00:00 +0000

I’m using the term “typographic grid” and the principles that come with it much like you use the term “visual hierarchy” and “layout”. You even used typographic-grid-like images in your explanation. This could be a misappropriation of my terminology I will admit.

However, I don’t feel that typography is merely “look and feel” in general – rather, it is inherently structural. And I do think it is worthy of at least getting a mention in this discussion.

But we are talking about the differences in terminologies and I have found (from experience), it helps tremendously to sort through these differences. And I think this is where the article starts out – as you’ve cited “Usability experts are from Mars, graphic designers are from Venus.” But this would be an altogether different article…

By: Leslie

Leslie — Wed, 30 Nov -0001 00:00:00 +0000

This article sparked a related question for me. What is more important for a task oriented web page design (not a marketing site) & how do you choose:

1) The layout of the text & graphics shows the information hierarchy but putting the subordinate concepts below & perhaps indented indented under superordinate concepts (like in an outline or tree view).

2) The display be visually balanced (not to much optical weight on one side or the other)? For example, if you have a web page with a vertical nav area down the left and align all text and buttons to the left inside the content area, the page looks unbalances because there’s too much on the left.

Has anyone seen any research on support either idea or any research comparing these design goals?