Intro to Wireframing
Download as PPTX, PDF0 likes381 views
The document provides an introduction to wireframes in web design, emphasizing their importance for communication, layout design, and interaction flow. It covers the differences between wireframing and prototyping, along with guidelines for constructing effective wireframes. Resources for best practices and software tools for wireframing are also included.
Intro to Wireframing
- 1. Intro to Wireframes in Web Design by Cynthia Petti Business Specialist & Co-Founder Hoodoo
- 2. Goals • Understand what is a wireframe • Importance and function of a wireframe • Communication • Exercise: Construct a wireframe
- 3. What is a wireframe
- 4. Wireframe vs. Prototyping • Quick • No testing • Faster changes • Actual Code • Real
- 6. Why is this important
- 7. • Elements to place on the page • Why they are placed there • How should they function • Logical flow of interaction and transitions
- 9. Good or Bad?
- 13. Wireframe Exercise Rules • Layout Design with visual Flow • At least one call to Action • Basic Blocks
- 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
- #4: 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
- #7: 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.
- #8: 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?
- #9: 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.
- #11: Why is this good? makes presentation easier allows for simple explanation of each element higher fidelity done with software (Balsalmiq, Google Sketch, etc)
- #12: Point out why it’s bad.
- #13: 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.