Best Resources For Sketching Grid-Based Wireframes

By Jake Rocheleau. in UI/UX. Updated on August 16, 2022.

The process of designing an interface always starts with idea generation. This includes visualization, researching other sites, and rapid prototyping. This early idea phase is crucial to understanding the layout and user experience you intend to build. So how should you actually perform the wireframing work on a new project?

I’m a fan of traditional paper and pencil with extra tools as needed. But digital wireframing is also big, and it’s a viable option for modern designers. In this article, I’d like to share the best resources for both techniques to help you create your own grid-based UI wireframes.

Early UI/UX Conceptualization

Let’s start by clarifying the differences between a wireframe and a prototype. These two words are often used interchangeably because they relate to the same process.

A wireframe is a single static sketch of the UI of a web page or an app. It may have callouts to explain button text, margins, element sizes, or even animations. But wireframes are just rough drafts for individual pages.

Similarly, a prototype is like a flowchart showing how different pages link together. So a prototype connects wireframes to demonstrate how different buttons or links should lead to other pages.

These definitions are not carved in stone, some designers may have their own terminology and may disagree with my exact wording. But this is how I’ve commonly seen them described, and it’s how many designers understand these terms the best.

Notebook Sketching Dots Grid — IMAGE: Oykun Yilmaz

So what are you supposed to exactly do with these early conceptual pieces? Are they really necessary? I’d say prototyping is not always necessary, but it’s a very good idea, especially for designing apps with complex interactions.

But wireframing is always a good idea for every new project. It helps you focus on the big picture without worrying about details. You get a sense of how the overall page is laid out, and this is invaluable when you’re designing a concrete layout.

Goals For Wireframing

Every time you start a new project you should contemplate what you’re trying to solve. Each site is built with a specific goal in mind. Many sites even have multiple goals and some goals are more important than others.

Use wireframing as a guide to help you find the best strategy for capturing the goal(s) of a website. This probably won’t happen on the first wireframe, so be prepared to sketch a lot of different ideas.

Grid Notebook Sketching Wireframe — IMAGE: Oykun Yilmaz

Look up other similar websites, and write down their best features. Analyze how the content is organized and how you move through each page.

Think of wireframes from an interactive standpoint. These aren’t just pretty pictures. They’re representations of digital interfaces, and you want to sketch your ideas with that in mind.

Having grid-based resources at hand, whether they are made of paper or they are digital, can help a lot in quick sketching. Now let’s check out the best resources for creating wireframes.

Grid Sketchpads

You can always start with basic thumbnail sketches on printer paper just to map out rough ideas. Personally, I usually start working on printer paper because this way, I’m less concerned about grids and more about generating ideas.

Dot grid sketchpads are the best way to go if you want to clean up an idea, and give it more structure. The grid helps you estimate distances between items on the page, and create a sort of symmetry in the wireframe.

Mobile App UI Wireframe Sketch — IMAGE: Oykun Yilmaz

There are many great product out there if you want to start wireframing on paper, for instance the Rhodia Dot Pad comes in various sizes for everyday use. It only comes with 80 pages, but this is fairly typical of most grid sketchbooks.

Another very cool and customizable product is Dotgrid. All of Dotgrid’s items are more expensive than Rhodia’s books, but they come with more materials and custom cover designs.

Dotgrid even accepts bespoke orders that let you design your own custom sketchpad. Each book contains just under 100 sheets, so including the front & back you get about 200 pages for grid sketching.

A couple of other dot grid sketchbooks I want to mention include the Behance Dot Grid which is hardcover and spiral bound, although it only contains 50 sheets of paper.

The Responsive Design Sketchbook is one of the best resources for web designers. No other product designer would need a responsive design sketchbook, but web designers benefit greatly from the freedom to generate ideas at varying device widths on top of a grid layout.

These responsive design pads also have 50 sheets totaling 100 pages, but each page has four different responsive grids representing different breakpoints in responsive design: desktop, laptop, tablet and smartphone.

Although the design is bland compared to the Dotgrid books, nobody else has considered responsive sketchbooks for web designers. If you’re into that kinda thing, then it’s worth ordering one for a test drive.

If you’re really into handmade stuff, and don’t want to spend any money you can also print your own grid pages with Interface Sketch. This free site offers different grid templates that you can print and use for hand-drawn wireframes.

The grids come in A4 and US letter sizes for different styles of printer paper. You can choose from many options, such as templates for a full-length web browser or different iPhone screens.

All of these options are great and well worth exploring if you’re into pencil sketching. Paper is one of the easiest mediums to get down new ideas quickly, so it’s often the preferred choice even by UI designers.

Digital Tools and Web Apps

There are so many great wireframing programs out there that they can be hardly covered without risking analysis paralysis, so for now let’s focus on some of the best options for grid-based wireframing.

First, I’d like to mention that you can use Adobe tools such as Illustrator to create your own wireframes. This isn’t part of everyone’s workflow and Illustrator certainly isn’t free. But if you already work with Adobe Creative Cloud, then it might be a good place to start.

1. Moqups

Moqups is one of the best online tools for wireframing. You work with a visual editor and a library of assets to drag and drop all over the page.

Each new Moqups project has a pre-defined grid, and uses bright purple lines to help you snap elements into alignment. It’s a great web tool that makes designing with a grid so much easier.

The site operates by default on a free plan which limits the user to 300-page objects. The site does have premium options but paying a monthly fee might be more annoying than just going with Adobe tools, or a one-time purchase of Sketch.

2. Grid Papr

The Grid Papr web app is completely free and offers both public and private accounts for your wireframes. You create a name for your project and get your own unique URL for the wireframe, which you can edit from any computer.

Each new wireframe comes with a grid which lets you perform snap-to-grid on all elements. The features are simple, but they’re enough to create a lo-fi wireframe in minutes. Just drag whatever you want onto the page, and follow the grid to create a stellar wireframe.

3. Wireframe.cc

Wireframe.cc is one of the simplest and most minimal tools you can use for wireframing. It features a clutter-free interface with a pre-built grid and organized toolbars. You simply click & drag to create new elements on the canvas. You can also save and share your work.

This is yet another tool offered for free with optional premium plans. Each plan is billed monthly, so it’s very similar to Moqups’s in price structure. The free tool is usable from any computer without an account.

4. Mockingbird

Mockingbird is another great option, which offers a lot more features than most wireframing tools. You can get started for free, but the trial is limited to 7 days. This can be an annoyance to some users, but the tool is really incredible and runs in all browsers.

Mockingbird has an endless library of UI elements such as tabs, accordions, dropdown menus, video players, and simple text links. The default grid uses the 960gs grid system, but you can choose from 12, 16, and 24 columns.

Recommended Reading: Useful wireframing and prototyping tools

Final Words

No matter whether you choose traditional or digital wireframing, it’s always about the quality of output. There’s a lot to learn when doing this kind of work, so find whatever tool feels the most comfortable to you.

Moving forward the best thing to do is just start wireframing. Get a feel for whatever you like the best (paper or digital), and make it your own. The resources in this article should give you more than enough to get started with wireframing your own digital interfaces.

(Cover photo by Oykun Yilmaz)