Twitter session at Kern on effective layouts inspired Geeta Bose to conduct and design this presentation. The key learning from the Twitter session: 1. IDs must have skills in visualizing information. 2. Visual design skills mean basic understanding of the design laws and principles. 3. Graphic designers should also understand instructional design principles to add value to visual design. 4. Good IDs are like architects. Like architects they must know about building materials, where to use them etc along with creating a detailed blueprint. 4. Good IDs have better productivity 5. Good IDs must understand Gestalt’s Laws, Color Theory, Basic Typography, Laws of Composition, & Visual Hierarchy. 6. Good IDs must understand Typography: Readability, Legibility, Para Alignment, Leading, Indents, Widow & Orphans, Type Selection. 7. They must understand what is Affordance along with Visual Composition: Point and range of view, rhythm, harmony, balance, and contrast

1. What is an Effective Layout? Presented by Kern Learning Solutions

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

3. Basic design principles to follow Grids Balance Contrast Harmony Focus

5. 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/)

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

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

9. 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.

11. 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.

12. 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.

13. 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.

14. Basic Elements Unit Columns

15. 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.

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

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

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

19. How to Focus? On the right message…

21. 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.

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

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

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

25. 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

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

27. 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