UX Design and Development course

Presenting Information Architecture


Site planning with a team is often easier if you base your major structural planning and decisions on a shared master site diagram that all members of the group can work with. The site diagram should evolve as the plan evolves and act as the core planning document as changes are proposed and made in the diagram. Site diagrams are excellent for planning both the broad scope of the site and the details of where each piece of content, navigation, or interactive functionality will appear.

For major planning meetings consider printing at least one large diagram of the site organization, so that everyone can see the big picture as it develops from meeting to meeting. The site diagram should dominate the conference table, becoming a tactile, malleable representation of the plan. Everyone should be free to make notes and suggest improvements on the printed plan, and the revised diagram becomes the official result of the meeting.

This resource comes from the Web Style Guide. An amazing resource for building web applications. Topics covered are Process, Universal Usability, Information Architecturee, Interface Design, Site structure, Page structure, Page Design, Typography, Editorial Style, Forms and Application, Graphics and Multimedia.


The information architecture process is fundamentally one of avoiding the particular while insisting on the general. At various points in this conceptual phase, stakeholders, clients, and even members of your design team may find it irresistible to launch into specific proposals for the visual design of pages. In particular, concern about the possible look and feel of the home page is notorious for throwing planning processes off the rails and into detailed discussions of what colors, graphics, or general character the home page should have, long before anyone has given serious thought to the strategic goals, functions, and structure of the site. Wireframes force teams to stay focused on the information architecture and structural design without getting sidetracked by the distraction of the visual layer.

If site diagrams provide the global overview of the developing web site, then wireframes are the “rough map” that will eventually be used by graphic and interface designers to create preliminary and final page designs for the site. Wireframes are rough two-dimensional guides to where the major navigation and content elements of your site might appear on the page. They bring a consistent modular structure to the various page forms of your site and provide the fundamental layout and navigation structure for the finished templates to come (fig. 3.13).


Wireframe & UI Kit

When it comes to wireframes, there are those who have issue with seeing the concept behind the abstract black lines and empty boxes. I wish I could say, "BUCK UP and deal with it!" but I can't. What I WILL say is DO NOT GO TO PHOTOSHOP!!!

Luckily, there is a middle ground.

Download this Wireframe UI kit to help bring a little life to empty visuals.