A walkthrough of prototyping interactions using Axure and HTML/CSS

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