Website Redesign 07.08.08
We have recently adopted so called “grid system” for purposes of streamlining design and web development. Designer will use this grid system as a measurement of elements on the site, without any problems occurring in development stage.
This grid system ensures correct alignment, gaps, and so on.
Designer is not restricted when it comes to creativity, rounded corners and so on can be also applied as well as grid without gaps, if needed!
Lets have a look at our example of redesign:
www.cpupages.co.uk is an outdated version of our e-commerce site. It has been heavily modified and now needing fresh redesign.
Client would like the site to fit into 1024×768 screen which gives us around 960 working width. Based on this fact our grid system will be 960px wide. There will be 10px gaps in between each grid unit which is 150pixels wide.
We created PSD for you as example (attached).
Now, we know there will be definitely a long menu on the left hand side so lets add it. Also there will ne a nice header, but to save space we will not be adding full length 960px banner, instead we can use grid unit guides to create block elements like H1 title and search box.
Well i think now you are getting the idea how grid works in design, but why do we use it? Because in XHTML and CSS we only need small piece of code to define sizes of blocks, whole code becomes much easier to manage but also to update and later on updating certain elements is matter of minutes!
You as a designer should think of functionality and navigation as well as aesthetic design. Make sure that website layout is comfortable for users, menu is on prominent places, some informative banners are also included (standard sizes IMO)
