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.

Axure Essentials

A set of responsive widget libraries to bootstrap your next project.

Grid

Axure version 7+ Number of widgets 259 Package version 1.7 Updated Apr 2, 2015

Based on a grid

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.

Grid

6 versions for each widget

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 6 different viewports. For a library of 259 widgets, that means basically 1036 widgets.

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.

Table of contents

Play with the wireframes

Real Axure wireframes hosted on Share Axure.

Core Library

This library should be used most of the time. Its goal is to replace the default widget library provided by Axure. It contains a set of great and better defaults: better forms, better typography, better buttons.

Widgets that do not need explanation

  • Text
  • Checkbox
  • Radio Button
  • Rectangle
  • Placeholder
  • Dynamic Panel
  • Hot Spot
  • Header 1
  • Header 2
  • Header 3
  • Paragraph
  • Hyperlink
  • Horizontal line
  • Vertical line
  • Dropdown

Placeholder (image and video)

I think it's important to make the distinction between an image and a video's placeholder. The styles of those two widgets is clean and gray - it should also look great when printed.

Browser width: 320px

Skeleton of the iPhone
Image of a placeholder

Browser width: 360px

Skeleton of the Android
Image of a placeholder

Browser width: 375px

Skeleton of the iPhone6
Image of a placeholder

Browser width: 414px

Skeleton of the iPhone6+
Image of a placeholder

Browser width: 768px

Skeleton of the iPad
Image of a placeholder

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a placeholder

Forms

All you need to build forms quickly. Most fields have default placeholders that will be removed when you click on the field.

  • Input field
  • Search field
  • Textarea
  • Prepended text
  • Prepended checkbox
  • List of checkboxes
  • List of radio buttons
  • Country dropdown

Browser width: 320px

Skeleton of the iPhone
Image of a form

Browser width: 360px

Skeleton of the Android
Image of a form

Browser width: 375px

Skeleton of the iPhone6
Image of a form

Browser width: 414px

Skeleton of the iPhone6+
Image of a form

Browser width: 768px

Skeleton of the iPad
Image of a form

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a form

Other form elements

This section contains form items that use a lot of dynamic panels: 4 password strength indicators and one help bubble.

Mostly password strenght indicators

Dropdowns

The default dropdown widget Axure offers is browser/OS native. While it's great for some cases, I think it's better to sometimes have good looking, rich dropdown menus.

A set of dropdowns

Buttons

There are a lot of buttons that enhances the default Axure experience. Here is a list of those buttons.

All the buttons offered by our toolkit

Alerts

Browser width: 320px

Skeleton of the iPhone
Image of a alerts

Browser width: 360px

Skeleton of the Android
Image of a alerts

Browser width: 375px

Skeleton of the iPhone6
Image of a alerts

Browser width: 414px

Skeleton of the iPhone6+
Image of a alerts

Browser width: 768px

Skeleton of the iPad
Image of a alerts

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a alerts

Avatars - Labels - Ribbons

All the ribbons, labels and avatars offered by our toolkit

Calendars

A set of great calendars, some animated, some not.

A set of calendars

Video and audio players

We provide a set of 5 video players (that mock Youtube players) corresponding to 5, 6, 7, 8, 9 columns, as well as 3 different kind of audio players.

Browser width: 320px

Skeleton of the iPhone
Image of a players

Browser width: 360px

Skeleton of the Android
Image of a players

Browser width: 375px

Skeleton of the iPhone6
Image of a players

Browser width: 414px

Skeleton of the iPhone6+
Image of a players

Browser width: 768px

Skeleton of the iPad
Image of a players

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a players

Progress bars and Thumbnails

There are several layouts for progress bars, as well 4 different types of thumbnails. All of them are responsive of course.

Browser width: 320px

Skeleton of the iPhone
Image of a progressbars

Browser width: 360px

Skeleton of the Android
Image of a progressbars

Browser width: 375px

Skeleton of the iPhone6
Image of a progressbars

Browser width: 414px

Skeleton of the iPhone6+
Image of a progressbars

Browser width: 768px

Skeleton of the iPad
Image of a progressbars

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a progressbars

Toggles

A set of animated toggles.

A set of toggles

Tags

A set of tags, including one animated on mouse over.

A set of tags

One animated tag

iAB

This part contains 10 of the most popular iAB formats for banners and online ads. iAB stands for International Advertising Bureau and is responsible for standardizing advertising on Internet.

  • 970x250 - Billboard
  • 300x600 - Filmstrip
  • 300x1050 - Portrait
  • 970x90 - Pushdown
  • 300x250 - Medium
  • 180x150 - Rectangle
  • 160x600 - Wide
  • 790x90 - Leaderboard
  • Carbon Ads
  • The Deck

Blog Library

Articles

This widget is a long blog post, divided into categories, along with a quote and some titles.

Browser width: 320px

Skeleton of the iPhone
Image of a blog-articles

Browser width: 360px

Skeleton of the Android
Image of a blog-articles

Browser width: 375px

Skeleton of the iPhone6
Image of a blog-articles

Browser width: 414px

Skeleton of the iPhone6+
Image of a blog-articles

Browser width: 768px

Skeleton of the iPad
Image of a blog-articles

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a blog-articles

Articles - excerpt

This widget is basically a shorter version of the widget above. Think of it as an exceprt.

Browser width: 320px

Skeleton of the iPhone
Image of a blog-excerpt

Browser width: 360px

Skeleton of the Android
Image of a blog-excerpt

Browser width: 375px

Skeleton of the iPhone6
Image of a blog-excerpt

Browser width: 414px

Skeleton of the iPhone6+
Image of a blog-excerpt

Browser width: 768px

Skeleton of the iPad
Image of a blog-excerpt

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a blog-excerpt

Articles - Base content with images

Sometimes, you also need to add images next to the words. This is why we've created a default blog post that would contain images.

Browser width: 320px

Skeleton of the iPhone
Image of a blog-base-images

Browser width: 360px

Skeleton of the Android
Image of a blog-base-images

Browser width: 375px

Skeleton of the iPhone6
Image of a blog-base-images

Browser width: 414px

Skeleton of the iPhone6+
Image of a blog-base-images

Browser width: 768px

Skeleton of the iPad
Image of a blog-base-images

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a blog-base-images

Articles - Titles

A series of titles for blogs.

Browser width: 320px

Skeleton of the iPhone
Image of a blog-titles

Browser width: 360px

Skeleton of the Android
Image of a blog-titles

Browser width: 375px

Skeleton of the iPhone6
Image of a blog-titles

Browser width: 414px

Skeleton of the iPhone6+
Image of a blog-titles

Browser width: 768px

Skeleton of the iPad
Image of a blog-titles

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a blog-titles

Sidebar content

We provide several sidebar widgets, that fit into a 4 columns layout. These are:

  • Search box
  • Most read articles
  • Related articles
  • Subscribe via email
  • Related videos

Browser width: 320px

Skeleton of the iPhone
Image of a blog-sidebar

Browser width: 360px

Skeleton of the Android
Image of a blog-sidebar

Browser width: 375px

Skeleton of the iPhone6
Image of a blog-sidebar

Browser width: 414px

Skeleton of the iPhone6+
Image of a blog-sidebar

Browser width: 768px

Skeleton of the iPad
Image of a blog-sidebar

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a blog-sidebar

About the author and Comments

We provide two different "About the authors" section as well as a complete Comments thread, based on Disqus.

Browser width: 320px

Skeleton of the iPhone
Image of a blog-comments

Browser width: 360px

Skeleton of the Android
Image of a blog-comments

Browser width: 375px

Skeleton of the iPhone6
Image of a blog-comments

Browser width: 414px

Skeleton of the iPhone6+
Image of a blog-comments

Browser width: 768px

Skeleton of the iPad
Image of a blog-comments

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a blog-comments

Browser width: 320px

Skeleton of the iPhone
Image of a breadcrumb

Browser width: 360px

Skeleton of the Android
Image of a breadcrumb

Browser width: 375px

Skeleton of the iPhone6
Image of a breadcrumb

Browser width: 414px

Skeleton of the iPhone6+
Image of a breadcrumb

Browser width: 768px

Skeleton of the iPad
Image of a breadcrumb

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a breadcrumb

Animated Images library

To make those effects, we use dynamic panels and hot spots.

Images v1

don't know what to say

Images v2

don't know what to say

Gallery v1

don't know what to say

Gallery v2

don't know what to say

Principles

This library is all about displaying lists and search results. You can use it for galleries, for portfolios, for ecommerce websites.

We provide several categories of widgets in this library.

  • Text-based listings
  • House listings
  • Image listings
  • Profile listings. Basically a list of people or users in an application.
  • Product listings, mostly for ecommerce websites.

This library relies on a lot on repeaters. This allows you to configure the listings the way you want. Just add or remove rows inside the repeaters, and your listing takes the size you want. Take a look at this animation below to understand how it works.

Demonstration of a repeater

Every single widget of this library has been created to match the 5 adaptive views we support.

Text-based lists

Text-based lists - V1

Browser width: 320px

Skeleton of the iPhone
Image of a text-base-lists-v1

Browser width: 360px

Skeleton of the Android
Image of a text-base-lists-v1

Browser width: 375px

Skeleton of the iPhone6
Image of a text-base-lists-v1

Browser width: 414px

Skeleton of the iPhone6+
Image of a text-base-lists-v1

Browser width: 768px

Skeleton of the iPad
Image of a text-base-lists-v1

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a text-base-lists-v1

Text-based lists - V2

Browser width: 320px

Skeleton of the iPhone
Image of a text-base-lists-v2

Browser width: 360px

Skeleton of the Android
Image of a text-base-lists-v2

Browser width: 375px

Skeleton of the iPhone6
Image of a text-base-lists-v2

Browser width: 414px

Skeleton of the iPhone6+
Image of a text-base-lists-v2

Browser width: 768px

Skeleton of the iPad
Image of a text-base-lists-v2

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a text-base-lists-v2

House listings

House listings - V1

Browser width: 320px

Skeleton of the iPhone
Image of a house-listing-v1

Browser width: 360px

Skeleton of the Android
Image of a house-listing-v1

Browser width: 375px

Skeleton of the iPhone6
Image of a house-listing-v1

Browser width: 414px

Skeleton of the iPhone6+
Image of a house-listing-v1

Browser width: 768px

Skeleton of the iPad
Image of a house-listing-v1

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a house-listing-v1

House listings - V2

Browser width: 320px

Skeleton of the iPhone
Image of a house-listing-v2

Browser width: 360px

Skeleton of the Android
Image of a house-listing-v2

Browser width: 375px

Skeleton of the iPhone6
Image of a house-listing-v2

Browser width: 414px

Skeleton of the iPhone6+
Image of a house-listing-v2

Browser width: 768px

Skeleton of the iPad
Image of a house-listing-v2

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a house-listing-v2

House listings - V3

Browser width: 320px

Skeleton of the iPhone
Image of a house-listing-v4

Browser width: 360px

Skeleton of the Android
Image of a house-listing-v4

Browser width: 375px

Skeleton of the iPhone6
Image of a house-listing-v4

Browser width: 414px

Skeleton of the iPhone6+
Image of a house-listing-v4

Browser width: 768px

Skeleton of the iPad
Image of a house-listing-v4

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a house-listing-v4

House listings - V4

Browser width: 320px

Skeleton of the iPhone
Image of a house-listing-v5

Browser width: 360px

Skeleton of the Android
Image of a house-listing-v5

Browser width: 375px

Skeleton of the iPhone6
Image of a house-listing-v5

Browser width: 414px

Skeleton of the iPhone6+
Image of a house-listing-v5

Browser width: 768px

Skeleton of the iPad
Image of a house-listing-v5

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a house-listing-v5

Image listings

Image listings - V1

Browser width: 320px

Skeleton of the iPhone
Image of a image-list-v1

Browser width: 360px

Skeleton of the Android
Image of a image-list-v1

Browser width: 375px

Skeleton of the iPhone6
Image of a image-list-v1

Browser width: 414px

Skeleton of the iPhone6+
Image of a image-list-v1

Browser width: 768px

Skeleton of the iPad
Image of a image-list-v1

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a image-list-v1

Image listings - V2

Browser width: 320px

Skeleton of the iPhone
Image of a image-list-v2

Browser width: 360px

Skeleton of the Android
Image of a image-list-v2

Browser width: 375px

Skeleton of the iPhone6
Image of a image-list-v2

Browser width: 414px

Skeleton of the iPhone6+
Image of a image-list-v2

Browser width: 768px

Skeleton of the iPad
Image of a image-list-v2

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a image-list-v2

Image listings - V3

Browser width: 320px

Skeleton of the iPhone
Image of a image-list-v3

Browser width: 360px

Skeleton of the Android
Image of a image-list-v3

Browser width: 375px

Skeleton of the iPhone6
Image of a image-list-v3

Browser width: 414px

Skeleton of the iPhone6+
Image of a image-list-v3

Browser width: 768px

Skeleton of the iPad
Image of a image-list-v3

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a image-list-v3

Image listings - V4

Browser width: 320px

Skeleton of the iPhone
Image of a image-list-v4

Browser width: 360px

Skeleton of the Android
Image of a image-list-v4

Browser width: 375px

Skeleton of the iPhone6
Image of a image-list-v4

Browser width: 414px

Skeleton of the iPhone6+
Image of a image-list-v4

Browser width: 768px

Skeleton of the iPad
Image of a image-list-v4

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a image-list-v4

Profile listings

Profile listings - V1

Browser width: 320px

Skeleton of the iPhone
Image of a profile-v1

Browser width: 360px

Skeleton of the Android
Image of a profile-v1

Browser width: 375px

Skeleton of the iPhone6
Image of a profile-v1

Browser width: 414px

Skeleton of the iPhone6+
Image of a profile-v1

Browser width: 768px

Skeleton of the iPad
Image of a profile-v1

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a profile-v1

Profile listings - V2

Browser width: 320px

Skeleton of the iPhone
Image of a profile-v2

Browser width: 360px

Skeleton of the Android
Image of a profile-v2

Browser width: 375px

Skeleton of the iPhone6
Image of a profile-v2

Browser width: 414px

Skeleton of the iPhone6+
Image of a profile-v2

Browser width: 768px

Skeleton of the iPad
Image of a profile-v2

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a profile-v2

Profile listings - V3

Browser width: 320px

Skeleton of the iPhone
Image of a profile-v3

Browser width: 360px

Skeleton of the Android
Image of a profile-v3

Browser width: 375px

Skeleton of the iPhone6
Image of a profile-v3

Browser width: 414px

Skeleton of the iPhone6+
Image of a profile-v3

Browser width: 768px

Skeleton of the iPad
Image of a profile-v3

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a profile-v3

Profile listings - V4

Browser width: 320px

Skeleton of the iPhone
Image of a profile-v4

Browser width: 360px

Skeleton of the Android
Image of a profile-v4

Browser width: 375px

Skeleton of the iPhone6
Image of a profile-v4

Browser width: 414px

Skeleton of the iPhone6+
Image of a profile-v4

Browser width: 768px

Skeleton of the iPad
Image of a profile-v4

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a profile-v4

Profile listings - V5

Browser width: 320px

Skeleton of the iPhone
Image of a profile-v5

Browser width: 360px

Skeleton of the Android
Image of a profile-v5

Browser width: 375px

Skeleton of the iPhone6
Image of a profile-v5

Browser width: 414px

Skeleton of the iPhone6+
Image of a profile-v5

Browser width: 768px

Skeleton of the iPad
Image of a profile-v5

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a profile-v5

Products listings - V1

Browser width: 320px

Skeleton of the iPhone
Image of a products-v1

Browser width: 360px

Skeleton of the Android
Image of a products-v1

Browser width: 375px

Skeleton of the iPhone6
Image of a products-v1

Browser width: 414px

Skeleton of the iPhone6+
Image of a products-v1

Browser width: 768px

Skeleton of the iPad
Image of a products-v1

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a products-v1

Products listings - V2

Browser width: 320px

Skeleton of the iPhone
Image of a products-v2

Browser width: 360px

Skeleton of the Android
Image of a products-v2

Browser width: 375px

Skeleton of the iPhone6
Image of a products-v2

Browser width: 414px

Skeleton of the iPhone6+
Image of a products-v2

Browser width: 768px

Skeleton of the iPad
Image of a products-v2

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a products-v2

Products listings - V3

Browser width: 320px

Skeleton of the iPhone
Image of a products-v3

Browser width: 360px

Skeleton of the Android
Image of a products-v3

Browser width: 375px

Skeleton of the iPhone6
Image of a products-v3

Browser width: 414px

Skeleton of the iPhone6+
Image of a products-v3

Browser width: 768px

Skeleton of the iPad
Image of a products-v3

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a products-v3

Products listings - V4

Browser width: 320px

Skeleton of the iPhone
Image of a products-v4

Browser width: 360px

Skeleton of the Android
Image of a products-v4

Browser width: 375px

Skeleton of the iPhone6
Image of a products-v4

Browser width: 414px

Skeleton of the iPhone6+
Image of a products-v4

Browser width: 768px

Skeleton of the iPad
Image of a products-v4

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a products-v4

Products listings - V5

Browser width: 320px

Skeleton of the iPhone
Image of a products-v5

Browser width: 360px

Skeleton of the Android
Image of a products-v5

Browser width: 375px

Skeleton of the iPhone6
Image of a products-v5

Browser width: 414px

Skeleton of the iPhone6+
Image of a products-v5

Browser width: 768px

Skeleton of the iPad
Image of a products-v5

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a products-v5

Listings Library

The Listings Library contains a set of useful filters (the things that let you sort a list of elements - like Most recent, for instance) and sidebar widgets. To make it perfectly clear what those two concepts are, please take a look at the image below.

Explanation of what sidebars and filters are

The filters come in two sizes: 8 columns and 9 columns, to fit most layouts.

Sidebars come in two sizes as well: 3 and 4 columns.

Sidebar widgets

Browser width: 320px

Skeleton of the iPhone
Image of a sidebar-v1

Browser width: 360px

Skeleton of the Android
Image of a sidebar-v1

Browser width: 375px

Skeleton of the iPhone6
Image of a sidebar-v1

Browser width: 414px

Skeleton of the iPhone6+
Image of a sidebar-v1

Browser width: 768px

Skeleton of the iPad
Image of a sidebar-v1

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a sidebar-v1

Browser width: 320px

Skeleton of the iPhone
Image of a sidebar-v2

Browser width: 360px

Skeleton of the Android
Image of a sidebar-v2

Browser width: 375px

Skeleton of the iPhone6
Image of a sidebar-v2

Browser width: 414px

Skeleton of the iPhone6+
Image of a sidebar-v2

Browser width: 768px

Skeleton of the iPad
Image of a sidebar-v2

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a sidebar-v2

Browser width: 320px

Skeleton of the iPhone
Image of a sidebar-v3

Browser width: 360px

Skeleton of the Android
Image of a sidebar-v3

Browser width: 375px

Skeleton of the iPhone6
Image of a sidebar-v3

Browser width: 414px

Skeleton of the iPhone6+
Image of a sidebar-v3

Browser width: 768px

Skeleton of the iPad
Image of a sidebar-v3

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a sidebar-v3

Browser width: 320px

Skeleton of the iPhone
Image of a sidebar-v4

Browser width: 360px

Skeleton of the Android
Image of a sidebar-v4

Browser width: 375px

Skeleton of the iPhone6
Image of a sidebar-v4

Browser width: 414px

Skeleton of the iPhone6+
Image of a sidebar-v4

Browser width: 768px

Skeleton of the iPad
Image of a sidebar-v4

Browser width: >=1170px

Skeleton of a browser on a desktop
Image of a sidebar-v4