What is an Effective Layout?

What is an Effective Layout? Presented by Kern Learning Solutions

Better chunking of information Convey message effectively Define focus of message Capture learner attention Efficient development of course Better understanding for stakeholders Why?

Basic design principles to follow Grids Balance Contrast Harmony Focus

The weight of the text on the left is balanced by the weight of the photograph on the right. The weight of the visual on the left is balanced by the weight of the feedback box on the right. (Courtesy: http://www.alleninteractions.com/)

The weight of the graphics on the left is more than the text on the right. Therefore, the screen is not balanced. When a customer walks in, greet the customer with this simple greeting and you can see amazing results! Audio 1: So what is an ideal greeting? Suppose a customer walks in, how do you greet the customer? Audio 2: You need to make your customer feel comfortable. You must always be polite and warm. Always speak in the language that is common between you and the customer. Ensure that you are also comfortable with it. Always let the customer know that you are available at all times to help them. Screen_3 Welcome to Godrej Lifespace. I am Gautam. How may I help you, Sir?
Tips:
Be polite, warm and welcoming.
2. Speak in the language that you and your customer are both comfortable with.
3. If your customer is browsing, just smile to indicate that you are available if they need help.
Welcome Feel 3 Feet Smile genuinely. Focus on the bridge between the eyes while talking. Bend your neck and shoulders slightly to indicate interest. Stand with legs slightly apart, body erect, shoulders balanced. Body Language Give a broad genuine smile Positive body language is a key skill that all sales executives must have! Focus between the eyes

Symmetrical Balance The weight of graphics is balanced across the screen. The elements are similar to one another. This is symmetrical balance.

Symmetrical Balance The screen is equally balanced because of similar images.

Asymmetrical Balance The drop down and the weight of photo balances this screen. The elements are dissimilar in size and shape. This is asymmetrical balance.

Why Use the GRID?
Solid Visual and Structural Balance of websites
Enhances the Visual Experience
User’s can follow the Consistency of the Page
Offers More Flexibility
Easier to Implement
Increase User’s/Learner’s Confidence in the Product
Efficient to work upon

The Rule of Thirds If you divide a space into 3 parts and place the object of attention on the lines then it looks visually balanced and aesthetically pleasing. 1 2 3 This space captures the attention of the viewer at first glance.

The Rule of Thirds If you divide a space into 3 parts and place the object of attention on the lines then it looks visually balanced and aesthetically pleasing. 1 2 3 This attention is on the face of the child.

The Rule of Thirds If you divide a space into 3 parts and place the object of attention on the lines then it looks visually balanced and aesthetically pleasing. 1 2 3 The attention is on the first tulip. When we divide the image into squares, the first tulip covers the maximum area.

Basic Elements Unit Columns

1 Column 2 Column (Symmetric) 3 Column Types of GRID 2 Column (Asymmetric) These grids are prominent in newspapers, magazines, websites, books, and so on.

What is the grid type? This is a 3-column grid.

What is the grid type? (Courtesy: http://www.alleninteractions.com/) This screen has a 1/3 and 2/3 rd division.

What is the grid type? This screen has 5 units. (Courtesy: http://www.alleninteractions.com/)

How to Focus? On the right message…

How to Focus?
By using
Color
Size
Emphasis
White Space
To define
Emphasis
Hierarchy of Information
Importance
Why Focus?

Indentify the focus on the screen? (Courtesy: http://www.alleninteractions.com/) The focus is on the note in the center of the screen. The color and contrast differentiates it from the rest of the screen.

How does your eye move on the screen? (Courtesy: http://www.alleninteractions.com/)

How does your eye move on the screen? (Courtesy: http://www.alleninteractions.com/) Let us see how the eye moves. 2 3 1

How is the focus and how does eye move on the screen? (Courtesy: http://www.alleninteractions.com/)

How is the focus and how does eye move on the screen? (Courtesy: http://www.alleninteractions.com/) Let us see how the eye moves. 1 2 3 4

How is information organized on the screen? (Courtesy: http://www.alleninteractions.com/)

How is information organized on the screen? (Courtesy: http://www.alleninteractions.com/) The grid used is 1/3-2/3 rd. The focus is on the note because it is prominent and the orange place holder attracts more attention than the flatter green background. 1 2

Links/References
Layout techniques:
http://elearning.kern-comm.com/?tag=layout-techniques
210 B, Swapnalok Complex Sarojini Devi Road Secunderabad 500 003 India p +91 40 40171313 c [email_address] w www.kernlearning.com b http://elearning.kern-comm.com

http://elearning.kern-comm.com	153
http://bb.apsb.org	99
http://digilearning.blogspot.com	72
http://www.slideshare.net	34
http://dtpword.pbworks.com	31
http://static.slidesharecdn.com	1
http://translate.googleusercontent.com	1
https://classes.uaf.edu	1
http://tkbelearning.blogspot.com	1
http://portafolideanamarina.blogspot.com	1
file://	1

What is an Effective Layout?

by Kern Learning Solution on Mar 15, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 395

Statistics

What is an Effective Layout? — Presentation Transcript