Day 2: Design Basics — Layout and Composition

October 2nd, 2015 Posted by Design 2 comments

layout-and-compostion-part-1

I feel like this is the part where we all get out our freshly sharpened pencils and crack open those brand new notebooks. I’m a first day of school lover, what can I say?

So, today we are talking about Layout and Composition in the context of graphic design for your food blog. This is going to be a two parter—it’s THAT good! Actually, a couple of these “basics” posts will be two-parters, so we can really get in to some meaty stuff.

Layout is where I like to start because it sets the ground work for the other elements of design.

And here are those design “elements” (or areas, ideas, topics) by the way and what we will talk about specifically for each of them (schedule or number of posts per topic subject to change):

  1. Layout and Composition: this is a huge area… we are going to cover “the grid.” Part 2 will cover the rule of thirds will cover hierarchy, rhythm, unity, contrast and positive/negative space.
  2. Typography: fonts, using different fonts together, adjusting font (using kerning, tracking and leading), using type.
  3. Color: color theory (oh how I love this topic), using a color story/palette,
  4. Line and Shape
  5. Photography
  6. Art, illustration and texture

Other designers will probably break these things up in different ways, but this is the basic run down.

So let’s dive into Layout and Composition part 1:

The Grid.

The grid is an underlying structure (decided on by you, but usually somewhat dictated by your medium.) It’s a (you guessed it) grid of rows and columns at different widths. Here’s an example of a grid from Thinking With Type:

Screen Shot 2015-10-03 at 12.19.25 AM

In web design, there is a grid that is often referred to called the 960 grid. It uses the common measurement of desktop site width and divides that up into columns. You can read more (and get templates) here: 960 grid system. Here’s an example of what a grid could look like. This was taken from one of my school projects in 2013:

Screen Shot 2015-10-03 at 12.11.04 AM

Now, however, with mobile and tablet design I think the more important thing to keep in mind is the fact that we are working on a grid, and the reason we use one is that our pages on our site, and our site as a whole, needs structure. When we decide what the structure is, then we can break it if we want to, to draw attention to that area (like in the case of a special button, or call to action.)

So how should you create a grid? Remember that sharpened pencil you had earlier? Let’s take it out along with some paper. Draw a series of boxes that will serve as mock ups for your screen… so they can be phone sized, tablet, or desktop. Next, think about how you want copy to flow into your layout.

For food blogs, typically we like large images, and text to be large enough to easily read the recipe. We also like headers that show a little personality, and links to other posts in hopes that readers will stay awhile.

Now, I haven’t mentioned one thing yet… the text column issue. Web design typically doesn’t have two columns for text on a single page like a printed page or newspaper does. That’s because we just want to scroll down, right? Okay, so that is one constraint we know we are working with.

But what about those images? How big is big enough? Does copy flow around them, or break and go underneath? And what about all those links?

On a desktop site, there is room for a multi-column grid, with large images and links on the left or right side if we want them. If you are using a theme, you might see something like this in the theme or layout settings (from the Foodie Pro theme on the Genisis Framework)

Screen Shot 2015-10-03 at 12.43.48 AM

These are all examples of the grid, even though they are super simplified. My site grid is a two-coloumn with a primary sidebar. I want my content to live in the mostly left side of the page, and the “extras” (subscribe button, top posts, social links).

A huge trend right now is the “full width” site. Where the images go the whole length of the site window and then the text is over that, or under it. While these do have a full width image, the text still relies on a grid structure. Here’s one from i am a food blog: Screen Shot 2015-10-03 at 9.42.34 AM

You can see how the image is full width, but the header (title) and the social icons still follow a basic grid. They are aligned either to the left or the right, they are evenly spaced, and they are vertically aligned. As we get even further down the post and scroll down, the grid becomes more apparent. To a web designer, the grid might start to appear like this (using the 960 grid as a base)

Screen Shot 2015-10-03 at 10.05.05 AM

Another example of a grid is still a two column but the width of the columns are almost equal.

Here’s an example from Half Baked Harvest:

Screen Shot 2015-10-03 at 9.44.38 AM

I tend to like either full-width or two column designs with the main column larger then the secondary column. This allows for a sense of hierarchy between the two columns; in other words, they aren’t fighting for my attention and I naturally read the post first and the “extras” second.

Here’s one of my favorite examples of a two column with a wider main column grid structure:

Joy The Baker: 

Screen Shot 2015-10-03 at 9.33.10 AM

Once you have your grid established, you can come up with interesting ways to “break it”. This should only be done after you have a solid idea of what your structure is and you’ve thought carefully about how you want to break it. I find sketching helps the most, with figuring out your grid and deciding if or when to break it.

Here’s some great grid templates you can sketch with. You can also print out or take a screen shot of your site and draw on it to make your grid lines, or create guides over a screen shot in photoshop. Grids for sketching.

Here’s an example from Spoon Fork Bacon of how they “broke” their grid, with that little cooking pot illustration. Funny how your eye goes right to it—because it breaks up the straight line of the margin in the columns.

Screen Shot 2015-10-03 at 9.53.02 AM

I also want to share one more resource with you guys, which is a browser extension called Firebug. I use it with Firefox, and with it you can see the “back end” of sites. It’s pretty cool for finding out what font a site is using, or what colors they have on their site. I even use it to get the image sizes for my secondary column and featured images. It’s a great tool to have as you’re figuring out this wonderful world of digital design!

Screen Shot 2015-10-03 at 10.24.46 AM

More in Layout + Composition Part 2 tomorrow…

Resources for this post:

Studio Press; Genesis Framework

Foodie Pro wordpress theme

Thinking With Type: The grid

Grid Templates to sketch with

Blogs mentioned:

Half Baked Harvest, Chocolate Bourbon Pecan Pie Cupcakes

I Am A Food Blog: Miso Tuna Salad

Spoon Fork Bacon, Chai Banana Cake

Tags: , ,

2 comments

[…] yesterday was all about The Grid  and today we are going to be talking about The Rule of Thirds and hierarchy, […]

[…] so that the reader flows down the page in a natural progression. And they both work together on the grid to give organization to your page. Is this making sense […]

The comments are closed.

Subscribe to the Pickle Jar Studios Newsletter for updates and podcast episodes!

Instagram @PickleJarStudios

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.