15. Accomplished Today
• Learned the use of a wireframe
• Understand the importance and function of a
wireframe
• Communication and setting of expectations
16. Resources
• Best Practices
http://www.dtelepathy.com/blog/design/learning-to-wireframe-10-best-practices
• Beginner’s Guide to Wireframing
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--
webdesign-7399
• Software Applications
http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302
• Build your wireframe online at: wireframe.cc
• Free Mac Wireframe software: https://balsamiq.com/download/
17. • Web Development
• Web Design
• Specializing in:
• Small Businesses
• Non Profit
• Email: cynthia@hoodooinc.com
www.hoodooinc.com
Editor's Notes
Ask: Have you heard of wireframing?
Ask: Can you tell me what is and how it is used in development?
Wireframe is a basic visualization of the layout elements of a website.
————
Low fidelity - bordered boxes no colors, place holders for text, often hand drawn.
High fidelity - colors and highlights with other styles applied including typography, more details
This provides a document that outlines the important elements of your site. Things to put - logo navigation, sign ups, graphics that rotate, or a “call to action” donate/purchase. this is a simple version of the what the website will grow to be.
The importance it allows for an organized hierarchy on the importance of information for the website. This is a structured piece that is organized in a thoughtful way to kick off the development and build the site. MAP out the most important pieces of information for the site.
Flow shaped pattern (find research)
Outline of your website of where your information will go.
These items are things to consider in regards to wireframe. You are telling a story, and in order to keep people engaged in your site/story it must be organized in a thoughtful manner that yields results.
What results are looking to achieve?
Makes things simple - no distractions (colors, fonts)
Allows only to see the function, where located and prominence on the page.
(BLUE Print in your design process - outline)
Expectation management: and fundamental design principles (horizontal/vertical navigation) Side bar / no side bar.
Why is this good?
makes presentation easier
allows for simple explanation of each element
higher fidelity done with software (Balsalmiq, Google Sketch, etc)
Point out why it’s bad.
Rules - apply what you’ve learned here and outline your wireframe with boxes. Think of an “F” structure for flow of information and they way a visitor absorbs the flow of information.
I have at least one call to action.
No fancy buttons - basic blocks.