RSS
 

Posts Tagged ‘information architecture’

Website Wireframe resources for offline work

29 May

Wireframe Notepad

Wireframe Notepad

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

 

Other useful resources

 

Pencils, pens & markers

Wireframe Pens
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

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.

 

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.

 

Justinmind Prototyper

23 Mar

It was build to help create interactive prototyping tools and allows you to define actions simply by selecting the object and applying an action to it. You also have the ability to create variables which can be interesting for development point of view.
Two key features that made me use this software more than once is the ruler with pixel units and the grid which are fundamental for anyone wireframing a website or application and some simply don’t understand the importance of pixel units. Even tough on JustinMind Prototyper the ruler only shows units from 50 to 50 pixels (0, 50, 100, 150, etc).

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

 
1 Comment

Posted in Tools

 

What is Information Architecture

09 Feb

Although it may seem as a parody, and kind of is, it still passes the message.

When you speak about Information architecture (IA) regarding websites you are refering to the conceptualization the website layout. An Information Architect has the function to, just like a real architect, create the most usable environment for the users. They do not design, they do not program, they build and develop concepts.

For more about Information Architecture or IA visit Wikipedia’s page about the subject.

Referral: http://en.wikipedia.org/wiki/Information_architecture

 
 

From wireframe to design

02 Feb

A very important aspect when you wireframe is that the designer should feel comfortable and understand the idea you want to pass to him and not get stuck to the display of the wireframe. Meaning that a square doesn’t need to be a square, the designer should be creative.

The video was create by Michael Leis and as he describes on the youtube video page wireframing is defining a communication strategy and I have seen many wireframes that although with interesting concepts, best practices, good architecture and so on many times lacks on communication.

Increasingly, as designers of interactive systems (spaces, processes and products for people), we find ourselves stretching the limits of communication tools to explore and document what it will be like to interact with the things we design.

We describe wireframing as a form of design communication that enables stakeholders, team members, users and clients to gain first-hand appreciation of existing or future problem spaces and solutions.

We create wireframes to inform both design process and design decisions. Wireframes range from sketches and different kind of models at various levels of fidelity looks like, behaves like, works like to explore and communicate propositions about the design and its context.

We think that the wireframing strategies user experience designers use are often constrained by the tools they feel most comfortable with: problem space, domain, expertise, theme, context of problem, bias towards types of design tools and documents, timeliness of artifacts created. For this reason, a session that attacks one business problem from the perspective of four different designers will provide attendees with a unique understanding and set of strategies and tactics to improve their own practice.

 
 

Collaborative Sketching & Prototyping done right

27 Jan

To be honest from what I’ve seen collaborative prototyping isn’t that collaborative. Normally there’s one specialized individual making wireframes according to what they find to be best practices on the web. What happens in most cases is you talk to one maybe 2 people and say “Hey what do you think?”, when everything seems right you pass it to design and tell them to work their magic. So collaborating your work with other people that will certainly suggest something that goes against what you find to be the best practices doesn’t sound that exciting. At this point you have spent some time prototyping and decided to pass it to design and suddenly someone from marketing looks at it and understands that what the client wants from a certain part of their website is something a little different from what you prototyped. What do you do know? I’ll leave that question for you to answer.

The following video is a 24 minute presentation by Todd Zaki Warfel on Washington University where he shares his insights on collaborative web prototyping and the importance of collecting multiple insights from all the team members to help you achieve an improved result.

If you are interested in knowing more about this subject please consider visiting my article on website wireframes.

Also consider acquiring Todd Zaki Warfel book Prototyping: A Practitioner’s Guide, it’s a very interesting reading that provides you with insights on prototyping, the tools used and basic help to those getting started.

 
 
 

Page optimized by WP Minify WordPress Plugin