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

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

Here’s the Link!

35 Excellent Wireframing Resources

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

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

Here’s The Link!

10 Completely Free Wireframe and Mockup Applications

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

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

Here’s The Link!

Free Web UI Wireframe Kit

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

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

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

Here’s The Link!

Designers Toolbox

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

Here’s The Link!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

1. Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition – by Steven Krug

Five years and more than 100,000 copies after it was first published, it’s hard to imagine anyone working in Web design who hasn’t read Steve Krug’s “instant classic” on Web usability, but people are still discovering it every day.

In this second edition, Steve adds three new chapters in the same style as the original: wry and entertaining, yet loaded with insights and practical advice for novice and veteran alike. Don’t be surprised if it completely changes the way you think about Web design.

2. The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity – by Alan Cooper

Imagine, at a terrifyingly aggressive rate, everything you regularly use is being equipped with computer technology. Think about your phone, cameras, cars – everything – being automated and programmed by people who in their rush to accept the many benefits of the silicon chip, have abdicated their responsibility to make these products easy to use.

The Inmates are Running the Asylum argues that, despite appearances, business executives are simply not the ones in control of the high-tech industry. They have inadvertently put programmers and engineers in charge, leading to products and processes that waste money, squander customer loyalty, and erode competitive advantage. Business executives have let the inmates run the asylum!
In his book The Inmates Are Running the Asylum Alan Cooper calls for revolution – we need technology to work in the same way average people think – we need to restore the sanity. He offers a provocative, insightful and entertaining explanation of how talented people continuously design bad software-based products. More importantly, he uses his own work with companies big and small to show how to harness those talents to create products that will both thrill their users and grow the bottom line

3. About Face 3 – by Alan Cooper

This completely updated volume presents the effective and practical tools you need to design great desktop applications, Web 2.0 sites, and mobile devices.

You’ll learn the principles of good product behavior and gain an understanding of Cooper’s Goal-Directed Design method, which involves everything from conducting user research to defining your product using personas and scenarios. Ultimately, you’ll acquire the knowledge to design the best possible digital products and services.

4. The Design of Everyday Things – by Donald Norman

Anybody who has ever complained that “they don’t make things like they used to” will immediately connect with this book. Norman’s thesis is that when designers fail to understand the processes by which devices work, they create unworkable technology.

Director of the Institute for Cognitive Sciences at University of California, San Diego, the author examines the psychological processes needed in operating and comprehending devices.

5. The Elements of User Experience: User-Centered Design for the Web – by Jesse James Garret

Smart organizations recognize that Web design is more than just creating clean code and sharp graphics. A site that really works fulfills your strategic objectives while meeting the needs of your users. Even the best content and the most sophisticated technology won’t help you balance those goals without a cohesive, consistent user experience to support it.

But creating the user experience can seem overwhelmingly complex. With so many issues involved-usability, brand identity, information architecture, interaction design-it can seem as if the only way to build a successful site is to spend a fortune on specialists who understand all the details.

The Elements of User Experience cuts through the complexity of user-centered design for the Web with clear explanations and vivid illustrations that focus on ideas rather than tools or techniques. Jesse James Garrett gives readers the big picture of Web user experience development, from strategy and requirements to information architecture and visual design. This accessible introduction helps any Web development team, large or small, to create a successful user experience.

6. Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics – by Tom Tulis & Bil Albert

The first practical, detailed instructions on how to measure improved usability for the web, web-based applications, and electronic products of all kinds.

“This book is a great resource about the many ways you can gather usability metrics without busting your budget. If you’re ready to take your user experience career to the next level of professionalism, Tullis and Albert are here for you and share generously of their vast experience. Highly recommended.”
- Jakob Nielsen

7. Designing Web Usability – by Jakob Nielsen

While everyone wants to design cool web sites, no one wants to think simple and consider whether the design actually accomplishes its goal, which is usually to sell, teach, or entertain. The sole exception is Nielsen, who has made a living speaking and writing about what works and what doesn’t work in interactive media. His simple, well-written, and well-illustrated book discusses web usability, page design, content design, site design, intranet design, accessibility for users with disabilities, international use, future directions, and simplicity.

Add Your Books

What’s on your bookshelf? Add your favorite books to the comments and why you think it should be on everyones list?

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

It’s for this reason that the designer(s) often get overlooked when kudos are thrown around. So how do you admire something that’s not meant to be seen? One way is to rally behind the community that does appreciate it. Which is exactly what we’re going to do.

The magical number 7 is referenced as a persons cognitive ability and how it pertains to short-term memory. Whether you agree with this theory or not is irrelevant to this post. We just thought it was a clever way to give a congratulatory shout out to sites, articles, and people who we feel should get recognition for the work they do from the community, even if they don’t get it elsewhere.

Fuel Your Interface’s, “The Weekly Seven: Plus or Minus Two” will be the weeks five to nine links we think you will find useful. In no particular order…

Blogs Every Interface Designer Should Read

1. ux mag

UX Magazine sets out to explore, promote & discuss the multiple facets of user experience one article at a time. It is built upon the foundations of ProjectNeo, a global interactive design community.

UX Magazine is a collaborative publication by writers, technologists, designers, marketeers & business gurus from around the world. This project was created & developed by C. Demetriadis, H. Mann & A. Schleifer.

Click Here To Visit!

2. 37 Signals

Signal vs. Noise, a weblog by 37signals about design, business, experience, simplicity, the web, culture, and more. Established 1999 in Chicago.

The creators of Web-Based software Basecamp and Highrise just to name a couple. Most companies talk about customer experience and ease of use, but 37 Signals eat, sleep and breath the stuff.

Click Here To Visit!

3. Adaptive Path.com

Our mission is to deliver great experiences that improve people’s lives, while sharing our advances in the field with our clients, partners, and peers. We measure our success by our contribution to smart, agile organizations that are responsive to their users.

A true leader in the Industry, Adaptive Path hosts UI/UX conferences around the world. A millenia of amazing content on their site, enough to inspire even the most seasoned UI veteran.

Click Here To Visit!

4. Luke Wroblewski

Publications on the critical details and big picture behind digital product design. LukeW’s eight years of writing cover Web and device strategy, interaction design, visual design, usability, and much more.

LukeW is an internationally recognized digital product design leader who has designed or contributed to software used by more than 700 million people worldwide.

Luke is currently Chief Design Architect at Yahoo! Inc. where he works on product alignment and forward-looking integrated customer experiences on the Web, mobile, TV, and beyond.

He is the author of two popular Web design books (Web Form Design & Site-Seeing: A Visual Approach to Web Usability) and many articles about digital product design and strategy. Luke is also a consistently top-rated speaker at conferences and companies around the world, and is a co-founder and former Board member of the Interaction Design Association (IxDA).

Click Here To Visit!

5. Boxes & Arrows

Boxes and Arrows is devoted to the practice, innovation, and discussion of design; including graphic design, interaction design, information architecture and the design of business. Since 2001, it’s been a peer-written journal promoting contributors who want to provoke thinking, push limits, and teach a few things along the way.

If you’re interested in improving the way information architecture is done, if you find yourself sparking provocative conversation on interaction design topics in your spare time, and if you go out of your way to help everyone in your office think differently about everything from the design process to software, we want to work with you.

Click Here To Visit!

Final Thoughts

If you haven’t seen these sites before, we hope that you find them as useful and inspiring as we do. Each week we’ll give you more and more sites, people and posts to get inspired by and hopefully build the community even more!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Congratulations to our winners of a user test project from Loop11!

Dave Vogler
Jacob C. Alonzo
Clifton

We will be contacting you this weekend to give you the details on how to redeem your prize!

Thank you to everyone who participated. And keep you eye out for more great stuff from Fuel Your Interface!

Loop11 is an online usability and user experience testing tool, allowing individuals and companies to conduct online, unmoderated user testing on any kind of digital interface. Loop11 is not a survey or web analytics tool, but a user experience tool… helping you to understand user behaviour and improve your website’s usability.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

There’s a ton of these little applications floating around to change up your desktop. Check out Bowtie for iTunes, TinkerTool for a bunch of cool hidden preference tweaking for things like shifting your dock around from it’s normal centered position.

This doesn’t even touch the surface, but I found this stuff over the course of the past few days and thought it way too interesting to not share.

A cool idea

Nerdtool actually allows you to use a snippet of a website as part of your background. As I was looking through the program, I thought of a cool idea for those of you who have a domain and hosting; with a little bit of time and work, you could set up your own little networking, blogging, or RSS home right in your “wallpaper”.

So what have you done with your desktop? Show us by posting in the FYI Flickr group!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Why did we number the post? Because later on, down the road, you might want to come back and take a look at a specific showcased piece. But who wants to wade through hundreds of other links? Just remember the number of the inspiration post, and you’re golden!

Enough talk. Let’s go!

Hirngespinster

Deep Green Sound Design

Fubiz Interactive

Web UI Treasure Chest (free download)

Daniel Kusaka – Online Portfolio

Five Stone

l2m3 Portfolio

Todd Hido

Saturized Site Design Candidate

Cyclone – Interactive Sound Space

Hook Interactive and Commercial Art

Boco Conference Website

Paper Wireframes on Behance

Nosotros

Bubblewood

Notepod – Drafting paper for iPhone apps

Flickr Feed

From User: px42

From User: AthenaKing

From User: Neurowave

That’s it!

So, you want your stuff featured, you’re thinking. Well, there are a lot of ways to make that happen!

• #1: Submit to the Flickr Group
• Email the Editor at editor@fuelyourinterface.com.
• Contact us on Twitter: @fuelinterface

As always, thanks for reading!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

1. Steal Some Color

Sometimes, you want to take color from something that isn’t inside Photoshop. Perhaps you like a certain color scheme in another application you use, or even a specific color you find in a picture on the web. Sure, you could take a screenshot of the app or the browser window and open it in Photoshop; but why would you do that when Photoshop can read color no matter what application you are using? To steal color from, say, kuler.com quickly and easily, follow these steps.

1. Create a new document if you do not already have a document open.
2. Open the color picker by clicking the foreground color (bottom left)
3. Make sure that the window that has your target color is visible behind Photoshop’s open window
4. Click inside the open Photoshop document and, while holding the mouse button, drag out of the Photoshop window to the target color.

See the illustration below for the technique described.

2. Enlarge Layer Panel Thumbnails

I’ve been using Photoshop for years, and for years I have wanted to know how to increase the size of the tiny little layer thumbnail representations in the layers palette. This in particular is important for being able to see a layer mask. I never took the time to look it up, but I finally took the time to figure it out when I (inevitably) got frustrated with it. Hey, we love Photoshop, but sometimes… there’s a few flaws there. (Sorry Adobe. No one is perfect.) It’s oddly quite a simple little setting tweak, but one that will save me (and hopefully you) a lot of upsetting effects that result from tiny-thumbnail-stress-syndrome.

What you do:

1. Open the layer palette.
2. Click the flyout menu on the right side, and choose “Panel Options”
3. Click the radio button next to your desired thumbnail size
4. Press Ok

3. Make Selection from Alpha Information of a Layer

This one may be the fastest of them all. Maybe even two minutes. Or really, as long as it takes for you to make a click. That’s how long it takes to make a selection from the alpha information of a layer in Photoshop.

For those of you who are unfamiliar, alpha deals with the amount of transparency of a given pixel. So, a pixel’s information includes both color (for screen, RGB) and alpha (a). This is where we get RGBA images from. Saving as a PNG allows you to preserve the alpha information of an image created in Photoshop.

So, how do you do it?

It’s as simple as CMD+Clicking on the layer’s thumbnail (or CTRL+Click for PC’s). This simple shortcut gives a marquee around whatever alpha information is held within a given layer.

Conlusion

We hope that you have enjoyed this first installment of Three Minute Tips. This will be (affectionately) hashtagged as 3MT in the future, in case you want to make sure you don’t miss out on any future Three Minute Tips! As always, we would love to hear your feedback. Do YOU have any three minute tips to share of your own? Let us know!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

1. A Dictionary and Thesaurus

This is an extremely important tool that every interface designer should keep right next to their beloved post-its and sharpies. As we have talked about before, labels are very important in interface design. This applies not only to form fields, but to any body copy that may be necessary in an interface, as well as instructional or guidance wording. If this text is so important to interfaces, then we can conclude that the language used within the text is just as important. Using the right word makes all the difference! Perhaps the word you have chosen doesn’t quite completely describe what you are trying to say. For instance, the word “schedule” doesn’t quite hit you (or your client) right, so you take a quick trip over to Thesaurus.com to find the word “itinerary.” While these words are very similar, there are different connotations between the two, and therefore it may be more consistent with your message, or even with your branding, to use a synonym rather than the first word that comes to mind. Sometimes, you may want to cross-check the words you think are correct, or say what you are trying to say, with the dictionary. This will ensure that you are not applying any meaning to the words that isn’t implied by its actual definition.

2. A Stopwatch

According to this article on websiteoptimization.com, you may only have 50ms to create a “first impression.” That is an important thing to know, considering the fact that it takes much longer to break this first impression. It is commonly reported that even in conversation and the business world, the other person will form an opinion about a new acquaintance within 7 seconds. According to the first article, in 1/20th of a second a person can cognitively judge a website. It is, therefore, extremely important that we study those first 50ms. What better way to study it than to take out a trusty old stopwatch? Obviously, you probably aren’t going to be able to tell your “tester” the words “go” and “stop” within 1/20th of a second. You can, however, test the interface’s appeal on different time increments. A quick flash, a 3 second exposure, a 7 second exposure, and a 20 second exposure, for instance. These different levels of exposure will help you understand the perception of the user on a cognitive and subsequently on a aesthetic level. But to even run these tests, you have to have #3.

3. Five (Very Honest) Friends (Who Aren’t Designers)

Okay, so maybe you don’t even have five friends. But the idea here is that we need people who are not design savvy to be able to look at prototypes of our interface and respond to our usability tests and timed tests. Gather post-test qualitative information to help you hone certain aspects of your design; allow these friends to see the interface, and then ask them as many questions as they are willing to answer. You may have to buy them a pizza to keep them interested, but hey… it’s all for the interface!

4. Five (Very Honest) Friends (Who ARE Designers)

There is a reason why we, as designers, have jobs (or at least incredibly time-consuming hobbies) doing what we do. Some principles, especially cognitive aesthetics, are what we learn the principles of design for. This is why it is important to have a designer community of people who are able to pick out your flaws. Check out DCTH (Design Community Twitter Hours), which is headed up by Chad Engle of Fuel Your Apps. Sometimes, when you have buried yourself in a project, it is hard to see it from a critical point of view. Find someone on Twitter, at your school, or perhaps at your workplace who is honest, critical, and constructive towards your goal. (Hint: I am always willing to offer suggestions through my Twitter.) This is also a perfect place to employ the help of a professor at your school whose strength is in the principles of design. More often than not, professors are willing to offer critiques, especially to current or previous students.
Important: No one is as immersed in your project or knows your client like you do; while the critiques of others should always be considered as important, DO NOT be afraid to trust your own judgement.

Conclusion

We have taken a look at a few tools we can use as interface designers that aren’t normally talked about. What else have you found to be useful and incredibly important in your interface designing? We’d love to hear about it!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

It’s Contest Time at FYI

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

So here’s what you do:

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

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

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

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Enter Pixelmator, the image editor “for the rest of us.” The Pixelmator team was kind enough to allow us to take a look at their program to let you know what is up. The very first thing is the beautiful interface (of course). With it’s sleek dark windows, the program itself is very classy in feel and on the heavy end of professional. The Pixelmator team also included some very cool animated elements during regular use of the program that make the user experience more enjoyable while increasing the functionality.

Note: Pixelmator is for Mac users only – sorry PC. This is definitely a request that we’d push to the Pixelmator team.

Upon downloading and installing Pixelmator, we first noticed the fantastic icon. Illustrative and clean, the icon fits nicely with our other Apple program icons.
Next, we decided to take it for a little test run, just to see some of the main features and get a feel for the application and interface. There is a whole lot to love about Pixelmator, ladies and gentlemen.

Get It Started…

After opening Pixelmator, you are nicely welcomed with the option of opening an existing project/picture, creating a new document, or simply going to a “no-document” mode. This is often how I personally leave my image editor, which allows me to quickly open a file without waiting on the program to start. Very nice route to include, indeed.

If you create a new file, you are given the option of making it one of quite a few presets, or going with a custom size. Also nice for making sure you get the dimensions right. One thing that is lacking here, however, is the option of setting a CMYK color profile. This isn’t largely important for interface design, but still a consideration if you ever work in print.

The full interface includes windows that are easily draggable. The only thing we didn’t like about this setup was the inability to dock the windows. It is very sleek; all of the windows disappear except the document window when the desktop or another application is selected/active.

Perhaps the most impressive part about Pixelmator is the quality and number of great effects/filters. Quite a few that are not seen in Photoshop can be found here in Pixelmator. Some filters and other effects that we noticed in particular are common transition effects (like a page curl), image manipulation effects, and generators.



Pixelmator also has support for Quartz Composer effects.

These effects have a really cool interactive interface. “Cables” connecting from the effects window to the document window allow you to move the target point to have more control over different aspects of each effect. (There’s really not a great way of explaining this interaction; download the trial, or continue reading. We’ll include this link again at the end of the post.)
We noticed while working with the effects in Pixelmator as well as some of the tools (such as the selector wand, paint bucket, and gradient) that the image updates live. This means you can see the gradient form as you drag the gradient tool across the canvas. A cool feature to the selection and paint tool is the ability to “click and drag” to change the tolerance level. The resulting fill or selection is updated as you drag, so that you know exactly what tolerance to use. This is one of the best and most profitable features in all of Pixelmator. The live updating far exceeds the trial-and-error style of Photoshop. If you’ve ever had to use Command+Alt+Z (back one step) and Command+D (deselect) in Photoshop 100 times in one session, you will find Pixelmator to be a breath of well thought out, fresh air.
Another great feature that Photoshop users have come to require is the use of blending modes. Pixelmator comes equipped with blending modes for your layers as well as blending modes built-in to some of the effects.

One of Pixelmators most important features, however, is not within the creation of the file itself or the effects, but rather in its ability to read and export to 59 different file types including its native .pxm and, quite importantly, .psd files. For those of you who are unfamiliar, .psd is the Photoshop filetype. This means that a Photoshop user can send a Pixelmator user a PSD file without worrying about whether or not they can open the file.

More Features

The best way for you to learn about the features of Pixelmator would be for you to go ahead and download a copy. After you install it, check out Pixelmator’s website for tutorials, forums, and plenty more! Here are some more features we liked in Pixelmator:

• Color correction tools, including curves, contrast, etc. Some auto-correction tools as well
• Similar shortcuts to Photoshop
• Quick masking
• Apple color picker (may be more familiar to non-Photoshop users)
• Easy to use image slicer for web
• “tool options” panel changes according to what tool you have selected
• Create a new layer from iSight camera
• Cost: $59

Take the Bad with the Good

Okay, we would be cheating you if we said Pixelmator was perfect. No software is perfect. But there are a few things that we’d love to see implemented into Pixelmator that are not currently available.

• Layer groups
• Lockable layers
• Better color correction tools (for picking black, mid, and white points)
• Increased functionality of curves
• Editable Adjustment layers
• More support for vector, Smart Objects
• Layer styles (drop shadow, etc)
• Better control of sliders and menus – up and down arrows to change between fonts or increase or decrease a slider amount

Conclusion

Pixelmator may not be perfect, but it is a wonderful image editor that has powerful tools for interface designers. There are a lot of things about Pixelmator that are better than Photoshop. Overall, Pixelmator is easily worth the measly $59 it will cost you. Don’t take our word for it – try it out yourself before you buy it. Pixelmator’s website is loaded with examples, so you can se what is possible with the great image editor. We find it to be a great compliment in a lot of ways to Photoshop, and will keep Pixelmator in the dock from now on.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)