Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 04 2010

13:30

Wireframing: Tips, Tools, and Techniques (Pt 2)

Alt Desc

Picture: War of the Roses by John Manoogian III

Like with wireframing tools, there hasn’t been much consensus on wireframing technique. There are lots of different approaches which range from quick and dirty 30 second thumbnail sketches, to Hi-Fi wireframes using Illustrator, to creating wireframe mockups in HTML.

Techniques

Quick and dirty

The quick and dirty approach is especially useful at the outset, as it allows for the broad outlines of the design to be put in place very quickly. The intent is to avoid getting bogged down in small details and just sketch out the big picture, i.e. wireframing with a sharpie or with a boxing glove on. Avoid obsessing over minutia. Instead, as Harry Brignull put it, focus on the:

  • Proposition – Is the overall idea useful?
  • Concept – How does it deliver value?
  • Context – Would it fit with the other things the user is doing, e.g. before and after using it?

Hi-Fi Wireframe

Though anathema to some, there can be real value in fleshing out your 30 second sketch so as to more accurately tests interactivity, dimensions, font sizes, and padding. There are definitely pitfalls with this approach: time can be wasted and the creativity of the designer can be stifled. Additionally, if wireframes look rough and ready, then they communicate to the client that this is a relatively early stage of the process and they should provide high-level feedback (concept/design). Hi-fi wireframes generate much lower-level feedback (small details).

That said, as long as you consider the impact that fidelity has on feedback, hi-fi wireframes can be a great way to tease out potential issues at an early stage. They work well for early user testing (requiring less assumptions to be made by the test participants) and are invaluable if site development is being outsourced (since developers typically require very detailed instructions). Finally, this approach also presents a great opportunity to begin incorporating a grid system into your design.

HTML Wireframe

There is a growing band of designers who create their wireframes in HTML & CSS. This can be a real time saver later on. Additionally, text rendering within image editors can be hit and miss, so it’s great to be able to get it into the browser. Finally, the website exists to communicate ideas, these ideas are usually driven by content, and so design should follow content. By starting early in HTML & CSS, it’s possible to add the content in and design the site around it.

Putting it all together

I see the three techniques listed above as part of a continuum of approaches. Each has its place and can be useful for different projects or at various stages of the design process. While I don’t typically use the full-on CSS and HTML process espoused by Megan, I do like to embed my wireframe images in a little HTML so they can be displayed in the web browser, opening up the possibility of adding some interactivity. Most importantly, however, is that by presenting them as hosted HTML you can share them with clients or user test participants. No need to worry about people being able to receive attachment or open files. Best of all, you retain the power to tweak and refine them whenever you want.

An example of this type of wireframe setup can be seen here.

I usually include one very basic interaction: click anywhere on the mockup to cycle through to the next wireframe. If I need anymore interaction than that (i.e. functional top navigation), I jump back into Fireworks and add some hotspot links.

Here’s a download link to my simple wireframe HTML and CSS framework files. I use these as the starting of point for my wireframe presentations. To create your own you’ll need a tiny bit of HTML and CSS knowledge. It’s quite simple: swap out my wireframe PNGs for your own (it’s easier if you keep the file names the same) and then change the width within the CSS file to match that of your images (don’t forget to update the documentation notes at the bottom).

Top 10 Wireframe Tips

To round off our review, we’ll leave you with 10 tips for creating wireframes:

  1. Start Sketching
    Sketch them first with a pencil and paper for a quick sanity check. This should take about 30 seconds and opens up the possibility of getting early feedback. This can save a lot of time and money. The feedback can be gained through peer review or, best of all, from some early and informal user testing (you may need to spend a little more than 30 seconds on the sketches if they’re for user tests).
  2. Focus on Communication
    The key point of wireframes is to communicate. Don’t forget this. Keep them simple and stop working on them as soon as they communicate their key information.
  3. Use Proper Documentation
    Since wireframes are meant to communicate something, provide some accompanying notes. Whenever possible, each wireframe should include documentation, i.e. revision date, author, page title, interaction notes, etc.
  4. Host the Wireframes
    If possible, host the wireframe files yourself, rather than sending them out as email attachments. My preferred method is to export the files as PNGs and then embed them within some simple HTML files. This way they’re easy to share and update.
  5. Don’t Forget the Goal Of the Page
    Keep the goals of the page in mind when designing a wireframe. Focus on driving action. Organize the information into a hierarchy that serves the goal of the page.
  6. Pick Your End Point
    Prior to commencement, work out who will be consuming the wireframes, how they’ll consume and what level of fidelity is required. Remember that there’s a relationship between the level of fidelity and type of feedback. Will quick paper sketches suffice or will they need to be fully interactive with accurate dimensions? Keep in mind: the less precise the wireframes are, the more liberty and creativity a designer is going to take with them. On the other hand, if you they look perfect designers may feel inhibited and merely “color in” the wireframes, preventing the design process from really getting going.
  7. Loop the Rest of the Team in
    Wireframes are not just for clients. All members of the web team should provide feedback on them, buying into the process at an early stage.
  8. Consider the Content
    If your wireframes aren’t sketches then be realistic about the amount of content that will be added to the page. This holds true also for number (and length) of links in navigation. If practical, use accurate sized fonts, images and consider what will happen when more text than is ideal is added. Nothing on the web should be etched in stone, so ask if the design will flow as required.
  9. Use Common Elements
    If designing a set of pages, use tools that allow you to make multiple changes to all common page elements at once. Moreover, as you’re creating the wireframes, look out for design patterns that repeat. Leveraging these is key to gaining efficiency and consistency.
  10. Get Feedback
    Don’t be afraid to test your wireframes in a couple of informal user tests. Grab people from around the office and ask them to find various bits of information or explain what they think the function of certain elements is.

November 02 2010

13:30

Wireframing: Tips, Tools, and Techniques (Pt 1)

Alt Desc

Wireframing isn’t just a pen and paper process any more.
picture: Chocolate Tools by Janne M

Wireframes are an indispensable part of the website creation process. They provide a quick and easy means of communicating aspects of the site, ranging from information architecture to page layout, and they allow everyone involved to consider and, hopefully, agree upon all the fundamental aspects of the design.

EDITOR’S NOTE: This article is part 1 in a 2-part series about wireframing. Be sure to check out part 2 this coming Thursday!

A consensus has arisen over the importance of wireframes during the design process. However, no clear consensus has developed about the best tools or techniques to use when creating wireframes. A plethora of different ways have cropped up. So many that it’s hard to know the best way to go about it. A definitive answer to this seems some way off, and so it could be a while before any one tool becomes the standard.

In the these two blog posts, I’m going to look at some of the relevant tools, techniques and tips available. In this post I’ll give an overview of the tools, while the following will cover some tips and techniques to smooth your wireframing process.

Tools

Alt Desc

picture: Chocolate Tools by Janne M

Fireworks

When Adobe acquired Macromedia a few years ago, no one was sure how Photoshop and Fireworks could be reconciled within the same family of products. There was so much overlap between them that it seemed a case of either/or. Quickly, however, it became clear that Adobe was going to push Fireworks in the direction of wireframing and, as a result, the two would complement each other nicely. Adobe intends designers to create rapid, clickable, HTML wireframes within Fireworks and then—once tested on users and approved by the client—move onto creating hi-fi imagery within Photoshop.

And as it turns out, Fireworks is a really great tool for creating wireframes. Through a combination of layers, pages, behaviours, symbols, and an inbuilt library of standard web design elements, it’s possible to quickly create wireframes that can be exported as clickable HTML. The HTML is not the type you’d necessarily want to use on a live site, but it does the trick for a client demo.

The learning curve is moderate but once you’ve got your workflow down it’s possible to create wireframes that leverage common elements, enabling easy insertion and rapid updates across multiple pages. This is a godsend when trying to maintain and quickly refine a set of multipage wireframes.

To get a better insight into how this might work, Adobe have some nice Fireworks wireframe tutorials that are worth reviewing.

Google Drawing

This is a reasonably new option for wireframing. As with a lot of the Google tools, it’s a got a limited set of well worked out features. You can create free form vector shapes, edit fill colour and stroke, insert images, and select from a nice vector shape library. You can group objects, set order (z-index), and group select by click dragging. Basically, it’s akin to a really pared down version of Fireworks, but the lack of layers and ability to lock objects makes it a little fiddly. Despite this, Morten Just believes it beats Visio & Omnigraffle.

5 reasons Google Drawings beats Visio and Omnigraffle

  • It’s live. The entire team can work on the same document and see each other’s work instantly
  • The wireframes live in the cloud, no sending files around, no outdated documents
  • The risk of losing data is zero. It saves for every edit you make
  • It’s free
  • Most people already have a Google account, so no sign up required

Best of all, Morten offers up a number of templates / stencils within Google Docs to enable really rapid prototyping.

The work flow for this revolves around the idea that you access the templates provided by Morten, make a copy and then edit away. The working page area within Google Drawing is conceptually divided into two, the canvas and the gutter (the area outside of the canvas). Morten has created numerous handy stencil shapes (scroll bars, popup windows, close buttons, search boxes etc) which you copy from the gutter and then paste onto your canvas. It’s a little circuitous perhaps, but is still a really nice setup given the constraints of Google’s fledgling drawing app.

While I prefer the workflow for Fireworks a little better, the work of Morten Just highlights a key benefit of the Google Docs platform: the ability to collaborate and share resources. As Google fleshes out their product a little more, and as people share resources, Google Drawing is likely to become a viable wireframing tool.

Best of the rest: other wireframing tools

Alt Desc

Picture: tools of the trade by Muffet

Pencil Project

An opensource Firefox plugin with built-in stencils, multi-page documents and background pages.

  • Platform: Firefox Addon / Linux & Windows
  • Price: Free

FlairBuilder

Nice wireframe tool focused on interactivity.

  • Platform: Cross platform via Adobe AIR
  • Price: $99 outright purchase, or $24 per month

Creately

Collaborative tool for creating UML, process flows and wireframes.

  • Plaform: Flash enabled browsers
  • Price: $5 – $10 per month

iPlotz

Creates clickable, navigable wireframes. Also good for collaboration and task management.

  • Platform: Flash enabled browsers and Desktop via Adobe Air
  • Price: Free limited function demo. $99 per year for single user online (volume discount available). $75 for desktop version

Balsamiq

Popular tool for creating wireframes with a nice hand sketched aesthetic.

  • Platform: Cross platform desktop
  • Price: $79

Mockingbird

Great web based tool currently in Beta. It’s completely free at the moment but I’d guess they’ll introduce some sort of premium version at some point.

  • Platform: Browser
  • Price: Free

Tall Tree Wireframe Tool

Super simple wireframing tool with low difficulty curve.

  • Platform: Browser
  • Price: Free

OmniGraffle

The go-to diagramming tool for the Mac. Not dissimilar to Visio in that it’s more than just a wireframing tool and is also great for flow charts, org charts etc. A new iPad version has recently been created and it opens up a whole world of touch screen diagramming loveliness.

  • Platform: Mac & iPad
  • Price: $99

Cacoo

Real time collaboration tool for creating sitemaps, UML, network charts, and wireframes. Produces diagrams that look very Web 2.0

  • Platform: Browser
  • Price: Free (Premium service being introduced in 2010)

WireframeSketcher

Great option if you’re a developer already using eclipse and want to dig into some wireframing.

  • Platform: Eclipse
  • Price: $75 (Volume discounts available)

Visio

High-end diagramming tool. Hefty in price, size and feature-set. Quite technical and probably overkill for wireframing in so far as it can do so much more. It’s a good program though and if you’re working in a .Net environment it really comes into its own.

  • Platform: Windows
  • Price: $250 – $1000

Each of these tools have their ups and downs, and their appropriateness is going to be dependent on your project and work flow. I tend to favor Fireworks and OmniGraffle, but your best bet is to find one that serves your needs and stick with it, since knowledge of a program will always outweigh feature sets when it comes to usefulness.

We’re going to continue the discussion on wireframes a little further within a subsequent post. In Part 2, we’ll examine a few different wireframing techniques and round things off with some tips.

Sponsored post
soup-sponsored
20:53
Reposted byLegendaryy Legendaryy

September 29 2010

16:13

35 Excellent Wireframing Resources

Advertisement in 35 Excellent Wireframing Resources
 in 35 Excellent Wireframing Resources  in 35 Excellent Wireframing Resources  in 35 Excellent Wireframing Resources

By Cameron Chapman

Wireframing is an important part of the design process, one that shouldn’t be overlooked by even the most experienced designers. Wireframes can save development time by outlining exactly how a site should look and function, in a manner that can be shown to and approved by your clients.

But wireframing can be confusing, especially to new designers. What’s the right way to create a wireframe? Is there even a right way? Should I use pen and paper or software? Which software? How long should it take? All these questions and more are answered in the resources below.


Wireframing Articles

The articles featured here discuss wireframing and prototyping both from a theoretical and a practical point of view. If you have questions about how to wireframe or why you should, one of the links below will likely answer your questions.

My Five Commandments for Wireframing
A podcast and article from Boagworld on good practices for wireframing, including why you should wireframe and the benefits of paper wireframing.

Fivecommandments in 35 Excellent Wireframing Resources

Wireframes for the Wicked
Here’s a slideshow that talks about the purpose of wireframes and the different types of wireframes.

Wireframesforthewicked in 35 Excellent Wireframing Resources

Sometimes, the Best Wireframing Tool is a Pencil
A brief post on why wireframing with paper and a pencil sometimes works better than using computer-based tools.

Wireframingpencil in 35 Excellent Wireframing Resources

Why Sketching and Wireframing Ideas Strengthens Designs
This post from SpyreStudios covers why sketching and wireframing your ideas leads to the evolution of good designs.

Wireframingstrengthensdesigns in 35 Excellent Wireframing Resources

The Future of Wireframes?
A post on the evolution of wireframes from functional to visual from Made by Many.

Futureofwireframes in 35 Excellent Wireframing Resources

Wireframing is Not a Religion
A short but impactful piece from 52 Weeks of UX on the different types of wireframes and why there’s no “right” way to wireframe.

Wireframingnotreligion in 35 Excellent Wireframing Resources

UX 101: The Wireframe
A beginner’s guide to wireframing from Viget Advance.

Ux101 in 35 Excellent Wireframing Resources

The Wireframe: All You Need to Know
This is a very basic guide to wireframing, perfect for beginners.

Allyouneedtoknow in 35 Excellent Wireframing Resources

Storyboards vs. Wireframes
This post talks about the benefits and drawbacks of using storyboards vs wireframes.

Storyboardsvswireframes in 35 Excellent Wireframing Resources

The Right Way to Wireframe
This is a fun video from Will Evans that shows the “right” way to wireframe (using OmniGraffle and stencils), as well as some commentary about wireframing. The background music is NSFW (nothing is lost if you just mute the video, though).

Rightwaytowireframe in 35 Excellent Wireframing Resources

Guidelines, Tools and Resources for Web Wireframing
W3Avenue has put together this great resource roundup for wireframing.

Webwireframingresources in 35 Excellent Wireframing Resources

The Power of Wireframes and Mockups
A short piece on the benefits of using wireframes and mockups in your design process. It also briefly discusses the differences between wireframes and mockups.

Powerofwireframes in 35 Excellent Wireframing Resources

The Future of Wireframes
Here’s a great post from MIX that talks about how the web has changed and how wireframes will need to change with it.

Thefutureofwireframes in 35 Excellent Wireframing Resources

Concerning Fidelity in Design
Here’s a post on UX Booth that talks about using the proper level of fidelity in different design deliverables (sketches, wireframes, mockups, and prototypes).

Fidelityindesign in 35 Excellent Wireframing Resources

Where Wireframes Are Concerned
This post from UX Magazine talks about the pros and cons of wireframes, particularly focusing on the drawbakcs.

Wherewireframesareconcerned in 35 Excellent Wireframing Resources

The Value of Wireframing
A post talking about the importance of wireframing and why it makes the design and development process go more smoothly.

Valueofwireframing in 35 Excellent Wireframing Resources

Wireframing is Not Prototyping
A very short article on the differences between wireframing and prototyping.

Notprototyping in 35 Excellent Wireframing Resources

Wireframes vs. Prototypes
Another longer article on the differences between wireframes and prototypes.

Wireframesvsprototypes in 35 Excellent Wireframing Resources

Wireframing and Mockup Tools

Once you have an idea of how you want to wireframe or prototype your designs, it’s time to decide which tools you want to use. The links below feature both software and analog tools for wireframing and prototyping.

Mockingbird
Mockingbird is a simple but powerful wireframing tool for Firefox, Safari and Chrome. There are a variety of paid plans available depending on your usage needs, and they don’t charge you for months where you don’t have any active projects.

Mockingbird in 35 Excellent Wireframing Resources

FlairBuilder
FlairBuilder is a downloadable wireframing program that lets you build wireframes you can then share with clients (there are free online and desktop viewer clients that let them see the files). They offer a free fifteen-day trial, and then can bill monthly ($24/month) or yearly ($99/year). The program includes tools for prototyping websites as well as iPhone apps.

Flairbuilder in 35 Excellent Wireframing Resources

ProtoShare
ProtoShare lets you create interactive prototypes that can include CSS, JavaScript and HTML, and you can add Flash, images, and other files. It also offers real-time collaboration tools with browser-based access.

Protoshare in 35 Excellent Wireframing Resources

MockFlow
MockFlow lets you wireframe both online and offline, and offers a design library addon service with components and templates you can use. You can link pages using a sitemap, creating a clickable prototype.

Mockflow in 35 Excellent Wireframing Resources

Lovely Charts
Lovely Charts is free a wireframing and diagramming tool that lets you create all sorts of professional-looking wireframes, flowcharts, and other diagrams.

Lovelycharts in 35 Excellent Wireframing Resources

Cacoo
Cacoo is a free online drawing tool that can be used for creating wireframes or other diagrams. You can export images in PNG format, though in the FAQs they say they’re planning on allowing export to PDF and SVG in future versions.

Cacoo in 35 Excellent Wireframing Resources

SimpleDiagrams
SimpleDiagrams is an Adobe Air app that lets you build sketchy diagrams in minutes, and includes pre-made design elements. There are free and paid ($19) versions.

Simplediagrams in 35 Excellent Wireframing Resources

Lumzy
Lumzy is a free app that lets you quickly create interactive mockups. It includes live chat and real-time collaboration, as well as a built-in image editor.

Lumzy in 35 Excellent Wireframing Resources

Gliffy
Gliffy is a free wireframing tool that requires no signup and lets you share and collaborate on the wireframes you create. You can also use it to create diagrams and flowcharts.

Gliffy in 35 Excellent Wireframing Resources

Keynote Wireframe Toolkit
This $12 toolkit gives you various elements you need to create wireframes using Apple’s Keynote software. Included are things like form inputs, scroll bars, tabs, breadcrumbs, progress bars, iOS elements, modal windows, and more. The website also offers some tips and tricks for creating wireframes using Keynote.

Keynotetoolkit in 35 Excellent Wireframing Resources

A Wireframe Kit for Google Drawings
Google Drawings is a great tool for creating wireframes, in some ways superior to paid programs like Omnigraffle and Visio. But it was lacking stencils. Not anymore. Here’s a stencil kit that includes a variety of website elements you can include in your mockups.

Googledrawingskit in 35 Excellent Wireframing Resources

Keynotopia Wireframing Set
Here’s another wireframing template set for Keynote, though this one is available for free. It includes controls, breadcrumbs, containers, dialogs, galleries, social elements, and more.

Keynotopia in 35 Excellent Wireframing Resources

10 Free Printable Web Design Wireframing Templates
If drawing wireframes by hand is more your style, then the printable wireframing templates in this collection are for you. There’s everything from printable browser frames to iPhone mockups.

Printablewireframes in 35 Excellent Wireframing Resources

A Collection of Printable Web Browser Sketching and Wireframe Templates
Here’s another collection of printable wireframing tools, this time including UI stencils.

Printabletemplates in 35 Excellent Wireframing Resources

PowerPoint Wireframe Template for UI Design
We’ve already covered a couple of Keynote wireframing templates for Mac users out there, but there are also PowerPoint templates for PC users out there. These include sample screens with various design elements included.

Powerpointtemplate in 35 Excellent Wireframing Resources

Five Killer Wireframe Resources
Here’s a great little roundup from Fuel Your Interface that offers some fantastic wireframing resources, including UI stencils and other toolboxes.

Fivekillerresources in 35 Excellent Wireframing Resources

Wireframe Showcase
Here’s an excellent source if you’re looking for wireframing examples and ideas. It shows not only the wireframe, but also the completed site.

Wireframeshowcase in 35 Excellent Wireframing Resources

September 06 2010

23:04

Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote

Smashing-magazine-advertisement in Keynotopia Wireframing Set: Free Wireframing Templates for Apple KeynoteSpacer in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote  in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote  in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote

Lately, Apple Keynote has been gaining popularity among designers as a wireframing and prototyping tool. Features like multiple slide masters, styles, grouping, animation and hyperlinks make it ideal for crafting interactive prototypes and UI narratives. Today’s freebie, Keynotopia, is a free set of interface elements for Keynote that makes it possible for anyone to create these prototypes in minutes. All elements are hand-crafted in Apple Keynote, and organized in nested groups for easier manipulation and customization. The templates can be used in Keynote 09 and 08 and are designed by Amir Khella.

Start with a blank presentation, and create a new slide for each application screen. Then copy/paste elements from the wireframe templates into your slides, and edit their labels, sizes and colors. To save time, group elements together, and use master slides to share common interface and navigation components across multiple screens. Finally, add hyperlinks to enable user interaction, and use slide transitions to create cool interface animations.

Voila! You now have an interactive prototype that you can test with users, share with team members, and present to stakeholders.

Keynote-release in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote

Download the set for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.

004 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Screenshots

001 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Containers and Dialogs. Large view.

002 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Controls. Large view.

003 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Navigation. Large view.

005 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Galleries. Large view.

006 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Social Web. Large view.

007 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Browser window. Large view.

008 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Application window. Large view.

009 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Lightbox. Large view.

010 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Badges and icons. Large view.

Motivation behind the design

Here are some insights from the designer of the set:

“The first time I’ve used Apple Keynote for prototyping, I was helping a friend create a product pitch for his startup idea. He didn’t have design or development skills, and I wanted to show him how he can quickly put together a click-thru demo in less than an hour, using his favorite presentation tool. He was impressed by the outcome, and I was equally impressed by Keynote’s simplicity and efficiency. I never went back to my prototyping tool since.

Keynotopia was created so that anyone with an idea can quickly test its potential, without having to spend time and money on design and development resources. It’s a simple proof that having the right mindset for prototyping is more important than buying expensive tools.

I also wanted to find a way to avoid writing UI specs. Using Keynotopia templates, I created prototypes that I annotated and shared with development teams, and the response was phenomenal! Time was no longer spent reading, staring at screenshots and imagining interactions; developers and testers were actually having fun playing with the prototypes and providing feedback. Design was finally catching up with the lean and agile development process.

I am constantly updating the website with guides, tips, and new prototyping templates.

— Amir

Thank you very much, Amir! We appreciate your efforts.

Related Posts

You may be interested in the following related releases:


© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: downloads, Freebies, templates, wireframing

August 27 2010

13:11

Free Wireframing Kits, UI Design Kits, PDFs and Resources

Smashing-magazine-advertisement in Free Wireframing Kits, UI Design Kits, PDFs and ResourcesSpacer in Free Wireframing Kits, UI Design Kits, PDFs and Resources
 in Free Wireframing Kits, UI Design Kits, PDFs and Resources  in Free Wireframing Kits, UI Design Kits, PDFs and Resources  in Free Wireframing Kits, UI Design Kits, PDFs and Resources

To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details.

In this post, we’ve prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. We’ve carefully selected the most useful kits and resources to get you going in the early stages of a project.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

Free Mobile GUI PSD

Android GUI PSD
This Android GUI PSD is based on elements of the Android 1.5 GUI and was made to help the open-source community with its Android application mock-ups. Most of the elements and phone illustrations are done in vector paths and so are easily resizable. Android Sans was used for the text.

Uidesignkit50 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

RIM Blackberry PSD
A complete PSD file with layer styles, this has 135 layers of Photoshop goodness.

Uidesignkit48 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Android Sketch Stencil Version 1.0
A Sketch-style Android OmniGraffle template. The purpose of the sketch style wireframe is to prevent the audience from thinking about visual design and encourage them to focus instead on functionality and behavior.

Wireframes-130 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

All elements of Maemo 5 GUI in PSD
This downloadable PSD file contains GUI template elements for the Maemo platform. These are indispensable for prototyping GUI applications running on Maemo devices.

Uidesignkit58 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone 4 GUI PSD (Retina Display)
GUI PSD kit for creatives who design for the retina display (640×960). The file is huge, both in file size (62.7MB) and dimension (4074×2986). You’ll need to work at 25% – 50% even on the largest screens to roughly grab elements before zooming into 100% for the actual work.

Uidesignkit29 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad GUI Kit in PSD
This version offers a canvas size true to the iPad at 768×1024. In addition, most of the graphical elements are provided in vector format, allowing you a lot of room to scale up for high-resolution presentations. This version is layered in Photoshop, making it easy for you to go nuts with your mock-ups and client presentations.

Uidesignkit56 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Android 1.6 Wireframe stencil for Omnigraffle
Download this beautiful wireframe stencil add-on for OmniGraffle 5.x. Use this toolkit to wireframe Android-based apps and websites on the 1.6 Donut SDK.

Wireframes-132 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Google Android GUI PSD
Here are the GUI elements of Android, built using vectors to scale.

Uidesignkit51 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad GUI PSD Kit
This pack includes full size graphics, as well as 256, 128 and 64 pixel icon sizes. The pack includes four sizes of the iPad graphic in PSD, PNG and Mac ICNS formats.

Uidesignkit55 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Google Android PSD
A stencil set for Google Android prototyping.

Uidesignkit54 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Fireworks template for Android
In this Fireworks template, Android UI elements have been redrawn as vector images. In the folders, the elements have been mostly labeled according to the Android vocabulary.

Uidesignkit52 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Sexy Vector Cell Phone
This phone can be scaled to any size. Easily add your own image to the screen with the included object mask. All objects are layered, grouped and labeled for easy customization.

Uidesignkit42 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad Stencil for Omnigraffle
Contains backgrounds, title bars, buttons, selectors and other iPhone UI elements. The text is fully editable in lists, title bars, buttons and scroll wheels.

Uidesignkit28 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone App Wireframe Template

Uidesignkit45 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Mobile – iPhone

Uidesignkit44 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone GUI Elements
Some beautiful iPhone elements. All graphics are layered Photoshop files.

Uidesignkit5 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad and iPhone Design
Design your application for the iPhone, iPod Touch and iPad with this exhaustive set of stencils. All stencils were created by hand with native OmniGraffle shapes, and groups and can be scaled, resized and exported to other vector formats in Graffle.

Uidesignkit46 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Design Stencil for iPhone and iPad
A stencil for designing OS applications for the iPhone, iPod Touch and iPad. The stencil for now is targeted at developers familiar with the default characteristics of the views and controls provided by UIKit.

Wireframes-101 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Apple iPad fully editable PSD
A fully editable Apple iPad in PSD format. Every element you see is editable via vector masks, and everything is scaleable.

Wireframes-102 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Palm Pre GUI PSD
This set contains a PSD to help designers pitch and develop polished concepts using Photoshop.

Uidesignkit57 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPhone UI Vector Elements
Most visuals for applications start out as vector mock-ups in Adobe Illustrator. So, here are some cool iPhone UI vector elements. And there are even a few good Photoshop resources and even a nice OmniGraffle iPhone UI file or two in there.

Wireframes-103 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad Vector GUI Elements: tabs buttons menus icons
This set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard and balloons. Useful for designers and developers, it includes scalable and totally editable vector versions (AI).

Wireframes-104 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Free Social Networking GUI PSD Kits

Free Full-Layered Facebook GUI PSD Kit
The idea behind this kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, sparing you from drawing all the comps and letting you customize all the text, buttons and data as you need. The kit is free to use in all projects, without any restrictions.

Uidesignkit12 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Facebook GUI Free PSD Resource
A Facebook graphic user interface (FBGUI) resource kit for Photoshop to make your work easier.

Uidesignkit22 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Facebook Applications
A sizable collection of elements for creating wireframes for Facebook applications.

Uidesignkit23 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Omnigraffle Twitter Widget Stencil
This set includes a selection of useful Twitter widgets and badges.

Uidesignkit21 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframing Kits

Best Practice UX Forms Stencil v1.1
A comprehensive release of stencil that follows best practices for UX form design, providing three different ways to lay out forms, each with its own benefits. This version also provides different button layouts, a progress indicator, a Captcha code input field, labels and more.

Wireframing-106 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Form Elements UI Kit
Form elements stencil from the Design Stencil kit in the Yahoo! Design Pattern Library.

Form in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Shapes
Here is a set of shapes for making wireframes in OmniGraffle version 5.x ( forMac OS X). It consists of most of the basic elements you’ll need to create user interface specifications.

Wireframing-104 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe kit for UI Designers
A set of various wireframes, such as product details, list of items, front page, mobile phone.

Wireframes-113 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

MBTI sketching paper for ideation
MBTI sketching paper for ideation sessions. It helps you think inside the box of four personality traits. Describe a design challenge and the problem to solve on every piece of paper. There’s also space for annotations.

Wireframes-105 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

A4 sketching paper
This sketching paper can be used after generating ideas for functionality. Design preliminary screens based on the ideas you come up with.

Wireframes-106 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Magnets (DIY Kit)
This DIY magnet template is based on the Konigi wireframe stencils, and it includes three sheets of elements that might be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, optionally laminate them if you intend to use with dry-erase markers, and then cut them out.

Wireframes-107 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Paper wireframe templates
The finished product include seven variations, as well as PSDs.

Wireframes-108 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe template
A useful print-and-sketch template available for downloading.

Wireframes-109 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

iPad Idea Sheet
A total of three sheets: one full size (landscape), one at 70% reduction (vertical) and one at 50% reduction (landscape). The 80 tiny dots make it easy to split the screen horizontally and vertically.

Wireframes-110 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Scenario, Taskflow and Grid Sketch Sheets
A set of beautiful printable sheets for ideas and sketching

Wireframes-111 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Free Photoshop browser template
Need a clean browser screenshot for a design presentation? Look no further. These free professional Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and all kinds of flavors.

Wireframes-112 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Interactive Sketching Notation 0.1
The idea behind this notation is to visualize user interface states as well as user actions in a clear and rapid manner.

Notations2 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

MobileMe Full iPhone GUI
For use with WinterBoard, this is a beta release, so there may be unthemed elements.

Wireframes-116 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Android Wireframe Templates (PDF)

Wireframes-118 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Free Keynote UX Stencils

Wireframes-126 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Advertising Stencil Kit
A set of very useful advertising stencils.

Wireframes-131 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Dragnet website wireframes kit v 0.9
Dragnet website wireframes kit v0.9 is a common library for Adobe Fireworks and contains over 25 objects that are useful for rapid prototyping of websites. It is completely free to download and use. The kit contains common Web design elements, such as scrollbars, buttons, menus and alerts.

Wireframes-133 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

User Interface Design Framework
This pretty and comprehensive design framework contains a GUI library of hundreds of vector elements for interface design. This minimal UI icon set has 260 vector icons and a library of 200 styles for Illustrator.

Uidesignkit1 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Browser Form Elements PSD
Included here is a set for Firefox 3 for Mac and another for IE7 on Vista.

Uidesignkit14 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Sketching and Wireframing Kit
Here is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

Uidesignkit3 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Photoshop Form Element Templates
This set includes all common form fields and mouse and link pointers, optimized for ease of use.

Uidesignkit37 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Web Browser Elements
This excellent and useful kit contains pull-down menus, input fields, radio buttons, check boxes, buttons, text fields and scroll bars, all in an easily editable PSD file.

Uidesignkit4 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

UI Design Kit
This Web UI template kit is made completely with shape objects, which in some cases convert to SmartObjects, so they’re totally scalable.

Uidesignkit7 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Symbols
This download contains a symbols library and a full Adobe Illustrator file, with all of the elements spread out on the art board. To install this library, just drag and drop the Wireframe Symbols.ai file into your Illustrator Symbols directory. Once you are in Illustrator, go to your Symbols palette, and load the library.

Uidesignkit9 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Web UI Element Pack
This pack, in PSD format, contains 19 elements including loading bar, default and clicked-state buttons, button toggle, icons for “Close,” “Next” and “Previous,” paging icon and slider.

Uidesignkit13 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Wireframe Kit for Google Drawings

Uidesignkit15 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

OmniGraffle Stencil for Ext JS v3.0
This updated version of Ext JS Omnigraffle stencil contains many improvements and additions, namely the recreation of most Ext JS elements as Graffletopia shapes or groups, especially helpful for resizing titles, tables cells and so on.

Extjs in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Flex 3 Stencil
Includes all Flex components from the Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tooltips and errors.

Uidesignkit19 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Aqua GUI
A series of elements inspired by the GUI Design Palette 1.2 and the Mac OS X interface stencils, based on Aqua, and mainly intended to make simple window designs.

Uidesignkit20 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Flex Darkskin PSD UI
A beautiful set of 16 PSD files.

Uidesignkit24 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Web Wireframe Kit
Here is a simple way to plan a layout and a cost-effective, time-saving wireframe kit for Web designers.

Uidesignkit27 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

UI Buttons and Icons
This set contains 165 high-quality UI icons and buttons in five different colors. Available in AI, JPEG and SVG formats.

Uidesignkit8 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Quommunication Stencil Kit
This beautiful set contains design elements for wireframing, RSS feeds, colors, advertising units, browser windows and grids.

Uidesignkit30 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Mac OS X Interface 2
A Leopard-y interface stencil kit that makes extensive use of tables for maximum flexibility while maintaining pixel precision.

Uidesignkit31 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

OmniGraffle UX Template
The OmniGraffle Pro (v. 5) template for interface design. Includes shared layers for basic UX document needs (e.g. title page, wireframes, storyboards).

Uidesignkit32 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Template for Blueprint CSS Comps
This template allows you to create visual design comps to be implemented using a CSS layout framework. The Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint.

Uidesignkit33 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Apple Elements for OmniGraffle
Stencils of Apple hardware and miscellaneous networking components. Excellent for creating physical diagrams.

Uidesignkit36 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

DeviantART ID PSD Kit
These 15 professionally designed, fully customizable templates include MINI and Original ID templates.

Uidesignkit40 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Browser Screens and Website Elements
Here is a useful set of vector assets you can use to mock up client projects, present your work or get a quick visual while laying out a website.

Uidesignkit41 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

960 Grid Template for OmniGraffle

Uidesignkit43 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Control of different browsers for designers (download link)
A PSD library of controls in browser interfaces of Mozilla Firefox, Opera, Internet Explorer and Safari.

Controls in Free Wireframing Kits, UI Design Kits, PDFs and Resources

Useful Articles

  • The Importance of Wireframing
    A comprehensive article on how wireframing plays an important role in information architecture
  • The Future of Wireframes
    As we move into the next decade of Web design, it’s time to re-evaluate our understanding of wireframes, a tried and tested user experience staple.

    Wireframing-110 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

  • Wireframing Is Not a Religion
    Wireframes are an indispensable tool for design thinking, a digital sketch pad ready to be drawn and erased, scrapped or resurrected at any moment.
  • Five Commandments for Wireframing
    Paul Boag is a wireframes fanatic and believes they are an indispensable part of the development process. He espouses five unbreakable rules.
  • 20 Steps to Better Wireframing
    Possibly the biggest mistake made in any development project is failing to plan. This article goes over why.

Resources and Round-Ups

  • I Love Wireframes
    A tumblog dedicated to wireframes, prototypes and mock-ups.
  • Wireframe Showcase
    This site is a place to look at websites based on wireframes and analyze how the designers transformed mock-ups into working designs. Because the wireframes and designs were submitted by their creators, Wireframe Showcase includes a short explanation of each piece. Most of the websites grew out of digital mock-ups, which have the advantage of being easy to tweak and rearrange. The result is a pleasing and informative collection of wireframes.

    Wireframing-113 in Free Wireframing Kits, UI Design Kits, PDFs and Resources

  • Standard Screen Patterns for Web Interface Design
    Here are some principles and patterns for rich interactions.
  • 50 Free UI and Web Design Wireframing Kits and Resources
    This post focuses on wireframing tools and standalone applications, as well as resources you need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements and mobile elements, which you can use in any graphics editor such as Photoshop or Illustrator, or with pen and paper.
  • A Collection of Printable Sketch Templates and Sketch Books for Wireframing
    Here are 20 resources that you can use in the sketching phase of application development.
  • A Collection of Printable Web Browser Sketching and Wireframe Templates
    All of these printable sketching templates have all been designed especially for Web designers. Each has an imprint of a Web browser (either Safari, Chrome or Firefox).
  • Useful (Offline) Utensils and Toolkits for Designers
    Why start completely from scratch when you can use one of these pre-made guides to save time and better direct your creative energies? In this article, you will find a great list of free downloadable tools, as well as a collection of notepads and other products to purchase for offline planning and design.

Related Posts

Would you like to see more similar posts on Smashing Magazine?



Would you like to see more similar posts on Smashing Magazine?online survey

(al)


© Aquil Akhter for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: free, Freebies, psd, wireframing

May 01 2010

11:00

18 Wireframing, Mockup And Prototyping Tools To Plan Designs

Title-free-premium-wireframing-webdesign-toolsI will keep repeating how important is to plan your webdesign, sitemaps, draw flowcharts,wireframes before even start to do actual functional and design planning! Since I am deeply researching this topic myself, this time I found the most popular wireframing software available.

Just 3 of tools I found were free, but every tool has free trial or basic plan so you can definitely try and test it yourself for one time projects.

For me – I don’t do redesigns too often, so I don’t need such tools daily, but for design companies I think one of these tools will be life and time saver from drawing, planning and collaborating view – worth spending some money for! To get started I suggest to read also previous planning article I did – Know How To Plan Your Website Redesign & Get Inspired.

1. Lovely Charts

  • 100% free
  • Online application
  • Create flowcharts, sitemaps, wireframes easily!

With Lovely Charts’ extremely simple and intuitive drag’n drop drawing mechanism, you’ll be able to focus on what really matters. You won’t have to draw boxes or arrows, and you won’t have to worry about what symbol to use.

Lovely Charts’s biggest strength lies in its innovative workflow and in its ability to generate lovely diagrams in minutes, with no effort.

Lovely-charts-free-premium-wireframing-webdesign-tools

2. Pencil Project

  • Completely free tool
  • Option to use it as Firefox addon
  • Linux/PC/Mac support
  • Lightweighted

The Pencil Project’s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.

Top features:

  • Built-in stencils for diagraming and prototyping
  • Multi-page document with background page
  • Inter-page linkings!
  • On-screen text editing with rich-text supports
  • Exporting to HTML, PNG, Openoffice.org document, Word document and PDF.

Pencil-project-free-premium-wireframing-webdesign-tools

3. Serena Prototype Composer

  • Completely free software!
  • Get Business Requirements Right
  • Build Usable Applications
  • Move Seamlessly From Prototype to Coding

Prototype Composer is a completely new way of gathering requirements. Prototype Composer makes it possible to see how an application will look and function before any code is ever written. Instead of endless text documents, Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.

View product demo screenshots

Serena-free-premium-wireframing-webdesign-tools

4. MockFlow

  • Has free basic pack with limited options, but still free!
  • Modern interface
  • Premium version costs 59$/year

MockFlow is an online tool for creating wireframes of software and websites. It helps to enhance your planning process by enabling to quickly design and share interactive UI mockups.

Can be used as desktop application and one more great thing you can collaborate real-time with fellow collegues and discuss development process right in the application if you use premium account.

Mockflow-free-premium-wireframing-webdesign-tools

Little video demo about this software:

5. Axure RP

  • 30 days trial version
  • Premium version costs 149$/year with full support
  • Works on PC/Mac

Axure RP enables application designers to create wireframes, flow diagrams, prototypes, and specifications for applications and web sites. It provides the features you need to get started quickly whether working alone or collaborating with your team.

Used by user experience professionals, business analysts and product managers in over half of the Fortune 100, leading agencies and thousands of small and medium businesses around the world. Axure RP has become an essential tool for successful application design.

Axure-free-premium-wireframing-webdesign-tools

Watch video tour about Axure RP

6. Balsamiq

  • Looks handrawn and sketchy
  • Easy to use in team as collaboration tool
  • Premium desktop version costs 79$, which is one time payment
  • Online and desktop application

Using Balsamiq Mockups feels like you are drawing, but it’s digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

Mockups is designed to help you and your team or clients iterate on wireframes as early in the process as possible, when it’s cheapest to do so.

Balsamiq-mockups-free-premium-wireframing-webdesign-tools

Watch video demo about this software:

7. HotGloo

  • A lot of tutorials to help you get started
  • Online application
  • Modern and user friendly interface
  • Chance to test app using free plan
  • 14$/month

Great application, with a lot of tutorials, forum, active twitter account and Faqs/Help section! Interface is very modern as well, one of my favorite applications by far.

Hotgloo-free-premium-wireframing-webdesign-tools

8. Mockingbird

  • Lot of great features
  • Modern design and interface
  • Powered by Cappuccino: no Flash needed.

Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.

Mockingbird-free-premium-wireframing-webdesign-tools

Launch and test it now!

9. ProtoShare

  • Online Application
  • Modern interface
  • 30 days free trial
  • $29 per user/month

ProtoShare is an easy-to-use, collaborative, Web-based prototyping tool that helps teams visualize requirements for interactive projects and work together in real-time.

Big or small, the key to successful projects is getting people talking and cooperating early. ProtoShare helps all stakeholders — Web developers, account execs, management, marketing, and clients — get on the same page before money and time are sunk in various development dead ends.

Protoshare-free-premium-wireframing-webdesign-tools

Check out online video tour explaining good features about this product.

Protoshare-demo-free-premium-wireframing-webdesign-tools

10. Gliffy

  • A lot of features built in this online software
  • Free basic plan with no time constraints!
  • 5$ per month premium account

You can use Gliffy to build almost everything, I don’t like though there are too much features. If I would need tool just for wireframing I think I would choose different one, because there I have too many distractions and options I don’t need.

With Gliffy online diagram software, you can easily create professional-quality flowcharts, diagrams, floor plans, technical drawings, wireframes and more.

Gliffy-free-premium-wireframing-webdesign-tools

11. Justinmind Prototyper

  • Mac,Pc support
  • $495 one time payment license
  • Free 15 day trial
  • Pretty expensive and short trial

Wireframes and mockups have been used to think and define websites or applications before their implementation. But with the coming of the web 2.0, dynamic websites and RIA, you need to think everything from UI to conditional navigation or the type of interactions you want to use. Mockups or even clickable wireframes aren’t enough anymore.

Justinmind Prototyper 3.0 is a powerful wireframing tool designed to build fully functional dynamic prototypes without any coding, both on Windows and Mac.

Justinmind-free-premium-wireframing-webdesign-tools

See also short video demo:

12. JumpChart

Different than classic wireframing tools, because of functions, you can change less hierachy, but it’s very easy to build sitemaps and separate content in categories there.

Use Jumpchart to quickly plan out the navigation of your site by adding pages, and sub-pages. If you change your mind, easily drag pages to new spots within the site hierarchy. There is no better way to organize the content for your website.

Watch their online video tour.

Jumpchart-free-premium-wireframing-webdesign-tools

13. Pidoco

  • Clickable Wireframes
  • Fast and easy Prototyping
  • Easy Remote Usability Testing
  • No Software Installation
  • 31 day trial, 3 plans – lowest 7 eiro/month

Integrate usability testing into your production cycle by making use of pidoco°’s easy-to-use testing module. You will be developing applications which will work with the end-user as well as your clients whilst increasing the turnover!

Real-time collaboration with several co-workers will optimize communication patterns and will decrease expenditures in many areas within your production team!

Pidoco-free-premium-wireframing-webdesign-tools

14. iPlotz

  • Free demo
  • 15$ per month premium plan

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.

Check out video tour.

Iplotz-free-premium-wireframing-webdesign-tools

15. FlairBuilder

  • 24$ per month
  • iPhone prototyping
  • 15–day free trial

FlairBuilder is built such that you will feel comfortable with the application’s user interface and complete each task fluently and efficiently.  That is why you will find many common elements such as the toolbar, the menu, a component palette, a context menu for common tasks and a set of handy keyboard shortcuts. All these to simply let you focus on you job and get it done as fast as possible.

Flairbuilder-free-premium-wireframing-webdesign-tools

16. GUI Design Studio

  • Free 30 day trial
  • Built for Microsoft Windows
  • Express license – $129

GUI Design Studio is a graphical user interface design tool for Microsoft Windows that you can use to rapidly create demonstration prototypes without any coding or scripting.

Draw individual screens, windows and components using standard elements, connect them together to storyboard operational workflow then run the simulator to test your designs. Watch video demo overview.

Gui-studio-free-premium-wireframing-webdesign-tools

17. OmniGraffle (Mac, iPad)

  • 14 days trial
  • License costs $99.95
  • Work only fro Mac, iPad

Need a diagram, process chart, quick page-layout, website wireframe or graphic design? OmniGraffle can help you make eye-popping graphic documents quickly by keeping lines connected to shapes even when they’re moved, providing powerful styling tools, importing and exporting Microsoft Visio files, and magically organizing diagrams with just one click.

Whether you need a quick sketch or an epic technical figure, OmniGraffle keeps it gorgeously understandable. Watch introduction videos and tutorials here.

Omnigraffle-free-premium-wireframing-webdesign-tools

18. Microsoft Visio

  • Free 60 day trial
  • License – $260
  • Available just on Windows platform
  • One of the most popular and comprehensive prototyping tools

Microsoft Office Visio 2007 makes it easy for IT and business professionals to visualize, explore, and communicate complex information. Go from complicated text and tables that are hard to understand to Visio diagrams that communicate information at a glance. Instead of static pictures, create data-connected Visio diagrams that display data, are easy to refresh, and dramatically increase your productivity. Use the wide variety of diagrams in Office Visio 2007 to understand, act on, and share information about organizational systems, resources, and processes throughout your enterprise. View video tour.

Microsoft-visio-premium-wireframing-webdesign-tools

Did you make your pick? Which was it? Let us know in comments!

February 05 2010

17:30

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

Smashing-magazine-advertisement in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files
 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files  in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files  in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. A wireframe typically has the basic elements of a Web page: header, footer, sidebar, maybe even some generated content, which gives you, your clients and colleagues a simple visually oriented layout that illustrates what the structure of the website will be by the end of the project and that serves as the foundation for any future alterations.

This article focuses on actual wireframing tools and standalone applications, as well as resources that you’ll need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements, mobile elements, which you’ll use in any typical graphics editor such as Photoshop or Illustrator. …Or you could use pen and paper.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.]

Complete Wireframing Toolkits

Quommunnication Stencil Kit
A PSD file with common design elements for sketching and wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows and grids.

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

Mac OS X Interface Stencil Kit
Leopardy interface stencil kit. This one makes extensive use of tables, for maximum flexibility while maintaining pixel precision.

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

Facebook Applications Stencil Kit
A pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.

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

Flex Stencil Kit
Includes all Flex components from Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors.

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

Eclipse Stencil Kit
This stencil enables you to easily prototype Eclipse (wizard) dialogs with OmniGraffle(TM).

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

Massive Web UI & Button Set
This set contains UI elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the PSD file). Available are control buttons including arrows and basic symbols, info and text boxes, breadcrubs, buttons, and other navigation elements, drop-down and collapsible box styles, speech bubbles, search forms and loading elements.

Web-ui-set-preview1 in 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Yahoo! Design Stencils – Design Pattern Library
You would be hard pressed to find a better wireframing resource than this one. The Yahoo! Design Stencil Kit is available for almost every application: OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG) and Adobe Photoshop. This huge library covers the following elements (basically, everything): ad units, calendars, carousels, charts and tables, UI controls, form elements, grids, menus and buttons, mobile (general), mobile (iPhone), navigation and pagination, OS elements, placeholder text, screen resolutions, tabs, windows and containers.

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

Free Sketching & Wireframing Kit
The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG, which can be easily modified. It can also be downloaded in PDF and EPS formats.

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

EightShapes Unify
EightShapes Unify is a collection of templates, libraries and other assets that enable user experience designers to create more consistent and effective deliverables faster. The system uses the Adobe Creative Suite of products; Adobe InDesign is the primary authoring tool.

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

Wireframe Symbols
This download contains a wireframe symbol library and a full Adobe Illustrator file with all of the elements spread out on a board. To install the library just drag and drop the file named Wireframe Symbols.ai into your Adobe Illustrator “Symbols” directory. Once you open Illustrator, go to your Symbols Palette and load the library.

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

OmniGraffle Wireframe Stencils
This is a set of shapes for making wireframes in OmniGraffle version 5.x (Mac OS X).

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

OmniGraffle UX Template
This is an OmniGraffle Pro template for interface design that includes shared layers for basic UX document needs; e.g. title page, wireframes, storyboards.

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

Web Page Elements
Using the open-source “Bitstream Vera” font set and free icons from FamFamFam, you should have most of your common web page elements covered, including headings, form elements, content management function, image placeholders, etc.

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

Web Browser Templates

Photoshop Browser Templates – Web Designer Toolkit
These Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and cover nearly all browsers (Firefox, IE, Safari, Camino, even Netscape). For both sizes, the safe viewing area is clearly marked in a separate layer.

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

Browser Templates for the Website
These Photoshop browser templates for Internet Explorer, Firefox for Mac and Firefox for Windows have been mocked up in the following sizes: 800×600, 1024×768 and 1280×1024 pixels.

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

Photoshop Browser Templates
This layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila!

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

Browser Screens and Website Elements
A useful set of vector website assets.

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

Web-Safe Area Templates for Photoshop

All of the Web-safe area browser PSD templates listed below can be individually downloaded by choosing from the following resolutions: 640×480, 800×600, 1024×768, 1280×960 and 1600×1200 pixels.

Windows Vista IE Web-Safe Area

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

Windows Vista Firefox Web-Safe Area

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

Windows XP IE Web-Safe Area

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

Mac OS X Safari Web-Safe Area

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

Mac OS X Firefox Web-Safe Area

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

Mac OS X Safari Web-Safe Area

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

Web Form Elements

Best Practice UX Forms Stencil
This is a comprehensive release of the stencil kit which follows best practices in UX form design. It provides three different ways of laying forms out, each with their own benefits. This version also provides different button layouts, a progress indicator, captcha code input field, labels and more.

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

Photoshop Form Element Templates
These Photoshop files include screenshots of all the common form elements as displayed in your selected operating system (Mac Classic, Mac OS X, Win XP and Win Classic). The form elements are separated into individual layers so that you can easily select, adjust or switch them as you please.

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

Browser Form Elements PSD
Included in this PSD file are form elements for Mac Firefox 3 and another for Vista IE7.

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

Web Form Elements Volume 1
Volume 1 contains a selection of Web user interace elements for forms in Photoshop format.

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

Web Form Elements Vol.2
This is Volume 2 of the Web Form UI Elements mentioned above and has been designed in a different style.

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

Photoshop Button Templates
These Photoshop button templates have been separated into individual layers to be easily selectable. You can choose from the following colors: dark blue, light blue, dark green, light green, yellow, orange, red and purple.

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

Web Browser Elements

You can select the element you need from whichever operating system and browser you use, and download them individually.

Windows Vista IE Form Elements

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

Windows Vista Firefox Form Elements

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

Windows XP IE Form Elements

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

Windows XP Firefox Form Elements

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

Mac OS X Firefox Form Elements

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

Mac OS X Safari Form Elements

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

Grid Templates

960px Photoshop Grid Template
This template has a guide for a three-column 20-pixel gutter design, with layers of washed-out colors to visualize both columns for the purpose of the rule of thirds. Additionally, it is broken down into six columns of 20-pixel gutters.

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

960 Grid Template for OmniGraffle

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

Illustrator Template for Blueprint CSS Comps
This Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.

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

Photoshop Template for Blueprint CSS Comps
This Photoshop document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.

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

Mobile App Development Resources

Ultimate iPhone Stencil – Graffletopia
This Omnigraffe iPhone stencil kit contains backgrounds, title bars, buttons, selectors and all other iPhone UI elements. It can be easily resized horizontally by ungrouping, resizing the middle element and then regrouping the elements back into a single button.

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

iPhone 3G Stencil
Includes standard interface components for the iPhone 3G: buttons, fields, map elements, keyboards, icons. All components are on a transparent background and should re-size nicely.

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

iPhone GUI PSD 3.0
With Apple’s official release of the new iPhone 3.0 came a number of new GUI elements. Some of the changes and additions have been include in this GUI: map and map elements including curl, copy and paste elements; timeline bar editor; and horizontal iPhone and horizontal panel bars and keyboards.

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

iPhone PSD Vector Kit
This iPhone starter kit comes with several button elements as well as six different iPhone interface options.

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

iPhone GUI Elements
Free iPhone elements available as layered Photoshop (PSD) files.

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

iPhone GUI as Rich Symbols for Fireworks
This iPhone kit has been designed using Adobe Fireworks. It has several combinations, buttons, backgrounds, etc. It also has some lines of code to transform the simple vector symbols into rich symbols, with some variables.

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

Google Android GUI Application Mockup PSD
This Photoshop file contains all of the basic elements of Android 1.5, Google’s mobile operating system.

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

Palm Pre GUI PSD
This Palm Pre GUI PSD has been built with vectors for easy editing and scaling, and it contains most of the Pre’s GUI elements.

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

RIM Blackberry PSD
This download package contains 135 detailed layers for Blackberry app development.

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

Optional Wireframe Extras

Interactive Sketch Notation
The general idea behind this notation is the desire to visualize user interface states as well as user actions in a clear and rapid manner.

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

Storyboard Characters (via Google Chrome)

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

Proofreading Marks

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

Standard Web Banners
You can download these standard Web banners or ads individually (468×60 pixels, 768×60, 125×125, etc.). There are also templates for common but non-standard banner sizes (120×30, 230×33, 728×210, etc.).

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

Wireframe Icons, Royalty-Free EPS and PNG
The icon set includes EPS and PNG versions of the original Konigi Wireframe Icon Set and are suitable for use in vector drawing applications such as Adobe Illustrator as well as in Microsoft Visio.

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

WEB UI Treasure Chest
This PSD layered file, most of whose files are fully editable, contains more than 100 elements for website design.

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

Webdesigner kit
This Photoshop download contains registration fields, menus, checkboxes, radio buttons and cursors.

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

Printable Sketching Paper

A4 and A3 Sketching Grid Paper
This downloadable and printable 960-pixel-wide grid makes it easy to create a three-column (320 pixel), four-column (240 pixel), five-0column (192 pixel) or six-column (160 pixel) grid on a single sheet of paper. You have two sizes to choose from, A4 and A3.

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

Print and Sketch Wireframe Template

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

iPhone Application Sketch Template
The grid squares for this sketching paper are equal to 10 pixels. The tick marks indicate the height of the status bar, nav bar, keyboard, tab bar and toolbar. For best results, print on A4 borderless paper.

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

iPhone Wireframe Templates for Sketching
Two layouts are available, both in PDF and Visio (VSD) formats for quick iPhone mockups.

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

iPhone App Wireframe Template
Two versions are available, one in landscape and the other in portrait. Each version includes three pages: page 1 has a vertical screen and notes column; page 2 has a horizontal screen and notes column; page 3 has a three-screen layout that is great for drafting designs.

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

Printable Wireframe and Notes

The below 8.5 x 11-inch graph paper is made for visual designers, interaction designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a 2×2 grid. Plus, you’ll get a basic grid for drafting site maps or anything else that comes up. Choose from the following:

Wireframe with Notes
This wireframe grid is divided into 24 columns, with gutters between each column. The grid is especially useful for designers who work within a CSS framework such as Blueprint.

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

Wireframe (Landscape)

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

Wireframe (Portrait)

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

Storyboard
This is a storyboard with four cells. Each cell contains a simple grid.

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

Storyboard with Notes
This is a storyboard with four cells. Each cell contains a simple grid. The area beneath each cell is ruled for notes.

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

Basic Paper
This is a basic grid box. Use it for concept diagrams, site maps, spectrums, tables and whatever else you sketch.

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

Wireframe Magnets (DIY Kit)

These DIY magnet template are based on the Konigi wireframe stencils and includes three sheets of elements that would be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, and cut them out.

Form Elements

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

Tabs, Buttons and Bars

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

Windows and Dialogs

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

Further Resources And Some Wireframing Inspiration

web.without.words
A visual playground where designers take popular sites and reconstruct them in a wireframe.

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

Graffletopia
Graffletopia is a huge resource of free stencils for OmniGraffle (Mac-only, sadly). With OmniGraffle, you can quickly create high-quality wireframes, flowcharts and other diagrams.

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

Mockups To Go
Mockups To Go is a user-contributed collection of ready-to-use UI components and design patterns that were built using Balsamiq Mockups. You can download all of the components and design patterns to use in your mockups.

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

Wireframes Magazine
Wireframes Magazine is dedicated to all things wireframing and prototyping. It has a huge library of downloadable templates, samples and UI tools, and even a section for inspiration.

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

I {heart} wireframes
I {heart} wireframes is a great source of wireframing inspiration and resources. And yes, we all love wireframes!

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

Further Related Articles

About the Author

Paul Andrew is a freelance Web designer. He is chief admin for Speckyboy – Design Magazine, a Web design, Web development and graphic-design resource blog. Follow him on Twitter here: twitter.com/speckyboy.

(al)


© Paul Andrew for Smashing Magazine, 2010. | Permalink | 36 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: applications, wireframing

January 15 2010

14:17

Fantastic Information Architecture and Data Visualization Resources


By Cameron Chapman

Information architecture can be a daunting subject for designers who’ve never tried it before. Also, creating successful infographics and visualizations takes skill and practice, along with some advance planning. But anyone with graphic design skills can learn to create infographics that are effective and get data across in a user-friendly manner.

Below are a collection of resources to get you going down the information architecture and data visualization path. Whether you just want to become more familiar with infographics and data visualizations for occasional use or are thinking of making it a career, the resources below will surely come in handy. There are also some beautiful examples and more roundups to see even more fantastic graphics.

1. Information Architecture Design Sites

Information architecture can be so complex, it’s no wonder there are entire sites dedicated to it. The sites below range from sites of individual information architects who share resources with their colleagues, to professional organizations, to design sites that include extensive information architecture resources.

Info Design Patterns

Infodesignpatterns in Fantastic Information Architecture and Data Visualization Resources

Info Design Patterns offers up information architecture news (a fairly new section without a lot of content) and a searchable database of info design patterns. The pattern database is particularly useful for those trying to decide how they want to display a set of data to their users or readers. Some of the patterns include:

InfoDesign

Infodesign in Fantastic Information Architecture and Data Visualization Resources

InfoDesign is an excellent resource for anyone interested in information architecture. They have hundreds of articles aggregated and broken down into categories including accessibility, content strategy, interaction design, prototyping and more. Articles featured on the site include:

Information Design Watch

Informationdesignwatch in Fantastic Information Architecture and Data Visualization Resources

Information Design Watch from Dynamic Diagrams offers a newsletter and regular articles on information design from around the world. They include tons of great, real-world examples of infographics and information architecture designs, and are a great resource if you’re looking for some inspiration. Some of their posts include:

UXBooth – Information Architecture

Uxbooth in Fantastic Information Architecture and Data Visualization Resources

UXBooth is a community blog about usability, user experience and information architecture. The “Information Architecture” section currently contains only three articles, but the quality of each article is always top notch.

Design Crux – Information Design

Designcruxinformationdesign in Fantastic Information Architecture and Data Visualization Resources

Information Design from Design Crux offers up articles on information architecture and design examples. Both are excellent resources, with the examples being particularly inspiring. Some of their articles include:

Cool Infographics

Coolinfographics in Fantastic Information Architecture and Data Visualization Resources

Cool Infographics is a blog that collects interesting infographics from around the web and beyond. It’s definitely a first-rate resource for finding inspiration and examples of great infographics and information architecture designs. Some recent posts include:

JJG.net

Jjgnet in Fantastic Information Architecture and Data Visualization Resources

JJG.net offers up resources for experience design and information architecture written by Jesse James Garrett. There are downloadable PDFs, articles, and interviews and other resources included. Some examples of articles included are:

Information Architecture from A List Apart

Alistapartinformationarchitecture in Fantastic Information Architecture and Data Visualization Resources

A List Apart has an excellent Information Architecture category with more than 20 great articles (dating back as far as 2000). Some articles included are:

Boxes and Arrows

Boxesandarrows in Fantastic Information Architecture and Data Visualization Resources

Boxes and Arrows is an excellent blog that explores why designs work and how to design better based on user experience data. Some example posts include:

Information Design from AIGA

Aigainformationdesign in Fantastic Information Architecture and Data Visualization Resources

AIGA has an Information Design section on their website with a dozen articles. While it’s not a huge resource, the articles are very high quality and include:

Good Magazine

Goodmagazine in Fantastic Information Architecture and Data Visualization Resources

Good Magazine has an excellent collection of infographics covering a very broad range of topics. This is an excellent resource if you’re looking for inspiration. Some examples include:

Flowing Data

Flowingdata in Fantastic Information Architecture and Data Visualization Resources

Flowing Data showcases infographics covering a variety of subjects. They collect graphics from all over the web and explain why the graphic works well. Some example posts include:

2. Information Architecture Articles and Resources

The articles and resources listed below appear on sites that don’t focus solely on information architecture. They’re as useful as the resources above, but focus on individual aspects of information design. Some excellent beginners guides and tutorials are also included here.

Organic Information Design

Organicinformationdesign in Fantastic Information Architecture and Data Visualization Resources

The Organic Information Design PDF is from Ben Fry, and served as his Master’s Thesis at the MIT Media Lab. It introduces a new type of interactive information design using large quanities of data from dynamic sources.

The Information Design Approach to Web Development

Infodesignapproachtowebdev in Fantastic Information Architecture and Data Visualization Resources

This article from Digital Web Magazine offers up a new approach to web development using information design techniques. It’s a great resource for both information architects and web developers.

InfoGraphic Designs: Overview, Examples and Best Practices

Inforgraphicdesignsoverview in Fantastic Information Architecture and Data Visualization Resources

This post from instantShift is one of the more comprehensive beginner’s guides to information architecture. It includes advice on how to design around a given set of data and offers some amazing examples of successful information design.

Information Architecture Tutorial

Informationarchitecturetutorial in Fantastic Information Architecture and Data Visualization Resources

This is a complete tutorial series from Webmonky on how to create successful information graphics. There are five parts, each addressing a different aspect of information architecture in depth.

Complete Beginners Guide to Information Architecture

Beginnersguidetoinfoarchitecture in Fantastic Information Architecture and Data Visualization Resources

This is another comprehensive article geared toward those just starting out with information architecture and infographics. It includes some background information, links to notable information architects, resources, and links to common tools used in creating infographics.

3. Excellent Examples of Data Visualization

Below are some beautiful examples of infographics to get your creative juices flowing. They cover everything from pop culture (The Best Beer in America, Kill Bill) to political issues (Presidential First 100 Days in Office) to global environmental issues (No More Fish in the Sea, The Great Pacific Garbage Patch).

LifeMap

Lifemap in Fantastic Information Architecture and Data Visualization Resources

Dentro de la cabeza de Bob Dylan

Dentrodelacabezadebobdylan in Fantastic Information Architecture and Data Visualization Resources

Infografias

Infografias in Fantastic Information Architecture and Data Visualization Resources

The Best Beer in America

Bestbeerinamerica in Fantastic Information Architecture and Data Visualization Resources

Kill Bill Infographic

Killbillinfographic in Fantastic Information Architecture and Data Visualization Resources

Suburban Bliss

Suburbanbliss in Fantastic Information Architecture and Data Visualization Resources

No More Fish in the Sea

Nomorefishinthesea in Fantastic Information Architecture and Data Visualization Resources

The First 100 Days: Roosevelt to Obama

First100days in Fantastic Information Architecture and Data Visualization Resources

Vampire Energy

Vampireenergy in Fantastic Information Architecture and Data Visualization Resources

On Driving

Ondriving in Fantastic Information Architecture and Data Visualization Resources

Periodic Table of Typefaces

Periodictableoftypefaces in Fantastic Information Architecture and Data Visualization Resources

Flickr User Model, v0.3

Flickrusermodel in Fantastic Information Architecture and Data Visualization Resources

How Education Spending Affects Graduation Rates

Howeducationspendingaffectsgradrates in Fantastic Information Architecture and Data Visualization Resources

The Most Committed Crimes in the Country

Themostcommittedcrimes in Fantastic Information Architecture and Data Visualization Resources

The Great Pacific Garbage Patch

Greatpacificgarbagepatch in Fantastic Information Architecture and Data Visualization Resources

4. Other Roundups

Below are a few more roundups of information graphics and data visualizations. They include tons of great examples to inspire you and give you ideas.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...