[Axure Tutorial] Fake an iOS 10 Blur Background Effect

A short video tutorial on how to recreate an iOS 10 blurred background effect on a widget.

Free Axure iOS 10 Home Page Template

axure-ios-10-home-screen-template

Free Download

Free Axure iPhone template based on the new iOS 10 release from Apple. Well crafted to be a pixel perfect replica of iOS 10.

You can also check out the full Axure iOS 10 widget library here.

Review of Validator for Axure

axure-for-validator-header-image

Overview

Recently a company by the name of Usability Matters released a great new tool for Axure called “Validator.”  The tool promises to help you save time by automating form error messages in your Axure prototypes.  Something every Axure user has likely spent a lot of time doing.

I downloaded Validator and spent a couple of hours with it and I’m going to share with you my thoughts on whether or not it meets the challenge of streamlining the process of creating and automating forms.

You can download Validator here.

How does it work?

I’m not going to spend much time talking about how Validator works.  As the download page linked above does a great job of walking users through the process.  But to give you a birds eye view, simply add an asterisk to your text fields, and Validator will do the rest.  Pretty great, no?

You can also validate emails, passwords, as well as specify where to place error messages, among many other settings controls.  Validator comes with a detailed settings panel that give users quite a bit of control on how they’d like Validator to both look and function.

Will I save time?

The big question most users will have is “Will I actually save time using this tool?” As an advanced user, I think I probably spent as much time customizing the settings panel as I would have to simply create the error messages and validation myself.  But I say this as someone who has gone through the process of creating validated forms many times in Axure.

For new Axure users, as well as intermediate users, Validator will save you a ton of time and make it very easy for you to quickly add validation to your forms.  For advanced users, it’s tougher to tell if this solution will actually save time.  I think it will come down to the scope of your project. If you have a significant number of forms in your prototype that need validation, Validator is a great solution.  If you have a simple login form and nothing else, it’s probably a wash.

What could be improved?

I definitely ran into some hiccups in placing the error messages.  The settings panel gives you only modest control of where to place it.  You can put them above, below, or to the side.  But often I want to place the message above the input, but to the right side.  And I couldn’t figure out a way to do that with this tool.

Another issue is that this tool will only work with the native Axure text fields.  Which makes sense of course, but I rarely use the native inputs these days. Unfortunately they still lack quite a bit of design flexibility, so I usually find myself creating custom inputs for most of my prototypes. And Validator won’t work on those.

Do you recommend using this tool?

Absolutely!  I think I will get a lot of great use out of Validator. And Usability Matters has been kind enough to offer it for free.  So you’re really not out of anything if you download it and end up not using.  Plus you might end up putting a smile on the face of your boss, a client, or a stakeholder when they see how realistic your forms are.  At the very least this is a good way to win some brownie points.

All in all, this is a wonderful tool that is surprisingly powerful and intuitive to use.  The creator(s) have gone to great lengths to make the tool flexible, as well as to give users guidance on how to quickly get Validator up and running.

Download Validator

 

Axure Salesforce Widget Library

gtnjmfzLive Preview

The Axure Salesforce widget library has arrived! 193 remarkably interactive widgets, meticulously crafted pixel by pixel from the Lightning Design System CSS. For use with Axure RP 8 only.

Download Includes

  • Salesforce Widget Library (.rplib file)
  • Template file used to build the demo (.rp file) For users who prefer to copy and paste.
  • Salesforce Icons (PNG and SVG)
  • Free updates for life – This library will be updated from time to time and you will automatically be notified by email with a download link anytime I make an update.

 

Library Includes

  • Activity Timeline
  • Badges
  • Breadcrumbs
  • Buttons
  • Button Groups
  • Icon Groups
  • Cards
  • Date Tables
  • Datepickers
  • Docked Composer
  • Feeds
  • Form Elements
  • Lookups
  • Media Objects
  • Menus
  • Navigation
  • Notifications
  • Page Headers
  • Panels
  • Pills
  • Popovers
  • Publishers
  • Tabs
  • Typography
  • ***And a special default section so users don’t have to switch between libraries constantly. Default library includes the most common elements used when prototyping like a simple button, dividers, checkbox, etc.

 

Features You Will Love

  • Global styles utilized for hover, active, disabled and selected states. This means you can change styles once, and have every widget update automatically.
  • Well organized and labelled elements.
  • Widgets behave like genuine Salesforce widgets, with every state of interaction meticulously recreated. Even checkbox focus was preserved, in an attempt to perfectly mimic the Lightning Design System specifications.
  • CSS perfect styling. I spent countless hours inspecting element in browser to ensure that each widget exactly matches the Salesforce CSS.
  • Widgets built using simple and intuitive Axure best practices.

 

Attributions

  • Roboto
  • Salesforce
  • Lightning Design System

 

Live Preview

Axure UX Flowchart Cards

gumroad_20main_20banner

UX Flowchart cards for Axure 8.  Includes 128 flowchart cards in multiple categories, with extra tools, icons and buttons to make it easy to create your next user experience journey.

Quickly drag and drop your next UX flow.

Download      Live Preview

Download Includes

  • Axure UX Flowchart Cards Library (.rplib file)
  • Image library containing all 128 cards (for use in any program.)

Flowchart Card Categories Included

  • Article
  • Blog
  • Brands
  • Contact
  • CTA
  • Dashboard
  • Ecommerce
  • Features
  • Footer
  • Gallery
  • Grid
  • Header
  • Landing Page
  • Portfolio
  • Pricing
  • Settings
  • Sign Up / Sign In
  • Social
  • Team
  • Testimonials

Tools Included

  • Arrows
  • Buttons
  • Icons

Attributions

Original design work by Johan Netzler. This library was recreated with his direct permission for use with Axure RP. Thanks again Johan!

https://twitter.com/JohanNetzler

Full Kit Screenshots

ux flowchart cards screenshot

Axure Mobile Wireframes Kit

gumroad_20banner

Live Preview    Download   Free Trial Version

A brilliant new mobile wireframe kit for Axure RP.  Includes 56 well crafted screens to jump start your next project.  Easily modify to create new wireframes, or fill out the design for high fidelity mobile design work.

gumroad_20banner_20-_2056_20screensgumroad_20banner_20-_20stylish_20but_20simplegumroad_20banner_20all_20screens

Live Preview    Download    Free Trial Version

Axure 8 Vector iPhone Mockup

iphone Axure vector screenshot

Live Preview     Free Download

Thanks to Axure 8’s new shape capabilities it’s now easy to create vector shapes that are completely customizable.  My first attempt at doing so is this iPhone wireframe mockup that you can use for either lo-fo work, or with some tweaking, high fidelity mockups.

Adjust borders, backgrounds, gradients and shadowing!

iphone mockup stylish

As you can see with the example above, it can be used with high fidelity work and styled to match any design.

Live Preview      Free Download