Co je FramerJS? Proč prototypovat? Měli by se designéři prototypovat? Autor: Koen Bok + Martin Halík

1. Prototype anything
you can imagine
www.framerjs.com

2. Martin Halík
@martinhalik

3. K čemu protypovat?

4. Pojďme vytvořit seřazený seznam
položek. Kde při dotyku, vybraná
položka vystoupí. S tím tam bude i
výrazný stín, který se zvětší a ztlumí
jak prvek vystoupí nad jiné položky.
Jakmile prvek pustíme, vše se
plynule seřadí.
“

5. Kresba

6. hrubý
Design

7. Prototyp

8. Co lze “prototypovat”?

9. Pohyb

10. Dotyk

11. Hloubka

12. Input

13. Data

14. “Proměnlivost”

15. Prototypování = design.

18. Framer Studio

20. EventsStatesLayers Animation

21. Properties
Hierarchy
Types
layerA = new Layer
x: 20, y: 20
width: 256, height: 256
image: "images/icon.png"
opacity: 0.75
scale: 1
Layers

22. Curves
Timing
Chaining
layerA.animate
properties:
curve: "ease"
delay: 2
time: 1
opacity: 0.5
Animation

23. Add
Remove
Cycle
layerA.states.add
second:
third:
opacity: 0.5
scale: 0.5
opacity: 1
scale: 1
States

24. Touch
Scroll
Drag
layerA.on Events.Click, ->
layerA.on Events.DragMove, ->
layerA.on Events.Scroll, ->
...
...
...
Events

25. Scroll Page Slider

26. Prototype anything
you can imagine

27. Sequence

28. Space

29. Tools

30. Tasks

31. Audio

32. http://framerjs.com/examples

33. http://dribbble.com/tags/framerjs

34. http://facebook.com/groups/framerjs

35. http://framerjs.com/resources

36. Díky
http://framerjs.com http://kiwi.com
m@kiwi.com