pragmati.st

Interesting interview with graphic designer Michael Bierut about the overall excellence and startling consistency of Obama’s visual branding.

The thing that sort of flabbergasts me as a professional graphic designer is that, somewhere along the way, they decided that all their graphics would basically be done in the same typeface, which is this typeface called Gotham. If you look at one of his rallies, every single non-handmade sign is in that font. Every single one of them. And they’re all perfectly spaced and perfectly arranged. Trust me. I’ve done graphics for events—and I know what it takes to have rally after rally without someone saying, “Oh, we ran out of signs, let’s do a batch in Arial.” It just doesn’t seem to happen. There’s an absolute level of control that I have trouble achieving with my corporate clients.

Then if you go to the Web site, it’s all reflected there too—all the same elements showing up in this clean, smooth, elegant way. It all ties together really, really beautifully as a system.

(via NotCot)

Amy Hoy

Designers working with developers. We’re all nerds, but different types of nerds. We think differently.

Designers

Main question is What? they worry about form. they think about purpose (why does it have to exist). what does it do for people on a spiritual way. They worry about context. They only care about what the user sees.

Developer

We’re artists because we’re a little fucked up. code is just our canvas. – Kevin Clark

Question that guides us is How? Worry about connections – how things fit together. Worry about functionality.

Designers should be involved early and often. Even if it’s just you, you need to where a designer hat early.

Where’s the hand-off?

Need to have a feedback loop.

Discussion of different design process.

Ideal is having designers and devlopers meeting in the middle and working on the html/css views together

Start with really low fi sketches through grayscale comps all the way through full color fully photoshopped comps.

How to work with each other. You have to collaborate. Please don’t dictate. This is a big barrier. Telling other people what to do destroys any team dynamic.

Show, don’t tell. This includes technical stuff. Don’t tell your designer how to use svn, show them. Programmers are really good at imagining abstractions, normal people don’t train that part of their brain so much.

Don’t say: Can’t do that. Look for solutions, or explain why you don’t want to do it, and figure out a solution. Everything involves trade offs and designers can’t do their job well if they don’t understand the trade offs. Teach them.

Design is not fluff.

Dig Deeper. Designers need to explain the underlying need, not just the end result that they want. As a developer, ask them.

Rails – programming is hard, especially for the normal people. be kind to non-developers. Rails doesn’t make it harder than it need to be.

ERb is one of the best templating languages. Layouts, views, and partials can be explaind. AR objects can be explained to non designers. Designers can deal with code tags if you explain it to them.

Could be freindlier.

• Write ruby code for your designers.
• Create cheat sheets.
• Write helper methods.
• Comment the code.
• Don’t forget to teach them svn

Questions

What about other templating styles like MasterView

She thinks its harder to see what’s going on.

Popular opinion is that there is a big divide between desingers and devlopers? What do you think that Rails does for this?

Ruby on Rails is pretty. It tries to make things human. This is a good thing for designers because designers care about appearance and rails is gordeous.

Where do you find designers?

She is working on a design collective. Note for designers: best way to improve career is to learn how to program a little.

How do you work with clients?

Keep things low fi as long as possible. Lot of interviewing up front. Iterative!

When you work with the client do you bring both developer and designer or just designer?

If they’re not the same person, absolutely. Just don’t let the developer talk too much (laughter0

Getting Real

Good thing to read. Clients don’t ever want to do that.

How about splitting AJAX between designers and devlopers?

Paper prototyping. Got to work together.

Wireframe tools?

Paper and Pen. She uses omni graffle for low fi computer ones.

David Verba, Adaptive Path – Came there to work on measuremap the rails app that got sold to google and just pushed as the new version of Analytics

Slides

We can tell that one site is better than another, but we can’t tell why (This is exactly what part of our conversation at lunch was about yesterday)

Design is important. iPod differentiated on design. not just visual, but interaction design, information design, and service.

successful products depend on both the experience and how well it solves a problem.

old style of design: use best practices” and your own experience until you actually talk to the user.

You must know and design for ALL your users. Put some ffort in up front to know their context, motivations, and challenges.

Use low-fi prototypes early so you focus on interaction not visual design.

JJG has written about the elements of user experience:

• surface
• skeleton
• structure
• scope
• strategy

Strategy: what do we want / what do our users want.

• Know your stakeholders (anyone who has an interest in the project)
  • What do they want? revenue? operations efficiency?
• Who are your users? Best way to understand them is to talk to them. How do they use it? How do they want to use it?
  • Our users are just like us, No they’re not. Even if you’re a blogger and you’re users are bloggers there are a lot of types of bloggers.

Scope

Draw a line from your strategy to your features. Don’t try to be everything to everybody. Prioritize features by talking to your users. Ask them what they want first.

Select core features – then fulfill by enriching the feature set, then you can expand into new areas.

Use APIs and produce APIs. This means that you don’t have to be everything to everybody

Structure

How do the pieces of the site fit togeter? Interaction Design

Do we do just plain pages? Do we go AJAX?

Think modularly. Want consistency across the app.

About Face 2.0 – Classic of IA design.

Information Architecture isn’t just for sites with a lot of information.

• Granularity – keeping at the right level of abstraction.
• Labeling – call things what your users are looking for. “human resources” < “employment opportunities” < “jobs”
• Consistency – use the same word for the same thing

Skeleton

Four principles of Interaction Design:

• discoverability – make finding things easy
• recoverability -actions should be without cost
• context – a sense off time, place, and meaning
• feedback – how the system response

You can use these as a generative process. How are we going to make our site more discoverable?

One way to reduce the cost of user errors is to help them not make errors (autocoplete, etc.)

Be careful about performance architechting when doing rich apps.

Context

Classic example is the amazon checkout pipeline (where am I, how many steps are there)

Feedback

Provide Clear Error Messages for Users. Error messages are written for users.

Provide feedback. yellow fade. disable submit button, show a spinner or something. Action at a distance – keep actions relatively localized. if you can’t provide some other feedback. I just handled this in an app I was working on. I’ll blog about that later.

Design is not just cosmetic. But it IS cosmetic.

People have an attractiveness bias. Kennedy v Nixon debate. Radio listeners thought Nixon won overwhelmingly, TV viewers thought Kennedy won.

People make their initial judgement of your site in hundredths of a second – Appearance Matters!

Personality. Flickr is playful. Establish a personality for a site and run with it in visual design, copy writing et cetera.

Non-designer’s design book – great book, i read it last year and immediately made a difference in my ability to layout sites.

- Mid Manhattan (Current Map on the left, KickMap on the right)

I came across this article about Eddie Jabbour, a 54 year old graphic designer who is on a one man quest to replace the New York City subway map with is KickMap. (via SvN) The current official version tries to stay geographically faithful, but ends up being so complicated it is practically incomprehensible to anyone who hasn't grown up with it. I certainly wouldn't want to have to figure out how to get around New York with nothing but the current map to help me. In contrast, the KickMap doesn't make any effort to accurately portray physical distance but makes it much easier to figure out how to get from one station to another.

I think that the issue is one of defining your goals. The KickMap focuses on doing one thing well: explaining the subway system. On the other hand the current official map tries to explain the subway system, serve as a surface map, and show commuter rail and bus routes. Unfortunately, in doing so many things it doesn't do any one of them particularly well.

Sadly, the KickMap isn't going to be adopted any time soon. Christopher Boylan, the transportation authority’s executive director of corporate and community affairs said “The design is important, but the thing we’re concerned with is the best directional guidance. We design a map for use, not solely to look good, and we think it looks good.” The irony is that the new map was designed not to be prettier, but because of the usability failures of the current map.

In the end it comes down to a question of what the goal for a subway map is. I think that goal should be to navigate the subway system, not the whole city. DC's metro map is also somewhat abstract and geographically inaccurate, but it does a great job of explaining the subway system. Each station then has geographically accurate surface maps that show the surrounding area so that you can orient yourself when exiting the subway system. I think this strikes the proper balance.

- People using the DC Metro Maps (images by dbking Eye Captain on Flickr)

Pick what you want to do, do that well, and provide easy ways to get related information when it is contextually important. This is something we would do well to remember in software development.