Understanding design is about understanding people.

Table of contents:

1. All the Hard Stuff Out of the Way First
   1. Composition
   2. Contrast
   3. Weight
   4. Spacing
   5. Kerning
2. More to Come

All the Hard Stuff Out of the Way First

Alright, so being the idiot that I was when I started this series (the same idiot that I am now, as it turns out) I asked a whole wack of questions to make you, the reader, think. I did not think at the time that I would actually have to come up with answers to them. Thankfully, I found a loophole: I don’t have to. That’s right, I’m not going to answer anything. The reason for this is that I’d probably be wrong, or explain something incorrectly. What I can do is list those same questions out, give what I think is a good explanation, and link a bunch of sources so that you can draw your own conclusions!

I’m amazingly lazy brilliant. To add to my brilliance, I am going to splice this post into two separate posts. The reason for this is that I tend to write a fair amount, and I don’t think having a one-page novel will be useful to anyone

Back to top

“Do they understand composition?”

This one is a little hard to field, because composition can be applied to a whole range of subjects. You can define how a news article is composed, how a photo was composed, or the composition of a magazine spread. The general idea is this: Composition is how you set up something to affect the end-user. In a way composition is an all-encompassing idea of what graphic design is. I’m going to get really lazy here, and site Websters here:

“1 a: the act or process of composing; specifically : arrangement into specific proportion or relation and especially into artistic form b (1): the arrangement of type for printing <hand composition> (2): the production of type or typographic characters (as in photocomposition) arranged for printing
2 a: the manner in which something is composed b: general makeup <the changing ethnic composition of the city — Leonard Buder> c: the qualitative and quantitative makeup of a chemical compound
3: mutual settlement or agreement
4: a product of mixing or combining various elements or ingredients
5: an intellectual creation: as a: a piece of writing; especially : a school exercise in the form of a brief essay b: a written piece of music especially of considerable size and complexity“ source here

I am, in this instance referring to 1,2, 4, and 5. There are many, many sources based solely on the understanding of composition, most of which I will not list here. Google will be your friend when it comes to this one, though I will link the Wikipedia article on Composition to give you a heads up. Seriously, This is like asking “do you understand philosophy?” because in the design sense, it amounts to the same thing and I feel stupid for asking this one.

Back to top

“How about contrast?”

This one I can do. Contrast is pretty straight-forward to explain, but harder to achieve without making your design look like hell. What makes more contrast? White text in a black box or black text in a white box? technically they are the same, but what happens when you add the rest of the page into the mix? a white background-based page will make the black box with white text stand out way more. The inverse would also be true (black bg page). Contrast, for all intents and purposes is how much something stands out against everything around it.

Another example is using large, bold text to highlight something. An example I will use is headers in html. H1 is somewhat large, and helps distinguish text from everything around it. This is a contrast through size and weight. It stands out from everything around it and draws the users eyes to it. From what I gather, this is the main (but not the only) purpose of contrast: to draw attention to something/make something stand out (which is the same as drawing attention to it!0

Contrast can be achieved a couple of ways: Colour, White-space (I go into this later), Size, and probably others but I am unwilling to list them.

Resources to look at:

• This is a lovely article written by The Go MediaZine on contrast.
• A good article about contrast on the web by Web Design From Scratch.

Back to top

“Weight?”

Another one of those ‘should have specified’ sort of items. Since I didn’t I shall cover two items: font weight, and paper weight.

Paper weight. What’s the point? First off, there is way more science involved in paper weight than I had originally thought. I refuse to explain said science, but I will be extra helpful and link some helpful articles that you can peruse at you leisure to better understand how paper density(weight) is defined.

What I will explain, though sadly I am unable to site any of this and so I am going from what I’ve learned over time, is the effect paper weight has on people. From what I’ve seen at work when you want something on paper noticed, use a different paper. People are very physical creatures, whether we deny it or not. Just like your old school councilors who used to advocate printing your resumé on a different colour of paper, the same can be said for the type of paper that you print it on. A heavier stock will gain you notice right from the get go, and the originality therein will allow your work to be read with at least some amount of interest. Using a heavier stock can also work When you want to give something a cover without giving it a cover, if you get my drift. I’m not saying that you should now print everything of worth off on a heavier stock (which can get tricky) but it’s a good way to stand out.

Font weight can be (and is) used in both traditional and digital print. It walks hand-in-hand with contrast, leading the user, and focal points (actually they all work together, but whatever). Font weight has much to do with how people interpret text. When something is bold or emphasized you will instantly pay more attention, if only because it’s different from everything around it.

Back to top

“Spacing?”

Spacing is a whole sub-culture that I could probably write a whole article on by itself. I’m not going to do that though, because I am lazy and pressed for time. Instead I’m going to outsource a good portion of this to PSDTuts.com and their new article: ‘9 Essential Principles for Good Web Design‘.

The points made here basically summarize on the web front how spacing can effect your layout. The third point (White Space) can apply to both Print and Digital designers. Using spacing properly can help create contrast via negative-space and helping to emphasize areas. Utilizing spacing properly will also allow for the user (or viewer) to read text more clearly and will help to direct them where you want.

Back to top

“Kerning?”

Ahh kerning. a simple demonstration of a lack of kerning can be seen… basically everywhere on the internet. Any time you see flat text on the internet – and in this case flat text means text NOT in an image – chances are you have seen an example of bad – or in this case, lack – of kerning. Kerning is, in a somewhat simplified sense, the action of adjusting the spacing between type characters. Here is a good visual example, along with a definition! See how efficient I am?

Something you have to realize is that with flat text (flat text in this instance means any text that is not in an image, or is otherwise manipulatable via HTML) cannot really have much in the ways of kerning. I’m not saying you can’t do it, as CSS has properties you can manipulate (see: font-width); but unless you are going to manually edit every paragraph of text, then you’re stuck with what the font does on its own.

If you are doing print or image text – text that is part of a digital image, or otherwise used on the Internet) then you have to make this common practice. I can’t tell you how annoying it is to suddenly be taught about kerning, and then realizing how many creations suffer from a complete lack. If I ever get around to making my new layout, then the logo would be a great example. As for now though, take a look at the title of this page.

“WallOfScribbles”

note how far away the “a” is from the “W” Since this is flat text, I’m kinda boned. If it was an image though, there should be no excuse as to why the W should be so orphaned.

Photoshop and Fireworks both offer workarounds to bad kerning, so pay attention to it!

Back to top

More to Come

I’ll post more answers to my own questions in the next installment people. Sorry but there is no way I am writing a one-page novella. No one wants that, and I don’t want to have to sit here writing that.

This is the fifth part in an ongoing series of articles that depicts my process to becoming a graphic designer. Coming up next: Part two (six) where I explain the other half of my many, many design questions.

• Part One
• Part Two
• Part Three
• Part Four
• Part Five (Currently reading)
• Part Six
• Part Seven