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.
Journalism Experiment #2
This is my second experiment testing out the skills I’ve been picking up along my multimedia journey. For this experiment, I’m turning my attention to graphic design. Something I’ve learned since entering the world of multimedia journalism is that so much we do for the Web depends on design: from type of font to colors to the way they are arranged.
So I decided it was about that time to work on my design chops. Below is the product of trying out a tutorial I found on 1stwebdesigner.com. The tutorial teaches you how to use Photoshop to create a typographic wallpaper-looking image. Just consider it a Wordle on Photoshop steroids. It incorporates so many steps, I’m not even going to try to repeat them here. All I’m going to say is that I had fun following the directions. And while I didn’t follow each step to the T, I think my design came out pretty cool.
