2

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. This is a mine field to me.

What is your methodology for choosing a grid and deciding how to build up your page?

I am particularly interested in pages like news websites that have a lot of different types of information on them.

I find this kind of layout particularly difficult, since it becomes really easy to make the page look cluttered and noisy.

2

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.

1

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:

http://foundation.zurb.com/grid.html

http://getbootstrap.com/css/#grid

http://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.

1

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.