Meet the grids - Web design using Grids

1,464 views

Published on

What is a web grid? Which ones you can use?

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

No Downloads
Views
Total views
1,464
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
51
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Meet the grids - Web design using Grids

  1. 1. let’s talk GRID ramses.cabello@gmail.com @ramsescabello
  2. 2. what is a grid?
  3. 3. what is a grid?
  4. 4. what is a grid? in graphic design a grid is a series of vertical and horizontal lines that are used to subdivide a space. this give us an easier approach to the page layout.
  5. 5. why grids? it saves us time visual consistency between different pages
  6. 6. a web grid
  7. 7. a web grid a web grid is a framework.
  8. 8. a web grid a web grid is a framework. a web grid creates equal width columns,.
  9. 9. a web grid a web grid is a framework. a web grid creates equal width columns. it helps out layout our page structure.
  10. 10. a web grid a web grid is a framework. a web grid creates equal width columns. it helps out layout our page structure. visual consistency.
  11. 11. a web grid a web grid is a framework. a web grid creates equal width columns. it helps out layout our page structure. visual consistency.
  12. 12. examples
  13. 13. meet the grids
  14. 14. meet 960
  15. 15. lightweight meet 960
  16. 16. lightweight easy to use meet 960
  17. 17. lightweight easy to use fast meet 960
  18. 18. lightweight easy to use fast fixed width meet 960
  19. 19. lightweight easy to use fast meet 960 fixed width mobile ( ? )
  20. 20. DON’T PANIC.
  21. 21. meet unsemantic lightweight easy to use fast responsive 1180px wide
  22. 22. unsemantic syntax <div class="grid-container"> <div class="grid-100 mobile-grid-100"> <header> Cabecera </header> </div> </div>
  23. 23. unsemantic resources http://unsemantic.com/
  24. 24. action! http://bit.ly/1fg7dFi

×