Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Grid Systems in Graphic Design
ADMEC MULTIMEDIA INSTITUTE
Leader in Animation & Digital Media Education
ISO 9001 : 2008 CE...
Making of Trustful and Interesting Layouts
● Grid Systems
– What is Grid Systems
– Types of Grid Systems
– Use of Grid Sys...
Preface & Acknowledgment
Dear reader,
ADMEC Multimedia Institute is growing institute that is providing industry oriented
...

YouTube videos are no longer supported on SlideShare

View original on YouTube

Upcoming SlideShare
CSS font-stacks
CSS font-stacks
Loading in …3
×
1 of 87

Grid Systems in Graphic Design by ADMEC Multimedia Institute

18

Share

ADMEC Multimedia Institute is growing institute that is providing industry oriented training to the world at large. Being a multimedia institute we offer training for creating or designing content for information technology mainly.

Related Books

Free with a 30 day trial from Scribd

See all

Grid Systems in Graphic Design by ADMEC Multimedia Institute

  1. 1. Grid Systems in Graphic Design ADMEC MULTIMEDIA INSTITUTE Leader in Animation & Digital Media Education ISO 9001 : 2008 CERTIFIED www.admecindia.co.in | www.graphic-design-institute.com Phones: +91-9811-8181-22, +91-9911-7823-50 R A Presentation by: Ravi Bhadauria
  2. 2. Making of Trustful and Interesting Layouts ● Grid Systems – What is Grid Systems – Types of Grid Systems – Use of Grid Systems – Examples ● Rule Of Thirds – What is Rule Of Thirds – How to Use Rule Of Thirds – Examples ● Phibonacci Numbers and Golden Ratio – What are Phibonacci Numbers and Golden Ratio – How to Use in Designing? – Examples Lecture by: Ravi Bhadauria Date: 21-01-2016 Time: 09:00 – 11:00 AM ADMEC Multimedia Institute Rohini, Delhi, India www.admecindia.co.in
  3. 3. Preface & Acknowledgment Dear reader, ADMEC Multimedia Institute is growing institute that is providing industry oriented training to the world at large. Being a multimedia institute we offer training for creating or designing content for information technology mainly. This presentation is one of the best presentations from our study material for our weekly workshops which ADMEC conducts every week at the center. We have planned to share it with the world so that everyone can take benefits from our small efforts. This presentation contains a good information for “Layout Grid Systems in Graphic Design”, Fibonacci Numbers, Golden Ratio, Rule of Third etc. We express thanks to many books and websites, specially google.com for making it one of the best presentation of all the time. Thanks Ravi Bhadauria, Instructor (Web and Visual Designing) Director ADMEC Multimedia Institute http://www.admecindia.co.in
  4. 4. Do you remember this design
  5. 5. Hope you remember this too
  6. 6. And this too.......
  7. 7. Of course this also
  8. 8. I'm sure this you can't forget
  9. 9. Designs are many ● Even better than we saw ● With better color combinations ● With better typography ● With better organization of elements ● With more trust oriented and interesting
  10. 10. But what is the secret sauce... ● To build a such layouts ● To create something that attracts attention ● To design a piece of art that is not anticipated ● To design something that gives you many WOW
  11. 11. And the Answer is Very Simple You need to be very good in layout making!!!
  12. 12. Is it TRUE????? What do you say guys?
  13. 13. Yes of course BUT?????
  14. 14. You need to understand... ● How to create a good layout? ● What are the rules in its core to construct it? ● Layout is just a process but what about the system laying underneath it? ● We have discussed in last class about types of layouts, elements of layouts, and process to make layouts. ● We also discovered three phases of layout making e.g. thumbs sketches, rough layouts, and comprehensive. ● But how to design all this that lays foundation for a 100% successful design, needs to be discovered yet.
  15. 15. Wait, wait, wait... I will discuss about the secret sauce soon.
  16. 16. Learn Visual Designing from Experts ADMEC MULTIMEDIA INSTITUTE Leader in Animation & Digital Media Education ISO 9001 : 2008 CERTIFIED - Visit Our Websites - www.admecindia.co.in www.graphic-design-institute.com Phones: +91-9811-8181-22, +91-9911-7823-50 - Contact Us -
  17. 17. Ingredients for good layout are ➔ Grid Systems ➔ Rule of Thirds ➔ Phibonacci Sequence ➔ Golden Ratio ➔ Gestalt Theory (I will cover this later) ➔ And many more...
  18. 18. Layout Grid Systems
  19. 19. About Layout Grid Systems Finding a right grid systems is like dating with someone. You need to look around, try few out, let some go, and commit to one.
  20. 20. About Layout Grid Systems Unlike the dating roles, they are different types of. One grid is just for one purpose. A grid for classical books is not a good fit for dance club website.
  21. 21. About Layout Grid Systems
  22. 22. About Layout Grid Systems
  23. 23. About Layout Grid Systems
  24. 24. Result after good Layout Grids
  25. 25. About Layout Grid Systems
  26. 26. Why Layout Grids are Important? Always start your design project with a layout grid. No exceptions. If you don’t, you’ll never be able to repeat that look consistently. Your projects will never have visual harmony and, like anything which lacks structure or a strong foundation, your concepts will be visually inconsistent from one product to another and will always be a struggle to produce. Without a layout grid, graphic elements will not properly work together.
  27. 27. Why Layout Grids are Important? Any high-quality design project, campaign or identity/branding system needs a strong, tested and perfected layout grid system to make it possible to split the work to many designers at one time, so that they all produce the same quality end result with consistency and visual harmony. A layout grid is the invisible force that gives the visible its structure and holds everything in its proper place.
  28. 28. Vertical Layouts in Basic Grids
  29. 29. Horizontal Layouts in Basic Grids
  30. 30. Types of Layout Grids ● Manuscript Grid ● Column Grid ● Modular Grid ● Hierarical Grid
  31. 31. Learn Visual Designing from Experts ADMEC MULTIMEDIA INSTITUTE Leader in Animation & Digital Media Education ISO 9001 : 2008 CERTIFIED - Visit Our Websites - www.admecindia.co.in www.graphic-design-institute.com Phones: +91-9811-8181-22, +91-9911-7823-50 - Contact Us -
  32. 32. Manuscript Grid Also known as a single column grid or a block grid, the manuscript grid is the easiest grid structure of all. It is predominantly an extensive rectangular area taking up a large portion of the space inside a format. Useful for: Classical Layouts
  33. 33. Column Grid Column grids are made up by setting multiple columns inside the format. Column grids are great when discontinuous data needs to be exhibited. Useful for: Magazines
  34. 34. Modular Grid Modular grids are similar to column grids with the expansion of even divisions marked by rows. Modular grids are great for hard projects that call for more control than a column grid can offer. Picture galleries and shopping carts are likely possibility for modular (particular) grids. Useful for: Complex Layouts such as Newspapers
  35. 35. Hierarchical Grid Hierarchical grid is commonly found on the web. This is based more on an intuitive placement of elements, which still conforms to the needs of the information. flowlines. Useful for: Clean Layouts such as Web Templates
  36. 36. Using Layout Grids Effectively There are two main types of layouts: vertical or landscape. There are also only two types of grids. One that has an even number of columns and one that has an odd number of columns. An experienced designer knows that a specific style of design can only be achieved by an odd number of columns, or alternatively, by using an even number of columns. Illustrated on next slide are common examples of layouts using basic layout grids. Learning to choose the right grid for your design is crucial to its success.
  37. 37. The Rule of Thirds
  38. 38. Learn Visual Designing from Experts ADMEC MULTIMEDIA INSTITUTE Leader in Animation & Digital Media Education ISO 9001 : 2008 CERTIFIED - Visit Our Websites - www.admecindia.co.in www.graphic-design-institute.com Phones: +91-9811-8181-22, +91-9911-7823-50 - Contact Us -
  39. 39. The Rule of Thirds The rule of thirds works by splitting an image into thirds, so you end up with 9 equal sections, then simply place your main subject where the lines intersect.
  40. 40. The Rule of Thirds Example
  41. 41. The Rule of Thirds Example
  42. 42. The Rule of Thirds Example
  43. 43. The Rule of Thirds Example
  44. 44. The Rule of Thirds Example Few more examples: https://www.google.co.in/search?q=rule+of+thirds+pictures&biw=1366 &bih=583&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj33aOryrPKAhVIbY4KHa nEADEQ_AUIBygB
  45. 45. The Fibonacci Numbers or Series or Sequence
  46. 46. Learn Visual Designing from Experts ADMEC MULTIMEDIA INSTITUTE Leader in Animation & Digital Media Education ISO 9001 : 2008 CERTIFIED - Visit Our Websites - www.admecindia.co.in www.graphic-design-institute.com Phones: +91-9811-8181-22, +91-9911-7823-50 - Contact Us -
  47. 47. Fibonacci Sequence The Fibonacci Sequence is the series of numbers: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89
  48. 48. Golden Ratio & Fibonacci Sequence The Golden Spiral is based on the Golden Ratio while the Fibonacci Spiral is a spiral based on the Fibonacci Sequence. Both are very similar, and can be used as a compositional tool.
  49. 49. Makes A Spiral When we make squares with those widths, we get a nice spiral:
  50. 50. Golden Ratio And here is a surprise. When we take any two successive (one after the other) Fibonacci Numbers, their ratio is very close to the Golden Ratio "φ" or Phi which is approximately 1.618034... A B B / A 2 3 1.5 3 5 1.666666666... 5 8 1.6 8 13 1.625 ... … ... 144 233 1.618055556... 233 377 1.618025751...
  51. 51. Golden Ratio The golden ratio (symbol is the Greek letter "phi" shown at left) is a special number approximately equal to 1.618 It appears many times in geometry, art, architecture and other areas.
  52. 52. Golden Ratio: The Idea Behind It We find the golden ratio when we divide a line into two parts so that: the whole length divided by the long part is also equal to the long part divided by the short part
  53. 53. Golden Rectangle This rectangle has been made using the Golden Ratio, Looks like a typical frame for a painting, doesn't it? Some artists and architects believe the Golden Ratio makes the most pleasing and beautiful shape.
  54. 54. Golden Rectangle Do you think it is the "most pleasing rectangle"? Maybe you do or don't, that is up to you! But I like and love it. I am sure you will too.....
  55. 55. Golden Angle So far we have been talking about "turns" (full rotations). The equivalent of 0.61803... rotations is 222.4922... degrees, or about 222.5°. In the other direction it is about 137.5°, called the "Golden Angle".
  56. 56. Golden Angle So, next time you are walking in the garden, look for the Golden Angle, and count petals and leaves to find Fibonacci Numbers, and discover how clever the plants are ... !
  57. 57. Pentagram The pentagram is more famous as a magical or holy symbol. And it has the Golden Ratio in it: a/b = 1.618... b/c = 1.618... c/d = 1.618...
  58. 58. Other Names The Golden Ratio is also sometimes called the ● golden section ● golden mean ● golden number ● Golden eye ● divine proportion ● divine section and ● golden proportion
  59. 59. Why Golden Ratio? Using Golden ratio is a simple and easy way to define a pleasing composition. Scientists claim that the closer to the golden ratio an object is, the more the human brain finds it agreeable and pleasant.
  60. 60. Why Golden Ratio? Long since this ratio was discovered, many artists and architects have applied it into their works. You can find the golden ratio in several Renaissance master pieces, architecture, paintings, and much more. The result: a beautiful and aesthetically-pleasing masterpiece. No one really knows what it is about the golden ratio that pleases our eyes. Most assume that the fact that it appears everywhere and is a “universal” proportion is what makes us accept it as a logical, harmonic, and organic proportion. In other words, it just “feels” right to our brains.
  61. 61. Where we see it in nature? The golden ratio and Fibonacci sequence appears in the petal count of flowers. Most flowers have petals that are either two, three, five, or more petals which are all part of the divine sequence.
  62. 62. Where we see it in nature? seeds that extend from the center and grows around the outside to fill in the seed head. These are usually formed in spiraling patterns that resemble the Golden spiral. What’s more is that the seed count usually adds up to the Fibonacci numbers. For Example, lilies have 3 petals, buttercups have 5, the chicory flower has 21, and the daisy has 34. Apparently, the seed head of a flower also follows the Golden ratio. The sunflower, for example, has a
  63. 63. The Divine Proportion in the Body ● The white line is the body’s height. ● The blue line, a golden section of the white line, defines the distance from the head to the finger tips. ● The yellow line, a golden section of the blue line, defines the distance from the head to the navel and the elbows. ● The green line, a golden section of the yellow line, defines the distance from the head to the pectorals and inside top of the arms, the width of the shoulders, the length of the forearm and the shin bone. ● The magenta line, a golden section of the green line, defines the distance from the head to the base of the skull and the width of the abdomen. The sectioned portions of the magenta line determine the position of the nose and the hairline.
  64. 64. Golden Spiral Examples
  65. 65. Golden Spiral Examples
  66. 66. Golden Spiral Examples
  67. 67. Golden Ratio Examples
  68. 68. Golden Ratio Examples Que: Is the Parthenon designed after the Golden Ratio? Ans: Yes and No, both!!!???
  69. 69. Golden Ratio Examples
  70. 70. Golden Ratio Examples
  71. 71. Golden Ratio Examples
  72. 72. Golden Ratio Examples
  73. 73. Top Brands Logo Using Golden Ratio
  74. 74. Twitter Though the Twitter logo has gone through a ton of changes, many of which included no bird at all, by my count, there have been five major iterations of the actual Twitter bird formerly known as Larry.
  75. 75. The Geometry and Evolution 2 Recent Logos of Twitter. Lets have a look on the Twitter history first to get the exact idea of need of good logo. https://www.youtube.com/watch?v=NzRkszaGBbY https://www.youtube.com/watch?feature=player_embedded &v=Fh20pdCrCAU
  76. 76. The Geometry and Evolution (Twitter) There’s something about the geometry of the new Twitter logo that’s pretty interesting. Can you see the Twitter bird in this spaghetti of circles?
  77. 77. The Geometry and Evolution (Twitter)
  78. 78. The Geometry and Evolution (Twitter) What's so special in it, then?
  79. 79. The Geometry and Evolution (Twitter) See the another logo here. It is not completely a hard rule you can add new shapes too to your design.
  80. 80. The Geometry and Evolution (Twitter) It uses the Golden Ratio. I can see, can you?
  81. 81. Other Circle Centric Logos PEPSI LOGO
  82. 82. Apple Logo Geometry behind the Apple Logo You can notice the numbers in side the golden ratio and Apple logo. How 1, 2, 3, 5, 8 number are being used for the proportion and sizes in Apple logo and of course these numbers are Fibonacci numbers.
  83. 83. One more example
  84. 84. Top Brands Using Golden Ratio Upper case Phi is Φ Lower case phi is φ
  85. 85. Ques on Grids, Fibonacci, Rule of Thirds Theory: ● What is a Layout Grid? ● Why Grids of Layout are so important? ● How many types of Grids are there? Please Explain with examples. ● What is the Phibonacci Sequence and how it is useful for designers? ● Can you explain the projects of few brands using Golden Ratio? ● What are the differences between Column and Modular Grids? ● What is the Rule Of Thirds and how it is helpful for designers and photographers? Practical: Create a Poster or Web Template or Book Cover Email me at: info@admecindia.co.in
  86. 86. ADMEC MULTIMEDIA INSTITUTE Helpline 1: +91 9811-8181-22 Helpline 2: +91 9911-7823-50 Url: http://www.admecindia.co.in Contact Us ADMEC MULTIMEDIA INSTITUTE Want to read more on visual designing, please visit http://www.graphic-design-institute.com Want to Learn Visual Designing?

×