The document is an introduction to rapid wireframing and prototyping presented by Mario Hernandez, covering the definition, benefits, and tools of wireframing. Wireframes are essential for structuring websites and facilitate communication between users, managers, and developers. The presentation also includes a hands-on demonstration and resources for further exploration.

1. Rapid Wireframing & Prototyping
An Introduction
Presented by Mario Hernandez - Designs Drive
Email: DesignsDrive@gmail.com
Twitter: @DesignsDrive

2. Agenda
● What are Wireframes?

3. Agenda
● What are Wireframes?
● Benefits of Wireframes

4. Agenda
● What are Wireframes?
● Benefits of Wireframes
● Tools

5. Agenda
● What are Wireframes?
● Benefits of Wireframes
● Tools
● Hands-on Demonstration

6. What are Wireframes?
Wireframes help build the structure of a website
by displaying the basic elements such as
Header, Footer, Navigation, Page Columns,
Sidebars, etc,.

7. Purpose of Wireframes

8. Purpose of Wireframes

9. Benefits of Wireframing
Users:
It facilitates the conversation between users
and developers.

10. Benefits of Wireframing
Users:
It facilitates the conversation between users
and developers.
Managers:
Allows for better project management and
prioritization.

11. Benefits of Wireframing
Users:
It facilitates the conversation between users
and developers.
Managers:
Allows for better project management and
prioritization.
Developers:
No longer guessing what users want.

12. Tools
Paper

13. Tools
Drawing Tools
● Google Drawings
● Balsamiq
● Power Point
● Keynotopia toolkit
● Photoshop
● Ilustrator

14. Tools
CSS
Frameworks
● Bootstrap
● Foundation
● 960 Grid System
● See more

15. Hands-on Demo

16. Resources
Foundation: http://foundation.zurb.com
Bootstrap: http://twitter.github.io/bootstrap/index.html
Balsamiq: http://www.balsamiq.com/

17. Questions?
web: http://DesignsDrive.com
email: DesignsDrive@gmail.com
twitter: @DesignsDrive
Get the slides at http://slideshare.net/marequi