• Building a Wireframe in Illustrator – From AiBurn – a step by step tutorial.
• Grey Box Method from Jason Santa Maria (the method i personally use).
• The 960 Grid System – Streamlines web development workflow and allows for rapid prototyping.
• The “Boxing Glove” Wireframing Technique – Very basic, quick sketches that force you to draw only the most crucial parts of the user interface.

• Omnigraffle – Create diagrams, process charts, quick page layouts and website mockups
• Visio – Visualize, explore, and communicate complex information.
• Protoshare – Collaborate online wireframe tool with real time communication and clickable wireframes.
• Balsamiq – Easily and quickly created rough mockups with predefined elements
• iPlotz – Quickly sketch wireframes of Web sites and demonstrate navigation between pages
• Lovely Charts – Diagraming app that allows you to create site maps, flowcharts, wireframes and more
• Jumpchart – Online collaborative wireframe
• Axure – Rapidly create wireframes, prototypes and specifications for applications and web sites.
• Gliffy – Create website wireframes and share web mockups with anyone.
• MockupScreens – For the Non-Designers, allows you to sketch and organise screen mockups.
• EasyPrototype – Works with your existing techniques such as paper sketches, Photoshop mockups etc.
• Justinmind – Design a wireframe and test their web usability
• OverSite – Provides a menu of widgets to create wireframes, or mockups with drag and drop features.
• Fluid IA – Agile UI Prototyping
• Pencil – Free sketching & GUI prototyping tool, can be installed as a Firefox add-on or as a standalone application.

• Wireframes Magazine (A must Bookmark)
• Jesse Bennett-Chamberlain – EPC Interface
• WordPress 2.7 Interface Wireframes
• Redesigning the ExpressionEngine Site
• Sketches, Wireframes & CSS
• DoTheRightThing.com – Version 2 Wireframes

• The what, when and why of wireframes
• The Importance of Wireframing
• Wireframes, Blueprints of the Web
• The How and Why of Website Wireframes
• Wireframes: An Indispensible Part of the Web Design Toolkit
• Quick and Dirty Wireframes
• 20 Steps to Better Wireframing
• A Focus On Wireframes & Layout
• 5 Reasons Why Wireframes Are Critical to Your Site’s Success
• Wireframes – illustrating design strategy
• Wireframes: Struggles and Solutions, Part 1 and Part 2
• Deliverables That Work: Design Description Documents
• Design with Wire-frames – expand your creativity by restricting it!
• Working with Wireframes for the Web
• Improving Your Process: How Wireframes Can Help
• Wireframing Guide for WordPress Theme Designers
• Real Wireframes Get Real Results
• Tutorial: Functional Specification: Wireframes & Mockups
• Design before you build with wire frames (For Web Apps)
• Using Wireframe Prototypes to Improve Visual Flow & Web Page Layout
• Presenting Information Architecture
• Interactive Wireframes and Polypage

• The Paper Version of the Web
• Sketchboards: Discover Better + Faster UX Solutions
• Paper Prototyping (A List Apart)
• Lo-fi Prototypes Yield High Returns (The sketching process)
• Graph Paper – Paper grid for wireframing user interfaces
• Improving the transition from paper to Photoshop

• Wireframe Works – Practical Tips & Resources
• Creating an Effective Wireframe (Video)
• Information Architecture Flickr Set
• Wireframes for the Wicked (Slideshare)

• Sketching User Experiences
• Communicating Design: Site Documentation for Design & Planning
• Paper Prototyping: Fast & Easy Way to Design & Refine User Interfaces
• Information Architecture for the World Wide Web
• Information Architecture for Designers
• Web ReDesign 2.0: Workflow that Works

Wireframe close web

Wireframe Company Profile Website

iPhone Wireframes for Car Care App

UX Design Wireframing

Win8 Sports App Wireframe

Restaurant App

Weather App

Trendlinks – Social Network

GUI design with sketches

Sitemap Wireframe

Game App

Wireframe Studies / UI/UX

Site Hierarchies for websites

UI Wireframes for a Todo List Mobile App

Teacher’s app wireframing

Youtube Wireframes

Responsive Wireframe Design

Source: http://goo.gl/9arR2v

Wireframing is a crucial step in web design and development as it allows for rapid prototyping and helps to pinpoint potential problems early in the process. It can be invaluable to have a visual representation of content, hierarchy and layout.

Wireframes make it easier to communicate ideas, reduce scope creep, cut down on project costs (due to fewer design revisions later), and enable greater upfront usability and functionality testing.
This post highlights 10 of the best free wireframing tools available, including standalone applications, web-based tools and browser add-ons.

If you're partial to a particular wireframing tool available for free download, let us know in the comments.

1. Mockingbird

Mockingbird is a web-based beta software based on the Cappuccino framework to create, link together, preview and share wireframes of your website or application.
It's a clean and user-friendly interface, with drag and drop UI, interactive page linking, smart text resizing and the ability to easily share mockups with clients or colleagues with a direct link, make Mockingbird one of the best wireframe tools available.
As it's web-based, it means you can create and share mockups from anywhere. It will be interesting to see just how good Mockingbird is when it comes out of beta and the full version is released.

2. Lovely Charts

Lovely Charts is an online diagramming application, that allows you to create flowcharts, sitemaps, organization charts and wireframes.
One of the key features is the application's ability to make assumptions based on the type of diagram you're drawing, and thus streamline the drawing process. The History management feature is extremely useful, keeping 20 states of your diagram in memory should you wish to go back to an earlier version or undo any changes.
There is a powerful yet simple tool set provided, with an extensive library of crafted symbols to suit most requirements.

3. Cacoo

Cacoo is a user-friendly online drawing tool that allows you to create a variety of diagrams, such as sitemaps, wireframes and network charts.
The drag and drop UI means creating diagrams is relatively simple; there are also a number of stencils to utilize which could make the process even more efficient. Unlimited Undo is a neat feature with the history of all modifications saved, meaning you can undo right back to the start.
Numerous users can also work on and complete the same diagram simultaneously with the application supporting real-time collaboration.

4. Gliffy

Gliffy is a web-based application which allows you to create process flow diagrams, org charts, floor plans, business processes, network diagrams, technical drawings, website wireframes, and more. It uses a drag and drop UI with the ability to add boxes, buttons, and lines from the tool shape library to anywhere on the page. Then you can easily add text to create a clear, concise mockup.
You have access to a complete library of shapes and can even import your own images, like logos and backgrounds, to complement your diagrams. You can share and collaborate with anyone, on any platform, in any location, while having the ability to protect and track changes.
The Gliffy API (beta) also makes it possible for developers to add Gliffy diagramming features to their existing web-based applications based on a simple to use framework.

5. Lumzy

Lumzy is a mockup and prototype creation tool for websites and applications. You can add events to controls, place controls inside other containers and emulate your project with easy page navigation triggered by user actions.
Real-time collaboration is one of the key features, with tools for team editing, a chat engine for deliberating over designs and file versioning. Lumzy is also the only mockup tool with a real image editor built-in — simply grab any picture from your drive and edit it, apply hue, saturation, adjust contrast, and so on, and then add it to your project.
The Pro version is white label and can be integrated into an existing platform or hosted on your own server which may be of interest to companies working with confidential information.

6. Mockflow

Mockflow is a web app based on the Adobe Flash Platform. It has a clean, minimalistic, organized interface and the editing feature-set set is extensive.
You drag and drop components into a mockup to create the wireframe with the ability to add pages and map out an entire site and it’s structure. The built-in components are extensive, from charts and ads to menus and dropdowns. The ability to upload your own images to use, as well as the option to choose from a set of stickers of common site elements, such as social networking and e-commerce images, make the process of ‘building’ the mockup pretty efficient.
You can talk over the real-time chat and invite others as editors or viewers, depending on the level of editorial power you'd like each member to have. Editors have the ability to make changes to the wireframes, while viewers are limited to reviewing and commenting.
The MockStore is a wonderful add-on service that provides third party components and templates shared by the user community.

7. Pencil Project

The Pencil Project is an open source tool for making diagrams and GUI prototyping that everyone can use. It's available as a Firefox add-on or as a standalone application (Linux and Windows only). Pencil essentially installs an entire drawing application into your Firefox browser and gives you the ability to display, save, and load an external canvas, together with a palette of shapes.
Of interest is the Stencil Generator which allows you to create your own collection of stencil shapes by pointing the generator to a folder of image files. The Clipart tool lets you search through the library at openclipart.org and directly drop the images right into your Pencil document. Pencil also supports the use of external objects; both raster and vector images can be imported using copy-paste or drag and drop.
The final prototype can be exported as a PNG image, web page, OpenOffice file, PDF or DOC file. If you're a dedicated Firefox user, then Pencil could be an essential tool for visually expressing conceptual ideas on the fly. It even won the Mozilla award for 'Best New Add-On' in 2008.

8. SimpleDiagrams

SimpleDiagrams is a small desktop application that helps you express your ideas quickly and simply with just enough functionality to describe a thought or capture a process. It's built on the Adobe AIR platform, so will run smoothly on Mac, Windows and Linux.
You can drag, drop and size symbols from libraries, add photos and post-notes and export your diagram to PNG.
It may not be a fully-fledged diagramming tool, but because SimpleDiagrams is so basic, you will be creating wireframes or diagrams within minutes.

9. Denim

Denim is a free multi-platform desktop app that supports sketching and allows design at various refinement levels. It's an efficient tool for early stage brainstorming and wireframing.
Two main features within Denim are Components, which enable you to create widgets that can be reused and Conditionals, which allow you to create transitions between pages depending on the end-users' actions, resulting in a more interactive experience.
It's a simple yet effective tool and allows for easy annotation using editing gestures.

10. Website Wireframe

Website Wireframe is a very simple web-based tool for building wireframes in a matter of minutes. A link to view the wireframe can be sent through email, instant message, or mobile phone, and then the wireframe can be easily updated based on feedback, discussion, ideas and suggestions.
The key to this tool is the simplicity of usage, lending itself to speed, both in wireframe creation and sharing. It is free to register and use and works in most modern web browsers.
It may not be particularly sophisticated, however it's simplicity and efficiency is perfect for those who want an alternative to tools with a higher learning curve.
Are you currently using any of these tools? If so, please share your thoughts and experiences in the comments below.

Source: http://mashable.com/2010/07/15/wireframing-tools/

A wireframe is a visual guide that portrays how a page or screen of a website or system may look. Wireframes can range from very unfinished and ‘sketchy’ in appearance, to very polished looking and reflective of how the system will look at 100% completion. Using wireframes can help determine:

• The structure of a page or screen
• The layout of content
• The functionality available
• Calls to action
• Blocks of text
• User interface elements
• Graphic design touches

The beauty, and power, of a wireframe is that almost every single one is different. Some are used for broadly outlining the structure of a page, and nothing more. Others might consist of a piece of paper with rectangles on it. At the other end of the scale, a very polished wireframe could indicate structure, content, functionality, and even elements of graphic design.

When Are They Useful?

Wireframes are extremely useful in the following situations:

• To quickly get ideas down on paper for soliciting feedback. This is the real ‘back of a napkin’ use of a wireframe, and can it can be useful in a workshop to document ideas (Use a whiteboard or computer screen, and draw up something rough). The very act of creating this image, this basic wireframe, will prompt people in all kinds of useful ways.

This type of wireframe is often referred to as ‘lo-fidelity’. It can be a few boxes drawn in felt tip, a pencil approximation of a full page, or a computer drawn illustration. The idea though is it doesn’t look finished, because invariably, it isn’t.

• To communicate the specification of a system or website. This is the ‘a picture paints a thousand words’ concept. Communicating how a proposed system, website, or even simple page of content, should work and look is never as easy as it seems at first. Drawing a wireframe, with the various states outline and suitable annotations, can save a lot of time writing complex paragraphs.

This type of wireframe is often referred to as ‘hi-fidelity’. It normally looks like a recognizable page and can often be very ‘designed’, but still sticks to the core of idea of being an approximation.

Introducing Clients to Wireframes

One area to be careful of is when introducing the concept of wireframes to clients. As we have discussed this is one of the key uses of a wireframe, however, depending on the client, a bit of an introduction might be required first in order to avoid confusion. This is often realized by first explaining what a wireframe isn’t, rather than what it is. Overall, a wireframe isn’t:

• A finished concept
• A graphic design
• An indication of content (text, images, etc..)
• Necessarily indicative of final layout

A designer friend often likes to amuse his colleagues with the story of a client who, after being presented with the wireframes for a new website, said: