What does it mean to under­stand design? Good ques­tion. I wish I had a con­crete answer, but I don’t and so you’ll have to take what I say here with a grain of salt. I would sug­gest check­ing some other blogs and seeing what they have to say. From what I gather (and I have been work­ing hard to gather a lot) under­stand­ing design means under­stand­ing not only tech­niques, but how using those tech­niques influ­ence the end-​user. Under­stand­ing design means know­ing that by chang­ing the light­ing of an image, you will change its mood, even if only by toning the light down 2 Watts. Under­stand­ing design is know­ing that you have to convey a message/experience/feeling/essence by more then some­thing that looks cool. Under­stand­ing design is as much about under­stand­ing the tech­nique as it is about under­stand­ing the effect.

Under­stand­ing design is about under­stand­ing people.

Table of contents:

1. All the Hard Stuff Out of the Way First
   1. Com­po­si­tion
   2. Con­trast
   3. Weight
   4. Spac­ing
   5. Kern­ing
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 ques­tions to make you, the reader, think. I did not think at the time that I would actu­ally have to come up with answers to them. Thank­fully, I found a loop­hole: I don’t have to. That’s right, I’m not going to answer any­thing. The reason for this is that I’d prob­a­bly be wrong, or explain some­thing incor­rectly. What I can do is list those same ques­tions out, give what I think is a good expla­na­tion, and link a bunch of sources so that you can draw your own conclusions!

I’m amaz­ingly lazy bril­liant. To add to my bril­liance, I am going to splice this post into two sep­a­rate 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 com­po­si­tion can be applied to a whole range of sub­jects. You can define how a news arti­cle is com­posed, how a photo was com­posed, or the com­po­si­tion of a mag­a­zine spread. The gen­eral idea is this: Com­po­si­tion is how you set up some­thing to affect the end-​user. In a way com­po­si­tion is an all-​encompassing idea of what graphic design is. I’m going to get really lazy here, and site Web­sters here:

“1 a: the act or process of com­pos­ing; specif­i­cally : arrange­ment into spe­cific pro­por­tion or rela­tion and espe­cially into artis­tic form b (1): the arrange­ment of type for print­ing <hand com­po­si­tion> (2): the pro­duc­tion of type or typo­graphic char­ac­ters (as in pho­to­com­po­si­tion) arranged for print­ing
2 a: the manner in which some­thing is com­posed b: gen­eral makeup <the chang­ing ethnic com­po­si­tion of the city — Leonard Buder> c: the qual­i­ta­tive and quan­ti­ta­tive makeup of a chem­i­cal com­pound
3: mutual set­tle­ment or agree­ment
4: a prod­uct of mixing or com­bin­ing var­i­ous ele­ments or ingre­di­ents
5: an intel­lec­tual cre­ation: as a: a piece of writ­ing; espe­cially : a school exer­cise in the form of a brief essay b: a writ­ten piece of music espe­cially of con­sid­er­able size and com­plex­ity“ source here

I am, in this instance refer­ring to 1,2, 4, and 5. There are many, many sources based solely on the under­stand­ing of com­po­si­tion, 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 arti­cle on Com­po­si­tion to give you a heads up. Seri­ously, This is like asking “do you under­stand 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. Con­trast is pretty straight-​forward to explain, but harder to achieve with­out making your design look like hell. What makes more con­trast? White text in a black box or black text in a white box? tech­ni­cally they are the same, but what hap­pens 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). Con­trast, for all intents and pur­poses is how much some­thing stands out against every­thing around it.

Another exam­ple is using large, bold text to high­light some­thing. An exam­ple I will use is head­ers in html. H1 is some­what large, and helps dis­tin­guish text from every­thing around it. This is a con­trast through size and weight. It stands out from every­thing around it and draws the users eyes to it. From what I gather, this is the main (but not the only) pur­pose of con­trast: to draw atten­tion to something/make some­thing stand out (which is the same as draw­ing atten­tion to it!0

Con­trast can be achieved a couple of ways: Colour, White-​space (I go into this later), Size, and prob­a­bly others but I am unwill­ing to list them.

Resources to look at:

• This is a lovely arti­cle writ­ten by The Go Medi­aZine on contrast.
• A good arti­cle about con­trast 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 sci­ence involved in paper weight than I had orig­i­nally thought. I refuse to explain said sci­ence, but I will be extra help­ful and link some help­ful arti­cles that you can peruse at you leisure to better under­stand 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 some­thing on paper noticed, use a dif­fer­ent paper. People are very phys­i­cal crea­tures, whether we deny it or not. Just like your old school coun­cilors who used to advo­cate print­ing your resumé on a dif­fer­ent colour of paper, the same can be said for the type of paper that you print it on. A heav­ier stock will gain you notice right from the get go, and the orig­i­nal­ity therein will allow your work to be read with at least some amount of inter­est. Using a heav­ier stock can also work When you want to give some­thing a cover with­out giving it a cover, if you get my drift. I’m not saying that you should now print every­thing of worth off on a heav­ier stock (which can get tricky) but it’s a good way to stand out.

Font weight can be (and is) used in both tra­di­tional and dig­i­tal print. It walks hand-​in-​hand with con­trast, lead­ing the user, and focal points (actu­ally they all work together, but what­ever). Font weight has much to do with how people inter­pret text. When some­thing is bold or empha­sized you will instantly pay more atten­tion, if only because it’s dif­fer­ent from every­thing around it.

Back to top

“Spacing?”

Spac­ing is a whole sub-​culture that I could prob­a­bly write a whole arti­cle on by itself. I’m not going to do that though, because I am lazy and pressed for time. Instead I’m going to out­source a good por­tion of this to PSD​Tuts.com and their new arti­cle: ‘9 Essen­tial Prin­ci­ples for Good Web Design‘.

The points made here basi­cally sum­ma­rize on the web front how spac­ing can effect your layout. The third point (White Space) can apply to both Print and Dig­i­tal design­ers. Using spac­ing prop­erly can help create con­trast via negative-​space and help­ing to empha­size areas. Uti­liz­ing spac­ing prop­erly 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 kern­ing. a simple demon­stra­tion of a lack of kern­ing can be seen… basi­cally every­where on the inter­net. Any time you see flat text on the inter­net - and in this case flat text means text NOT in an image - chances are you have seen an exam­ple of bad - or in this case, lack - of kern­ing. Kern­ing is, in a some­what sim­pli­fied sense, the action of adjust­ing the spac­ing between type char­ac­ters. Here is a good visual exam­ple, along with a def­i­n­i­tion! See how effi­cient I am?

Some­thing you have to real­ize is that with flat text (flat text in this instance means any text that is not in an image, or is oth­er­wise manip­u­lat­able via HTML) cannot really have much in the ways of kern­ing. I’m not saying you can’t do it, as CSS has prop­er­ties you can manip­u­late (see: font-​width); but unless you are going to man­u­ally edit every para­graph 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 dig­i­tal image, or oth­er­wise used on the Inter­net) then you have to make this common prac­tice. I can’t tell you how annoy­ing it is to sud­denly be taught about kern­ing, and then real­iz­ing how many cre­ations suffer from a com­plete lack. If I ever get around to making my new layout, then the logo would be a great exam­ple. 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.

Pho­to­shop and Fire­works both offer workarounds to bad kern­ing, so pay atten­tion to it!

Back to top

More to Come

I’ll post more answers to my own ques­tions in the next install­ment people. Sorry but there is no way I am writ­ing a one-​page novella. No one wants that, and I don’t want to have to sit here writ­ing that.

This is the fifth part in an ongo­ing series of arti­cles that depicts my process to becom­ing 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 (Cur­rently reading)
• Part Six
• Part Seven