In the early stages of design for this site I was considering different grids for the layout. I had targeted the desired width and was playing around with different numbers of columns and gutters and their respective widths. With each new iteration came a new sketch and a new set of calculations; but after the third one I began to wonder if there was a better method.
My problem was the time consuming process of sketching five, six, seven or more columns with gutters. Then when I was finished they weren’t necessarily to scale, so the boxes I sketched over the columns to represent page elements were not necessarily the best representation of the different proportions.
For example, if I increased the width of the section that was going to contain the main text of the page by one column, the perceived increase on paper might be significantly different from the actual increase on screen.
I was using graph paper for sketching so I could have developed a scale where one square was equal to X amount of pixels, but there just had to be a better way. How could I digitally represent a grid that was flexible enough to quickly change the pixel widths and the number of columns? How about a spreadsheet!
The Spreadsheet
I use Microsoft Excel, but I’m sure the same techniques can be applied to Calc (Open Office) (UPDATE: It takes some extra work though) or Google Spreadsheets.
I took a screen shot of one my grids as an example of how a spreadsheet can be used to setup a grid-based layout (Figure 1). The proportions are correct and allow for an accurate visual representation of the website layout.
While the main motivation for setting up my grid in a spreadsheet was to achieve proper proportions, I soon found the greatest advantage was the ease of calculating total pixel values during development. If you want to skip the part about setting up the spreadsheet and see the payoff go ahead and skip to the end.
Figure 1: An initial look at how grids can be brainstormed with a spreadsheet.
The Setup
I’m not sure about the common level of spreadsheet knowledge, so I thought I would put together a quick step-by-step tutorial just in case people aren’t sure how to create something similar to Figure 1. This tutorial uses Windows keyboard buttons, so use the equivalents for other operating systems.
To begin, enter some column and gutter values in cells along a single row (Figure 2). For this example I just used four columns and three gutters, the values being 150 and 30, respectively.
Next select all of the columns; to do this you want to move your cursor over the column headers-it should change to a black arrow pointing down-and click once. If this is done properly the entire column should be highlighted. Now hold down the Ctrl button and select the other columns in the same manner, the result should be similar to Figure 3.
Now we want to change the width of the selected columns; move your cursor just to the right of one of the selected columns until it changes to a vertical black bar with arrows on either side. Click and drag the columns to the correct width (150 in my case, Figure 4). The results should be similar to Figure 5.
Next we do the same thing to the gutters; only this time we are reducing the width instead of widening it (see Figures 6 & 7).
At this point, we have the correct proportions for the grid. Whatever you do after this point is your personal preference, but I have included a few more steps for coloring the columns and zooming out to get a better view.
A Few More Steps
First, we will color the columns to give them a bit more prominence. Select an equal area in each column by holding down the Ctrl button and clicking and dragging the cursor over the desired areas (Figure 8). Then click on the Fill Color button to “paint” these columns the color of your preference (Figure 9). The results should be similar to Figure 10.
Finally it’s helpful to zoom out a bit as the spreadsheet at 100% isn’t very conducive to viewing a full layout. This is an easy step, you just change the Zoom to whatever value you prefer, I use fifty-percent (Figure 11). The results should be similar to Figure 12.
Now you can add more color and more columns and then start color-coding layout elements similar to Figure 1.
The Best Part
Once you have your final grid in place, the handiest part of the spreadsheet grid is how quickly total pixel values are calculated. To find the width of any element, you just select the columns and gutters that it spans and the sum is automatically calculated in the lower right (see Figure 13). This quick little trick has saved me many button-pushes on a calculator!
Fascinating.
I never would have thought to work out a site in Excel.
Yeah, I was surprised too. At first I kept feeling like I wasn’t supposed to be doing it!
I recently got a client that delivered a content draft in excel. At first it looked weird, but it actually was a good way - in a basic manner - get an overview. After reading this article and the addition of counting pixels I expect it to be a complementary tool in my process.
I, as many of us do, have a tendency to go too far in designing prior to get a good grip over content and grid disposition. But clients differ and I wouldn’t put one method over the other. Thanks for an interesting article!
/Jan
Jan, no problem, glad you enjoyed it. As a side note, I really like the background on your website.
Hi
I am just playing with your method… pretty interesting… definitely time saving. Nice tutorial :)
Thanks for the tip! :)
No problem!
Thanks David.
And I recently used the inspiration I got from your post-excerpts in Georgia for a new (swedish) website: www.bekvam.se :-)
/Jan
Jan, that looks really good, I like it. I edited your comment also, WP had included the period as part of the website URL.
[…] Using Spreadsheets to Brainstorm Grid Layouts shows how you can easily use spreadsheets (such as MS Excel or Open Office) to design different grid layouts. […]
[…] Parece estranho utilizar o Excel para definir o layout de um site. Por incrivel que parece o Excel pode ser usado como uma ótima ferramenta para planejamento de um novo site. Manipulando os espaços de suas colunas e linhas você poderá calcular com facilidade cada pixel do novo site. Veja este interessante artigo clicando aqui […]
[…] Parece estranho utilizar o Excel para definir o layout de um site. Por incrivel que parece o Excel pode ser usado como uma ótima ferramenta para planejamento de um novo site. Manipulando os espaços de suas colunas e linhas você poderá calcular com facilidade cada pixel do novo site. Veja este interessante artigo clicando aqui […]
[…] Webseite besuchen… […]
Works great in Excel, but not so easy to do in Calc, as the column width isn’t measured in pixels (only millimetres, centimetres, inches, picas and points) - I’d go as far as to say it’s actually pointless using Calc - defeats the objective as you have to calculate measurements.
Thanks, Curtis. I agree, that would defeat the purpose of setting it up in a spreadsheet. I’ll update the article accordingly.
Just noticed that my comment sounding quite negative. I really should have thanked you for the suggestion. It’s saved me countless hours in preparing layouts.
Kudos.
Really interesting solution!
I’ve even improved it a bit. If you want to calculate also a height, just set the height of all rows to some nice value - e.g. 10px and then insert the number 10 into all rows of the first column… and you can calculate :)
Smart idea.
With a little math you can do it also in Calc. You have to know your screen resolution (tipically 92px/in)and set the unit to pt in Calc. Now choose a cell, say A1 and insert ‘=72/92′ (72pt/in div your screen res.). Now for a column width of i.e. 160px insert ‘=160*$A$1′ to read the width in pt! When finished resizing the column put 1 in A1 and go summing in px.
(To get my screen resolution a resized a column to 72 pt and then calculated the actual pixel with a screen capture magnification tool.)
You can also use Gnumeric, a free spreadsheet, that work just like Excel for this job.
Wow, thanks Filippo. I’ll add that to the post.
@Filippo
An easier way to do it in Calc: just use points as if they were pixels! The correct ratios will be maintained, and the “built-in width calculator” will function without any tricky formulae. You’ll probably be viewing the grid at 50% zoom as David pointed out.
A few tips for Calc users:
1 set the measurement to points (as Filippo suggested)
Tools -> Options…
OpenOffice.org Calc -> General
2 to set the column widths:
select the columns then right click
(in the column bar NOT on the grid)
choose “Column Width…”
and set the width as if it where in pixels
Great idea David!
[…] Using Spreadsheets to Brainstorm Grid Layouts Have you tried to create design layouts with MS Excel? It is possible. “Designing with a grid is becoming more and more common as a standard approach to designing a website. When designing this site I discovered a tool to aid in pixel calculation and proper proportions that proved highly valuable.” […]
[…] Using Spreadsheets to Brainstorm Grid LayoutsHaben Sie schon versucht, eine Seite in MS Excel zu entwerfen? Das geht. Ergebnisse wissen zu beeindrucken. […]
[…] Using Spreadsheets to Brainstorm Grid Layouts Have you tried to create design layouts with MS Excel? It is possible. “Designing with a grid is becoming more and more common as a standard approach to designing a website. When designing this site I discovered a tool to aid in pixel calculation and proper proportions that proved highly valuable.” […]
[…] Using Spreadsheets to Brainstorm Grid Layouts Have you tried to create design layouts with MS Excel? It is possible. “Designing with a grid is becoming more and more common as a standard approach to designing a website. When designing this site I discovered a tool to aid in pixel calculation and proper proportions that proved highly valuable.” […]
Hello,
thanks for this very intersting post. however I have a question : to get what you have on figure 13 : how do you do to insert columns into your pre-defined layout ?
Greg,
Hover your mouse over the column headers until the cursor transforms to a black arrow pointing down. Once that happens, right-click and select Insert; it will insert a new column.
Does that answer your question?
Hi, David,
I am in the process of a redesign as well (though that’s not saying much), and was just today wondering if I couldn’t prototype in Excel. I use it daily, very heavily, so it would be a natural extension.
Also, though you’re just working on dimensions and not necessarily color schemes, dropping into Tools > Options > Colors will let you replace the awful default palette with something more to your liking. I do a fair amount of low-level UI stuff (using Excel as a crude platform of sorts), and I’ve found this invaluable.
Cheers,
Daniel
Nice tip, Daniel, I had never known that option existed. Finally better colors!
I came across it after having served in front of several templates I use heavily on a daily basis which made use only of the default palette. The default is utterly horrible. If I can do my small part to help others make use of better colors, it’s a good day.
;)
Daniel
[…] grids mit Excel, Calc, G spreadsheets etc. Eine präzise und durchaus kreative Lösug für die Planung eines grid. Durch die umfangreichen Möglichkeiten und Formeln in dem jeweiligen Kalkulationstool, können Breiten und Abstände genau errechnet werden. […]
[…] Using Spreadsheets to Brainstorm Grid Layouts Haben Sie schon versucht, eine Seite in MS Excel zu entwerfen? Das geht. Ergebnisse wissen zu beeindrucken. […]
[…] tanışmadan önce, veritabanı tasarımını excel ile yaptığım zamanlar olmuştu. Fakat bu sayfada gördüğüm kaynak işi oldukça ilerletmiş ve excel kullanarak web tasarımı yapmayı […]
[…] - Astuce : utiliser un tableur pour faire votre grille. […]
When dragging to set your widths I only see inches in the popup and not pixels. I’m using Excel 2004 for Mac. Do you know of a way to show pixels.