Advertise here via BSA

Formerly the Weekly Seven Plus or Minus Two, we’ve decided to follow our own advice and title our weekly post by its content to give our readers some context. This week is all about wireframes. Some of us prefer to sketch, some use designing software like Photoshop or illustrator, and some lean more towards prototyping specific software. Regardless of your preference we’re sure you will find value in the following five wireframing resources.

50 Free UI and Web Design Wireframing Kits, Resources and Source Files

This list of wireframing design kits come to you from our friends at Smashing Magazine. Browsing through this list we’re sure you’ll find a resource you will use.

Here’s the Link!

35 Excellent Wireframing Resources

Another great list from Smashing Magazine! This one includes 35 different methods and tools available.

Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design. But if done inefficiently, it can end up costing more time and can even create bigger headaches for both the client and the designer.

Here’s The Link!

10 Completely Free Wireframe and Mockup Applications

Free is great when you’re budget conscious, but free doesn’t always mean quality. Here is a list of ten Free tools that are surprisingly robust.

Every web designer and developer should have a good and reliable wireframe (mockup or prototype) tool at their disposal. The importance of such a tool differentiates amongst web designers and developers, some use them, some don’t. Personally, I use them. It is in this initial stage of development that makes web design enjoyable, the coming together of the clients needs and your own creative ideas onto a blank canvas, allowing you to plan effectively the visual arrangement of the sites content.

Here’s The Link!

Free Web UI Wireframe Kit

Straight from yours truly, Fuel Your Interface recently gave away a free UI wireframe kit, and while there are many great freebies out there, this is a very comprehensive kit… And you just can’t beat free!

Sometimes you don’t need to build interactive wireframes, or may not feel all that comfortable in Visio or OmniGraffle. I know here are times I just want to open up Photoshop and start laying things out.

This web UI template kit is made completely with shape objects and in some cases converted into SmartObjects. So they’re totally scalable.

Here’s The Link!

Designers Toolbox

This is probably one of my most “go-to” resources when I need something a little more than a sketch or a “designed” UI element. Designer Toolbox has a lot of great UI and wireframing resources from a range of browser elements and “websafe” area templates to HTML code for glyphs,punctuation, and currency. It even has a Lorem Ipsum genterator. Next time you need radio buttons for Safari, IE and Firefox, Designers Toolbox will be the bookmark you hit!

Here’s The Link!

Advertise here via BSA

Sometimes you don’t need to build interactive wireframes, or may not feel all that comfortable in Visio or OmniGraffle. I know here are times I just want to open up Photoshop and start laying things out.

This web UI template kit is made completley with shape objects and in some cases converted into SmartObjects. So they’re totally scalable. There are no usage restrictions but if you find them helpful give us a shout. We love hearing from you!

CLICK TO DOWNLOAD

Advertise here via BSA

It’s Contest Time at FYI

Okay ladies and gentlemen, you’re reading right. It’s contest time. And the entry is about as easy as it gets! The prize is two licenses for JustInMind Prototyper, a wireframing tool that can be used to quickly and easily map out your application-based interfaces. There will be TWO winners! JustInMind is full of features that you (being the interface-creating geniuses that you are!) can use to build rich and beautiful, perfectly functional interfaces.

So here’s what you do:

1. Go download a copy to try out.
2. Come back to this post and respond with a comment of how you would use JustInMind, and state your case: why do you need a license for JustInMind? Also, include some kind of reflection on your trial use.
3. We will deliberate. The comments must be posted before 11:59 PM EST next Wednesday.
4. WIN! (or lose… but hey, you can’t win everything…)

And THAT’S IT! Tell your colleagues, Twitter peeps and Facebook friends to come join in for a chance to win!

IMPORTANT:
Remember, keep the subject of the comments about yourself. Or if you’d like to positively vote towards another person, that’s welcomed as well. Nothing along the lines of “Billy Bob shouldn’t win because I think he is a horrible designer.” These kind of negative comments will be removed and will disclude you from the contest.

Advertise here via BSA

We have talked a lot about the purpose of an interface. Let’s review quickly to catch people up.

• An interface is the communicator between two different mediums of information; these mediums can be seen as senders and receivers, and may change from one to the other. Without the necessary interface, the information could not otherwise be transferred between the two mediums.
• Interface design is based primarily on function and purpose.
• Interface design should consider the economics of decision-making (people will take the shortest route to achieve a goal unless there is some kind of profit in taking a longer route).
  Creativity is secondary to functionality.

Okay, so we know all of these things. How do we go about making sure the interface we design meets these goals?

Information Architecture

This is a term that hasn’t necessarily been around for a long time. However, the practice of information architecture has been around for thousands of years. Information architecture, at its core, is the structuring of information. Surprised? Neither are we. But what a lot of people don’t know is that information architecture is the derivative of every decision made in the process of interface creation/design. Information architecture is the very beginning and core of any project. It helps define the who, what, where, how, and why of any endeavor. Some tangible pieces of information architecture include the wireframe/map of a website, library categorization/organization systems, and tables of contents. Why is this important to interface designers?

Centrality

For the interface to be effective, it needs to have a strong sense of centrality. This again is alluding to the functionality of the design. For centrality to be possible, there must be a system set up for structured creation so that content (meaning the actual design or execution of the interface) remains pointed towards the final goal. The backbone of a purposed design is the information architecture.

Things to note

1. “Architecture” in terms of information architecture is dynamically expandable
2. Information architecture is not limited to categorization. It can also include anything that steers the direction of the information (such as a mission statement, branding strategy, or goal set)
3. Information architecture is the setup of a system, not the content of the system itself.

With these things in mind, information architecture can be viewed as a conceptual or physical framework in which to build your interface. Information architecture, when practiced correctly, will allow for more functionality and expandability.

Get a little more practical, please.

Okay, so this all is a little conceptual so far. How about the practice of information architecture? How can you as an interface designer use these concepts to better your profession? Let’s look at the metaphor of the building of a house to understand a bit more about information architecture.

THE FOUNDATION
First and foremost, define the goals and the purpose of the design. This is a very important starting point for your architecture. Consider it your concrete foundation.

THE STRUCTURE

Next, consider all possibilities of the user experience. (This is particular to interface design, as not all architectures will require the consideration of “users.”) Put yourself in the position of the user, and ask yourself what all you need to achieve upon interaction with the interface. This will help define the rules of the interface, which is the structure of the house itself. The two-by-fours, if you will. As the rules are placed, you will begin to see how these different rules interact with each other, narrowing the decision-making process for you as the designer.

THE WALLS
Finally, once you have placed the rules, you will now have a framework by which to create your design. Consider this the sheetrock. The design itself will adhere to the rules and will never leave the goals and purpose (foundation).

THE DECORATION
Once the design has been created functionally, you now have the option of decorating it. You would never put a table blocking a hallway, would you? No, of course not. You still want the hallway to function as a hallway, and the kitchen to look like a kitchen. In the same way, you shouldn’t allow your artistic addition to a design stand in the way of its functionality. (For more on this, check out this post).

Conclusion

This post is not an attempt to give a full definition of information architecture, nor to go into detail of every facet of its applications. It is instead meant to shed light on the importance of information architecture systems when approaching the design of any user interface. What have you found through your use of information architecture systems? What are some creative applications for information architecture that have proven to substantially increase your productivity?