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.



Published on

This presentation covers the subject of graphic design layout. Elements of graphic layout, Purpose, and how-to tips.

Published in: Design, Technology, Education
  • Be the first to comment


  1. 1.
  2. 2. <ul><li>Introducing the building blocks. </li></ul><ul><li>What is layout? </li></ul><ul><li>How to Layout. </li></ul><ul><li>Epilogue. </li></ul>
  3. 5. <ul><li>0 – Format </li></ul><ul><li>1 – Header </li></ul><ul><li>2 – Subheader1 </li></ul><ul><li>3 – Bullets </li></ul><ul><li>4 – Logos </li></ul><ul><li>5 – Subheader2 </li></ul><ul><li>6 – Element </li></ul>
  4. 7. <ul><li>0 – Format </li></ul><ul><li>1 – Image </li></ul><ul><li>2 – Header </li></ul><ul><li>3 – Subheader1 </li></ul><ul><li>4 – Subheader2 + Bullets </li></ul><ul><li>5 – Credit </li></ul>
  5. 10. <ul><li>1 – Insert </li></ul><ul><li>2 – Navigation </li></ul><ul><li>3 – Image </li></ul><ul><li>4 – Header </li></ul><ul><li>5 – Text </li></ul>
  6. 12. <ul><li>1 – Header </li></ul><ul><li>2 – Text </li></ul><ul><li>3 – Header </li></ul><ul><li>4 – Image </li></ul><ul><li>5 – Header </li></ul><ul><li>6 – Subheaders </li></ul><ul><li>7 – Thumbnail </li></ul><ul><li>8 – Caption </li></ul>
  7. 18. #footer { Margin: 0px 0px 0px 10px; border: none; padding: 0; width: 100%; height: 120px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; } Inclusive design The idea that by designing for accessibility we create better solutions that everyone enjoys. Also known as “Universal design” CSS Cascading style sheets used to define the styling of visual elements in web pages. The thesis Using CSS is such a clear method for defining styling that even computer s understand it. It stands to reason that it’s probably a good method for people to employ too… … Especially when they’re just starting out. Lever operated taps were originally designed for access by people with disabilities Sample CSS code specifying the design for a footer element