Tag Archives: wireframe

Wireframe with jQuery plugin

Leave a reply

I’ve started playing around with the idea of creating a plugin for jQuery that makes quick wireframe prototyping easy.  I still need to add more controls, but when combined with jQuery UI, things can be mocked up really fast.

start with some HTML

   1: <body>

   2:   <header>      

   3:   </header>

   4:   <div role="main">

   5:       <div class="content">

   6:           <div class="placeholderimage" style="height: 200px; width: 200px; float:  left; margin-right: 10px;">

   7:           </div>

   8:           <div class="box" style="height: 400px; width: 200px; float:  right; margin-left: 10px;">

   9:               <div class="box" style="height: 100px; width: 90%; margin-left: auto; margin-right: auto; margin-top:20px;"></div>

  10:               <div class="box" style="height: 100px; width: 90%; margin-left: auto; margin-right: auto; margin-top:20px;"></div>

  11:               <div class="box" style="height: 100px; width: 90%; margin-left: auto; margin-right: auto; margin-top:20px;"></div>

  12:           </div>

  13:  

  14:            <div class="placeholdertext">

  15:           </div>

  16:       </div>

  17:   </div>

  18:   <footer>      

  19:   </footer>

  20: </body>

Some CSS

body {
    font-family: sans-serif;
    background: #fff;
    color: #333;
    width: 940px;
    margin: 0 auto;
}
 
div[role="main"] {
    font-size: 1em;
}
 
.content {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}

Then add some of the jQuery plugin code

 

$('.placeholderimage').wireframe('image', {label: 'feature'});

$('.placeholdertext').wireframe('text', {characters: 1000});

$('header').wireframe('box', {label: 'header'});

$('footer').wireframe('box', {label: 'footer'});

$('.box').wireframe('box', {label: 'feature'});

output results look like this.

wireframe_output

Get the plugin code for Wireframe.jq.js

Simple CSS based wireframe annotation

Leave a reply

A while back I created a simple CSS based solution to annotate wireframes for one of my clients.  This created a simple web based view of the wireframes.   I created the wireframes in OmniGraffle.  As a side note, I love OmniGraffle.  It’s one of my most favorite applications.  The Omni Group makes amazing software in general.  If I didn’t have to use a Windows PC for work, I would be using their software all the time.  It makes me sad that there isn’t a version for Windows.   My favorite part of this solution is that is works on screen and in print.  By creating a print version of the CSS it’s a simple process to print out a non interactive version of the wireframes if you need a hard copy.

image

The basic idea is to have a simple wireframe image loaded up with an image map to handle navigation. The image map part in this example was created using OmniGraffle, but you could use which ever tool you prefer.

   1: <map name="GraffleExport">
   2:     <area shape=rect coords="20,366,169,450" href="News.html">
   3:     <area shape=rect coords="16,232,138,246" href="Products_List.html">
   4:     <area shape=rect coords="25,196,158,210" href="Suppliers_Page.html">
   5:     <area shape=rect coords="137,155,162,169" href="Products_Search_Results.html">
   6:     <area shape=rect coords="181,366,453,450" href="News.html">
   7:     <area shape=rect coords="466,106,752,180" href="About_CP_-_Careers.html">
   8:     <area shape=rect coords="466,331,750,450" href="Customers.html">
   9:     <area shape=rect coords="466,189,750,321" href="Suppliers_Overview.html">
  10:     <area shape=rect coords="0,0,13,14" href="Stucture.html">
  11:     <area shape=rect coords="686,77,740,91" href="About_- Careers.html">
  12:     <area shape=rect coords="175,77,222,91" href="News.html">
  13:     <area shape=rect coords="121,77,181,91" href="Products.html">
  14:     <area shape=rect coords="62,77,127,91" href="Services_Solutions.html">
  15:     <area shape=rect coords="217,77,266,91" href="About.html">
  16:     <area shape=rect coords="29,17,256,59" href="Landing_Page.html">
  17:     <area shape=rect coords="643,77,693,91" href="Contact.html">
  18:     <area shape=rect coords="25,77,65,91" href="Landing_Page.html">
  19:     <area shape=rect coords="512,17,739,59" href="Login_Register_block.html">
  20: </map>

For the notation part the notes are contained in DIV tags at the bottom of the HTML document and then placed with CSS and use JavaScript for the moue over behavior below is an example of one note.

HTML of the note:

   1: <div class="noteblock">
   2:     <div class="note" id="note001" onmouseover="return escape(document.getElementById('note001text').innerHTML)">1</div>
   3:     <div class="notetext" id="note001text">
   4:         1. This is the login is / register box. The behavior is for it to dynamically swap out with login box if selected. <br/>
   5:         <img src="loginNote.png"/>
   6:     </div>
   7: </div>

The CSS used handle to layout and display:

   1: .note {
   2:     font-family: tahoma, Arial, Helvetica, sans-serif;
   3:     font-size: 9px;
   4:     font-weight: bold;
   5:     background-color: #FFFF99;
   6:     border: 1px solid #FFCC33;
   7:     color: #996600;
   8:     width: 16px;
   9:     height: 16px;
  10:     text-align: center;
  11:     visibility: visible;
  12: }
  13:  
  14: .notetext { visibility: hidden; }
  15:  
  16: #note001 {
  17:     position: absolute;
  18:     left: 493px;
  19:     top: 20px;    
  20: }
  21: 

 

The for the to get the note to appear next to the cursor I use wz_tooltip.js.  To handle the hide and reveal the notation layer I put together the following javascript:

   1: function getAllRules()
   2: {
   3:     if (document.styleSheets)
   4:     {
   5:         var theRules = new Array();
   6:         if (document.styleSheets[1].cssRules)
   7:             theRules = document.styleSheets[1].cssRules
   8:         else if (document.styleSheets[1].rules)
   9:             theRules = document.styleSheets[1].rules
  10:         else
  11:             return "Your browser doesn't support rules[] or cssRules[]";
  12:  
  13:         var returnstring = '';
  14:         for (var i=0;i<theRules.length;i++)
  15:         {
  16:             returnstring += i + ' = ' + theRules[i].selectorText + '<br>';
  17:         }
  18:         return returnstring;
  19:     }
  20:     else
  21:         return "Your browser doesn't support document.styleSheets";
  22: }
  23:  
  24:  
  25: function hideIt()
  26: {
  27:     
  28:     if (!document.styleSheets) return;
  29:     var theRules = new Array();
  30:     if (document.styleSheets[0].cssRules)
  31:         theRules = document.styleSheets[0].cssRules
  32:     else if (document.styleSheets[0].rules)
  33:         theRules = document.styleSheets[0].rules
  34:     else return;
  35:     theRules[0].style.visibility = 'hidden';
  36: }
  37:  
  38: function showIt()
  39: {    
  40:     if (!document.styleSheets) return;
  41:     var theRules = new Array();
  42:     if (document.styleSheets[0].cssRules)
  43:         theRules = document.styleSheets[0].cssRules
  44:     else if (document.styleSheets[0].rules)
  45:         theRules = document.styleSheets[0].rules
  46:     else return;
  47:     theRules[0].style.visibility = 'visible';
  48: }
  49: 

 

For the print CSS it’s loaded and defined with the CSS print media type

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Here’s the print.css:

   1: .note {
   2:     font-family: tahoma, Arial, Helvetica, sans-serif;
   3:     font-size: 9px;
   4:     font-weight: bold;
   5:     background-color: #FFFF99;
   6:     border: 1px solid #FFCC33;
   7:     color: #996600;
   8:     width: 16px;
   9:     height: 16px;
  10:     text-align: center;
  11:     visibility: visible;
  12:     position: static;
  13: }
  14:  
  15: .notetext { 
  16:     font-size: 9px;
  17:     visibility: visible; 
  18: }
  19:  
  20: body { 
  21:     margin: 0px 0px 0px 0px;
  22:     padding: 0px 0px 0px 0px;
  23:     }
  24:  
  25: #top {
  26:     display: none;    
  27: }
  28: #top a {color: #999999;}
  29:  
  30: .noteblock {
  31:     margin: 26px;
  32:     padding-top: 12px;
  33:     border-top: 1px dotted #666;
  34: }

 

Here’s how it looks:

image

You can view the example of the wireframe notation.

I found this form to very helpful with several of my clients.  My favorite part is the ability to walk a client through the interaction and leave it behind since the notation is inline it helps answer most of the questions about interaction that are not represented by the wireframes.