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

Advertisements

Author: Adam

Founder of AxureThemes.com, and Senior UX prototyper.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s