Blue Prints and Wireframes

  • Published on

  • View

  • Download

Embed Size (px)


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


  • Blue Prints and WireframesFrom Information ArchitectureBy Rosenfeld and MorvilleBob Griffin - Information Architecture - IMD290

  • Documentation StrategiesIt 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 viewsDo not try to show your client everything at onceDevelop your views for specific audiences (flow charts, blue prints, storyboards, wireframes)

  • Things to remember about BPsThey dont speak for themselvesThey are a tool for keeping the discussion on track and gain buy-in from clientThey must be presented in personThey help to defend your navigation approachThey should be augmented with a narrative document

  • Blue PrintsBlue Prints show the relationships between pages and other content areasThey are often called sitemaps by the development team and and do have a lot to do with actual navigation themes

  • Blue Prints They come in various types, such as:High-levelDetailed, orProcess Specific

  • High-Level Blue PrintsCreated for top-down IA processStarting with the main page and fleshing out the general schemaIf brainstorming can take you to the top of the mountain, bps can bring you to the valley of realityIdeas that seemed brilliant on the white board, may . . .. . . not seem so when trying to logically organize them in an illogical schemaDuring the design phase, high-level bps are useful to give the design team a birds eye view

  • Blue PrintsFigure 12-1Use notes

  • High-level Blueprint

  • Process Blue Print

  • Less is MoreKeeping Bps SimpleAs 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

  • Legends

  • Detailed BlueprintsMoving into the development phase of your work, your plans need to focus on more detailArchitecture vs. ConstructionThe detailed plan allows you not to have to be thereThe bps must present the complete info from the main page to each destination pageThey must also have detailed labeling and navigation systems

  • Top levelBP withlegend

  • Wireframes

  • WireframesWireframes depict how an individual page should look from an architectural perspective, they stand at the intersection of the sites info architecture and its visual and information designA way to try out ideasBrings you back to the blue printForces you to make choicesPay attention to real estate

  • Wireframe BasicsCreated for the most important pages, or the most difficult processesThings that are complicated, unique or set a pattern (templates)Wireframes represent the clash of many different types of developmentsBut they ARE NOT replacements for true visual designYou must always make it clear to the client that you will be working with a graphic designer for the end product

  • Types of WireframesLow-fidelity --- basic, sketches, white board workHigh-fidelity --- detailed, more likely to contain graphic areas, button design, etc

  • WireframesProximitySchemaPriorityThe IA has determined thatReasons to Send

  • Wireframes

  • WireframesContent & colorSimulationSupports prototypingGreater effortSlow down processDifficulty in Balancing IAFrom GA

  • Wireframes

  • Wireframe GuidelinesConsistency is key; clients will be impressed by professionalismColleagues and clients take wireframes LITERALLYThere are software like Inspiration and Visio where you can MAKE a TEMPLATE, best advised to do soUsing call-outs --- a great way to emphasize process --- leave room for them at the top and sides of your wireframe

  • Wireframe GuidelinesWfs 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


    Figure 12-1 shows a website that has a collection of different heterogeneous sites using an umbrella architecture for all of its subsites (myspace)

    It is important to understand the difference of related pages and similar pages --- look at that

    From SEARCH and BROWSE you can view subsites by audience, title, format or topic.

    The bp also shows 3 value added guides, which serve as simple narratives or stories RE the websites sponsors

    Finally, you see a dynamic billboard that (implemented through Java or Java Script) that rotates the display of featured headlines and announcements

    This is a high-level blueprint for the online greeting card website This bp focuses on the users ability to filter cards based on format or tone at any level while navigating the primary taxonomy.Figure 12-5 presents a user-centered view of the card sending process at prior to a redesign project. It allows the project team to walk through each step along the web and email process.

    You should note that high-level bps leave quite a bit of information out.they focus on the major areas and structures.ignoring many navigation elements and page-level details.

    .less is more.

    If a diagram to too big to adequately print on to an 8 1/2 by 11 inch piece of paper then you have to create a multiple layer of linked blueprints.

    There is a difference between a LOCAL and a REMOTE page, as a LOCAL page is a child of the MAIN page and inherits characteristics such as graphic identity and navigation elements from its parents.

    The PAPERS COMMITTEE page inherits its characteristics from the PAPERS MAIN PAGE.