|home||Units: 1 2 3 4 5||Schedule||Resources|
For Wednesday & Thursday:
The term wireframe refers to a rough or general outline of something. In the context of Information Architecture, wireframes are schematic (or diagrammatic) representation of representation of the navigation, interactivity and content of web page. Wireframes are rough drawings; tools for thinking and discussing.
As the design of the web site proceeds, the wireframes will go through several iterations, beginning with very rough boxy sketches and moving through increasingly defined sketches. The wire frame is never developed to the level of a graphic design, but rather is a communication tool that will be given to the graphics team.
Wireframes are created typically as a set, with different wireframes demonstrating the elements of the various major page groups. Most web design proposals would include the following wireframes:
Due: in your deliverables submittal at the end of the semester.
You have done your analysis, now we are going to begin to propose how to turn this site around. What do you want to do about the home page? Is it almost perfect, or absolutely horrendous? Your assignment is to create a wireframe proposing changes to the homepage with will implement the goals and visions that you collected in the mission, goals and audience definition
Your final wireframe should be able to be printed out on 8.5 x 11 paper. If your pages scrolls, it may take more than one sheet.
At this point in time, there is no single software package that is universally agreed upon as the perfect IA tool. For serious IA or usability work, most people use Visio or Omnigraffle. HTML Is less frequently used for wireframing because of the tendency of the client to assume that the look and intersection is literal. That is, what he sees in the wireframe bears a strong resemblance to the final web site. This can be confusing and/or frustrating. There is a growing list of emerging IA software tools, which include wireframing among their capabilities. AxureRP and Adobe Thermo are some of the IA specific software tools that are emerging.
A short list of software options below.
Visio is probably the most popular software package for information architects. If you think that you want to pursue IA further, it is well worth your time to learn the basics. However, it is not a particularly intuitive software package and has a bit of a learning curve. Omnigraffle is a similar tool for the Mac.
There are a number of templates available which will ease the creation of wireframes (hint: use the shift key when resizing objects). Henrik Olsen has provided a very clear tutorial: Visio - the interaction designer's nail gun and set of templates and shapes ('GUUUI Web Prototyping Tool'). This will take you through creating a wireframe in Visio.
The IA institute Tools collection offers several shape stencils and templates for Visio.
Powerpoint is a familiar interface to most of us which has the graphics tools to create the basic shapes that are needed in a wireframe. Frederic Cavazza has created a Powerpoint wireframe template with shapes that you can use to create your wireframe assignment. Paul Hibbits offers some alternative shapes that you can use in your wireframe.
Paul Hibbits' PPT widgets only - no templates
Adobe Illustrator, InDesign (or Photoshop) are good choices for highly defined wireframes. You can begin to specify grids and proportions. If your client is working with a content management software package (such as dual has defined layout limitations, Illustrator will allow you to easier create grid based proportional wireframes.
Note: In using these packages, you need to be aware of any potential boundaries between the IA team and the design team.
UX matters has a tutorial on wireframing in Illustrator or InDesign. Within that article is a link to their templates.
AiBurn has a tutorial on Wireframing using Illustrator by Sean Hodge
The IA institute Tools collection offers several shape stencils and templates for Adobe Illustrator.
Word or Excel: Both programs have drawing tools, though neither is really set up for creating a drawing of this scale. Still it can be done - and most everyone has access to Microsoft Office.
This is an update of the content map that you created previously. This version of the map will reflect the reorganization and changes that you have made. These changes will be based on our decisions regarding the structuring of the content and on your observations made during the cardsorting exercise.
It will probably be easiest to create this by making, in Excel<a new content list which refelcts the proposed changes in site navigation. This is the two column list with the headers of Name and Relates_to. Then let Visio generate your revised content map.
Use color coding or other graphic indicator to indicate new or revised structures. In this map, you will need to show:
Show any revised labels for the pages. Indicate graphically (color or font type) which labels: