Konigi has been one of my favorite websites when it comes to IA related subjects. On top of that Konigi also sells some interesting products. The Wireframe Notepad is a paper block containing contains 50 sheets of paper (8 1/2 x 11 inches (~ 21 x 27 cm)) with grids created specifically for sketching wireframes.

The grids are drawn with a non-photo blue (cyan) ink that allow you to scan the sketches without the grid. Also the 24 columns grid system makes it compatible with CSS grid frameworks.

The biggest upset come when you want to order it. It’s only available in the US.

Cost: $9 each block (50 sheets)

Alternatives to Konigi’s wireframe notepad

• Paper Browser – A free grid system with 960px width separated by 32×32 pixel squares. The paper is proportionally scaled for 1024×768 screen resolution.

  It comes as a PDF format so you can use it for digital work or simply print it for sketching.

• Browser Sketch Pad by UI Stencils.Cost: $9.95 (each Pad comes with 50 sheets)

  Download PDF format:

  • A4 Browser Sketch Pad Template
  • Letter size Browser Sketch Pad Template

Other useful resources

• Free Printable Sketching Wireframing and note taking
• A Collection of Printable Sketch Templates and Sketch Books for Wireframing

Pencils, pens & markers

photo by pigpongm

A while ago I remember reading about Pencils, Pens & Markers Sets used for offline wireframing.
Personally I’ve been in love with a Staedtler Noris H3 pencil for years. I’ve tried other models and brands but this one is the special one for me. I also own some coloring pencils of a brand called Milan and I find them great.

Usually if you are sketching wireframes you are not supposed to use color, but when sketching with paper you might want to describe certain actions or add notes and color can help in certain concepts of your visual information.

On Wireframe Magazine post they point out the most popular brands for wireframe hand sketching are Copics, Tombow and Primacolor. Unfortunately they are also some of the most expensive.

Website Stencil Kit

Although this resource kind of goes against the main idea of this post, practice productivity by hand drawing freely, sometimes, as information architects we need to do accurate straight-line sketches.
UI Stencils has this really cool set of kits of website stencils, iPod stencils and iPad stencils for offline sketching.

The includes a stainless steel stencil with commonly used iconography and a pixel based ruler, a Zebra Mechanical pencil, 2 UI Stencil stickers and a downloadable .PDF letter or A4 paper template.
Personally I like to sketch freely although having a notion of space, especially compared to

My personal resources

Although I made this list based on what some of the most known people in IA and UX use for their work, my personal resources are a bit similar but from different brands and economically more accessible.

• A4 Ambar drawing block
• Staedtler noris H3 and B2 pencils
• Uniball UM 100. The Uni-ball eye needle UN-167 also seems interesting.

It’s a very basic stock, I’m always trying to keep expenses down. On the other hand it’s important the people you work with, co-workers and clients, get a good impression from you and your work. I was fortunate enough to get a free wireframe notepad at UX LX, courtesy of London User Research Centre, afterwards I bought a decent set of pens and pencils.

Sometimes I print Paper Browser or this wireframe template by Alfonso Bozzelli for some quick sketching. Problem is that if I draw the whose website on these templates, clients usually think this is how it will show on their screens with no scroll. A quick workaround is drawing a straight line and explain what is above and bellow the fold.

I guess I’ve covered the basis for offline wireframe sketching. There are some color and visual concepts to be considered but that will be another post

I’d love to get feedback from you. Feel free to add to this post. Leave a comment.

If you are looking to take your project beyond wireframing you might like to create fluxograms with the Scenario tool, comment on your project and define the requirements which help creating the project documentation.

It’s a very complete, useful and functional tool but there are too aspects I must refer to and hopefully JustinMind Prototyper developers will implement this in the future:

1. Importing new widgets or stencils. One thing that makes OmniGraffle so grate is the possibility to use stencils created by others. This can make the difference for very boring wireframes to sexy wireframes. For what I’ve tested you can create your own widgets as long as they are in image format. In wireframes presentation is 80% of captivating your client.
2. Fluid workspace. I am forced to work on the reduced canvas area while wireframing. I should be able to put that window on a different monitor.

Link: Justinmind Prototyper

When you allow users to leave there opinions they might want to follow up that conversation. Although it’s possible to do that by subscribing the comments RSS they might want to get email warnings instead.
I’ve been using Subscribe to Comments for years and I’ve found a reasonable number of users subscribing to comments on posts they have given their opinions. Allowing your readers to choose if they want to be warn when there’s an update on a specific post is improving the user experience.

WordPress Subscribe to comments plugin

Users can edit their comments after submitting them

One of the most embarrassing comments I’ve ever made was about 2 years ago on a popular blog. It was past 1am and I was finishing up some work when I did a pause. I read an interesting post about SEO and left my comment. Fortunately I went back to the post again and re-read it. I ended up noticing that the comment I had left was pure nonsense. I wish I had the chance to change that. Would save me some embarrassment.

For that you have a plugin called WP Ajax Edit Comments which allows all users to edit their own comments without the need to be registered or logged in.

Better printing experience

One other subject I take in consideration is printing. The most common practice when someone wants to print an interesting post is printing the whole blog layout or printing a selection. But the best practice is when a user chooses to print and will only print what he wants.
For this you have two options:

1. Create a specific CSS for print
2. Use a plugin for that effect

Personally I prefer to create a specific stylesheet for print and apply the layout I want. But WP-Print plugin does a terrific job
and it’s a very good alternative for hand-coding your printing styles.

iPhone, Cell Phone, PDA navigation

Recently I just ended my mobile internet contract. The reason is quite simple, I don’t use it that much and when I do I don’t really get to visit the websites I want. Smashing Magazine has a mobile version of their website but, for example, Abduzeedo doesn’t and when I tried to reach it with my mobile phone it jammed it with too many images, javascript and information that I didn’t want to see.

WordPress Mobile Pack plugin will help you adapt your WordPress site to mobile browsers and not just iPhones.
Again you can do a specific CSS stylesheet for the effect but the plugin covers that very well.

Speed up your website

How often do you visit websites and when they take too long to load their content you simple leave them? This is common on websites that are hosted on shared servers and have a considerable amount of traffic.
When someone visits your site or blog the server gets requests to display everything on that page. When you have a site with heavy images or simple allot of images it’s normal that page loading time takes longer than it should.
Fortunately for WordPress powered sites there’s WP Super Cache that will cache the pages making the loading time faster thus improving user experience on your website.
For small websites or pages with little content or not so rich in images you might not notice much difference.

Give users a quick navigational reference with a Sitemap

Usually when you speak about sitemaps on WordPress you are refering to XML Sitemaps for Google Webmaster Tools, Bing’s Webmaster Central, etc. In this case I am speaking of a page with a reference to existing links on your website.

This is important for 2 primary reasons:

1. Users have a quick reference to categories, pages and posts separated by category
2. Search engine robots have a place to crawl to your posts thus indexing more pages for your website

There are many plugins to create sitemaps on WordPress. Personally I recommend Sitemap Generator WordPress plugin for this effect.

I was a bit suspicious at first since the presentation of the tool is a bit of the same old rubbish when someone tries to sell you something completely normal but want to make it look like an innovative product but I was very surprised and happy with this tool. It really is revolutionary, light weight, allows you to edit images without the need to open paint, photoshop, gimp, illustrator or whatever application you use. It works on Windows XP and Windows Vista as far as I know.

Windows alternatives to Greenshot

• PicPick
• Jet Screenshot
• Jing
• Lightscreen

This project is created and maintained by Torsten Posselt, Frederic Gmeiner, and Benjamin Maus.

Extracts of local distance

The following video will show some of Flash CS5 gaming capabilities and, starting at 3min50sec, an introduction to Flash CS5 physics.

For more information on Flash CS5 you may consult Adobe Technologies page on Flash CS5

Image Recomposing / reshuffling

Image recomposing allows you to move parts of an image around and attaching it to other parts of the image. This allows you to create a completely new image effect simply by drag and drop method.

Image Completion / Inpainting

There was a time when removing foreign people and objects from an image had it’s dificulty. The new algorithm allows you to remove objects from an image quick and simple.

Image re-targeting

Adobe also implemented the directional similarity algorithm that simplifies repetitive structures with additional constrain tools to achieve better results.

The following video explains and shows Image reshuffling, In-painting and Image re-targeting methods:

Unfortunately if you notice the message in the end of the film, Photoshop response time is not as quick as seen on video as Adobe explains:

Except where noted, all image updates are shown in real time using 2 CPU cores for synthesis.

Some user interactions (Drawing paint strokes & lines) have been sped up by 5x for brevity.

Which means that this algorithm will eat your CPU heart out when you try to use it. Unfortunately this means I can’t test CS5 at home.

For more information visit the following links:

• http://www.cs.princeton.edu/gfx/pubs/Barnes_2009_PAR/index.php
• http://www.adobe.com/technology/graphics/patchmatch.html
• http://blogs.adobe.com/jnack/2009/10/video_new_from_adobe_labs_content-aware_fill.html