Layout Design by Yeo Chiuya

Introduction

According to Park (2007), layout design is defined as the visual structure of the composition. Firelight Web Studio (2007) stated that layout design is a service that involve in designing a page structure which organized all the important parts in an effective way.  

Layout basically contain the interactive objects and interaction objects in a multimedia application (Vanderdonckt, n.d). Interaction objects known as widgets or controls, encompass static objects and dynamic objects. Interactive objects is the object that the multimedia application can view. Vanderdonckt (n.d), stated that there are two things to do to before a designer sketches the components of a multimedia application. The first responsibility is to choose a suitable interaction and interactive object based on the user’s task. For the following responsibility is to determine the basic layout of these selected objects according to the importance of the objects from the most important to the least one. 

Importance of layout design in multimedia application

            A layout design is important because if a layout is not clear enough, it might has the probability of losing the messages you wanted to convey and affect the entire application and it might lead to wasting of money. Plus, a good multimedia application with good layout design will enhance the entire look of the objects and bring a strong composition of the design. Furthermore, a main factor for a user-friendly application is having a good layout that can be easily understood.

Layout design

            In order to determine the basic layout of a multimedia application, calculating and geographical composition drawing are needed. A layout grid usually works as a divider of the layout to divide the layout into units that have visual and conceptual integrity and it is actually a line which is vertical and horizontal (Vanderdonckt, n.d).

However, layout gird are no longer suitable for the modern multimedia application because the layout is not only about horizontal line and vertical line but based on other shape such as convex shapes, planes, and volumes. Hence, the concept of layout grid has extended to be layout frame. Layout frame is another layout which consists of various types of form. The forms are dots, lines which have pattern, different type shapes and volumes. Hence, a series of visual techniques is developed to make the layout design easier. The content will be discussed in further in below.            

Visual Techniques for layout design

            To make the design of layout easier, several visual techniques are used. Visual technique is defined as a principle that use to arrange the layout component (Vanderdonckt, n.d). Five categories of the techniques are stated as below: 

a.)    Physical technique

b.)    Composition technique

c.)    Association and dissociation techniques

d.)   Ordering techniques

e.)    Photographic technique

On each category of visual techniques contain layouts which have similarity. For physical technique, it includes balance, symmetry, regularity, alignment, proportion, and horizontality. Composition techniques include layout like simplicity, economy, understatement, neutrality, singularity, positivity, and transparency. Association and dissociation techniques contain layout such as unity, repartition, grouping, and sparing. Ordering techniques include layout like consistency, predictability, sequentially, and continuity. Lastly, photographic techniques include sharpness, roundness, stability, leveling, activeness, subtly, representation, realism, and flatness. The figures below showed the example of each techniques of layout.

Example layout by using visual techniques

Visual techniques are usually able to see in a single layout. The figures below show the example of layout that use of visual technique.

Most of the designer will prefer physical and ordering techniques for traditional applications. However, these techniques are not suitable to apply for complex multimedia application. The figure below shows the example of multimedia application which uses physical and ordering techniques. Figure 1 shows a simple layout application with layout grid.

Figure 1

The example layout for complex multimedia application is shown in figure 1. In the figure, the multimedia application applies physical technique, association and dissociation techniques, composition technique, and photographic visual techniques. This application used balance layout which is belong to physical technique. The layout is being divided into two columns which the both lengths are equal, while the heights are different. Alignment layout also included in this application which is also one of the techniques of physical. Alignment is playing a good role here because the number of alignment point is reduced by the two columns. Appropriate proportion also appropriate in this situation because it contain a good ratio while the textual zones are separated.

            While the layout used in association and dissociation techniques in this multimedia application is repartition, and grouping layout. For the repartition, the picture, textual and push buttons are placed in the two columns. While for the grouping, it is also used because of the information is display group by group. For example, the title and picture are displayed first then follow by the information.

            The next technique applies in this application is composition technique which included positivity layout. Positivity layout is used because the background colour is brighter than the objects. The multimedia application also includes photographic visual techniques because the picture in the layout brings the effect of sharpness, and angularity.

Figure 2

Screen Layout

            According to Sieber (2012), he stated there are two strategies to display layout in an application. They are high-density layout strategy and limited information layout strategy. High-density layout strategy is a strategy that mainly uses to convey information or message which is high volume.

High-density layout strategy

High-density layout strategy includes tabular arrangement, tabular arrangement, hierarchical organization, and graph.

                                i.            Tabular arrangement is to organize the arrangement of data in a list of structured values. Spreadsheets and database grids are the typical example.

Figure 3

                              ii.            Hierarchical organization is that the information is structured into a hierarchy which looks like a tree structure.

Figure 4

                            iii.            Graph is presenting the information or message graphically. For example, diagram of chart.

Figure 5

Limited information layout strategy

Limited information layout strategy is aim to minimized the scope of data being displayed.  This strategy is included couple of approach that makes the strategy work. They are the step-by-step interaction, details on demand, disable irrelevant information.

i.                    Step-by-step interaction is cut up the data and displayed it in a stage. Even though the message been cut out, but the meaning is still easily be understood. For example, wizard interface.

Figure 6

ii.                  Details on demand refers to the user able to request to show some optional data. The example is the dialog box which has a button like “more details” to lead to further information.

Figure 7

iii.                Disable irrelevant information is useful when a data is unavailable.

Figure 8

Conclusion

Conclusion, a good layout is very important to a multimedia application. However, it is not easy to design a good layout. Techniques and strategies listed above are needed to apply in order to design a layout.

Reflection

Through the studies of layout design, I have understood that layout design actually isn’t just a design, but a way to make an application more user-friendly and attractive. Besides, through the study of layout design, I have found out that in order to design a good layout for multimedia application, a lot of efforts are needed to contribute. For example, design a layout which able to attract user. It is hard because every user have different a point of view that might affect how they think about the application.