Totalwireframe is now free for everyone.

Oh! You are the type of people who browses the web on your mobile. Good, good. Everything works on mobile, including the purchase process.

Totalwireframe Manual

A collection of useful guides to help you use Axure and our libraries

Overview

The grid

Most of the libraries sold by Totalwireframe are based on a grid system.

A grid system is a serie of vertical lines that helps structure the content on a page. We have chosen to use the grid system used by Bootstrap (the famous CSS framework) in our libraries, i.e. 12 columns for a total width of 1170 pixels.

Most of the widgets of the libraries have been made to fit into this grid. They are identified by a number in parenthesis, like (9) for instance.

The main advantage of this is to let you choose a layout - say a 9-columns main content along with a 3-columns sidebar. With this structure, you can load the Sidebar library and fill the sidebar with any of the widgets in this library - they will all match the sidebar no matter its size, perfectly.

Below is a representation of what this looks like in practice.

Grid

Mobile and responsive

For Axure Essentials, all the widgets and libraries have been made to be responsive. Axure has introduced a responsive mode that lets you mimic what would happen if the wireframe you are building was viewed on different screen sizes (think, mobile).

We are taking advantages of this new feature by providing to every single widget in our libraries the ability to have a responsive mode. It has taken a lot of time to get it right, but we think you will like the experience.

Each library of Axure Essentials supports 5 different viewports, the default viewport being the desktop view. Then we have 4 different viewport sizes, matching the most popular screen sizes on mobile available on the market today (as of March 2015).

iPhone 1 5s Nexus 5 - Galaxy S3, S4, S5 iPhone 6 iPhone 6 Plus Desktop
<= 320px <= 360px <= 375px <= 414px >= 1024px

What does this mean in practice?

Each time you drag and drop a widget on the Desktop view, the widget will automatically load an optimized version of this widget in the other viewports. This will be greatly improve the time required to build responsive wireframes.

Here is an example with the Blog Library.

Grid

Typography

A great care has been put into making sure that each widget looks good - typography wise. The default typography is Helvetica Neue, available on all OSX platforms, which degrades into Helvetica on Windows. The default label and paragraph size is set to 14px with a line-height of 22px. Most text-based widgets match 3 columns in the default viewport.

On very few cases, the widgets use Arial instead of Helvetica. This is because of a very nasty bug in the latest version of Chrome: on some cases, with this browser, the rendering of the typography is completely broken. I hope the Chrome team will fix this problem in the near future.

Repeaters

In Axure Essentials, we are also taking advantages of repeaters, a new feature introduced in Axure 7.0.

To illustrate what a repeater is, imagine that you want to represent a collection of cars to be sold. Before, you had to create the first element of this grid, then either create a master or copy and paste it multiple times to create the grid you want. That was a long and tedious process. With repeaters, you can now build your element once, then indicate the number of times you want it to be repeated horizontally and vertically - and you are done.

Wherever I was able to implement them, most widgets in Axure Essentials are now using repeaters.

Symbols in the libraries

The libraries use specific symbols to indicate how to use each widget.

  • (9) indicates that the widget takes 9 columns on the grid.
  • * indicates that the widget uses repeaters.

Have a question? Do you need help?

I'm always happy to help out with Axure or any other questions you might have. Send me an email during business hours (Eastern-time) and I'll gladly help.