Konigi Graph Paper

I spend a lot of time sketching interface ideas on paper. Typically I sketch wireframes and storyboards on graph paper, then redo the final documents in OmniGraffle. But lately, I’ve been using paper for more than just sketching. Now, after spending time sketching ideas and working out design issues, I start to do higher fidelity drawings on paper, scan them, post them to our system. We discuss and iterate, and the process repeats until we’re happy, and I spend less time pushing pixels around.

As a result of this method of working, I’ve been wanting my graph paper to be more suitable to the way I work and the kinds of drawings I do. So I’ve come up with the different types of graph paper. You see here. You’ll find styles for wireframing user interfaces, story boarding interaction, and plotting values based on simple criteria using a two by two grid. We throw in a basic grid got anything else that might come up.

These pages are great for sketching, but also work well when producing high fidelity drawings. The title bar and grid lines are photo-safe, so they won’t show up when you scan them into your computer. The thick black lines for boxes will show in scans and are 2px wide to match the weight of Pentel Sign Pens.

So if you’re interested, find out more about Konigi Graph Paper or download these for your self.

http://konigi.com/tools/graph-paper

The Future Of Apple Is In 1960s Braun

Gizmodo puts Dieter Rams’ designs at Braun next to Jonathan Ives’ designs at Apple.

10 principles of design according to Rams:

  • Good design is innovative.
  • Good design makes a product useful.
  • Good design is aesthetic.
  • Good design helps us to understand a product.
  • Good design is unobtrusive.
  • Good design is honest.
  • Good design is durable.
  • Good design is consequent to the last detail.
  • Good design is concerned with the environment.
  • Good design is as little design as possible.

http://gizmodo.com/343641/1960s-braun-products-hold-the-secrets-to-apples-future

TypoWiki

I noticed the TypoWiki on TypoPhile for the first time. The wiki is “a user-created encyclopedia of all things type and design-related. Users create and edit Wiki entries with the aim of becoming a collaborative, useful, balanced and relevant resource.”

This is a very simple wiki created on top of Drupal. They’ve done a nice job of creating a core set of wiki pages (“indices”, as they call them) linked off the front so you can edit those pages and create forward links to new resources. This is a nice approach that the keeps the site organized and clean.

There’s quite a lot of content in here already, including a pretty large glossary of terms. Wherever you see a little red W icon, the content needs to be written still, so get in there if you’re so inclined and contribute.

http://typophile.com/typowiki

A Peek Inside Google�s Gmail Usability Lab

TechCrunch has some photos of a usability lab used by the Gmail team at Google. Some of the photos include earlier iterations of Google Chat that were being tested in the lab.

I only see shots of the observers’ room in the photos, but there’s some description of their testing room as well.

It’s a small room with a large flat screen monitor, along with a desk and computer. It also has a number of discrete cameras (and a microphone) that keep an eye on the user herself as well as the screen.

Around the corner is a second room where Google employees can watch people interact with the software real time. The room has a couch and a chair along with two screens and speakers to monitor the lab. See the image to the right.

http://www.techcrunch.com/2008/06/22/a-peak-inside-googles-usability-lab/

Quick and Easy Flash Prototypes

Boxes and Arrows has a very detailed tutorial by Alexa Andrzejewski, interaction designer at Adaptive Path, on creating prototypes in Flash.

To tackle the classic “how to prototype rich interactions” problem, I developed a process for translating static screen designs (from wireframes to visual comps) into interactive experiences using Flash. Requiring some fairly basic ActionScript knowledge, these prototypes proved to be a quick yet powerful way to bring interaction designs to life.

It's nice to see this kind of practical knowledge sharing happening on B&A. This is a nicely illustrated tutorial covering a very practical method you can start using today.

http://www.boxesandarrows.com/view/quick-and-easy-flash