Firstly you need to understand what a grid is, how to use them, why to use them and what benefit they can provide to your design. As you read more about grids, you will no doubt realise my opinion on them, but if you do not have time to read it all, just skip to the conclusion.
Grids! Where to start? They are one of the most important parts of any design whether it be web/graphic design, interior design or architectural design. Yes architectural design, it has been know that may architects use ratios and grids to design their high rise buildings. Using the golden ratio is common practice, but that is another story on its own. If you think about grids, you may not have actually noticed but grids are used everywhere, everyday, in the web and in real life and this web page you are reading is currently using a grid.
It is well known that a grid-based layout is a lot more aesthetically pleasing and balanced opposed to those layouts that are not based around a grid. You do not necessarily need to implement a grid to create a great design, but it is a lot more difficult to achieve and the design often ends in some loose grid structure being used.
I personally believe that grids are as essential as colour, typography, content and images on a website. This is because they provide a clear logical framework to base a design around, and more importantly is helps to streamline the design process by making it easier to align and measure all elements of a web design.
In any form of design job, streamlining your job processes is one of the most important aspects, as it helps to save time and money. So if grids can streamline a design process, shouldn't we all be using them? The answer is yes and no, but it ends with it being personal preference!
(Chris Brauckmuller, Grid-Based Web Design, Simplified 2010)
(Mark Boulton, Five simple steps to designing grid systems - Part 1 2005)
We now understand a grid is a set of vertical and horizontal guidelines that provides a framework for a designer. Grids also save time in the design process, so why else should they be used? Grids provide a sense of structure to your website and help to improve the usability for your visitors. I feel that there are three main aspects that visitors expect from a website:
All of the above can be traced back to grids in one way or another! Now I have already spoken a lot about grids, but we have not actually seen a grid yet. No doubt you are able to picture a grid, a set of horizontal and vertical lines, but it could be seen that to create a grid is a skill all on its own. But alas these days to speed up with the whole design process, there are website out there that will do this for us.
This is a an example of a grid, amazing right. You can see it is 822px wide, and is called a 10 column grid. See if you can work out why! Each individual module is 66px and the gutters are 18px.
"Sometimes called a block grid or single column grid, the manuscript grid is the simplest grid structure. It's mainly a large rectangular area taking up most of the space inside a format."
"When people think of grids, especially online, they likely think of column grids. As you would expect column grids are made up by placing multiple columns within the format."
"Modular grids are like column grids with the addition of horizontal divisions marked by rows. The columns and rows and the gutters between each create a matrix of cells or modules."
"Hierarchical grids are commonly found on the web. They're based more on an intuitive placement of elements, which still conforms to the needs of the information."
There are so many different genre's of websites living in the web, so I have decided I will focus on just one genre of website to further my discussion on grids! My chosen genre will be personal portfolio websites, every designer whether that be web, product or graphic should have their own personal website. It should showcase what they can do, it could almost been seen as a online CV. It should contain past work, so future clients and employers can see your abilities and skills. Some people also see a portfolio website as a platform to show off new skills and really stand out from the crowd, by trying new web techniques, a place where the boundaries can be pushed and out of the box thinking is essential to attract attention.
I will now be discussing several different topics about grids being used in portfolio websites and these will consist of 'The disposition of design elements', 'the visual hierarchy and user guidance' and 'The inherent effect on image and branding'.
Upon looking further into the design of most portfolio websites, a grid system of some sort can clearly be seen. There seems to be a majority of portfolio websites that are implementing a modular and grid system. For example:
It is clear to see that on iamyuna a modular system has been deployed. Due to the arrangement of the shapes in the centre of the page.
Another example of a grid system is use in a website is biancaelmer, you can clearly see that there is a grid is place here due to the systematic approach of the 4 columns. The grid used here is a column grid, you cannot help but think that it is a very good way to display information and graphics and makes for a logical design.
For a portfolio website it is fair to say that content could be understood to be the graphics, information and any other important and relevant information. But you would think for a portfolio website the content is going to be past work completed by the designer, and the best way to show this is by images. Therefore when a portfolio website is being designed, a grid based system that is based around images is the best route to follow. The reason for this is because images can be very powerful, colourful and will always distract the visitor, they need to be strategically placed and in a format that is easy for the user to experience. It is all about the user experience when visiting a portfolio website, the better the experience the more memorable the visit, so achieve this a grid should be used. It will provide the structure required for a clean, smooth website and also maintain the consistency throughout the site.
When designing a portfolio website, it is common that not all the images you want to use are the same size and layout, some are portrait and others can be landscape. This could pose some issues for a designer, but by using a grid a simple and clear choice can be made. For example the width's of images are commonly made the same due to a 960width recommendation on web pages, but the heights of the images and text can be a real nightmare. For example below are 2 sets of images from the same website, but as you can clearly see they are different heights.
There is a simple solution to this and it is to implement a column grid system, the most common type is a 12 column grid, as it gives you 960px wide.
As you can see below the two images within the web page, it does not look odd at all due to the other images having different heights. If anything it makes the webpage more interactive and makes for a clean and fresh design.
Content which is based around a modular grid system is displayed in a similar way, but the real difference is the fact that the images, and content are normally always the same height and width. There are exceptions when larger images are shown on a modular grid system, as the height and width will be different, but the image will always fall into the grid and therefore create a consistent design. For example, the two images below are on the home page for website using a modular grid:
And this is how they appear on the actual website:
A clear modular grid system can be seen in place here, but what happens if I click on an image? oh the image becomes bigger and text is added, but wait a minute this page also follows the modular grid as can be seen below. The larger image is still the width as the 3 images plus with gaps between the images.
Is this a coincidence? No this is the power of the grid, the ability to have a consistent design! There is always going to be a difference in designs for a website, due to the designer but when a grid is implemented in the design, the final result just feels right. The visual balance is always right, as there is not over bleeding of images, and everything is crisp and clean.
Answer: For a portfolio website, they are used to present content in a systematic approach, dependant on the size of the content. Either a modular or column grid is normally preferred, due to the way in which different graphics can be seperated. The user can then make a clear distinction between different graphics and move around the website with ease.
Usability: the quality of being able to provide good service.
Usability is defined as 'the quality of being able to provide good service'. So what does that means in terms of the web? How do we class good usability of a website? and what does it means to grids?
Well have a think, when you visit a website you want to be able to use the website don't you? Also when you are there you want to be able to navigate the website with ease? Plus you want content and information to be displayed in a way that is easy for you to understand? All of this is down to the usability of a website, and the design. Which in turn can relate back to the grid system implemented, without a grid the website has been designed by numbers and eye. So when you visit a
For example this website has implemented a modular grid, and it is excellent example of usable website.
Legibility: distinctness that makes perception easy.
Legibility is defined as the distinctness that makes perception easy, so basically how easy something is to make understand. A grid is a excellent way of making a website legible, due to the way the content is inputted into a grid it makes for easy reading and clear presentation. The key ingredients in a legible design, again the word consistency appears again. The more consistent your whole site the more legible it will appear to the user, but legibility can also be contributed to typography and actual branding. A good example of a website which implements a grid and is highly legible is:
Legibility is defined as the distinctness that makes perception easy, so basically how easy something is to make understand. A grid is a excellent way of making a website legible, due to the way the content is inputted into a grid it makes for easy reading and clear presentation. The key ingredients in a legible design, again the word consistency appears again. The more consistent your whole site the more legible it will appear to the user, but legibility can also be contributed to typography and actual branding. A good example of a website which implements a grid and is highly legible is:
Accessibility: the quality of being at hand when needed.
This is a very simple, without a grid the content could become lost and hidden due to no real structure being implemented. By adopting a grid, whether it be a column, modular, manuscript or hierarchical it is the best way to ensure your content is easy accessible. Due to you know where the content should be positioned, and also understanding how the content should be displayed. I would personally say that using a column or modular grid system is the best for accessibility, opting for a hierarchical would potentially be used more for a radical design, where the design is the overall outcome, not necessarily the content. By having a grid based system, it helps to make sure that all the call to action buttons, and navigational buttons are in the correct place, and are always ready to be used.
An example of a highly accessible website that uses a grid system is:
The grid used here is a modular grid, and the outcome is a wonderful very graphic website. The graphics are the main content on the homepage with very little worded content. Even though there is little wording, this website is still highly accessible as everything is where it should be instantly to the user. The navigation bar at the top does not move, so the user has all the call to action buttons to hand.
Now I have spoke a lot about grids, and how they help to make a truly awesome website, but I have not really discussed how they help to enhance a brand or identity. I know I keep going on about consistency of a website (consistency this, consistency that), but trust me (well if you want to) it is so important in any website to have it consistent. This is not only achieved by grids, but also by typography, content, style and the actual design of the website. You will find that a large amount of portfolio websites will implement a lot of branding, as the designer is trying to build a brand for themselves. Branding is not just the colours, and logo it is about the experience you receive the feelings you feel for something and the emotions it portrays. Some designers feel that they are able to design freely without a grid and build a very powerful website, this maybe the case but will every page look the same, feel the same and act the same. I doubt it!
But by implementing a grid system, you are taking away the worry of how your brand will look, you know each page will remain the same, it will do what you want it to, visitors will become familiar with the website and want to return. A grid will bring together all the uncertainty of where to place things and make it easy for you. Some good examples of websites with powerful branding and identities, that use grids are:
This is my favourite grid based website, due to the how the branding has bee successfully achieved, along with the overall design and layout. It is a modern design, but has a hint of art deco as well, the contrasting colours work very well. Of course the whole site looks great due to the grid used, as it helps to break down the design into manageable sections, the accessibility is good and it is very user friendly.
This website uses a modular grid, and the branding is so powerful. The designer has used 4 colour, red, black, grey and blue as well as using three simple shapes to distinguish between his work a square, circle. If this website had not used a grid I feel that the designer would have had a hard time trying to get all the objects to line up in such away to give this striking effect. It is a clear, concise, fresh and very modern design and really does look amazing.
I cannot help but think:
"Why not design with a grid based structure to begin with?"
Is it because:
So do not just take it from me when I say I love grids, well Mark doesn't say that, but he does say they can facilitate creativity! As a designer isn't that what we strive for! To be creative, push the boundaries, be different. A grid enables us to do this and so much more. I think if you do not utlise a grid you are missing out, I like using grids because I like to have properly structured websites that people can use and enjoy. I have proven that using a grid can save design time, which in the long run increases your workload which means you get paid more because you are doing more work. Well that is the selfish way to look at it, if you were to look at from a outsiders point of view (i.e a visitor to your website) they would experience a website built in a very professional way, demonstration your desire to work to a high standard. Also the website will be consistent (honest the last time I will say that word) throughout, it will be well thought out, and structured in the best way, people will not moan or groan about it breaking. The design in turn will help the make it useable, accessible and more importantly eligible to your visitor. Now your branding, identity and content is down to you so do not ruin it!
