A closer view to Conceptual Design

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. 2^nd ed. Barcelona: Ed. CEAC.
– Moles, A. & Costa, J., 1990. Grafismo funcional. Barcelona: Ed. CEAC.