An introduction to wireframing and prototyping and the tools used to design more efficient wireframes.

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