Information Design Technics
Because information design projects often have a deeper level of complexity and volume of information than other design projects, you would probably need to create one or more supporting documents to help you in the process before you begin visual design.
Supporting documents such as wireframes, site maps and flowcharts can help you organize and gazer information and help you to gather information flow. When an information design project contains many parts or levels of information, a flowchart or other diagram that visually organized and structured can often to be tremendous help to an information designer.
A flowchart is common type of chart, which represents logical process, showing the steps of the process by connecting these with arrows. Flowcharts are used in designing, documenting or managing a process in various designs.
Figure 1. Project Flowchart
Symbols
A typical flowchart has the following kinds of symbols:
Start and end symbols
Represented as lozenges, ovals or rounded rectangles, usually containing the word "Start" or "End", or another phrase signaling the start or end of a process, such as "submit enquiry" or "receive product".
Arrows - An arrow coming from one symbol and ending at another symbol represents point to point action.
Processing steps - Represented as rectangles. Examples: "save changes" or "Exit".
Input/Output - Represented as a parallelogram. Examples: Get X from the user; display X.
Conditional or Decision - Represented as a diamond . These typically contain a Yes/No question or True/False test. This symbol is unique in that it has two arrows coming out of it, usually from the bottom point and right point, one corresponding to Yes or True, and one corresponding to No or False. The arrows should always be labeled. More than two arrows can be used, but this is normally a clear indicator that a complex decision is being taken, in which case it may need to be broken-down further, or replaced with the "pre-defined process" symbol
Types of flowcharts
There are many different types of flowcharts. Users such as analysts, designers, engineers, managers, or programmers might use chartsflow .In addition, flowcharts can represent different types of objects. Sterneckert (2003) divides four more general types of flowcharts:
- Document flowcharts, showing a document flow through system.
- Data flowcharts, showing data flows in a system.
- System flowcharts showing controls at a physical or resource level.
- Program flowchart, showing the controls in a program within a system.
Wireframes are first round sketches of a web page. They are a visual tool showing future concept of the web site. A main purpose of wireframes is to show the page layout and they are one of the main communication tool. They facilitate conversation with the client and translate the requirements back to the team. Graphic designers can refer to wireframes to see all the screen elements for each page and the relative importance of each. Programmers can also use them for data modeling and functional requirements.
There is a wide range of different formats of wireframes from using paper to a graphics program. Often you would use both: at first you might start sketching pages on paper, or a white board and later transfer it to a graphic program.
Wireframes normally look like a plain wirelike drawings with labels. Most designers use Visio for creating wireframes. When creating wireframes you should consider three main sources of information: site maps, requirements and content. The main idea using wireframes is to capture the information layout without spending too much time on the visual design elements.
Wireframes don't have to be unattractive, but it doesn't make sense to spend big amount of time to make them beautiful. For one thing, clients can mistake wireframes with the final look and feel of the final product. Wireframes should be clean and well organized, but free of extra graphics and details.
Sometimes information designers use one or two colors to emphasize certain pieces of information. (Figure 1. Example of a web site wireframe)
Figure 1. Example of a web site wireframe
A site map is a document, which demonstrates the relationship between content and functionality in the site's architecture. It captures site's content, information stature, and organize scheme in a visual representation. A site map is a key deliverable in designing a web site, and a predictable position on the page, and it is useful to many projects.
Possible Site Map Architecture
Figure 2. Example of "Map" Web Site Map
Figure 3. Example of "Tree" Web Site Map
Figure 4. Example of "Organic" Web Site Map
Common elements of site maps include:
Numbering Scheme
To avoid confutation it helps to give an each page a unique identifier. Frequently, site sections are given a letter starting with A and going alphabetically from there.
Labels
Each section in site map needs a title, which corresponds to the navigation label for that page. Think out carefully the final wording you want to use. It will help you to avoid going back and fix the labels later.
Notes
Site maps not always communicate everything visually. Often you would need to write notes in the site map to explain the details.
Key
Key helps to indicate some characteristics about each page such as key for a login to the Forum page, secure login with a lock image, or a plus sign for resources, which indicates external site.
Visual Vocabulary for a Site Map
