1 / 23

Blue Prints and Wireframes

Blue Prints and Wireframes. From Information Architecture By Rosenfeld and Morville Bob Griffin - Information Architecture - IMD290. Documentation Strategies.

erin-rosales
Download Presentation

Blue Prints and Wireframes

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Blue Prints and Wireframes From Information Architecture By Rosenfeld and Morville Bob Griffin - Information Architecture - IMD290

  2. Documentation Strategies • It is unlikely that the messages we want to communicate will ever really fit on an 8 1/2 x 11 sheet of paper, but it is good to note the following in terms of documentation: • Provide multiple “views” • Do not try to show your client everything at once • Develop your views for specific audiences (flow charts, blue prints, storyboards, wireframes)

  3. Things to remember about BP’s • They don’t speak for themselves • They are a tool for keeping the discussion on track and gain buy-in from client • They must be presented in person • They help to defend your navigation approach • They should be augmented with a “narrative document”

  4. Blue Prints • Blue Prints show the relationships between pages and other content areas • They are often called “sitemaps” by the development team and and do have a lot to do with actual navigation themes

  5. Blue Prints They come in various types, such as: • High-level • Detailed, or • Process Specific

  6. Created for top-down IA process Starting with the main page and fleshing out the general schema If brainstorming can take you to the top of the mountain, bp’s can bring you to the valley of reality Ideas that seemed brilliant on the white board, may . . . . . . not seem so when trying to logically organize them in an illogical schema During the design phase, high-level bp’s are useful to give the design team a “bird’s eye view High-Level Blue Prints

  7. Blue Prints Figure 12-1 Use notes

  8. High-level Blueprint

  9. Process Blue Print

  10. Less is More • Keeping Bp’s Simple • As a project moves from strategy to design to implementation, blue prints become more utilitarian (practical) • They need to take in a number of perspectives (designers, editors, programmers) • It is important to develop a simple, condensed vocabulary that can be explained in a brief legend. • See Figure 12-7

  11. Legends

  12. Moving into the development phase of your work, your plans need to focus on more detail Architecture vs. Construction The detailed plan allows you not to have to be there The bp’s must present the complete info from the main page to each destination page They must also have detailed labeling and navigation systems Detailed Blueprints

  13. Top level BP with legend

  14. Wireframes

  15. Wireframes • Wireframes depict how an individual page should look from an architectural perspective, they stand at the intersection of the site’s info architecture and its visual and information design • A way to try out ideas • Brings you back to the blue print • Forces you to make choices • Pay attention to real estate

  16. Created for the most important pages, or the most difficult processes Things that are complicated, unique or set a pattern (templates) Wireframes represent the “clash” of many different types of developments But they ARE NOT replacements for true visual design You must always make it clear to the client that you will be working with a graphic designer for the end product Wireframe Basics

  17. Low-fidelity --- basic, sketches, white board work High-fidelity --- detailed, more likely to contain graphic areas, button design, etc Types of Wireframes

  18. Wireframes Schema Proximity The IA has determined that “Reasons to Send…” Priority

  19. Wireframes

  20. Wireframes Content & color Simulation Supports prototyping Greater effort Slow down process Difficulty in Balancing IA From GA

  21. Wireframes

  22. Wireframe Guidelines • Consistency is key; clients will be impressed by professionalism • Colleagues and clients take wireframes LITERALLY • There are software like Inspiration and Visio where you can MAKE a TEMPLATE, best advised to do so • Using “call-outs --- a great way to emphasize process --- leave room for them at the top and sides of your wireframe

  23. Wireframe Guidelines Continued • Wf’s should be “usable” (i.e. hyperlinked) and professionally developed, including professional labeling not only to the actual page design but also to the documentation (such as page numbers, page titles, project tiltes and revision dates (especially revision dates) • If more than one person is creating the IA, agree on established procedures for sharing and developing process

More Related