Before developing a website, you need to visualize it using various types of sketches because is more easier to have a mockup rather than a full design which will cost time and money. Nowadays you can find a lot of great tools that can help you create functional sketches in no-time so you and your team can focus on more important tasks. In this article you have a collection of the best tools for creating wireframes and mockups, useful articles about these techniques and also about user experience and web design, and at the end of the article you have some examples of real mockups used in different projects.

iPlotz

iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications. Create a project, add wireframe pages with design components and discuss your creations with others.

Free Sketching & Wireframing Kit

Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, 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 vector format that can be easily modified. It can also be downloaded in PDF and EPS formats. The kit is completely free, which means that you are allowed to use it for personal and commercial projects.

Frame Box

You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly by using its very easy to use drag and drop interface.

ProtoShare

For website, mobile and application development, ProtoShare delivers better digital projects in less time. ProtoShare lets you express ideas visually, so the entire team can understand what you’re trying to say. ProtoShare helps your team make good ideas great and ensures that bad ideas will fail early. You can create while ProtoShare automatically manages feedback, documents decisions, and keeps everyone on the same page before money and time are sunk in various development dead ends.

EightShapes Unify

A documentation system to produce wireframes, maps, flows, storyboards, plans, style guides, specs, usability testing reports, and prototypes too!

Cacoo

Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.

Mockingbird

Mockingbird is another web app with a focus on collaboration. It allows you to link multiple mockups together and preview them interactively to get a feel for the flow of your application.

OmniGraffle Wireframe Stencils

This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x (Mac OS X). It consists of most of the basic elements you’ll need to create user interface specifications. The screenshots below show all of the stencils in this set.

Hotgloo

HotGloo combines all the functionality from a classical desktop software with the comfort and benefits of a web app. From low- to high-fidelity, from wireframes to prototypes – with HotGloo you can finally achieve great concepts in a fast, simple and beautiful way. Mock up an idea, gather feedback, review and improve over time. With just one click you can receive feedback on a particular element or interaction, helping you to adjust accordingly.

Balsamiq Mockups

Using Mockups feels like drawing, but because it’s digital, you can tweak and rearrange easily. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

Pencil Project

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

SketchFlow

SketchFlow, a feature of Expression Studio Ultimate, gives you the ability to quickly and effectively map out and iterate the flow of an application UI, the layout of individual screens and perhaps most importantly for modern applications the transition from one application state to another. This ability to explore and test multiple ideas without investing large amounts of time ensures you are able to find the right solutions for your clients.

Resources

Abstraction and Wireframing

Before my current incarnation as a UX Architect I was a Flash developer. I spent five years coding all kind of games, sites, and apps, and gradually progressed from simple bits of script to full-on applications and fully abstracted object-oriented code[…]

The 7 wonders of wireframes

Wireframes have become an intrinsic part of the way we work at Headscape. In this post I want to explain why we are so enthusiastic about them, and how we use them in our process. However before we do that, lets take a step back and look at exactly what we mean by wireframes

(Re)consider the Source

It’s an exciting time to work in the digital universe. We face more possibilities for creating content than ever, from video to infographics. We also have more places to put digital content than ever[…]

Familiar is not a design

With a not-uncommon sense of despair, I recently read an article on a hack for jailbroken iPads, allowing desktop-like layered window management. The hack is called Quasar, and was created by Pedro Franceschi. It’s unquestionably an impressive technical achievement, and on those grounds he’s to be congratulated[…]

The Floppy Disk means Save, and 14 other old people Icons that don’t make sense anymore

What happens when all the things we based our icons on don’t exist anymore? Do they just become, ahem, iconic glyphs whose origins are shrouded in mystery?

20 Steps to Better Wireframing

Possibly the biggest mistake in any development project is failure to plan. Recently, the owner of a prospective start-up told me that planning was unnecessary and a good developer could just start coding. This, I promise you, will end in tears.

Storyboards vs. Wireframes

I’ve been doing a lot more wireframing lately and it has me thinking about the usefulness of both the form and the term. What is a wireframe?

How to Create Website Wireframes

Website wireframes are simple line drawings that show the placement of elements on a web page. You can save yourself a great deal of time by editing the layout of a simple wireframe at the start of the design process instead of a complex design later.

Complete Beginner’s Guide to Information Architecture

Information architecture is an often misunderstood job title. Are they Designers? Developers? Managers? All of the above? In this article we’ll discuss what information architecture is, why it’s related to usability, and what are the common tools/programs used in information architecture.

Principles of User Interface Design

“To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.” – Paul Rand

User Experience is Not Enough

I’ve been a user experience designer for the entirety of my career. And in the decade I’ve spent doing this work, I have discovered that there is only one universal truth about how to design an extraordinary user experience: you must design an extraordinary company first […]

The Value of Wireframing

Last week I was asked to start the initial user interface design of a fairly large web application. I took out my sketch pad to start plotting and planning, I wasn’t drawing buttons or thinking of colour schemes – I was wireframing.

What does it mean to be simple?

All designers say simplicity is important, but what does it really mean to make something simple? Most of the time we think it means less, that by removing stuff we achieve simplicity. We think by keeping content above the fold we’re helping people focus, or by using bullets instead of paragraphs more people will read it, or by cutting text in half it becomes more clear […]

The what, when and why of wireframes

I recently presented at a conference on the humble wireframe and thought it would be a good idea to run through some key points. I have also noted that some feel the wireframe is dead, though if anything its more alive now than ever.

500px Making Terms of Service more Human

This is a great example of usability.

Diving into Indie UX: The Wrong Way

I’ve been an ‘indie’ for about 7 years, but I’m no expert. I came to the session hoping to learn how other independent designers handle important issues like process, pricing, managing clients, finding the right clients. Instead I am alarmed that there may be a whole group of people out there posing as UX designers who don’t know their ass from a tea kettle and another set of professional, dedicated designers who could be very successful working independently now scared to try it.

Concerning Fidelity in Design

People swear by their design processes. Rachel Glaves insists on sketching by hand; Dan Brown urges extensive wireframing; while Ryan Singer goes straight to HTML. Heated debates arise at conferences as advocates staunchly defend their favorite techniques.

Designing in the Browser is Not the Answer

The argument for “designing in the browser: seems very seductive at first glance. The web is an interactive medium that defies the fixed canvas of traditional layout tools, so why not use the browser as your primary design environment?

Designing Experiences for Young Kids : Child Proofing your Application

I was recently fortunate to work on interactive storybooks for preschoolers and toddlers (ages 2–5) for the iPad and Android tablet platforms. Designing for young kids requires looking at things from a child’s perspective. I learned some important lessons by observing kids and reviewing applications while working on these projects.

Mockups Success Stories

Bob Walsh, author of the MicroISV books, interviewed nine people with varying backgrounds and job titles to learn how Mockups fits in their workflow, how it helped them, but even more importantly how it did not help them, or what parts of it they wish we could do better, or do more of.

Everything Not to Do in Web Design

This is an amazing (intentional) portrait of the world’s worst website. Every UXer and designer should see it. An oldie but goodie.

Responsive Design: hype or solution?

They seem to love it in the US. Many blogs write about the latest trend: Responsive Design. With the arrival of smart phones and tablets, this is a logical solution for those who do not want to invest in various versions of a website for all those different devices. This phenomenon also starts to appear in the Netherlands. Is responsive design a keeper or a temporal hype?

My five commandments for wireframing

I am a fundamentalist when it comes to wireframing. Its almost like a religious furore. To me they are utterly indispensable and when they are not used it makes me want to smite people!

Why Sketching And Wireframing Ideas Strengthens Designs

Sketching is one of the many ways humans have adapted to, to express and expand on ideas. A sketch is more like bringing an idea to a three dimensional view rather than imagining it in the head, which causes our idea to evolve over time as we forget certain elements of our ideas, and replace them with things we thought were part of the idea or ideas.

The future of wireframes?

I have a love hate relationship with wireframes. In the last 10 years they’ve been a part of every web project I’ve worked on. There have been times when I can’t imagine how we would have solved a particular problem without them. Yet there are also times when I’ve been completely exasperated at the amount of time and energy they’ve consumed, seemingly to very little reward.

Wireframes and Mockups examples

UI for SonicSeeds

iPad app design project

Articles Page Wireframe

Website wireframe

 Media Queries

iJustine Wireframe

Wireframe Spotify OS X

Table booking interfaces