Friday, 10 August 2012

Wirefy responsive wireframes


A Rapid Responsive Wireframing Tool To Demonstrate Hierarchy And Functionality

What Is It?

Wirefy is a collection of CSS & JS files to help you rapidly experiment with responsive wireframes. Whether you keep them to yourself or use them to help educate your clients, Wirefy is flexible and here to help. Wirefy has been built from the ground up. Following the philosophy of mobile first, Wirefy will respond to the proper viewport. Go ahead, resize this page to see how it works. Wirefy is style agnostic so that clients don't get hung up on colours, fonts, other design elements. It's meant to be another tool for your development kit that provides the most basic styles as a foundation.

The Grid

The base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. Go ahead, resize the browser and watch as the layout reacts!
ONE
FIFTEEN
TWO
FOURTEEN
THREE
THIRTEEN
FOUR
TWELVE
FIVE
ELEVEN
SIX
TEN
SEVEN
NINE
EIGHT
EIGHT
NINE
SEVEN
TEN
SIX
ELEVEN
FIVE
TWELVE
FOUR
THIRTEEN
THREE
FOURTEEN
TWO
FIFTEEN
ONE
Code Example
<nav role="navigation">
  <ul>
    <li><a href="#">Sample Page 1</a></li>
    <li><a href="#">Sample Page 2</a></li>
    <li><a href="#">Sample Page 3</a></li>
  </ul>
</nav>
Code Example
<ul class="breadcrumb">
  <li><a href="#">Home</a><span class="divider"></span></li>
  <li><a href="#">Library</a><span class="divider"></span></li>
  <li class="active">Data</li>
</ul>

Pagination

Simplistic and minimally styled pagination that is easily scalable and provides larger click areas.
Code Example
<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
  </ul>
</div>

Pager

a set of links for simple pagination implementations with light markup and even lighter styles.
Code Example
<ul class="pager">
  <li class="previous"><a href="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul>

Images

Images are useful to show clients. But you don't want them hung up on styles. You can change the size of any of the images just by changing the dimension at the end.

Slideshow

The use of slideshows and galleries can be very important in creating a solid user experience. With the help ofResponsiveSlide.js, you can create a basic slideshow. To use please review responsive_slideshow.js and select one of the slider id's listed there.
VERTICALLY CENTERED ON BOTH SIDES
TRANSPARENT BUTTONS OVER THE LEFT AND RIGHT SIDE
100% HEIGHT WITH VERTICALLY CENTERED ICONS
Code Example
<ul class="rslides" id="slider#">
  <li><img src="1.jpg" alt="" /></li>
  <li><img src="2.jpg" alt="" /></li>
  <li><img src="3.jpg" alt="" /></li>
</ul>

Typography

The typography of Wirefy is designed to create a strong hierarchy with basic styles for your use. In the styles, we have included rem, em and pixels depending on your needs. Regular paragraphs have been set to 1.4rem base with 2.1rem line height. No wireframe would be complete with a set of icons. Wirefy has opted to use Font Awesome.

Heading <h1>

Heading <h2>

Heading <h3>

Heading <h4>

Heading <h5>
HEADING <H6>
Designing for users instead of technology is awesome.
Chris Da Sie, UX Designer

Icon Fonts

This is only a sample of what icons are available. For a full list, please visit Font Awesome.
  • Icon Glass
  •  Icon Music
  • Icon Search
  •  Icon Envelope
  • Icon Heart
  •  Icon Star
  • Icon Star Empty
  •  Icon User
  • Icon Film
  •  Icon Large Grid
  • Icon Grid
  •  Icon List
  • Icon Ok
  •  Icon Remove
  • Icon Zoom In
  •  Icon Zoom Out
  • Icon Off
  •  Icon Signal
  • Icon Cog
  •  Icon Trash
  • Icon Home
  •  Icon File
  • Icon Time
  •  Icon Road
Code Example
<p class="icon-user">Icon User</p>

Buttons

Buttons are intended for action and thus should have appropriate weight. The standard button is given that weight with a little bit of depth and a strong hover.
Code Example
<a href="#" class="button">Click Me</a>

<!-- OR -->

<button>Click Me</button>

Tabs

Some very simple tabs that have dead simple jQuery that hook them up to their corresponding content.
  • The tabs are clean and simple unordered-list markup and basic CSS.
Code Example
<ul class="tabs">
  <li><a class="active" href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>
<ul class="tabs-content">
  <li class="active" id="tab1">Lorem ipsum dolor sit amet.</li>
  <li id="tab2">Aliquam tincidunt mauris eu risus.</li>
  <li id="tab3">Vestibulum auctor dapibus neque.</li>
</ul>

Tables

Tables can be very useful as a way to display simple data sets to clients.

Unclassified table

HeaderHeaderHeader
DataDataData
DataDataData
DataDataData

Condensed table

HeaderHeaderHeader
DataDataData
DataDataData
DataDataData

Table (table-striped)

HeaderHeaderHeader
DataDataData
DataDataData
DataDataData

Table (table-bordered)

HeaderHeaderHeader
DataDataData
DataDataData
DataDataData

Table (table-bordered and table-striped)

HeaderHeaderHeader
DataDataData
DataDataData
DataDataData
Code Example
<table>
  <thead>
    <tr>
      <th scope="col">Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Data</th>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
      <th scope="row">Data</th>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
      <th scope="row">Data</th>
        <td>Data</td>
        <td>Data</td>
    </tr>
  </tbody>
</table>

Forms

Forms can be one of the biggest pains for clients to understand especially when it comes to the being responsive. So here are some examples you can use to show them.
Search
HTML5 Inputs
Number Selectors
Checkboxes
Radio Buttons

Media Queries

  • 320px
  • 640px
  • 720px
  • 888px
  • 984px
  • 1200px

Support for Wirefy

Do you have feedback, questions or ideas about how to make Wirefy better - Send them along to chris@chrisdasie.comand I will get back to you as soon as I can
  • Wirefy has been tested across as many devices and browsers as I could get my hands on:
    • Latest Chrome (Mac/PC)
    • Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)
    • Latest Safari
    • IE9, IE8, IE7
    • iPhone (Retina)
    • Droid (Charge/Original)
    • iPad

Downloads

The Wirefy download is a zip file (~700Kb) containing all the CSS groundwork and JS goodies to help you get start wireframing your next project.
Download Wirefy 1.4.4 from Github
or View Source on Github
The file structure for Wirefy is:
  • index.html: The base html page that includes the necessary initial markup
  • stylesheets (folder)
    • base.css: Basic styles of Wirefy
    • layout.css: File with no specific styles, but a variety of useful media queries
  • js (folder)
    • tabs
    • plugins
    • helper
    • jQuery
    • modernizr
    • selectivizr
    • bootstrap-typeahead
    • responsive_dropdown
    • responsiveslides.min
    • jquery.flexnav-min
    • responsive_select_element
    • respond
    • responsive_slideshow
    • script
  • img (folder):
    • Several images for startup
  • robots.txt: SEO, search-crawler file. Don't need to touch it, just there for your own good
  • humans.txt: Author information.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)