Layout Decisions

Decisions

• Minimal
• Pixel perfection
• Columns
• Adhering to Golden Ratio
• F-Layout flow

I believe Green & Black's audience will respond well to a minimal design. Striving for pixel perfection is fundamental in the success; an element one pixel off can break it.

“Perfect” means that every element of every design comp is exactly as you intend them to be in the final programmed product. (http://webdesign.tutsplus.com/articles/design-theory/great-design-hurts-striving-for-pixel-perfection/)

I will be putting time into ensuring that this is the case. The columns in the design, used to divide the information on the page, will be particularly affected by this attention to detail.

The Golden Ratio

...Phi is also a very prominent constant in design; This is because a ratio of 1 to 1.618 is better known as the Golden Ratio – often referred to as the Golden Section, Golden Mean or the Divine Ratio. If you create a rectangle according to this ratio, you get a shape known as the Golden Rectangle. (http://webdesign.tutsplus.com/articles/design-theory/mathematics-and-web-design-a-close-relationship/)

The Golden Rectangle, shown below, shows how you can divide it upon itself infinitely (and perfectly).

Another example of the Golden Ratio being used is the popular Smashing Magazine blog; shown below.

I shall be building my layout in Photoshop with guides calculated and set to adhere to the Golden Ratio.

Last, but not least, the layout of this page should not force the eye, but accompany it in the F-Layout flow. The Logo in the top right will be the beginning of the first path, drawn to the right where the Navigation will be found. Below the first path will be another where the headings of each column will lie. As the eye trails downward and along the left side it'll flow into the column holding the story.

An example of a good F-Layout, from webdesign.tutsplus.com, shows us how well-placed it is beneath a heatmap overlay.

This heatmap shows the abstract F shape that user’s general gravitate towards. Hot spots (red/orange/yellow) represent where user’s attention lingers the longest.