Blue Prints and Wireframes

Document Sample
Blue Prints and Wireframes Powered By Docstoc
					Blue Prints and Wireframes

   From Information Architecture
              By Rosenfeld and Morville
 Bob Griffin - Information Architecture - IMD290
  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,
 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
• They should be augmented with a
  “narrative document”
              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
Blue Prints
       They come in
       various types, such
        – High-level
        – Detailed, or
        – Process Specific
     High-Level Blue Prints
• Created for top-down      • . . . not seem so
  IA process                  when trying to
• Starting with the main      logically organize
  page and fleshing out
  the general schema
                              them in an illogical
• If brainstorming can
  take you to the top of    • During the design
  the mountain, bp’s can      phase, high-level
  bring you to the valley     bp’s are useful to
  of reality
                              give the design
• Ideas that seemed
  brilliant on the white      team a “bird’s eye
  board, may . . .            view
Blue Prints

 Figure 12-1
  Use notes
High-level Blueprint
Process Blue Print
              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
       Detailed Blueprints
• Moving into the       • The bp’s must
  development phase       present the
  of your work, your      complete info from
  plans need to focus     the main page to
  on more detail          each destination
• Architecture vs.        page
  Construction          • They must also
• The detailed plan       have detailed
  allows you not to       labeling and
  have to be there        navigation systems
Top level
 BP with
• 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
        Wireframe Basics
• Created for the       • But they ARE NOT
  most important          replacements for
  pages, or the most      true visual design
  difficult processes   • You must always
• Things that are         make it clear to the
  complicated, unique     client that you will
  or set a pattern        be working with a
  (templates)             graphic designer for
• Wireframes              the end product
  represent the
  “clash” of many
  different types of
     Types of Wireframes
• Low-fidelity ---   • High-fidelity ---
  basic, sketches,     detailed, more likely
  white board work     to contain graphic
                       areas, button
                       design, etc
Schema              Proximity


                                     Content & color


                 Slow down              Greater effort
                             Difficulty in
                             Balancing IA
                              From GA
     Wireframe Guidelines

• Consistency is key; clients will be impressed
  by professionalism
• Colleagues and clients take wireframes
• 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
    Wireframe Guidelines

• 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

Shared By: