Information Architecture


Sketches are often better tools for communicating designs than high fidelity illustrations or schematics. The purpose of the sketch style wireframe is to prevent the intended audience from thinking about visual design and focus on the functionality and behavior you are proposing.

I'm happy to announce the release of this set of sketch stencils for OmniGraffle, based on the Wireframe Stencil. This set of user interface sketch stencils is designed for OmniGraffle 5.x. OG4 users are able to use the stencils by changing the .gstencil extensions to .graffle. The sketch kit contains all of the UI elements you'll find in the free Wireframe Stencils we provide at Konigi, plus additional shapes and elements to make it easier for you to adjust to this style of wireframing.

As usual, I'm sticking to the goal of keeping the tools on this site inexpensive or free. Your $10 purchase of this stencil set entitles you to free upgrades forever.


I'm pleased to announce the first of a series of products that I'm producing for creatives involved in design for the screen. The first 2 products are graph paper notepads formatted for user interface design and design of time-related sequences.

The Wireframe Graph Paper Notepad is made for visual designers, interaction designers, and information architects designing for the screen. The notepad has 50 sheets at 8 1/2 x 11 inches on white 70# paper, glued on the left side. The ink is a non-photo blue (cyan) so that the grid lines and any sketch lines made in non-photo blue pencil can be knocked out when scanned and processed in graphics software.

The Storyboard Notepad is made for creatives who think about interactions over time, whether doing user interface or interaction design or planning video, film, and animation sequences. The notepad has 50 sheets at 8 1/2×11 inches on white 70# paper, glued on the left side. The ink is a non-photo blue (cyan).

You can find out more about these products at http://konigi.com/store. Due to several large advanced orders supplies are limited.

I welcome your feedback!

I've updated the OmniGraffle Web Design Template for OmniGraffle 5 and the document is now being maintained at Konigi. Check it out, Grafflers.

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.

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.

This is the presentation I gave at DrupalCon Boston on March 3, 2008. 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.

The videos on slides 24 and 25 could not be embedded in the slide player, so I've embedded them separately below. Thanks to all who attended and came up with their comments and questions.

Download PDF

Wireframing with OmniGraffle

OmniGraffle Wireframing Demo from jibbajabba on Vimeo.

Prototyping with OmniGraffle

OmniGraffle Prototyping Demo from jibbajabba on Vimeo.

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 means "to make known." Before I started on this project 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.