Grid-base design
Have taken a bit more time to figure out what is grid-based design and had known a basic. For all I have researched, the screen resolution takes a important part to develop a grid. Usually we design a website for the 1024×768px resolution, then you will settle 960px (because it’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, 16). Here is a good tutorial show a web layout with 960 Grid setting with 12 columns. Another article also talks about 960 Grid but I think he mixes the meaning of columns and guideline.
There is another “noun”: Baseline
How do you set a baseline grid? Why they set 24px? Should adjust fonts size with baseline matching?
Teehan+lax: “The traditional sizes to go with this baseline (9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 48, 60, 72 points): these sizes prove to be extremely useful when combined with leading derived from 3.
Coming up with a grid for print requires multiple calculations based on page format, font choice, font size, leading, etc. Hopefully these calculations are not necessary for digital design, and web design in particular: on screen, the baseline grid is essentially determined by leading.”
Related reading:
http://www.tutorial9.net/tutorials/photoshop-tutorials/design-a-clean-web-layout-with-the-960-grid/
No comments:
Post a Comment