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.

Coming Soon Page – Axure Template

Coming Soon Banner

Live Preview

I built this simple one pager a few weeks ago because I wanted to tinker with creating a count down timer.  And I also wanted to see about implementing a full width and full height design.  The end result is a very attractive full screen page.

Do people actually use Coming Soon pages though?  I see them on template sites a lot, and they get downloads, but I can’t think of any times I’ve come across them in the wild.  I also question how good of an idea they are from a UX standpoint.

I like them for the simplicity of the UI, but I feel like there has to be more compelling ways to get user feedback about an upcoming product.  A less attractive MVP that fails to let the user actually download or purchase the final product seems like it would often give a better representation of actual customer interest.

It’s not lost on me that I’m bashing the entire idea behind a page I designed.

Anyways, it’s a completely free download if you want it.  And here is a screenshot.

coming-soon-screenshot

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.

Parallaxure – Theme (Preview)

I’m wrapping up work on my most ambitious theme to date.  So far everything I’ve done has been single pagers, or rather simple projects.  But I’ve been to work on a very robust theme that will be the most comprehensive high fidelity Axure template in existence.  Here are some screen shots.

home-page

About-Page

functional-carousel-light-boxContact-Page

Portfolio-PageBlog-Page

It has several different working carousels, font awesome icons, embedded google fonts, ease in ease out transition effects, working form, parallax scrolling effect (which is where the name came from) and a complete components page for styled elements not found on the page.

Will probably be releasing in 7-10 days. I have a lot of QA to do, and I still need to create the library of widgets. I’m gonna include a .rp and .rplib file with all downloads.

Creativ – Axure Theme

Creativ-Gumroad-Image-2

Live Preview

This was the first Axure theme I made.  It’s a pretty simple one pager with half a dozen sections.  It’s based off a commercial free design, found here.

Working off of preexisting designs can be a mixed bag.  On the one hand it’s mentally easier, even a bit meditative getting everything to be exactly the same.  Since you’re not creating the design, you don’t have to make any decisions about how things should look.  There’s none of the second guessing going on.

On the other hand it’s slow work, especially if you are OCD like me about pixels.  I’m throwing 30-40 guide lines up at a time making sure everything is exactly where it should be.

I think going forward though I won’t be using many designs like this, where I’m just recreating someone else’s design in Axure.  I want to create some of my own things.

Here’s a full screenshot of the theme:

Creativ-Full-Screen-Scrape

Anyways, you can download this for free on Gumroad. And shoot me some feedback if you end up using this for a project.