Presentation Transcript

1. Advanced Wireframes

2. Today in Class Any questions or problems? Advanced Wireframe presentation Discuss Homework Assignment In Class Assignment
3. Overview Wireframes Mockups, Prototypes Storyboards to simulate complex user actions Tools to create interactive wireframes
4. What are Wireframes? “Wireframes are a set of documents that show structure, information hierarchy, functionality, and content…Wireframes are a means of documenting the features of a product, as well as the technical and business logic, with only a veneer of visual design. They are the blueprints of a product.”
5. What are wireframes? Wireframes are similar to building blueprints They define the content and functionality of each page Show structure Wireframes may/may not show content detail They do not show design: colors, typography, photos or graphics
6. What is Wireframing? We often think of wireframes as deliverables. But wireframing is a process. They are a communication tool between designer and: Clients, funders, business people Other designers Developers Copywriters His/herself
7. Key Benefits to Wireframing Early, close-up view of the site design or re-design Inspire the designer, resulting in a more fluid creative process Gives the developer a clear picture of the elements they need to code Defines clear call to action on each page Easy to adapt and can show the layout of many sections of the website
8. Wireframe = Prototype = Mockup? NO! They look different, they communicate something different and they serve different purposes.
9. Wireframe A wireframe is a low fidelity representation of a design Wireframe should clearly show: the main groups of content (WHAT?) the structure of information (WHERE?) a description and basic visualization of the user – interface interaction (HOW?)
10. Levels of Wireframes or Prototypes Low Fidelity High Fidelity
11. Low Fidelity Wireframe Simple place to start Defines navigation, framework and basic structure Typically done in gray scale rough and more generic, less specific, less detail
12. High Fidelity Wireframe Lots of precise details Fill in the details missing in their simpler predecessors Define: weighting and visual hierarchy of the page actual form and interaction elements Contain labels instructional text some copy
13. Mockup Middle to high fidelity representation of the final product A well created mockup: represents the structure of information, visualizes the content and demonstrates the basic functionalities in a static way encourages people to actually review the visual side of the project
14. Prototype middle to high fidelity representation of the final product Prototype should allow the user to: experience content and interactions with the interface test the main interactions in a way similar to the final product
15. Prototype Examples Low Fidelity Prototype High Fidelity Prototype
16. Annotations Brief notes or explanations Prevents clients from judging layout before understanding Side or bottom of a wireframe
17. Annotation Best Practices Keep them short and to the point Focus on user benefits Use numerical markers and order them Keep them in a column on the right
18. Annotation Example
19. What to Avoid When Wireframing Too much happening on the page Emphasis on color and design Too much detail
20. Benefits of Wireframing A communication tool Helps stakeholders visualize the project specifications Saves on expensive rework and allows programmers to build the website or web application right
21. Wireframing Best Practice Simplicity Work in gray scale Use wireframes in tandem with a sitemap Focus on the desired outcome Plan the elements by securing the content in advance
22. Ways to Wireframe Hand sketching on paper Flowchart or mind-mapping software Web prototyping software Graphics software, such as Photoshop or Illustrator HTML wireframes are almost like actual sites themselves
23. Bad Examples of Wireframing Example 1 Example 2
24. What is a storyboard? Usability tool consisting of a series of wireframes or sketches that allows you to visualize and organize the content and configuration of your website Shows a sequence of interactions that a user would carry out in order to accomplish a task Used extensively in making Hollywood movies, animation and video games Recently has been adopted into the web development process
25. Storyboards… (cont) Reflect limited detail about the contents of each page in the sequence Includes only the navigation links required to accomplish the task are represented Primarily used within design teams to communicate ideas about site structure and navigation
26. Storyboard Methods Methods Fundamentals Sheets of paper Post-it notes Software program Website navigation Content sections User login boxes (if applicable) Search boxes/engine Page connections
27. Question? Have you used any of the methods discussed? If so, what method?
28. Standalone and Online Tools
29. Adobe InDesign XCode 4 Storyboard Adobe Fireworks Axure RP Balsamiq Mockups ConceptDraw Diagram Designer Enterprise Architect FlairBuilder OmniGraffle OpenOffice Draw Pencil Project Microsoft Visio Microsoft Sketchflow WireframeSketcher iRise Pro Studio Standalone Tools
30. Online Tools MockFlow Mockingbird Mockup Builder Pidoco fluidIA Gliffy iPLOTZ Lovely Charts Lucid Chart
31. Overview of Axure RP/Pro Features Specs Linking - Yes Exporting- Yes, to HTML and CHM files for stand alone viewing (note exports to PDF unavailable) Annotations - Yes Phone UI Support - Yes UI Types Out of the Box - Generic, not tied to a UI or OS Price $289 (For individuals, freelancers, and small teams focused on prototyping) $598 (For larger teams with an emphasis on documentation) URL- http://www.axure.com/ Trial available - Yes, feature complete; 30 days Available at: http://www.axure.com/download Application Modes – PC or Mac Documentation - http://www.axure.com/learn Instruction videos - http://www.axure.com/videos
32. Summary of Axure RP/Pro Excellent in creating high-fidelity, complex mockups requiring numerous interactions Has a small learning curve Lots of documentation is available(tutorials, videos, etc.) Numerous tools and options for building high-fidelity, complex and programmable prototypes
33. Tool Review for Pencil Project Features Specs Linking – Yes Exporting- Yes; PNG, HTML, PDF, Print, SVG File, OpenOffice Annotations – No Phone UI Support - Yes UI Types Out of the Box - Generic, not tied to a UI or OS, install stencils Price- Free URL - http://pencil.evolus.vn/Default.html Application Modes - PC and Mac Documentation- Limited - http://pencil.evolus.vn/WikiIndex.html
34. Pencil Project Review Summary No-cost, open source tool. Limited documentation and support No annotations
35. Pencil Project
36. Overview of Mockflow Linking – Yes Exporting - Yes; HTML, PDF, PNG, Powerpoint, MS Word, etc Annotations – Yes Phone UI Support - No UI Types Out of the Box - Generic, not tied to a UI or OS Price - Free - $69/year URL - http://www.mockflow.com/ Application Modes - Online Documentation - Support page: http://support.mockflow.com/
37. Overview of Mockflow Relatively inexpensive Number of starting templates Annotations are not intuitive
38. In Class Assignment Explore mockflow.com Using mockflow.com create a wireframe with the following elements: Homepage Logo Navigation Search Bar Featured image 3 Minimum 3 text areas Footer Link to second page Second Page Logo, Navigation, Search Bar, Footer from homepage Page heading Image Breadcrumb Block of text
39. Deliverables Include annotations Export as PDF, Images Place in Assignment 5 Folder under ‘In Class Assignment’