Prototyping with Pixate
Transcript of Prototyping with Pixate
![Page 1: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/1.jpg)
Prototyping
Pixatewith
Refresh Austin September 2015
![Page 2: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/2.jpg)
Rob JonesProduct Designer
@sugarfreejones #refreshaustin
![Page 3: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/3.jpg)
Why prototype?
When you prototype, you are iterating your solution as well as your understanding of the problem.
@aza
![Page 4: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/4.jpg)
What is Pixate?Why use it?
How is it different from other apps?
![Page 6: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/6.jpg)
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
![Page 7: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/7.jpg)
And did I mention…
![Page 8: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/8.jpg)
IT’S FREE
![Page 9: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/9.jpg)
Pixate BasicsHere’s the basics you need to know
to build awesome prototypes
![Page 10: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/10.jpg)
Interactions and AnimationsIn Pixate, you add touch events (interactions) to things, then add animations to respond to those touch events
![Page 11: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/11.jpg)
In Pixate, you add touch events (interactions) to things, then add animations to respond to those touch events
Interactions and Animations
![Page 12: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/12.jpg)
Sometimes we need to add logic to our prototypes. We need to learn how to tell Pixate how to do this.
Adding Logic
![Page 13: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/13.jpg)
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…
![Page 14: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/14.jpg)
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.”
![Page 15: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/15.jpg)
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
![Page 16: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/16.jpg)
Animation typesIt is very important to understand the 3 ways
you can animate based on touch events
![Page 17: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/17.jpg)
Layer moves with parallel with constant interactions like drag and scroll
Continuously with rate
This is mostly used for parallax effects
![Page 18: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/18.jpg)
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
![Page 19: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/19.jpg)
Layer moves with duration, once a set condition is met.With Duration to Final Value
Think of this as “onClick” in javascript.
![Page 20: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/20.jpg)
Scroll InteractionsScrolling is a key interaction on mobile apps;
Pixate makes it super easy to add.
![Page 21: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/21.jpg)
Adding scrolling to your prototype
Create a boxStep 1
Put your content in the boxStep 2
Add a scroll to that boxStep 3
![Page 22: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/22.jpg)
It’s pretty easy to remember
![Page 23: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/23.jpg)
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
![Page 24: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/24.jpg)
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
![Page 25: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/25.jpg)
Paged Scroll ViewsYou can use create a special scroll container that allows
you swipe horizontally between screens.
![Page 26: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/26.jpg)
Let’s build something
![Page 27: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/27.jpg)
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
![Page 28: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/28.jpg)
Other AppsSome other apps you might want
to check out
![Page 29: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/29.jpg)
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
![Page 30: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/30.jpg)
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
![Page 31: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/31.jpg)
A few tipsFrom my experience n’ stuff ™
![Page 32: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/32.jpg)
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 ™
![Page 33: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/33.jpg)
Learning MoreWhere to go from here if you’re interested
![Page 34: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/34.jpg)
Jared Lodwick’s tutorialsIf you want to learn more, check out
http://www.jaredlodwick.co/tutorials.html
![Page 35: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/35.jpg)
Questions?
![Page 36: Prototyping with Pixate](https://reader031.fdocuments.us/reader031/viewer/2022030308/58f373781a28abd4618b45c5/html5/thumbnails/36.jpg)
Thanks!
sugarfreejones sugarfreejones.com
I’d love to hear from ya