Archive for September, 2009

Jakeguidry.com Blog Is Up And Running

Wednesday, September 30th, 2009

The blog is up after a complete redesign. What sparked a redesign was the client’s new direction in content. Jake says it best… “I grew tired of contributing very little to a blogosphere consumed with unoriginality, superficiality, and other such alitys that give many critics of blogging their ammo.” So, the new blog will be much more personal, and the design had to match.

jgblog

I chose Times Italic for the headings for a personal look and feel. Verdana is used for the body copy for its more natural/human feel versus helvetica. Blog should easily read from left (most important) to right (least). Quality is key here, and I’m betting the content will match.

Bookmark it. Or get the RSS feed.

Details:
1. Modified Blogger template
2. Width: 942px
3. Headings: Times Italic
4. Body Copy: 11px Verdana
5. Baseline: 18px
6. Posts: 10-16 words per line
7. A lot of heart and soul
8. A good old fashioned fight with template CSS

- Randy

Evolution Of A Logo

Monday, September 21st, 2009

From start to finish, this is the evolution of a logo.

Client: Jake Guidry of jakeguidry.com, a blog.
Use: Web-based identity.

Let’s start with some sketches:
jglogo1

The client and I discussed monograms as a starting point. After some research I became interested in 3-dimension, and was excited because I’ve only done flat so far. #3 was my real starting point. Combining the J and G into one element.

From here I went further with #3′s concept:
jglogo2

#4, 5, 6 all deal with isometric views. I liked them, but wanted to explore a flat base, perspective view. The client really liked #7.

So far each concept uses no real font. I wanted to show the client what these would look like using popular fonts as well:
jglogo3

They were interesting. But all lacked a real connection between the J and G. Seems forced.

So back to #7′s concept, I begin to vector in Illustrator:
jglogo4

Very happy with the progress so far. So is client.

Here is a close up, making sure all angles are correct:
jglogo5

All cleaned up:
jglogo6

At this point the logo is vectored, but still lacks something unique. I bring the idea of black stained wood to the client and he loves the idea.

Recreating wood grain, not an easy task:
jglogo7

To do this I superimposed a block of wood over the logo with 15% opacity. Using a tablet I made quick strokes with the brush tool to mimic the grain pattern. I don’t think I could have done this using the mouse. At this point it is still messy, with all the strokes hanging over the edges. I then cut off each over hang individually to clean up.

Here is the final product:
jglogo8

Client approves the final design. This is also my first time using a gradient in a logo. At least it’s subtle. The black wood grain is classy, modern, and subtle. The logo represents the client well.

Time, from start to finish: 2 weeks. I don’t usually get this lucky with an idea. But I believe this is portfolio worthy.

- Randy

The Grid System Guide

Wednesday, September 16th, 2009

What is this?

This is an ongoing guide to creating grid systems for print, which will be continually updated.

Introduction:

There are plenty of guides out now online about how to create grid systems for the web, even grid generators. But I’ve had trouble finding sufficient material online about creating grids for print. What I did find was a lot of vague terminology. Most of what I’ve learned about setting up the grid comes from this book: Grid Systems in Graphic Design, and Vignelli’s Canon. This guide is geared towards the designer who does not have access to the book, I can not thank you enough, Brockmann. This guide is just my way of constructing the grid, and should in no way serve as the only way.

Let’s Get Started:

I’m going to assume you have chosen an appropriate paper size and margins. I could go in depth about these two subjects but for now it’s better to stay as an assumption.

The grid is based on leading. Baseline to baseline of next line.

1. Start by placing a block of fully justified text from your top margin down to your bottom margin.

grid1

Page: 8×10 inches. Margins: top – 1/4, inside – 1/2, outside – 1/4, bottom – 1/2.

2. Choose a typeface, size, and leading. This will serve as your body copy. Please do not use the default leading. For example: 10pt sans-serif type has a default leading of 12pt. This is generally too tight and will be harder to read. I like to stay 3-4pts above the type size. So 10pt with 14pt leading is appropriate. If you choose a serif font you can get away with 3pts above type size.

Place a blue line under each baseline.

grid2

Typeface: Helvetica. Size: 10pt. Leading: 14pt.

3. Count the number of lines of text in your block. The point of the grid is to divide the page into even blocks of space vertically. Determining how many blocks of space varies from project to project. 12 is a good starting place. 12 can be divided into 6, 4, 3, or 2. Lets say you have counted 52 lines. Divide 52 by 12, we get 4.33. No good. We need to minus 4 lines of text. 48 divided by 12, we get 4. So at every 4th line of text we place a red line under the baseline.

grid3

Right now you have a block of text with 48 lines. Which is divided into 12 rows. If 12 rows seems too restrictive, divide in half to get 6 rows for more freedom.

4. Place a green line on top of each cap-height. All 48 lines. The green line will help align photos. Photos should always align with some grid line, whether it be cap-height or baseline, or be extended to the edge of the page. Do not align the bottom of a photo with the cap-height. (green lines)

grid4

5. Now for columns. The number of columns is essentially up to you and the information you are displaying. If you have a lot of tabular data, for example an annual report, 6 columns might be more appropriate than 2. Columns are divided evenly across the page, staying inside the margins of course.

Place a red vertical line to mark the columns.

grid5

Page divided into 6 columns.

We can’t stop here, though. There needs to be space between each column. We can’t have words or photos running into each other. The space is determined by the distance between a baseline and the cap-height of the next line.

grid6

Black bar represents distance between baseline and cap-height.

Now translate that into the space between columns.

grid7

6. Each row needs space as well. Bottom of photos can’t run into the top of another. Simply place a red line on the cap-height of the next line.

grid8

Page: 12 rows by 6 columns.

7. The grid is constructed. Now it’s time for the real fun. Playing around with many different layouts to find the right one. Here are some examples.

grid9

grid10

grid11

These are just a very few of what is possible in a matter of minutes. All represent the left page of a full spread. Please don’t hold these layouts against me. They were just quick mockups.

I will talk about page numbers later, and edit if anything is unclear. Stay tuned.

CSS Browser Resets

Wednesday, September 16th, 2009

I’ve been getting frustrated lately about my web design looking different in every browser. This is common, of course. Each broswer: FF, Safari, Opera, Chrome, and IE all have their own default margin and padding settings.

So if I make a header, main content, sidebar, and footer layout with no set margin or padding, the browser will set its own default setting. This is even more frustrating when text is introduced. The h1, p, li, and ul all have their own defaults. This creates unpredictable results. And I don’t like that, and I won’t stand for it.

I needed to find a common ground.

* {
	margin: 0;
	padding: 0;
	border: 0 none;
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
}
ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
	}

fieldset, img, abbr {
	border: 0;
	}

a, ins {
	text-decoration: none;
	}

p, h1, h2, h3, h4, form, span, img, blockquote  {
	padding: 0;
	margin: 0;
}

The asterisk at the top is the universal rule for resetting. All major browsers should recognize that rule and read it the same way. Do not reset any elements inside the “form,” for example: input, textarea, checkbox. etc. Form elements can act kind of crazy if you reset them.

Start your stylesheets with this bit of code and make your life easier. I must give thanks to Eric Meyer for pointing me in the right direction.

- Randy

Brochure Finished

Saturday, September 5th, 2009

Harmony EyeCare has approved the final layout. I drew inspiration from Swiss minimalism and organization. There’s a lot of information on this brochure and organization was key. If you notice,  there is still plenty of white space.

Details:
Typeface: Akzidenz Grotesk
Size: 9pt and 18pt
Baseline: 13pt
Color: Pantone 200-4 C

Outside:
brochureoutside

Inside:
brochureinside

- Randy