Journalism Experiment #4: The grid is your friend…use it

If you’re a journalist thinking about building your own site from the ground up, good for you. Here’s a word of advice, though. If you’re one of those coding amateurs out there like me, save yourself some trouble and use a grid. For starters, a grid will give you that “fit and finish” you see in all those good-looking sites not built by journalists. A grid also makes it easy to transfer your design from Photoshop to the Web, which is the basic process for all good Web design (thanks Richard Koci Hernandez for that secret).

For one of my classes at UC Berkeley’s Graduate School of Journalism, I had to use the grid to design a homepage for a site. I chose to revamp the site I helped design for our school’s Africa reporting class. A little ambitious for a beginner, but I thought I’d give it a try because, hey, I’m down for trying new things. Or, at least, that’s what I initially thought.

I wanted to take this (built using a WordPress template):

And turn it into something like this (designed from scratch):

This is what I ended up with:

As you can see, it’s not an exact replica. I had the most difficulty with getting everything to line up on the grid and work (it’s an easy concept but takes a lot of thought and care). On the other hand, I’ll admit, I had the most fun with creating the header, which is a compilation of several background images and CSS (thanks to my other instructor Josh Williams).

If I had more time, I would have liked to build out this map page prototype for the site as well:

Maybe another time, I guess.

Leave a Reply

Your email address will not be published. Required fields are marked *