Use of Grids in Web Design to Create Balance and Hierachy

Grid layout

Grids have been used to display a serious content in the simplest of fashions.
The page width is 960px, and it is centred to allow the page to resize to other users. The grid layout is essentially a three column grid with a header and a footer. The page is laid out to ensure that all the relevant issue promoting the goals of the page are registered up the fold. There is an almost unconscious page break between the content in the fold and those in the rest of the document.
The design has been made interesting by visually dividing the page into thirds vertically and horizontally and placing our most important elements within those thirds. Horizontally the page consists of a banner or heading , a broad body and a wide footing. These divisions are made distinctly clear by use of complimentary shades of blue and a border lines to define the relative spaces. The most important information of this website is about offering customers the choice of changing suppliers based on a comparison of prices. This is captured in the fold.
The site can be commended for the use of white space. The grid has been used expertly to organise the space around text and images giving clarity and meaning to those design elements. You can see that text and images are not placed willy nilly but seem to conform to the width and height of the grid lines. White space has also been used effectively in demarcating the horizontal and vertical bands in which the content sits.
The images are fantastic in conveying the message of the website emphasising the three distinct areas of the utilities, broadband/media and the mobile phone markets. The images are not randomly placed but are aligned in the same position within the three columns enabling it to be part of the layout at the same time giving it some visual importance and presence.
The logo, headlines , navigation bar and textual content have been placed where it is expected to be and these have been made distinct by use of white spaces. The use of effective placement coupled with different font sizes and colour provides a visual hierarchy and structure to the website. This will get people to notice the call to action and also to click on them.
The logo is very compelling. The arrow on the letter U draws the eye to the other content in the header. Within the header there is further visual hierarchy. The main area of interest in the design , emphasising the goals of the webpage are in bold blue font to draw the eye further to these areas.

Interaction design

Cleaver use of blue background in an L shaped drop down menu repeated horizontally on each of the elements in the heading give some rhythm and consistency. Both blue and white are cool colours but contrast beautifully . The hover effect of a light shade of blue on a darker blue background and white font adds to the user experience All the design element within the fold are active. There is a cleaver use of images , h2 fonts , colour of bottoms white spaces to add variability and improve user experience.

The choice of colour for the call to action bottoms were deliberately chosen to introduce contrast with each other as well as the white text. These colours are the Tetradic/Quadratic colour schemes created by choosing colours at the corners of a rectangle inscribed on the colour wheel.

These tried and tested colour pallets work well together and adds to visual enhancement of the site. It also emphasises the different content of each columns . The font type , font weight and colour are the same for all three columns , making a gentle statement on the parity of importance of the content in each columns.

Yellow contrasts well with blue green and red , and in this case serves to highlight the call to action button during hovering.
The font family of choice was Helvetica Neue. A gradation in Font size is used to create a visual hierarchy by drawing the eye of the customer and announcing the text as a call to action element. The colour match and placement of the h1 font with the rest of the content in each column allows you to link the heading with the content therefore adding to the ease of application and ultimately better user experience. Another quality property worth mentioning is the text width . The major text areas display the text in readable width. That is long enough to engage the user.

Visual Balance up the fold

The website is built using a 960 Grid System which creates a form of balance for the page right away. The grids exhibit translational symmetry in the way it breaks up the row and column widths to maintain balance and proportion. The elements are distributed across the page to enable a visual interpretation of gravity in the design. The main content in the header is evenly spaced out . The translation symmetrical effect becomes more obvious when the elements in the headings are called to action. Here an L-shaped blue background is repeated across the width of the header at fixed intervals creating visual hierarchy and distinction in the header . Translational symmetry is replicated by the duplication of the same shape but of different sizes of the of background across the height of the page within the fold. , The layout of the text on the web page above the fold but below the image line is highly symmetrical and evenly spaced across the vertical plane in this web design. Although the text differs from column to column, the spirit of a mirror symmetry can be deduced between the columns. This images and the shapes which are 3 and 2 dimensions respectively are used to convey meaning , organise information and to draw attention to the call to action elements. The elements are evenly spaced by transitional symmetry, using white spaces cleverly to introduce clarity and definition to the elements, adding to the building blocks used to sustain interest in the web design. The page above the fold is very balanced to give equal importance and prominence to the heading , the images and the text. It is very difficult to give meaningful hierarchy between these elements except to say that the combination of the image on the translucent background is compelling. Keeping the pieces of the content roughly the same size and spanning them across the entire web page while maintaining enough space for all of the essential text and imagery enables transitional symmetry in the design.

Visual balance- below the fold

The design below the fold follows the same principles as up the fold. The page is based on the 960 grid system. The page is divided into three equal parts in a transitional symmetry in both the vertical and horizontal planes. White spaces are used to emphasis the images in the top band of the page as if to give a three dimension appearance. Also the positioning of images and the “see details buttons are located on the same gridline in the respective columns to create a rhythm and a sense of continuity. White space is also used cleverly to separate the columns and to define each section. The typography is consistent across the page. Different font sizes , colour and positioning is used to create the visual hierarchy. The position of the images relative to the heading provides a leading line from the heading to the image and then to the see detail button. It also creates ambiance in the design allowing a separation of the different aspects of emphasis in the design

All the text and images are links taking you to the same page for each category . The call to action button lights up with a yellow border on hover to give further interaction and user experience. The site is designed well and the repetition of the design modules introduces a rhythm which allows ease of application and user satisfaction. There is an incredible achievement of a visual balance between the text and images. Through the application of transitional symmetry, image and text placement . A common theme is the clever use of white spaces to give emphasises to images and the text allowing a clear distinction in layout for emphasising the respective goals of the website. The extent of repetition allows the design to have an internal consistency that makes it easier for the customers to understand. The level of repetition introduces a sense of order making it easier to attract attention and to prompt customers to investigate further. There is a lot of repetition in the style, placement of text and white spaces and elements allowing the design to achieve its goal effectively to emphasis the important elements in the design and to engender consistency, adding to the users experience. The site is awash with subtle design interactivity to draw the eye to the call to action buttons . The images in the second half of the page are all interactive . On hovering , a message similar to the original title on the image springs up to give more information and invite you to click. (see image below)

The page is divided into sections using colour bands and white spaces to allow greater focus and user experience. The colours are primary colours and repeated in the same order to increase familiarity and consistency The golden ratio was used to determine the width of the Main Content and Sidebar columns. And these proportions are emphasised by different colour band and whitespaces. It is also applied to the width of the elements in relation to their height and vice-versa. Creates an aesthetically pleasing layout.

Further down the page, the trade mark design principles of dividing the page using colour in a transitional symmetry is realised along with the repetition of images , text and whitespaces for the effect of emphasis and consistency. All the elements are links, however there is a line to draw the eye to the see details button. This button lights up with a yellow border on hovering and this creates curiosity to click. The layout, particularly the call to action buttons are placed asymmetrically to suggest flow along a wave moving from left to right, being directed by the directional arrows and also the different elevation of the CTA buttons. There is a strong correlation between the image and the call to action button. The aim is to get the customer to the more complete page where more details can be described on the individual products. The text in between the image and the call to action button is deliberately small and almost insignificant, although a different font colour is selected to highlight the information on price. There is a mirror symmetry in the layout of the images and the call to action buttons to increase familiarity, consistency and usability. The layout presents the information in a simple but effective manner in chunks increasing focus, and ease of use and application.

Visual Hierarchy and User Experience

This web site design has managed to organise the items into different levels of relative importance creating a sense of visual hierarchy and direction to the elements of relative importance and priority on the page. Through basic design principles of balance, direction, rhythm, grid and scale, alignment, colour balance, brightness and contrast, type setting and content placement, the designer has managed to emphasis one element over another so that more important content looks more important. In the header for example, embolden text has been used to provide visual cues to show those related elements in the same level in the hierarchy. It is quite clear that gas, electricity and water; broadband TV and home phone; and mobiles are the most important followed by money insurance and about. The elements have been organised in such a manner as to create a sense of order and centres of interest on the page. The designer has managed to communicate additional meaning through convention and repetition, highlighting actions to direct visitors, and establish patterns of movement and flow.

This websites has a lot of information to communicate. At a first glance, through clever layout, clear paths to completing tasks, and visual cues, you will be able to determine very quickly whether what you are looking for is on the page, locate it if it is, and call to action if that is what you want. The visual hierarchies created on the page enables the page to be scanned quickly and the information disseminated and made easier to understand. The first point of reference is to the way the whole page was designed. There are three principal section the header, the body the footer. These are clearly marked by complementary shades of blue and white. The banner is light blue, the body white and the footer- dark blue. The body is long and has most of the information the customer would want. To make the site engaging the information is arranged in chunks by dividing the content at regular vertical intervals by using h2 text centred along a horizontal blue line. This approach creates a consistency on the page design, a sort of transitional symmetry to aid flow, rhythm and to give definition to separate components of the page. The most important information of the website is organised above the fold. Users can connect to all the pages of importance without the need to scroll further. Information is arranged in an orderly manner such that most of the user interaction is encountered earlier on. Clearly the least important information about other links and information already addressed higher up sits in the footer. The typography also adds to the visual hierarchy. The text immediately below the heading is the main message and goal of the website and this is clearly labelled in large font Headings Helvetica, centred with a translucent background to give it dominance/prominence on the page. The use of font in this manner to create emphasis or focus is repeated, although not quite in this manner, at various vertical intervals on the page. These centred fonts provide announcements and messages and therefore do not show up as links. Contrast is used throughout to shows relative importance. An h1 heading is bigger than an h2 heading is bigger than an h3 heading. Bigger grabs more attention first and so comes across as more important. The colour of the text also creates additional hierarchy. Blue is the dominant colour of text used up the fold, however on hovering this changes to white to add to the user experience and interactivity. The text colour is changed to white and padded with background colour of blue, green and red respectively, given along with a white directional arrow to match the colour of text and to indicate the call to action button which lights up with a yellow border on hovering. The changing font colour between blue and white with different brightness and contrast is repeated throughout the page.

• Table 1

  

• Table 2

  

• Table 3

  

• Table 4

  

Table 2 shows that a different font colour weight is used to introduce some variety but keeping the same theme of the page. Black font was used for the whole page so that the consistency theme is maintained. The golden ratio has been applied to determine the proportions of the content within the layout so as to produce aesthetic pleasing designs.. One or more Gestalt principles of perception in the arrangements of visual objects/ elements has been applied to create more harmonious designs. Things that are similar are perceived to be more related than things that are dissimilar. In table 2 the arrangement of the image text is repeated laterally to introduce similarity of elements and to create the perception of an integrated web page with related segments. Through repetition of colour, size, orientation, texture, font, shape, the elements appear more related. There is also the principal of proximity at play. Things that are close to one another are perceived to be more related than things that are spaced further apart. In table 1 the varying text sizes and colour is used to create the relationship between the elements and the visual hierarchy and flow. In table 2, the relative nearness of the text and the bordering image creates the impression that the text and image are related at the same time using the whitespaces to emphasise the difference of the subject matter in the respective columns.

The images up the fold have no hierarchy, but are clear and represent the subject matter fully. The images and text layout makes the page easily scan able. The information on the page can be easily discerned enabling customers to reach decision fairly quickly and to decide where to go from there. In the design all the text, and images in each column are links going to the same page making it easier for the customer to reach the desired page. This approach in design promotes the flexibility and objectivity in choice and less hustle for the user. The visual hierarchies on the web page creates centres of interest. These are emphasised by different colour of font, font size and background colour. The call to action fulfils the goal of enticing visitors to explore further by guiding them to visit connecting pages where more relevant and specific information on the service can be found. There is parity in the hierarchy of design in respect of the images up the fold. These images although different are roughly of the same dimensions and are also placed in exactly the same place/position within the column on the same background
In conclusion, this web page creates a visual hierarchy to express meaning by controlling the visual weight of the elements, using

• Size. Larger elements carry more weight and are perceived to be more important
• Color. Use of primary colours to highlight font and to call to action
• Density. Packing more elements into a given space, gives more weight to that space and providing the perception that the elements are related
• Whitespace. Used to give clarity and definition to elements

Images, text, patterns and other elements are repeated both vertically and laterally to give meaning and consistency across the page. Repetition instantly communicates that elements are at the same level in the hierarchy as illustrated in table 1, 2 and 3 Alignment creates order. It allows the user to quickly connect elements across the page and help define the start and end points. Elements are aligned both vertically and horizontally at specific placements on the grid. In table 3 there is break from the perfect alignment of the CTA elements, and this has been deliberately done to create an asymmetrical design, to effect a sine wave motion. A single element that breaks the established alignment calls attention to itself and it’s importance. Finally, the principle of proximity is applied throughout the page. Proximity groups elements within a hierarchy and creates new sub hierarchies. In the home page, there are three offers for different products or services. Each has an image, a heading, a descriptive paragraph, and a link to more information. The specific design elements would be on a different hierarchical level, but each offer by containing the same 4 elements connects the offers as being at the same hierarchical level. The information in this web site has been organised deliberately to prioritise various elements to give meaning to users and to communicate its message effortlessly through aesthetic pleasing designs and interactivity using known design principles and theories.