New Layout!

It's true! I finally finished the new layout! Woohooooo!

This was a project several months in the making, ever since I clicked the original green template and was immediately hit with blogger's remorse. I am very happy with how the whole thing turned out, although I'm predicting getting sick of it very quickly. Some new features on the blog:
Rounded corners! --because I'm not square!
Prettier colors! --because they're prettier!
Wider posts! --because wider is better!
A brand new header! --because...I have a head?


I've also reorganized the columns and features (accessible on the left) and put them on a set schedule:
Happy Moanday (Mondays) -- my weekly wrap-up and rumination on what I will actually feed myself that week
Resopuhleese (Tuesdays and Thursdays) -- a different recipe, reviewed, tested, and shared
Cheap Eats (rotating, Tuesdays) -- recipes and shopping tips for the budget conscious, from the budget conscious
The Incompetent Chef (rotating, Tuesdays) -- liveblogging cooking! also maybe videos, if I get over the potential creepiness of it
A Brief History Of... (rotating, Wednesdays) -- my favorite foods, in historical perspective
The Spice of Life (rotating, Wednesdays) -- featuring the backgroud and uses of a different spice every week
Give Me Some Comfort (Food) (rotating, Wednesdays) -- foods that want to give you a hug
Mytheaters (rotating, Thursdays) -- food experiments!
Counter Intelligence (rotating, Thursdays) -- pretty and techie kitchen appliances and tools
Spotlight On (rotating, Fridays) -- featuring a different blog every week
Food for Talk (rotating, Fridays) -- interviews with my favorite bloggers and foodies
The Parent Trap (rotating, Saturdays) -- recipes from my parents' kitchen
The Restaurantour (rotating, Saturdays) -- the wonderful places where I don't have to cook
On Sundays, I'll also be featuring semi-regular columns from my smoothie-making boyfriend, his beer-making brother, and my once-caterer friend. Have something foodie-related to say? Want a regular column? Let me know! Other once in a while columns: Book Reviews--of cookbooks, Recipes Regurgitated--reviews of recipes, and Foodie Dreams, Kitchen Nightmares--my crash-and-burn attempts to make good food.

So how did a journalist with limited-to-no skill in web design* whip up this little baby? Let's take a look at the DVD commentary.

Sometime in February I started dreaming up a new design for the site, with a nice header, more room for the posts, and a clearer background to show off crisper photos. I first thought about going muted, greys and a simple design to set off the photos. I drew a couple mock-ups, but when I put it online, it was just so bleak and depressing. My one design idea mostly ruined, I decided to go back to the digital drawing board.

After reading several web design sites, I went with their suggestion of planning out exactly what I wanted for the blog, who the readers are (you! and other people!), and what kind of feeling or attitude I wanted to project. I knew I wanted something clean and simple, with bright and fresh colors. I wanted it to be easy enough to find recipes and different columns (this is something I'm still working on), and I wanted the blog to feel fun, whimsical, and personal. Some design sites suggested building "idea boards" full of pictures that capture the feeling or structure of what you want to create. I built my own idea board from blogs I admired or thought were beautiful, as well as different typography I liked (like the scrap of embroidered letters from a Colonial girl's piecework), possible backgrounds for the site (like the brown vintage wallpaper in the center), and different illustrations I liked (like the big blue bear). This did wonders to help focus my design, as well as inspire me to create something different.

One of the first things I settled on that helped anchor the rest of the design was the drawing I did of myself. I started doing cartoons of myself about a year ago, when I was stuck on a plane, waiting to go home to see Dave. I was bored, tired, and missing him (after a two-week vacation), and I started drawing cartoons of myself and him and what we would do once we saw each other (included: us driving home, Dave collapsing with sleep because it was 3 in the morning). I did all my drawings with a fine-point black Sharpie marker, my absolute favorite thing to draw with (I have an embarassingly vast collection). I liked them and Dave liked them, so I kept doing them. For our 2-year anniversary last year, I filled up a whole book for him, drawing little cartoons of my favorite memories of us, and since then, I've kept it up. When I wanted something cheery, cute, and personal for my header, a hand-drawn, hand-watercolored cartoon of myself seemed the logical answer.

Before even attempting to learn CSS, I designed the whole layout with a photo-editting program. Since I don't have the money or patience for Photoshop, I went with Gimp, a free program that's a pared-down version of Photoshop. I love it. It has all the aspects that are great about Photoshop--editting tools, layers, transparency--but it has such a clean and simple user interface (as well as an awesome online help guide) that even a design virgin like myself could navigate the whole thing with ease. I used it to craft my first layout, which used a corkboard-patterned background on top of pink-ringed boxes.

While I thought it was cute, I didn't like how pink the whole thing was and I thought the corkboard, while nice, wasn't really reflective of the kitchen-food-cooking part of the blog. I tweaked the design a little, swapping blue for pink, throwing in more white, and giving it a new background. Thanks to a little Googling, I found an image of vintage Formica, that plasticky stuff that covers most kitchen and bathroom counters. I loved the look of the delicate gold flecks and marblized design and also how it reflected, subtly at least, the kitchen-cooking feel of the blog. I also included some personal touches, like the hand-written dates (done in my own handwriting), and the cartoon foods.

The layout designed, I had to start the hardest part of this whole process: learning CSS and coding the whole thing. So, I know nothing about CSS (which stands for cascading style sheets). I don't really like computer programming in general, ever since I took that C++ class sophomore year of high school, by the end of which our teacher informed us the class wouldn't be offered again because C++ had been made obsolete. But, I like my blog, I didn't like the layout, and I didn't have enough money to pay for someone to code things myself. I started with the Rounders template from Blogger and, I'm proud to say, I adapted the whole thing myself, finding many helpful hints and tricks online. Some of these wonderful people, who I am more than happy to thank, include:

-Peter of Blogger Tips and Tricks: how to remove the little box around all my images, how to create a favicon (the little blue kettle in the URL box--generated using the Free FavIcon Generator)
-Vin of The Blog Doctor: expandable post summaries (the "Read More!")
-Alejandro Gervasio, Stefan Mischook, and Amanda Fazani: the Javascript to stretch my sidebar column to the same length of my post
-ids of The Blogger Guide: wider posts

There are, I'm sure, many other aricles I checked and double-checked and many other resources I relied upon, all of which I'm very grateful for. My brother, who actually does know how to design, was a big help in giving thumbs up and thumbs down (many more ups than downs), and Dave, of course, scanned my drawings, got me books on CSS, critiqued my work (many more downs than ups), and kept me motivated when the Delete button seemed a tantalizing option.

Thanks for visiting, and I hope you enjoy the new (and improved) Res-o-puh-leese!

*Other than my erstwhile fansite for the awesome movie Newsies--the number 3 Newsies fansite on the web! (no but really, I had something like 5,000 hits in my first 6 months...)--for which I actually learned HTML and Java.

1 comment:

  1. Looks lovely Kendall! The background of your header actually looks like my kitchen counters at home (my parents' home, that is). And the page background like the counters at my grandparents' house!

    If you want to make a slight tweak - The rounded corners on this box (the single post page with the place for comments) are slightly rough.

    ReplyDelete