Interactivity is on the go offering so many advantages, so why would you still stick to old-fashioned techniques and clumsy tools when you are about the concept THE next website. This session will bring you the advantages of functional wireframing using the latest version of HotGloo.

1. Wireframing in full ((stereo))
Why interactivity is a winner

2. “Wireframes aren’t dead ...

3. That’s me
Wolf Becvar
wolf@hotgloo.com
@wdbecvar
www.wireframeswednesday.com
#wfwd #wiwe
Source: Scott Beale /Laughing Squid, laughingsquid.com

4. “We support webworkers to
visualize their creative ideas.
- HotGloo claim

5. “Interaction is a kind of action that occurs as
two or more objects have an effect upon one
another. The idea of a two-way effect is
essential in the concept of interaction, as
opposed to a one-way causal effect [...]
• All systems are related and interdependent.
• Every action has a consequence.
- Wikipedia

6. Interactivity describes how your prototype
behaves.
•Does your prototype react to user inputs
with feedback?
•Can they “click” on something to go to
another page or fill in a form?
•Will buttons appear to depress and drop-
down menus work?
•Will different personas experience
different content?
- Chris Farnum for Boxes and Arrows

7. Good UX is all about interactions

8. But ...

9. Wireframes
“Wireframes are a visual representation
of the functional page start. They visually
communicate what functional pieces are
present on a page and their relationship
to each other.
- Todd Zaki Warfel, Protyping 2009

11. Prototypes
“A prototype is a representative model
or simulation of the final system. Unlike
wireframes, prototypes go further than
show and tell and actually let you
experience the design.
- Todd Zaki Warfel, Protyping 2009

13. 2009

15. Source: http://www.utexas.edu/learn/designprocess/structure.html

16. More than just wireframes ...

17. Collaborative Independent
Bulletproof Easy-to-use

21. Good UX is all about communication

22. It’s Demo Time!

23. Why interactive wireframing?
• To get a clear picture of what information will be
needed on each page before design.
• To spend time and really focus on what each
page’s purpose is.
• To have a clear look at how the site will react to
various visitors without the clutter of color or
design elements.
• To give designer a clear view of what needs to be
designed.
• To get clients deeply involved in the planning
process.

24. Thank You
Wolf Becvar
wolf@hotgloo.com
@wdbecvar
www.hotgloo.com
HotGloo
Celsiusweg 15
22761 Hamburg
Germany