Welcome to keshiki v4.6, more of very subtle realignment of the previous look than a redesign. As one of the reasons for the redesign was to have a space to write, I actually needed to write something to put in said space, thus this short piece about the ‘new’ keshiki look and design grids came to be.
Briefly, a design grid is a strict structure for presenting visual information, be it text, graphs or imagery. Because design grids are very ordered and arranged in a regular pattern, it is said to be easier for us to digest the contents without being distracted by the layout.
You can see the ‘grid’ referred to in the title as the grey and blue background on this page. I know this makes it a bit hard to read, so I’ll try to stick to my promise of a whirlwind tour. Warning, it gets a teeny bit technical as we go on.
The Quick History
Sometime last year, I ran across Khoi Vinh’s article Grid Computing… and Design where he described the way he went about designing the new version of Subtraction. It was an interesting read, but I didn’t really think much further about it until I had a reason to show it to friend. Re-reading it inspired me to give this site a small makeover.
I chatted idly with Oliver–who had in a few minutes after work whipped me up the original version of the current layout–about Khoi’s article and the current design of keshiki. He graciously lent me a copy of Grid Systems for Designers by Josef Müller-Brockmann, an overview of designing with grids. Reading the book gave me not only motivation to realign the site, but a framework to work within.
The Grid
I won’t pretend to be able to explain the theory behind grids, and I said I’d try to keep this short, so:
Keshiki is a simple website thus leading to a very simple grid, but it was an interesting exercise for me to try to apply to the elements on the site. The site is mostly about the photos, and most of the photos I post are 800 pixels wide, plus a 1 pixel border on each side. This gave me a page width of 802 pixels to build on. I experimented a bit and decided on dividing the page vertically into three columns, at around 270 pixels per column. After doing a bit of math and seeing how things looked I decided on 20 pixel gutters between the columns, giving me a 254 pixel column width (Go on, measure it… I’ll wait for you). Then I stole Khoi’s idea of using a background image to see how everything lined up–that’s what the background is. Using all three columns for the text made each line a bit long, so I went for using 2 grid columns for the text pages.
Next came the horizontal layout. Following the grid rules, the vertical relationships of everything on the page should relate to the distance between two lines of text, referred to as ‘leading’ or ‘line-height’. Given that I’m a big fan of Oliver’s ideas on text sizing, the font-size here is at 100%, ie. your browser’s default text size, usually 16px. Starting with the font Helvetica (and proud of it!) a line height of 1.5 seemed quite readable to my eye. 1.5 × 16 pixels gives us a line height of 24 pixels (the horizontal lines on the background). Then it’s into the trenches of writing a stylesheet to ensure the text and headings all follow the march of the blue lines down the page. The logo/brand was adjusted slightly to better match the vertical flow, but the shape of the kanji characters makes it difficult to stick to the grid in a nice way.
One tricky and as yet unsolved problem is matching up images and photographs to the grid. In a strict grid, image heights are dictated by the line-height of the grid, 24 pixels for keshiki. So images should be a multiple of 24 pixels high (96, 144, 408 pixels etc.), but that is a bit tricky as I’m not about to crop my photographs just for the sake of the grid! And no, I haven’t really thought too hard about the widths of the photographs either.
Whew!
So ends the quick overview of the keshiki design grid, a bit too long to be called a whirlwind tour? Note also that I’m not a designer by trade, so I could have very easily have mis-interpreted or mis-applied the design grid concepts here.
Please feel free to share your thoughts and opinions, and I’ll continue to add more to the keshiki journal as time goes by…