Prototyping with Pixate

Prototyping

Pixatewith

Refresh Austin September 2015

Rob JonesProduct Designer

@sugarfreejones #refreshaustin

Why prototype?

When you prototype, you are iterating your solution as well as your understanding of the problem.

@aza

What is Pixate?Why use it?

How is it different from other apps?

Rob Jones

Pixate

http://www.pixate.com

Prototyping for native mobile applications

PixateHow’s it different from other apps?

• It has a native mobile app to preview and interact with your prototypes

• Allows creation of complex interactions with very little coding

• Easy learning curve (compared to Framer and Origami)

• Both Web and OS X versions of the application

And did I mention…

IT’S FREE

Pixate BasicsHere’s the basics you need to know

to build awesome prototypes

Interactions and AnimationsIn Pixate, you add touch events (interactions) to things, then add animations to respond to those touch events

In Pixate, you add touch events (interactions) to things, then add animations to respond to those touch events

Interactions and Animations

Sometimes we need to add logic to our prototypes. We need to learn how to tell Pixate how to do this.

Adding Logic

Adding LogicSometimes we need to add logic to our prototypes. We need to learn how to tell Pixate how to do this.

we can do this with…

Conditions and “If” statements

Conditions and “If” statements let us add logic to our prototype.

For example, we could add a condition that says:

“If the user scrolls more than 50 points, then hide the navbar.”

Conditions and “If” statements

Some animations in Pixate use “Conditions”…

Some use “If” statements

Regardless of what it calls them,

They are the same thing

Animation typesIt is very important to understand the 3 ways

you can animate based on touch events

Layer moves with parallel with constant interactions like drag and scroll

Continuously with rate

This is mostly used for parallax effects

Layer moves in parallel with constant interactions like Drag and Scroll, but has limits for interaction and animation range.

Continuously to final value

Think “continuously with rate”, but with extra rules

Layer moves with duration, once a set condition is met.With Duration to Final Value

Think of this as “onClick” in javascript.

Scroll InteractionsScrolling is a key interaction on mobile apps;

Pixate makes it super easy to add.

Adding scrolling to your prototype

Create a boxStep 1

Put your content in the boxStep 2

Add a scroll to that boxStep 3

It’s pretty easy to remember

When you want to set up conditions based on the scroll position in a scroll container:

swiping down decreases the scroll position value

swiping up increases the scroll position value

Scroll position

You can make cool interactions when the scroll value is negative

If you swipe down beyond the top limit of the scrollview, the scroll position becomes negative. You can use negative scroll values for awesome pull-to-refresh-like interactions.

Negative Scroll position

Paged Scroll ViewsYou can use create a special scroll container that allows

you swipe horizontally between screens.

Let’s build something

Concepts Used

• Scroll view to read story

• Scale the story image based on scroll position

• “Paged Scroll View” to swipe between stories

• Move Parallax on story images when swiping between stories

Yahoo News App

Other AppsSome other apps you might want

to check out

Flinto

• Traditional “clickable hotspot” tool.. but optimized for mobile

• Easiest learning curve of any of the prototyping apps

• Excellent for clickthroughs of longer flows

• Pairs very well with Pixate

• Web and OS X versions of the application

http://www.flinto.com

Principle

• New kid on the block

• Uses timelines for animating. Far easier than editing property values in Pixate

• Has a native mobile app to preview prototypes

• Web and OS X versions of the application

http://www.principleformac.com

A few tipsFrom my experience n’ stuff ™

A few tips

• Name your layers. All of them. Every time.

• Don’t try to do too much in a single prototype; things get complicated and show you down. Break your app up into small prototypes.

• If you don’t know what animation type to use, don’t stress. Try them one-by-one and the right one will just suddenly make sense.

• When you are animating something by rate and it moves in the wrong direction, make the rate negative.

From my experience n’ stuff ™

Learning MoreWhere to go from here if you’re interested

Jared Lodwick’s tutorialsIf you want to learn more, check out

http://www.jaredlodwick.co/tutorials.html

Questions?

Thanks!

sugarfreejones sugarfreejones.com

I’d love to hear from ya