Rapid Wireframing & PrototypingAn IntroductionPresented by Mario Hernandez - Designs DriveEmail: DesignsDrive@gmail.comTwi...
Agenda● What are Wireframes?
Agenda● What are Wireframes?● Benefits of Wireframes
Agenda● What are Wireframes?● Benefits of Wireframes● Tools
Agenda● What are Wireframes?● Benefits of Wireframes● Tools● Hands-on Demonstration
What are Wireframes?Wireframes help build the structure of a websiteby displaying the basic elements such asHeader, Footer...
Purpose of Wireframes
Purpose of Wireframes
Benefits of WireframingUsers:It facilitates the conversation between usersand developers.
Benefits of WireframingUsers:It facilitates the conversation between usersand developers.Managers:Allows for better projec...
Benefits of WireframingUsers:It facilitates the conversation between usersand developers.Managers:Allows for better projec...
ToolsPaper
ToolsDrawing Tools● Google Drawings● Balsamiq● Power Point● Keynotopia toolkit● Photoshop● Ilustrator
ToolsCSSFrameworks● Bootstrap● Foundation● 960 Grid System● See more
Hands-on Demo
ResourcesFoundation: http://foundation.zurb.comBootstrap: http://twitter.github.io/bootstrap/index.htmlBalsamiq: http://ww...
Questions?web: http://DesignsDrive.comemail: DesignsDrive@gmail.comtwitter: @DesignsDriveGet the slides at http://slidesha...
Upcoming SlideShare
Loading in …5
×

Rapid wireframing and prototyping

912
-1

Published on

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

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
912
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Rapid wireframing and prototyping

  1. 1. Rapid Wireframing & PrototypingAn IntroductionPresented by Mario Hernandez - Designs DriveEmail: DesignsDrive@gmail.comTwitter: @DesignsDrive
  2. 2. Agenda● What are Wireframes?
  3. 3. Agenda● What are Wireframes?● Benefits of Wireframes
  4. 4. Agenda● What are Wireframes?● Benefits of Wireframes● Tools
  5. 5. Agenda● What are Wireframes?● Benefits of Wireframes● Tools● Hands-on Demonstration
  6. 6. What are Wireframes?Wireframes help build the structure of a websiteby displaying the basic elements such asHeader, Footer, Navigation, Page Columns,Sidebars, etc,.
  7. 7. Purpose of Wireframes
  8. 8. Purpose of Wireframes
  9. 9. Benefits of WireframingUsers:It facilitates the conversation between usersand developers.
  10. 10. Benefits of WireframingUsers:It facilitates the conversation between usersand developers.Managers:Allows for better project management andprioritization.
  11. 11. Benefits of WireframingUsers:It facilitates the conversation between usersand developers.Managers:Allows for better project management andprioritization.Developers:No longer guessing what users want.
  12. 12. ToolsPaper
  13. 13. ToolsDrawing Tools● Google Drawings● Balsamiq● Power Point● Keynotopia toolkit● Photoshop● Ilustrator
  14. 14. ToolsCSSFrameworks● Bootstrap● Foundation● 960 Grid System● See more
  15. 15. Hands-on Demo
  16. 16. ResourcesFoundation: http://foundation.zurb.comBootstrap: http://twitter.github.io/bootstrap/index.htmlBalsamiq: http://www.balsamiq.com/
  17. 17. Questions?web: http://DesignsDrive.comemail: DesignsDrive@gmail.comtwitter: @DesignsDriveGet the slides at http://slideshare.net/marequi

×