• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
What is an Effective Layout?
 

What is an Effective Layout?

on

  • 22,911 views

Twitter session at Kern on effective layouts inspired Geeta Bose to conduct and design this presentation. ...

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

Statistics

Views

Total Views
22,911
Views on SlideShare
22,364
Embed Views
547

Actions

Likes
46
Downloads
0
Comments
3

15 Embeds 547

http://elearning.kern-comm.com 178
http://bb.apsb.org 109
http://dtpword.pbworks.com 78
http://digilearning.blogspot.com 76
http://digilearning.blogspot.tw 40
http://www.slideshare.net 34
http://pinterest.com 14
http://www.linkedin.com 10
http://www.pinterest.com 2
http://tkbelearning.blogspot.com 1
http://translate.googleusercontent.com 1
file:// 1
http://static.slidesharecdn.com 1
http://portafolideanamarina.blogspot.com 1
https://classes.uaf.edu 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    What is an Effective Layout? What is an Effective Layout? Presentation Transcript

    • 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