Studio Brief 4 - Grids Research

When choosing a grid system for your website there are two avenues to go down. One is the all ready made framework grids. These grid systems allow you to quickly chuck together a number of different elements and modules in a design. These layout will already be designed for responsive platforms and browsers making it easier to mock up your design and quickly seeing how it looks within the number of browsers. You can get all different kinds of grid layouts with the all ready made frame work. The ready made frame work grids are also used in it's majority across a number of popular sites like Sony music and Drupal.

This is Sony music website page for desktop.

This is the grid showing the pre made 16 column grid system. You can understand why they have gone for a pre made grid and that because the way the site is designed and structured is very generic and similar to a lot of other sites. In theory it wouldn't be logical to waste money to come up with a fresh grid when your site is very generic and is a site made up of mainly text, so no reason to break the norm and produce a complicated grid system. In the end the accessibility for a pre made grid would be easier for the user experience and it's also cheaper and saves time. 

Another form of grid system route you can go down is to simply create your own grid. Creating your own grid allow for full flexibility that can be solely designed around your site, giving you full control over all aspects. Creating your own grid would be most beneficial if you had a site that had a unique layout or style in which was different from a lot of other sites out there. There are a number of sites out there with will help with a designer to build there own flexible grid.

• Gridpak
• CSS Wizardry Fluid Grids
• Gridset

Only Grid System

Only provided us with some generic pre made frame work grids to use for our desktop, tablet and mobile sites. It's interesting to see how the columns in the grids become less and less when you get down to the mobile version. This is because the grid system for the tablet and mobile version won't be able to hold as much information as the desktop site. If you used the 12 column grid for the tablet site then every aspect on the page would be to small to read and see, so you have to scale it down in an equal measure to get the right proportions. Once you take the site from tablet to mobile then you simply do the same thing. Half the number of grids and scale down the proportions of the site to get even measurements. This just allows for the user to see the information on the screen effectively without any trouble.

Lastly, I noticed that for the mobile grid system the size of the Photoshop file is smaller then your average phone size. This is purely beneficial for the design process. If you design for the smallest screen possible then it's always easier to design upwards for bigger screens then to descale your site. Once you've arranged the elements on the site at the smallest screen then positioning the content becomes a lot quicker and saves time as you already know the positioning of most elements but if you have to go smaller then some elements might need to be rearranged due to the restricted size.