Website Design Fundamentals: Margins and Measurements

Our universe is built around numbers and mathematics and thus is true when it comes to a good design. Mathematics in design is one of the basic fundamental requirements of any good design and this can be seen in practice by some of the greatest artists and designers of our time such as Da Vinci, Michaelangelo and the list goes on. 

As screen designers we need to be aware of numbers, or in our case pixels measurements. This is vitally important when it comes to screen design and not because we particular try to use the golden ratio or other various components of PI but because our designs have to be dynamic in their measurements to cater for an array of devices. Secondly, a site with misaligned columns, margins and what have you can create a bad composition and an unpleasant experience. Owners, if your site isn't constructed in a way that is practical, reliable and at least ticks some of the fundamentals of design then what is it going to say subconsciously to your customers?

For budding site designers you need to realise that the fundamental requirements have to be ticked in order to proceed with your career. Much like a writer or editor could easily spot your grammar or spelling mistakes on your CV a seasoned creative director also easily spot a lack of basic fundamentals in the blink. Your portfolio is your CV to a creative director so it's vital that you get it correct.

Thankfully Firefox (and Chrome) has some good extensions to help you critique your sites on their layouts. Whilst these should have been done correctly in Photoshop sometimes in translation from design to development things can go a little wrong.

MeasureIt is a great extension available for Firefox, Chrome and Safari that allows you to measure the pixel consumption of particular page elements.

Foxguide is another vital extensions that will emulate vertical and horizontal rulers much like in photoshop. This extensions however is only available in Firefox.

By using these extensions together I can accurately critique and perfect my sites.

MeasureIt and FoxGuide

In the above image you can see the pixel ruler (MeasureIt) on the left hand side which I've used to measure 500px down the page. This measured out the average fold across devices so from that I can see that the bulk of the design will be visible for most people and likewise If I then measured horizontally I'd notice just how slim this page I'm editing on is. The designers of this page could have gone a lot wider but it was designed in a time before media queries and when 800x600 was the king resolution.

Using the FoxGuide extensions I can also see a few discrepancies in the margin formulas at the main controls, however these are only a few pixel differences and not likely to cause a huge fuss unless your client or boss is a pixel perfectionist.

You're now fully equipped to critique sites as you see fit and to ensure your own designs are compliant with one of the basics of design elements.

 Go forth and create beautifully aligned sites.

Leave a comment