Huge Update for Bootstrap 4 Axure Widget Library

gumroad-banner---2017-update.jpg

Live Preview      Download

The guys over at Bootstrap made some rather large changes in their last few alpha updates of Bootstrap 4.  So I went ahead and implemented a lot of those changes in my Axure library.

Changes included:

  • New typeface Segoe UI takes the place of Arial
  • New component styling for many of the widgets; new accordions, tables and cards.
  • Added widget styles for the more common elements
  • Simplified the builds of some of the widgets, taking advantage of Axure 8’s increased functionality (rounded corners, selective border treatment, etc)
  • Simplified form inputs.  Placeholders are now Axure native, rather than separate elements.
  • Added in more disabled states.  All of which can be toggled on and off directly in Axure.  (Right click element, select “disabled”.)

The library feels really strong at this point.  Probably will be very close to the final Bootstrap 4 release, if I had to guess.

Advertisements

The Best iPhone Axure Widget Library

gumroad-banner

The finest iPhone and iOS Axure widget library is here.  Packing in hundreds of components and dozens of templates, the iOS 10 library has everything needed to quickly launch your next iPhone design project.

Live Preview    Download

 

Download Includes

  • Axure widget library (.rplib file)
  • 19 Fully designed templates (.rp file)
  • Handy template for copy pasting elements (.rp file)
  • Icon library (.rplib file)
  • 23 Wallpapers, including blurred versions
  • Black and white iPhone mockups for presentation purposes

 

Features You’ll Love

  • Well organized and labelled elements
  • Built from the ground up using native Axure elements
  • Pixel perfect replication of iOS 10
  • Free Google Fonts ready for AxShare

 

Many updates are planned, included more templates, more icons, and updated widget styling to stay current with future iOS 10 releases.

Screenshots

ios-10-screenshot-1ios-10-screenshot-2

No images were used to create the widgets and templates you see in this library.  (Other than the actual background images and Apple icons.)  Everything was built up using native Axure elements.

Live Preview    Download

Axure Foundation 6 UI Kit

blog-coverThe best Foundation UI kit ever created for Axure.  Based on the new Foundation 6 release from Zurb, this widget library features 109 meticulously crafted widgets and 6 amazing starter templates ready to go for your next prototype.

Download      Live Preview

Built with Axure users in mind, and utilizing best practices, the Foundation 6 library is one of the easiest to use libraries ever created. Build beautiful and functional prototypes faster than ever.

Download Includes

  • Axure Foundation 6 Library (.rplib file)
  • 6 Starter Templates (.rp file)
  • Quick start guide, so you can hit the ground running.

Features You’ll Love

  • Common widgets section – similar to Axure’s own native library
  • Hover, active, focus and disabled states.
  • Elements built using global styles for ultra fast customization
  • Extremely organized
  • Well labelled elements

Library Includes

  • Buttons
  • Button Groups
  • Headers
  • Badges
  • Labels
  • All Typography
  • Switches
  • Callouts
  • Breadcrumbs
  • Pagination
  • Navbars
  • Dropdowns
  • Tooltips
  • Modals
  • Tabs
  • Thumbnails
  • Tables
  • Progress Bars
  • Forms and Inputs
  • Orbit (Carousel)
  • Accordion
  • Building Blocks (with more on the way.)

Templates Included

  • Real Estate or Travel
  • Ecommerce
  • Agency
  • Blog with Sidebar
  • Blog Single Column
  • Product Page

Screenshots

Download      Live Preview

Bootstrap 4 Axure Widget Library

Facebook-Ad---Bootstrap-4-v2

Live Preview   Download

The most comprehensive Bootstrap widget library ever assembled.  231 meticulously crafted widgets and modules styled directly from Bootstrap’s CSS, each element detailed down to the proper hex codes, line heights, padding and shadowing.

Dismiss alerts, bring up modals, watch placeholders disappear, flip through tabs, the Bootstrap 4 library is impressively functional.

This project has been almost 2 months in the making, I’ve been working on it since Bootstrap announced the alpha release. And I’ve taken the time to make every element as close to the real thing as possible.  You won’t find a more well-built Bootstrap library.

Includes

  • h1 – h6 headings
  • Leads, paragraph text, fine print
  • Display headings
  • Blockquotes
  • Standard and outlined buttons
  • Toggles
  • Button groups
  • Button and split button dropdowns
  • Alerts
  • Cards
  • Carousels
  • Jumbotron
  • Labels
  • Pills
  • Pagination
  • Breadcrumbs
  • Working forms and inputs
  • Input groups
  • Dropdowns
  • Tabs and Navigation
  • Navbars
  • Progress bars
  • List groups
  • Modals
  • Tooltips
  • Popovers
  • Accordions
  • Callouts
  • Tables

Screenshots

Bootstrap 4 Widgets (Part 1 of 2)Bootstrap-All-Widgets-(Part-2)

Yeah, it’s massive.

You can download it here.

Axure RP – Better Input Styling Tutorial

A common issue I run into when I’m trying to create high fidelity prototypes is dealing with form styling.  Users expect crisp and intuitive interactions when dealing with forms, and it’s important to oblige, given how boring they are, and the risk of having the user bounce.  Forms also tend to be one of the most important parts of a website (you want them to subscribe or go through checkout with their products don’t you?) Boring Input Gif

So in this post I’m gonna run down how I handle input styling in Axure, including best practices for making your prototype easy to work with as it increases in complexity.

1) Drag and drop a rectangle onto your canvas.  

This is going to act as the input container.  And the styling is actually going to go here.  It’s a good idea to give your widget a name, so it’s easy to find as you are adding interactions to it. I usually call it “input – container”, then add the label name to the end when I actually insert the input into a form.

2) Size the rectangle as big as you want the input to be.

For this example, we’ll go with 320px by 50px.

3) Drag and drop a text area onto the canvas, and size it a few pixels shorter than the input container.

I’d go with something like 305px by 42px.  Also give the input a name, so you can easily discern the input from the input container.

4) If you haven’t already done so, middle and center align the input with the input container.

5) Hide the input border, and set the fill color to transparent.

The input will serve only to show text, no actual styling will be done on the input.

6) Now give the input container the styling you want, with many more options available to you than the native text area allows.

I tend to keep inputs simple.  A small border radius can look nice, along with very light inner shadowing.  The real power of going through the trouble of styling an input like this is you can now give the input a proper css style :active state.  In Axure terms, that would be the “selected” interaction style which appears when the input has focus.

To achieve this effect:

7) Add styling to the “selected” interaction style of the input container.

I wouldn’t go overboard with this.  A 1px solid border with a color that matches the overall site palette usually looks great.

8) Add logic to the OnFocus and OnLostFocus events of the input.

OnFocus – Set is selected of [input – container] to “true”
OnLostFocus – Set is selected of [input – container] to “false”

This will give the input the illusion of having an active state, even though it’s merely the background element changing states.

And one more bit of housekeeping to ensure your prototype is as functional as possible.

9) Add an OnClick event to the input container.

Since the input is smaller than the input container, the user could potentially click on the input and have nothing happen.  This is a minor point, but if you are going for high fidelity, it’s a good idea to cover all of your bases.

OnClick – Set Focus on [input – container]

And you’re all set.

better

Once you have this done, consider creating your own library and adding this widget to it.  Then you can drag and drop better inputs fast, without having to go through these steps each and every time.

Hope you found this quick tutorial helpful.

Parallaxure – The Most Refined Axure Template Ever Created

Parallaxure-Gumroad-Banner

Live Preview

I finally finished up the widget library, and fixing a lot of little bugs.  Parallaxure is now available for download.

Download

Download Includes

Complete and functional prototype (.rp file)
Axure Library (.rplib file)
All images, neatly organized into appropriate folders
PSD for iPhone mockup

Library Includes

H1, H2, H3 and subheadline text
Blockquotes
List items, links, paragraph text
15 different social media icons
Browser/OS and assorted Font Awesome icons
Buttons, tags, pagination
Progress bars
Navbar
Dropdown menu
2 Carousels
Inputs and text areas with labels and interaction styles
All modules (testimonials, form, etc)
Navigation menu (for sidebar or footer)
Page sections
Full pages

Theme Includes

jQuery like parallax scrolling effects
Full width browser design
Transitioning navbar
Embedded Google Fonts
Font Awesome iconography
Home, About, Contact, Blog, Portfolio and Component pages
Master header and footer sections
Google Maps/Earth section
Working form with error and success messaging
Linked photostream with image carousel
Clean and modern layout
Beautiful commercial free photography
Clearly labeled elements for fast and easy customization

____________________________

Now that the marketing stuff is out of the way I can talk about real stuff.  Building this was a borderline nightmare.  None of the interactions or elements are terribly complex on their own, but making them all fit together and play nicely with one another was an increasingly difficult challenge as the prototype got more and more complex.

For example I initially made a pop-up carousel for the photostream on the blog page.  Then I realized i wanted it to have a border.  So I added a border to the images.  Nope.  Then you get a weird effect where the carousel borders scroll along with the pictures.  So I built nested dynamic panels where the outer layer held the image borders, and the carousel controls (arrow left, arrow right) and another dynamic panel underneath with the different image states.

The transitioning navbar also presented various headaches.  For some reason in Axure 7 there are certain interaction combinations that just don’t play well with one another.  Like if you are bringing an element forward with an interaction, while also making the element no longer hidden, then Axure essentially forgets the first interaction and it seems to happen instantaneously, rather than smoothly.

To workaround this, I gave the navbar an empty state and had the menu drop down merely change states, rather than making it go from hidden to visible and bringing it forward.

There’s also the issue of having a shadow on the navbar while having it be a 100% width dynamic panel.  Sadly, I never found an Axure solution to this.  The color has to be set on the page style if you want it to be 100% width, so there is no element to even add a shadow to.  I eventually decided on cutting a 10px width navbar slice with a shadow on it in Photoshop.  I then added this to the DP background, and set it to repeat horizontally.

By the way, this solution could have been done completely in Axure.  Just create the shape you want, add in the shadow and then convert to image.  Then use the slice image option to take off the sides and leave yourself with a repeatable pattern.  But I made it in Photoshop so that I could control the compression level, and I wanted a PNG with a transparent background.  Doing it completely in Axure might have ended up with some mild artifacts on the edges, especially if it turns it into a JPEG.

Anyways, I’m quite happy with the end result, and I am fascinated to see what the response will be from Axure users.  Will people want to use this kind of thing?  I have no idea.  I’m trying to get this up on Axure.com, but they are pretty strict with how they want user downloads to work.  That’s actually the only reason I ended up creating a library for this project.  Otherwise I think it makes the most sense to just work off of the template and copy paste any elements you need.  Maybe that’s just my personal preference though.

____________________________

Screenshots

Home Portfolio Contact Components Blog About

Parallaxure – Components Page

Just finished up creating the components page for the Parallaxure theme. These are the widgets that will be included in the .rplib file. They will also be included in the .rp file because I think a lot of times it’s easier to copy paste from another page than having the library loaded in and trying to find what you are looking for.

Parallaxure Components and Widgets Page

I included more social media buttons than what is actually used on my prototpye, that way you can swap out for what is needed.  I also plan on adding a drop down menu, accordion, and perhaps styled checkboxes and radio buttons.

But as it is, this is pretty close to what will be on the initial release.  And I’ll adjust future versions based on any feedback I get.