: How to choose a grid, for a complex mixed content web page Planning a web page design in wireframes is super easy, but the next step is to choose a grid and build the page in Photoshop.

@Si6392903

I would expound on one of the previous answers in basing your design on Bootstrap templates - if you're time and budget conscious, you'll first select a technology (HTML/Wordpress/Drupal, etc) then a preexisting template for that technology and only afterwards work on branding the template instead of starting with creative and then looking for ways to execute it.

Vote Up Vote Down

@Dunderdale640

I would recommend you check out the GuideGuide plugin for Photoshop. It can create grids on the fly at your preferred amount with gutters and rows and the whole "nine yards".

With something like Bootstrap, I always tell designers to not focus on how many grids there are. Even the width is relative. It can easily be customized with LESS variables (defining the amount of columns, gutter widths, and widths of the container at varying breakpoints). Certainly it wouldn't hurt to start with the defaults. In that case I'd recommend these Bootstrap grid templates.

To correct the previous poster, Bootstrap is not 960. It's 1170px (large) and then breakpoints at 970(medium), 750(small) and then flexible under that using responsive design.

Vote Up Vote Down

@Miguel516

I would suggest that your next step is not to move into Photoshop but instead start designing straight in your browser.

There are many grid based CSS frameworks you can use for this. A few popular options are Foundation, Bootstrap and Skeleton. Alternatively you can always create your own.

Foundation, Bootstrap and Skeleton all use variations on a 12 column grid with widths around the 960px to 1170px range.

Take a look at the documentation at:
foundation.zurb.com/grid.html getbootstrap.com/css/#grid www.getskeleton.com/#grid
You mentioned that you would like to feature a varied collection of content types. Until you actually use some of the content in a realistic setting you may not know how it is best displayed and will need to change the grid structure to test out various layouts.

Creating your grids directly in code allows you to make quick changes based on the content.

Vote Up Vote Down

@Eichhorn212

The general rule for my work is to start with a standardised grid (e.g. 960gs) and split them into meaningful column counts, usually either 12 or 24. By having a fixed grid to begin with, it allows for a standard view, but knowing your column count allows for you to use percentage values for your widths, when you begin to write the markup, for ease of adaption, for fluid reactive and responsive layouts.

Vote Up Vote Down