Further to my research into setting out grids for web based design i found an interesting article on www.cameronmoll.com (full link will appear at the bottom of this post) detailing the correct screen width to set your layout bearing in mind most users are now using monitors with a resolution of 1024 x 768, as opposed to 800 x 600.
If you take into consideration that the chrome scroll bars down the left and right hand sides take up between 40-50 pixels, the remaining width of the broser will be 974-984 pixels. The fact that most users dont browse at full screen and 974-984 isn't a divisibly friendly figure makes sense of rounding the screen resolution down to 960, which coincides nicely with the browser width when not viewing full screen and can be divided by many whole numbers to make grid formation simpler.
For more information see the link below.
http://www.cameronmoll.com/archives/001220.html
Showing posts with label grid systems. Show all posts
Showing posts with label grid systems. Show all posts
Thursday, 4 September 2008
Tuesday, 26 August 2008
page layout
Been snooping around on the internet looking for information about layout and setting up grid systems to ensure designs are well organised and easy to read and follow. Started by reading a boo by Kimberley Elam called "The Geometry of Design", which explores the notion of the golden section, the Fibonacci sequence (where each number in the sequence is deruved by adding the previous two together, for instance: 0,1,1,2,3,5,8,13,21,34,55 and so on)and applying the theory to natural objects like a sea shell or a pine cone and works of art and architecture. The theory on proportions goes a long way explaining what we instinctively regard as attractice or pleasing to the eye and can be applied to all aspects of design.
I've since found loads of resources on the web detailing grid construction and layout, useful addresses will appear at the bottom of this post. The following extract offers a basic guideline on how to set up a page:
Number of lines per page - it's normally helpful if the number of lines you can fit on each page in your chosen font is divisible by the number of grid sections you intend to have. It's well worth devoting some time to flowing some text ('printer's Latin' for example) on to a page and getting a print-out in various column widths and different font sizes (if you're working in a college, it's worth asking whether they already have something of that sort). You can easily be surprised - for example:
You can use the same exercise to work out how many words in a given font can be fitted into a column inch (or column centimetre) of a given column width.
Complexity of content - if your content is to include relatively little artwork, few panels containing comments, quotations and so on, then you may not need a grid at all. If it is to be fairly complex, then it's a good idea to have a number of panels in your grid, even if your basic page is to be a single column of text.
Margins - a function of how much you need to fit on to each page, which of course will vary from one production to another, but the following general rules are often followed:
foredge (also known as outside margin): should be an average of head (top margin) and foot (bottom margin)
foot (also known as bottom margin): should always be bigger than the head (top margin), probably at least 50% bigger (this is due to the so-called optical centre - due to an optical illusion, we tend to see the centre of a page as being slightly higher than the actual centre. Thus, if elements are situated exactly equally on either side of the optical centre, we tend to see them as too low down. For that reason, when setting up a page, we normally set up the bottom margin around 50% bigger than the top margin)
back (also known as inside or gutter margin): the two back margins taken together should be roughly as wide as the foredge (when setting up the back margin, you should bear in mind how your work is to be bound - some bindings 'eat up' a large amount of paper)
Facing pages - when setting up the pages, always consider what two facing pages will look like together.
Master pages - most desktop publishing systems will provide you with master pages. It's on those pages that you should set up your grid once you've decided what it should be
All pretty handy to know, also downloaded a PDF called "Grids are Good" by Mark Boulton (www.markboulton.co.uk)and Khoi Vinh (www.subtraction.com)that takes you through a basic layout for a website using a grid system. Although the end result isn't all that striking it does walk you through the basic constraints when constructing a layout grid. All very useful!
I've since found loads of resources on the web detailing grid construction and layout, useful addresses will appear at the bottom of this post. The following extract offers a basic guideline on how to set up a page:
Number of lines per page - it's normally helpful if the number of lines you can fit on each page in your chosen font is divisible by the number of grid sections you intend to have. It's well worth devoting some time to flowing some text ('printer's Latin' for example) on to a page and getting a print-out in various column widths and different font sizes (if you're working in a college, it's worth asking whether they already have something of that sort). You can easily be surprised - for example:
You can use the same exercise to work out how many words in a given font can be fitted into a column inch (or column centimetre) of a given column width.
Complexity of content - if your content is to include relatively little artwork, few panels containing comments, quotations and so on, then you may not need a grid at all. If it is to be fairly complex, then it's a good idea to have a number of panels in your grid, even if your basic page is to be a single column of text.
Margins - a function of how much you need to fit on to each page, which of course will vary from one production to another, but the following general rules are often followed:
foredge (also known as outside margin): should be an average of head (top margin) and foot (bottom margin)
foot (also known as bottom margin): should always be bigger than the head (top margin), probably at least 50% bigger (this is due to the so-called optical centre - due to an optical illusion, we tend to see the centre of a page as being slightly higher than the actual centre. Thus, if elements are situated exactly equally on either side of the optical centre, we tend to see them as too low down. For that reason, when setting up a page, we normally set up the bottom margin around 50% bigger than the top margin)
back (also known as inside or gutter margin): the two back margins taken together should be roughly as wide as the foredge (when setting up the back margin, you should bear in mind how your work is to be bound - some bindings 'eat up' a large amount of paper)
Facing pages - when setting up the pages, always consider what two facing pages will look like together.
Master pages - most desktop publishing systems will provide you with master pages. It's on those pages that you should set up your grid once you've decided what it should be
All pretty handy to know, also downloaded a PDF called "Grids are Good" by Mark Boulton (www.markboulton.co.uk)and Khoi Vinh (www.subtraction.com)that takes you through a basic layout for a website using a grid system. Although the end result isn't all that striking it does walk you through the basic constraints when constructing a layout grid. All very useful!
Subscribe to:
Posts (Atom)