The document discusses Axure RP, a prototyping tool that allows users to create interactive wireframes and prototypes without coding. It can be used to diagram widgets, add visual designs, and include clickable, swipeable and draggable interactions. Prototypes generated with Axure RP can include dynamic content, conditions and animations. The document also provides overviews of HTML, CSS, JavaScript and why prototyping is useful.

1. PROTOTYPE
YOU MUST! http://animationinsider.com/

2. Axure RP

3. Axure RP
WIREFRAME PROTOTYPE PUBLISH
- Diagramming widgets
- Visual design tools
- Click, swipe, drag
- Conditions, animations
dynamic content
- HTML & JavaScript
- Network drive, server
Axure Share

4. New in Axure RP 7
INTERACTIONS
- Widget Events
- Page Events
- Transitions
- Conditions

5. New in Axure RP 7
ENVIRONMENT
- Widget Properties
shapes, field types, states
- Widget Manager
- Repeater Widget
- Adaptive View

6. Sitemap

7. Widgets

8. Masters

9. Canvas

10. Toolbar

11. Widget Manager

12. Widget Properties

13. Interactions

14. Interactions: Case

15. Interactions: Case

16. Interactions: Links

17. Interactions: Links

18. Interactions: Links

19. No Code?
I Like it!
http://mtvbase.com/

20. Wins
- Low learning curve

21. Wins
- Low learning curve
- Wireframe, prototype, publish, document

22. Wins
- Low learning curve
- Wireframe, prototype, publish, document
- Extensive widget libraries

23. Wins
- Low learning curve
- Wireframe, prototype, publish, document
- Extensive widget libraries
- Generate HTML prototypes

24. Wins
- Low learning curve
- Wireframe, prototype, publish, document
- Extensive widget libraries
- Generate HTML prototypes
- Wealth of training resources

25. Wins
- Low learning curve
- Wireframe, prototype, publish, document
- Extensive widget libraries
- Generate HTML prototypes
- Wealth of training resources
- Free student license

26. HTML

27. HTML
- Describes content & meaning

28. HTML
- Describes content & meaning
- Maintained by
- World Wide Web Consortium (W3C)
- Web Hypertext Application Technology
Working

29. HTML
- Describes content & meaning
- Maintained by
- World Wide Web Consortium (W3C)
- Web Hypertext Application Technology
Working
- Elements - Basic building blocks

30. HTML
- Describes content & meaning
- Maintained by
- World Wide Web Consortium (W3C)
- Web Hypertext Application Technology
Working
- Elements - Basic building blocks
- Tags - Syntactical markup

31. HTML
- Describes content & meaning
- Maintained by
- World Wide Web Consortium (W3C)
- Web Hypertext Application Technology
Working
- Elements - Basic building blocks
- Tags - Syntactical markup
- Attributes - Information about tags

33. Text
PARAGRAPH
<p>
This
is
a
paragraph.
It
preserves
one
whitespace
</p>

34. Text
HEADINGS <h1>
This
is
a
heading.
Yes
</h1>
h1 to h6

35. Structure
LISTS
Unordered lists
<ul>
<li>
Expelliarmus
</li>
<li>
Stupify
</li>
</ul>

36. Structure
LISTS
Ordered lists
<ol>
<li>
Charmander
</li>
<li>
Squirtle
</li>
</ol>

37. Structure
Tables
<table>
<tr>
<th>
Column
1
</th>
<th>
Column
2
</th>
</tr>
<tr>
<td>
Cell
1
</td>
<td>
Cell
2
</td>
</tr>
</table>

38. Structure
CONTAINER
<div>
<h2>
Heading
</h2>
<p>
Some
Content.
</p>
</div>

39. Controls
FORM
<form
action=‘/test’>
<label
for=‘get-­‐name’>
Heading
</label>
<input
id=‘get-­‐name’
type=‘text’
name=‘name’
/>
<input
type=‘submit’
value=‘save’/>
</form>

40. CSS
- Presentation of structured documents,
web page

41. CSS
- Presentation of structured document, web page
- World Wide Web Consortium (W3C)

42. CSS
- Presentation of structured document, web page
- World Wide Web Consortium (W3C)
- Why?
- Presentations vs Content
- Avoid duplication (DRY)
- Site-wide changes in one place

43. CSS
- Presentation of structured document, web page
- World Wide Web Consortium (W3C)
- Why?
- Presentations vs Content
- Avoid duplication (DRY)
- Site-wide changes in one place
- <link rel=‘stylesheet’ href=‘/path/to/css’ />

44. Application
TAG
p
{
color:
#EED7B4;
font-­‐size:
10px;
}

45. Application
ID
#footer_bg
{
background-­‐color:
#EED7B4;
}

46. Application
CLASS
.section_heading
{
color:
#EED7B4;
font-­‐size:
40px;
}

47. CSS Frameworks
- Bootstrap
- Foundation by Curb
- Pure by Yahoo

48. JavaScript
BEHAVIOR ANIMATION HTTP
- DOM manipulation
- Dynamic content
- Validation
- Stateful animations
- Wide range of possibilities
- AJAX
- APIs

50. Why?
- Visual mockups - Extra step in the cycle

51. Why?
- Visual mockups - Extra step in the cycle
- Inaccurate interactions

52. Why?
- Visual mockups - Extra step in the cycle
- Inaccurate interactions
- Text on web is different

53. Why?
- Visual mockups - Extra step in the cycle
- Inaccurate interactions
- Text on web is different
- Slow and painful to iterate

54. Why?
- Visual mockups - Extra step in the cycle
- Inaccurate interactions
- Text on web is different
- Slow and painful to iterate
- Production vs Productivity

55. THOUGHTS