Monday, 14 December 2015

Studio Brief 4 - Chosen Grid

As my website is aesthetically modern, I have kept the information on the site to a minimal. Therefore, the grid doesn't need to be complex or fancy. I wanted a grid that could be easily sectioned and easily transferable through desktop, mobile and Ipad. The grid layout I have decided to use is a 3x3 grid system.





The 3x3 grid will be split into sections that control parts of the website. As you can see from the image above, you can see how the site is split into sections. The logo and navigation sections would be the same size as the bottom two sections, this would make the sections consistent and flexible as the sections can be swapped and changed without adapting the height or any of the attributes. The main body would be larger to allow for the main visuals and for the concept to be center stage. 

In this image you can see how the desktop grid sections would works within the mobile format. The sections are simply moved and staked on top of each other, this will make the process consistent through mobile and desktop and will also save on time and money. In terms of how this would relate to web developers is very straight forward. The sections of the website would be coded into individual divs. These divs would allow the developer to simply stack the divs on top of each other by only using simple CSS.  This grid also can be responsive for all devices in portrait and landscape due to how simple the sections can be stacked and repositioned on top of each other.
How the grid looks within the desktop site.

No comments:

Post a Comment