{"id":27682,"date":"2016-08-10T23:01:38","date_gmt":"2016-08-10T15:01:38","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27682"},"modified":"2022-08-16T21:07:11","modified_gmt":"2022-08-16T13:07:11","slug":"sketching-resources-grid-wireframes","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/","title":{"rendered":"Best Resources For Sketching Grid-Based Wireframes"},"content":{"rendered":"

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

I\u2019m a fan of traditional paper and pencil with extra tools<\/a> as needed. But digital wireframing<\/strong> is also big, and it\u2019s a viable option for modern designers. In this article, I\u2019d like to share the best resources for both techniques to help you create your own grid-based UI wireframes<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t5 Alternatives to Photoshop for Web Design Prototyping<\/a>\n\t\t\t\t<\/p>\n

Early UI\/UX Conceptualization<\/h2>\n

Let\u2019s start by clarifying the differences<\/a> between a wireframe<\/strong> and a prototype<\/strong>. These two words are often used interchangeably because they relate to the same process.<\/p>\n

A wireframe<\/strong> is a single static sketch<\/strong> 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<\/strong>.<\/p>\n

Similarly, a prototype<\/strong> is like a flowchart showing how different pages link together<\/strong>. So a prototype connects wireframes to demonstrate how different buttons or links should lead to other pages.<\/p>\n

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\u2019ve commonly seen them described, and it\u2019s how many designers understand these terms the best.<\/p>\n

\"Notebook
IMAGE: Oykun Yilmaz<\/a><\/figcaption><\/figure>\n

So what are you supposed to exactly do with these early conceptual pieces? Are they really necessary? I\u2019d say prototyping is not always necessary, but it\u2019s a very good idea, especially for designing apps with complex interactions.<\/p>\n

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

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t10 Free Wireframe Kits For UI Designers<\/a>\n\t\t\t\t<\/p>\n

Goals For Wireframing<\/h2>\n

Every time you start a new project you should contemplate what you\u2019re trying to solve<\/strong>. Each site is built with a specific goal in mind. Many sites even have multiple goals and some goals are more important than others.<\/p>\n

Use wireframing as a guide to help you find the best strategy for capturing the goal(s) of a website<\/strong>. This probably won\u2019t happen on the first wireframe, so be prepared to sketch a lot of different ideas<\/a><\/strong>.<\/p>\n

\"Grid
IMAGE: Oykun Yilmaz<\/a><\/figcaption><\/figure>\n

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

Think of wireframes from an interactive standpoint<\/strong>. These aren\u2019t just pretty pictures. They\u2019re representations of digital interfaces, and you want to sketch your ideas with that in mind.<\/p>\n

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\u2019s check out the best resources for creating wireframes.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t20 Design Books For Sketching, Typography & New Ideas<\/a>\n\t\t\t\t<\/p>\n

Grid Sketchpads<\/h2>\n

You can always start with basic thumbnail sketches<\/a> on printer paper just to map out rough ideas<\/strong>. Personally, I usually start working on printer paper because this way, I\u2019m less concerned about grids and more about generating ideas<\/strong>.<\/p>\n

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

\"Mobile
IMAGE: Oykun Yilmaz<\/a><\/figcaption><\/figure>\n

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

Another very cool and customizable product is Dotgrid<\/a>. All of Dotgrid\u2019s items are more expensive than Rhodia\u2019s books, but they come with more materials and custom cover designs.<\/p>\n

\"Dotgrid<\/a><\/figure>\n

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

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

The Responsive Design Sketchbook<\/a> 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<\/strong> on top of a grid layout.<\/p>\n

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

\"Sketchbook<\/a><\/figure>\n

Although the design is bland compared to the Dotgrid books, nobody else has considered responsive sketchbooks for web designers. If you\u2019re into that kinda thing, then it\u2019s worth ordering one for a test drive.<\/p>\n

If you\u2019re really into handmade stuff, and don\u2019t want to spend any money you can also print your own grid pages<\/strong> with Interface Sketch. This free site offers different grid templates<\/strong> that you can print and use for hand-drawn wireframes.<\/p>\n

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.<\/p>\n

\"Interface<\/figure>\n

All of these options are great and well worth exploring if you\u2019re into pencil sketching<\/strong>. Paper is one of the easiest mediums to get down new ideas quickly, so it\u2019s often the preferred choice even by UI designers.<\/p>\n

Digital Tools and Web Apps<\/h2>\n

There are so many great wireframing programs<\/a> out there that they can be hardly covered without risking analysis paralysis, so for now let\u2019s focus on some of the best options for grid-based wireframing<\/strong>.<\/p>\n

First, I\u2019d like to mention that you can use Adobe tools such as Illustrator<\/a> to create your own wireframes<\/strong>. This isn\u2019t part of everyone\u2019s workflow and Illustrator certainly isn\u2019t free. But if you already work with Adobe Creative Cloud, then it might be a good place to start.<\/p>\n

1. Moqups<\/a><\/h3>\n

Moqups<\/a> is one of the best online tools for wireframing<\/strong>. You work with a visual editor and a library of assets to drag and drop all over the page.<\/p>\n

Each new Moqups project has a pre-defined grid<\/strong>, and uses bright purple lines to help you snap elements into alignment. It\u2019s a great web tool that makes designing with a grid so much easier.<\/p>\n

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

\"Moqups<\/a><\/figure>\n

2. Grid Papr<\/h3>\n

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.<\/p>\n

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

\"Grid<\/figure>\n

3. Wireframe.cc<\/a><\/h3>\n

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

This is yet another tool offered for free with optional premium plans. Each plan is billed monthly, so it\u2019s very similar to Moqups\u2019s in price structure. The free tool is usable from any computer without an account.<\/p>\n

\"Wireframe<\/a><\/figure>\n

4. Mockingbird<\/a><\/h3>\n

Mockingbird<\/a> 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.<\/p>\n

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

\"Mockingbird<\/a><\/figure>\n

Recommended Reading:<\/strong> Useful wireframing and prototyping tools <\/a><\/p>\n

Final Words<\/h3>\n

No matter whether you choose traditional or digital wireframing, it\u2019s always about the quality of output<\/strong>. There\u2019s a lot to learn when doing this kind of work, so find whatever tool feels the most comfortable to you.<\/p>\n

Moving forward the best thing to do is just start wireframing<\/strong>. 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.<\/p>\n

(Cover photo by Oykun Yilmaz<\/a>)<\/em><\/p>","protected":false},"excerpt":{"rendered":"

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\u2019m a fan of traditional…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[1733,1731],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nBest Resources For Sketching Grid-Based Wireframes - Hongkiat<\/title>\n<meta name=\"description\" content=\"The process of designing an interface always starts with idea generation. This includes visualization, researching other sites, and rapid prototyping.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best Resources For Sketching Grid-Based Wireframes\" \/>\n<meta property=\"og:description\" content=\"The process of designing an interface always starts with idea generation. This includes visualization, researching other sites, and rapid prototyping.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-10T15:01:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-16T13:07:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/sketching-resources-grid-wireframes\/01-sketching-dot-notebook-wireframe.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Best Resources For Sketching Grid-Based Wireframes\",\"datePublished\":\"2016-08-10T15:01:38+00:00\",\"dateModified\":\"2022-08-16T13:07:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/\"},\"wordCount\":1494,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sketching-resources-grid-wireframes\\\/01-sketching-dot-notebook-wireframe.jpg\",\"keywords\":[\"prototype\",\"wireframing\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/\",\"name\":\"Best Resources For Sketching Grid-Based Wireframes - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sketching-resources-grid-wireframes\\\/01-sketching-dot-notebook-wireframe.jpg\",\"datePublished\":\"2016-08-10T15:01:38+00:00\",\"dateModified\":\"2022-08-16T13:07:11+00:00\",\"description\":\"The process of designing an interface always starts with idea generation. This includes visualization, researching other sites, and rapid prototyping.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sketching-resources-grid-wireframes\\\/01-sketching-dot-notebook-wireframe.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sketching-resources-grid-wireframes\\\/01-sketching-dot-notebook-wireframe.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sketching-resources-grid-wireframes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Best Resources For Sketching Grid-Based Wireframes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Best Resources For Sketching Grid-Based Wireframes - Hongkiat","description":"The process of designing an interface always starts with idea generation. This includes visualization, researching other sites, and rapid prototyping.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/","og_locale":"en_US","og_type":"article","og_title":"Best Resources For Sketching Grid-Based Wireframes","og_description":"The process of designing an interface always starts with idea generation. This includes visualization, researching other sites, and rapid prototyping.","og_url":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-08-10T15:01:38+00:00","article_modified_time":"2022-08-16T13:07:11+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/sketching-resources-grid-wireframes\/01-sketching-dot-notebook-wireframe.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Best Resources For Sketching Grid-Based Wireframes","datePublished":"2016-08-10T15:01:38+00:00","dateModified":"2022-08-16T13:07:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/"},"wordCount":1494,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sketching-resources-grid-wireframes\/01-sketching-dot-notebook-wireframe.jpg","keywords":["prototype","wireframing"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/","url":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/","name":"Best Resources For Sketching Grid-Based Wireframes - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sketching-resources-grid-wireframes\/01-sketching-dot-notebook-wireframe.jpg","datePublished":"2016-08-10T15:01:38+00:00","dateModified":"2022-08-16T13:07:11+00:00","description":"The process of designing an interface always starts with idea generation. This includes visualization, researching other sites, and rapid prototyping.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/sketching-resources-grid-wireframes\/01-sketching-dot-notebook-wireframe.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/sketching-resources-grid-wireframes\/01-sketching-dot-notebook-wireframe.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/sketching-resources-grid-wireframes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Best Resources For Sketching Grid-Based Wireframes"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7cu","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=27682"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27682\/revisions"}],"predecessor-version":[{"id":61722,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27682\/revisions\/61722"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=27682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=27682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=27682"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=27682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}