intro to wireframing
TRANSCRIPT
Intro to Wireframes in Web Designby Cynthia Petti Business Specialist & Co-FounderHoodoo
Goals
• Understand what is a wireframe• Importance and function of a wireframe• Communication• Exercise: Construct a wireframe
What is a wireframe
?
Wireframe vs. Prototyping
• Quick • No testing• Faster changes
• Actual Code• Real
Why is this important
?
• Elements to place on the page• Why they are placed there• How should they function• Logical flow of interaction and transitions
Communication
Good or Bad?
Wireframe Construction
Wireframe Exercise Rules
• Layout Design with visual Flow• At least one call to Action• Basic Blocks
Accomplished Today
• Learned the use of a wireframe• Understand the importance and function of a
wireframe• Communication and setting of expectations
Resources• Best Practices
http://www.dtelepathy.com/blog/design/learning-to-wireframe-10-best-practices
• Beginner’s Guide to Wireframinghttp://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399
• Software Applicationshttp://www.creativebloq.com/wireframes/top-wireframing-tools-11121302
• Build your wireframe online at: wireframe.cc • Free Mac Wireframe software: https://balsamiq.com/download/
• Web Development • Web Design• Specializing in:
• Small Businesses • Non Profit• Email: [email protected]
www.hoodooinc.com