---
title: "Show Me, Don&#8217;t Tell Me &#8211; why to sketch and wireframe"
date: 2010-12-08T06:50:14+00:00
author: "poornerd"
tags: ["mockup", "sketch", "wireframe"]
canonical: https://www.poornerd.com/2010/12/08/show-me-dont-tell-me-why-to-sketch-and-wireframe/
source: Raw Markdown twin of the HTML article; content is the original source.
---
A Blog that I like to read &#8211; The ZURBlog just posted a great article on using sketches for mockups and wireframing.

<div style="overflow:hidden;; " class="alignnone">
  <div style="background: transparent url(https://www.poornerd.com/wp-content/plugins/shadows/shadow_osx_small.png) no-repeat left top; width: 30px; height: 2px; float: left;" class="shadow_img">
  </div>
  
  <div style="background: transparent url(https://www.poornerd.com/wp-content/plugins/shadows/shadow_osx_small.png) no-repeat right top; width: 30px; height: 2px; float: right;" class="shadow_img">
  </div>
  
  <div style="background: transparent url(https://www.poornerd.com/wp-content/plugins/shadows/shadow_osx_small_top.png) repeat-x center top; margin: 0 30px; height: 2px;" class="shadow_img">
  </div>
  
  <table style="margin:0;padding:0;width:100%;empty-cells:show;border-collapse:collapse;">
    <tr>
      <td style="margin:0;padding:0;border-width:0;background: transparent url(https://www.poornerd.com/wp-content/plugins/shadows/shadow_osx_small.png) no-repeat left -2px; width: 6px; height: 25px;" class="shadow_img">
      </td><td rowspan=2 style="margin:0;padding:0;border-width:0; background-color: transparent;"> 
      
      <div class="shadow_osx_small" style="margin:0 !important; max-width:100% !important; min-height: 25px !important; border: 1px solid #d4d4d4;">
        <blockquote>
          <p>
            At ZURB, we think of an opportunity sketch as an illustrated question. Each sketch represents a focused idea we have about the product, and it can be something to tackle within the timeframe of the contract, or a piece that can serve as a reference for a further release. The questions that these sketches pose include:
          </p>
          
          <ul>
            <li>
              How are we addressing the current problems of the existing product?
            </li>
            <li>
              Is this idea possible with the current technology?
            </li>
            <li>
              Does this opportunity fit within the product&#8217;s mission and goal?
            </li>
            <li>
              Will this help ease the user&#8217;s workflow, or make it more complicated?
            </li>
            <li>
              Are we providing something that&#8217;s actually useful, or is it more form than function?
            </li>
          </ul>
          
          <p>
            &#8230;<br /> <img src="https://www.poornerd.com/wp-content/uploads/2010/12/opportunity-sketch-1.jpg" alt="prototype" />
          </p>
          
          <p>
            Use your sketches as a talking point and get your client&#8217;s feedback on which sketches both fit their business strategy and excites them. From there, it&#8217;s all about focus so refine those sketches even more until you&#8217;re ready to move on to low-fi wireframes
          </p>
        </blockquote>
      </div></td> 
      
      <td style="margin:0;padding:0;border-width:0;background: transparent url(https://www.poornerd.com/wp-content/plugins/shadows/shadow_osx_small.png) no-repeat right -2px; width: 6px; height: 25px;" class="shadow_img">
      </td>
    </tr>
    
    <tr>
      <td style="background: transparent url(https://www.poornerd.com/wp-content/plugins/shadows/shadow_osx_small_left.png) repeat-y left center; width: 6px;margin:0;padding:0;border-width:0;" class="shadow_img">
      </td>
      
      <td style="background: transparent url(https://www.poornerd.com/wp-content/plugins/shadows/shadow_osx_small_right.png) repeat-y right center; width: 6px;margin:0;padding:0;border-width:0;" class="shadow_img">
      </td>
    </tr>
  </table>
  
  <div style="background: transparent url(https://www.poornerd.com/wp-content/plugins/shadows/shadow_osx_small.png) no-repeat left bottom; width: 30px; height: 10px; float: left;" class="shadow_img">
  </div>
  
  <div style="background: transparent url(https://www.poornerd.com/wp-content/plugins/shadows/shadow_osx_small.png) no-repeat right bottom; width: 30px; height: 10px; float: right;" class="shadow_img">
  </div>
  
  <div style="background: transparent url(https://www.poornerd.com/wp-content/plugins/shadows/shadow_osx_small_bottom.png) repeat-x center bottom; margin: 0 30px; height: 10px;" class="shadow_img">
  </div>
</div>
