You are currently browsing the monthly archive for October 2011.
As Tufte has written in one of his books: ‘when everything is emphasised, nothing is emphasised’. This happens to me with the massive volume of blog posts, and online discussion platforms. There are so many articles/notes being published in a day, that at the end I rarely read them or comment. However, I am very lucky to have lovely friends who pass along some links about information design. I have noticed that in the last six months the number of articles and posts about info design has increased considerable. Everyone seems to have something to say about this subject. So, in this post I won’t write about how to do or don’t do an information design project, or which colour palettes would be more or less appropriate. Instead, I will write down some general thoughts about the current state of information design and its community.
It seems to be a bit of confusion in the air. Some articles try to define what information design means (1), many posts give tips to create information graphics, and analyse which they considered the ‘bad’ ones (2); while others open discussions about defining information design ‘universal’ terminologies (3).
(1) Defining Info Design
Often, most (print) magazine articles approach info design from an historical point of view and link the discipline with the development of information graphics.
Here arises my first question: why information design tends to be associated with the creation of information graphics most of the time? The boundaries of the info design discipline go far beyond the development of infographics. Richard Wurman’s projects are clear examples of this. I have also explained the many possible projects in which info designers could be involved in one of my articles.
Moving on to my second: what is information design?
In previous posts, I have answered to this question from an academic point of view, but in this post I would like to answer it with an informal and easy-to-understand definition. So, I just did a quick search in wikipedia:
‘Information design is the skill and practice of preparing information so people can use it with efficiency and effectiveness. Where the data is complex or unstructured, a visual representation can express its meaning more clearly to the viewer.’
The above definition describes the aim of the discipline. Please note that it does not specify that infographics are the only and ultimate outcome of info design projects. So, again, why does information design tend to be only associated with information graphics?
(2) Visualising information
How to create effective information graphics? I don’t have the answer to this question, because there too many factors involved in the creative process to give aesthetic prescriptions. Just to mention a couple of factors: audience, project requirements, subject, information sources… From the context of graphic journalism Juan Antonio Giner and Alberto Cairo have defined a set of standards to create reliable information graphics, which is entirely focussed on content:
1. An infographic is, by definition, a visual display of facts and data. Therefore, no infographic can be produced in the absence of reliable information.
2. No infographic should include elements that are not based on known facts and available evidence.
3. No infographic should be presented as being factual when it is fictional or based on unverified assumptions.
4. No infographic should be published without crediting its source(s) of information.
5. Information graphics professionals should refuse to produce any visual presentation that includes imaginary components designed to make it more “appealing” or “spectacular”. Editors must refrain from asking for graphics that don’t stick to available evidence.
6. Infographics are neither illustrations nor “art”. Infographics are visual journalism and must be governed by the same ethical standards that apply to other areas of the profession.
My advice to visualise information would be to follow the above points, to consider all factors involved in each project, and, above all, to have always present that the fact that information design is not concerned with beauty but to effective communication and undertanding.
This leads to my third question: what about the other info design projects which are less ‘visual’ than infographics?
(3) Need of clarity
Although info design has been around for more than 60 years now, it is still a young discipline (yes, I am using the controversial word ‘discipline’ on purpose). If we think about design, it has been defined as a discipline at the end of the XIX century, and discussions towards its aims, terminologies, and problem-solving processes are still alive. So, going back to info design, there is a long journey to go. On the one hand there is lack of educational programmes specifically about info design. Information designers have mostly learnt by experience and everyday practice. Consequently, those who are teaching info design might not be info designers. On the other hand, boundaries and aims of the discipline have not been strictly defined yet. The idX group have published an info design education programme proposal in 2007 in which objectives of the discipline and practitioners’ tasks were well defined, but it hasn’t seemed to have been adopted at University levels.
Too many big question marks still need answers before investing energy in smaller aspects. The definition of universal terminologies and the creation of more effective information graphics are relevant subjects of discussion, but first the emphasis should be towards clearly defining the info design boundaries, aims, and areas of application. If not, how can we ensure that what we are arguing would be valid? The development of strong education programmes to properly train next generations of info designers and set the base of the discipline would be a step forward.
Some information design projects often have a deep level of complexity and deal with high amounts of information. The creation of one or more documents to aid (information) designers in the process before they begin with prototype design is highly necessary. Conceptual design is the stage where these documents are created, as it is when the skeletal framework of a design solution (i.e. information graphic, diagram, map) is defined. These documents are often different types of diagrams.
This post is not intended to display a taxonomy of these types of diagrams, but to explain the relevance and function of two types of them—map-type diagrams and wireframes—, which are the outputs of different phases of the conceptual design stage: the information design process and the deveolpment of draft proposals. These types of diagrams can be created in a wide range of layouts. The key is to know why they are important and how to create them properly.
Conceptual design stage (CDS)
In a previous post, I wrote about the relevance of the IAM for the development of effective draft proposals (content skeleton) of information design projects. This post discusses in more detail key outputs of the conceptual design stage.
At the beginning of the CDS design briefs are read and understood, initial research is being conducted to collect necessary data, information sources are analysed, meeting with clients are being arranged, and intended audiences studied. At the end of these tasks we have loads of information from different sources, sometimes languages, terminologies, which address to one or other part of the design problem we have to solve. The next steps should be towards the creation of the IAM. This model involves actions to organise that amount of information in a clear, understandable and usable way for the intended purposes of a project, which will enable to develop effective initial draft proposals. The first tasks, involved in the creation of the IAM, are synthesis and classification. Information coming from different sources should be ‘sifted out’ according to the requirements of the project, until the necessary information is identified. The next step is the definition of a hierarchical structure (levels of importance) of each type of information previously identified. Finally, following tasks are focused on more detailed sketches or maps of a possible final piece, which can be seen as initial draft proposals.
IAMs and draft proposals are visualised through diagrams, referred as map-type diagrams and wireframes respectively. The next part of the post describes both types of outputs, and explains their aims and relevance in the information design process.
Map-type diagrams
Map-type diagrams are a way to visualise the IAM. In other words, this is a way to show how information has been broken down into types of information and arrange according to a rationale specific to each project. As a result, a hierarchical structure, based on that organisation rationale, is displayed as a map-type diagram, in which each type of information is well differentiated and connections to other types are highlighted.
Layouts of map-type diagrams
Layout: In these types of diagrams the main topic is generally placed centrally and all sub-topics radiate out from that main topic or flow in one direction. Depending of the IAM, the underlying structure could be hierarchical, in which connection lines are often used to suggest associations between types of information other than main / additional ones (parent / child categories). Another possible structure could be when most types of information are interrelated. In this case, each type of information can connect to another and relationships are not just given as lines, resulting in layouts similar to a net. In both cases, types of information could appear as nodes that could be circles, ellipses, rectangles or other shapes. These types of diagrams could be also referred as mind maps, tree maps, isomaps, logic diagrams and conceptual maps.
Wireframes
The next step after the definition of the IAM is to display how the content that should be included the final piece could be distributed. This involves the organisation of types of information into a possible visual skeleton in which hierarchies should be highlighted. The types of diagram used to present visual skeletons are wireframes. Often, they are most associated with information architecture or web design, however these types of diagrams are also highly used by information designers. Wireframes give a ‘detailed guideline for layout and functionality within the information design piece’, providing details for each component (i.e. type of information, connections, hierarchies). Wireframes must be created before start coding and creating a design prototype, as they map out which visual elements ‘are most and least important to determine the focal points to the design of the final information piece’ (Baer, 2008:70). In addition, wireframes are a tool for communication and discussion between the parties involved in the design process, including (information) designers, clients, and end-users. A well-defined wireframe could be key to avoid mayor changes at the end of the prototyping stage, thus reducing costs and time.
Often wireframes focus on the following categories:
- The types of information to be displayed
- The connections between types of information
- The hierarchical structures of the information and functions
- Information components such as title, commissioner’s name, technical data, information sources
- Possible visual languages to be used
- Possible layouts, formats, grid systems
- Notes that indicate specific visual elements that should be considered
Layouts of wireframes
Layout. Basically, wireframes are a set of schematic drawings that show general aspects of a system implemented but they do not specify choices about shape or colour. Wireframes could be sketches, drawings or draft diagrams showing information organised and catalogued in layout form. These types of diagrams could be also referred as Low fidelity prototypes, storyboard, Schematics, Page Architecture and Blueprints.
Both types of diagrams: map-type and wireframes, are key outputs particularly of the conceptual design stage of information design projects, but they could be used to enhance the problem-solving process in a wide range of design problems.
- http://en.wikipedia.org/wiki/Website_wireframe
- http://techtastico.com/post/wireframes/
- Baer, K., 2008. Information design workbook: graphic approaches, solutions, and inspiration + 30 case studies. Beverly (Mass): Rockport.
– Costa, J. & Moles, A., 1992. Imagen didáctica. 2nd ed. Barcelona: Ed. CEAC.
– Moles, A. & Costa, J., 1990. Grafismo funcional. Barcelona: Ed. CEAC.
