A website wireframe is a visual guide, or a skeletal framework that will help you define your future website’s characteristics. By wireframing you are basically defining the primary steps and the shape your website or product is going to have. One of the main purposes of wireframing is to set the main priorities and describe the functionality of your future creation.

Blueprints and various grids are what define the basic sketch and wireframe, and even if most of the times we use those in the design phase, having a basic grid and a proper padding is definitely going to help you avoid messy sketches/wireframes & prototypes.

Why do Wireframing?

Wireframe sketches (image credits: flickr)

Well, in case you are wondering why wireframing is worth it, then you should know that it is one of the crucial steps for a successful website. I consider wireframing an important step because it focuses on various things, including:

• Describe website’s functionality:

  Even if a website’s functionality is mostly defined in the development phase, you can mock-up and explain the functionality of a specific element, widget or section in the design and wireframe/prototyping phase as well. Do that by making use of small drawings or explanation paragraphs.

• The Rules & Guidelines of Displaying Info:

  Wireframes can also be used for displaying various rules or guidelines that will be used in the next steps of designing and developing. Some of them may include but are not limited to grids, padding and spacing rules for widgets/elements.

• Scenarios and “on-Hover” effects:

  Other things that can be planned in a wireframe are possible scenarions and effects, such as the states of a CTA button (static, on-click and hovered). That is something that mustn’t be given much details yet proper planning is indeed crucial.

• Research:

  Research is another important factor that will either lead you to success or two a failure, and when talking about research, you don’t always mean the idea itself, but also the technical details related to your website. Things to consider are: colours, sizes, typography and typefaces etc.

Wireframes and Client Work

Have you ever thought that wireframes, or prototypes which are sort-of improved versions of wireframes can help you with client work, especially in those first rounds of revisions. Many times you end up spending a lot of time on client work which might, or might not yield into a rejection. The last thing you’d like to see is actually face a rejection on a project you spent a lot of time, only because a misunderstood happened, or you didn’t understand what your client needs exactly. That’s when sketches and wireframes come in-hand. It’s very easy to settle on details with your clients when you have some detailed sketches and mock-ups in front. If you’re clients are happy revising those, then I can’t think of a reason why you wouldn’t want to apply such techniques.

Tools for Wireframing

It is actually very easy to get started with wireframing, and the most simple way would consist of a simple paper and a pencil/pen and your creativity. Nothing else you need for the most basic sketch, but if you want to take your sketches, wireframes and prototypes to a next level, then the tools described below will come in-handy for all your next projects.

DOTGRID.CO

Dot Grid notebooks is a pretty “fresh” product that was announced recently, which is a product by Callum Chapman and Steve Vince. It’s very likely you’ll recognize at least one of their names, but I don’t say that you should take their name for it! I can say that their notebooks are of a very good quality and priced accordingly. I’d rather say that the price for their A4/A5 notebooks is very good, comparing all the alternative products that are available as of now. These notebooks are said to have a water resistant cover and are made of paper from sustainable forests.

Behance’s Creative Outfitter: Action Method

In the last years, Behance has become more and more popular among web and UI designers, which is probably why Behance has decided to open their shop with various products, from clothing to various journals and books that would help you with your sketches. On their official store, there are more-or-less, 20+ products in the “print” category alone. The range is various, starting from very small “pads” and “action runners” to dotted sheets and books. The pricing is pretty affordable as well, starting at $6 up to $25. They are also offering some nice accessories and tools that you can easily hook up with the books you might consider getting at the Behance store.

Prototyping Tools

As mentioned above, I’d call prototyping the next level for your sketches and wireframes, which usually are better “visual representations” of your mock-up, but only refined, improved and fixed. That’s why that when it’s the time to take your projects to a next level, you have to “move” them to digital versions, that’s when the tools explained below come in-handy.

UX Pin

One of the best wireframing tools for design that comes to my mind is UXPin. It’s described as a tool built by UX designers for the very same designers. User experience and usability is a very important factor, its principles being applied by the majority, which makes UXPin another better product. Whether you are an expert or you are only starting out, UXPin is definitely something you’d like to consider as it is oriented at both, professionals and starters.

OmniGraffle

Omnigraffle is an application for MAC OS that makes it a lot easier to create charts, page-layouts, shapes, documents and wireframes. It’s highly recommended because it’s very simple, intuitive and beautiful UI will make you feel really comfortable using/managing it. Unfortunately it is not available for Windows, but if you’re still getting it, a free version of the application is available for download.

Smart Draw

SmartDraw is another solution for desktop-based wireframing, being a windows alternative for the Omnigraffle application. The same with the previous application, you can get a free trial and a full version of the application. It has a slightly unattractive user interface, but they do offer support and training for their application so no doubts you’ll get the job easily done.

Beautiful Examples of Sketches

High On Pixels

Dragon Button Sketch

Map on Hover Sketch

Icon Set Sketch

iOS Game Chaps!

Icons Sketch

Skill Tree for iPad RPG

Character Sketch

Tiny bird Sketch of an iOS Application