Your SlideShare is downloading. ×
What is an Effective Layout?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What is an Effective Layout?

866

Published on

Twitter session at Kern inspired Geeta Bose to conduct and design this presentation. …

Twitter session at Kern 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

Published in: Design, Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
866
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 4.  
  • 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/)
  • 6. 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
  • 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.
  • 10. 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
  • 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…
  • 20. How to Focus?
    • By using
    • Color
    • Size
    • Emphasis
    • White Space
    • To define
    • Emphasis
    • Hierarchy of Information
    • Importance
    Why Focus?
  • 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
  • 28. 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

×