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
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
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
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
WireframesContent & colorSimulationSupports prototypingGreater effortSlow down processDifficulty in Balancing IAFrom GA
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 Egreetings.com. 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 Egreetings.com 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.
READ THROUGH THE LEGEND