Information Architecture and Interaction Design

I updated the OmniGraffle Web Design Template.

screenshot

This web design template for OmniGraffle Professional provides the basic layout for a design deliverable including the following master canvases: document title, section title, wireframe (portrait and landscape), storyboard, and blank. The wireframes were created at 950px wide with guides following the Blueprint CSS Grid system. Wireframes also have 2 small hairline marks around the 600px point to mark the approximate fold. Go grab it here.

The presentation deck from the talk I gave at DrupalCon Boston on March 3, 2008 is now available to view and download. This was a talk that introduces the UCD lifecycle and proposes to developers methods for doing UX activities. We compare the more rigorous activities and artifacts of the process with the simpler things you can do right now that are painless and produce the majority of the improvements you are likely to get doing UX the hard way.

In the past wireframe stencil I haphazardly tacked on icons that I found useful to the shapes, but not necessary. I'm splitting those off to keep the wireframe stencil pure, but plan to release different libraries of stencils for other purposes. These stencils give an idea of the kinds of things that I'm separating from my current wireframe stencil.

After about a 4 year break from blogging about information architecture on iaslash (my last post there was 11/2003) I've decided to return to blogging on a wider range of user experience topics. The new blog is called Konigi. Here's a snapshot of how it looks today:

konigi

The word Konigi is a bit of a nonsensical riff on the Esperanto, "koni," which means to know. Before I started on this projectj I wanted to find a way to focus on doing some sort of personal knowledge management related to web design, and somehow I ended up doing this site. I can't tell you how happy I am to have finally found a way to combine my interest in KM, Design and UX, and Blogging into one project.

Herw's what you find on the site for now:

  • Interface: A gallery of user interface and interaction examples that are both conventional and accepted solution as well as innovative examples that push the use of medium.
  • Design: A gallery of sites that can be described as influential, innovative, and effective at representing their brand and purpose. Visitors may submit designs for inclusion. The submissions that get the most votes will be included among the featured sites.
  • Notebook: This is the more traditional blog, pointing to UX resources. For now I'm going to keep the writing lean and succinct. This is also the place where I'll be posting the Collages (Command-Shift-5) I play with occassionally and post to Flickr.
  • Function: This is a competitive analysis section that I'm working on and hope to release very soon. Hopefully these pages will start appearing in the Spring.

When I started this project a few months ago, I thought I'd simply be starting a blog or wiki, but somehow it evolved into a more focussed portal of sorts with lots of screenshots. I got my hands on Skitch and started posting screenshots to Flickr. I started a new job last year and found myself taking screenshots a lot more and write a lot less on urlgreyhot. All the little experiments using Skitch on Flickr forced me to organize things and separate these screens from those Ipost to urlgreyhot. This is where Konigi comes in. Hopefully it will keep this stream of screenshots in order so they're findable and reusable by others in the UX community who may be interested in them.

I'd love to hear your feedback.

MTV Israel using Tvinci video player.

Update to OG Wireframe Palette. Added the following:

  • Aquafied buttons
  • Video player controls
  • Hot icon
  • Folder icons

I know the Aqua buttons are hi-fi, but they're useful when you're mimicking OS windows occasionally, e.g. pop up browser windows, JavaScript alert windows, etc.

Download from the wireframe palette page.

This is pretty excellent. Check out the demo. This is a new flash-based contextual help app. When you click a tool, you see two tabs--one is an Adobe tab that shows related Help topics, the second is a del.icio.us tab that shows helpful links (e.g. Tutorials) from delicious. They're using a single del.icio.us account to feed this tab.

To check this out in Illustrator CS3, go to Window > Adobe Labs > knowhow.

I sent feedback to OmniGroup requesting that they add jitter/squiggle line stroke styles to the next release of OmniGraffle. Omni responded that they will add this request to an existing request for hand-drawn effects, but that feature requests usually make it to the product development team when there is enough clamoring for the feature. So if this is something you're interested in, send them feedback via their support page (scroll to bottom of page for email address.

Here's the feature request I sent:

I've been hearing a lot of people asking
for some way to make drawings created in OmniGraffle appear to be have
an unfinished look by simulating hand-drawn lines. A lot of people get
by doing squiggly lines in CAD or other drawing programs. But we've
also seen people use Visio to do this.

What would be ideal for Graffle is if we could have a stroke option
that simulates squiggly or jitter line effects in a future release.
Please consider this a vote from the many of us who are asking how to
do this on the design mailing lists.

I've updated the OmniGraffle Wireframe stencils. In this release the following elements have been added or updated:

* New callout styles added
* New forms elements added: contextual help, captcha
* Tabs and controls added
* Some commonly used icons have been added

I think I will have more of the icons to come, and may eventually separate the icons from the wireframe stencil if there ends up being too many. Since the set is small for now, I'm keeping it in this document.

Download the updated stencil now.