The Elements of Design (SWITCH) Journalism 125 fall 2016

Can anyone identify what kind of tree this is Can anyone identify what kind of tree this is? (WAIT) A designer by the name of Robin Williams came up with something he calls … (SWITCH) Journalism 125 fall 2016

Joshua Tree Epiphany Journalism 125 fall 2016 The Joshua Tree Epiphany. He lives in California and one time he got a book on trees as a gift. He saw the picture of a Joshua tree and said to himself, man that’s a cool tree. I wonder why I’ve never seen one? Later that day he took a walk in his California neighborhood and noticed that about every third or fourth house in his neighborhood had a joshua tree somewhere on the property. He couldn’t believe it. He realized that the reason he had never noticed the tree before was because he couldn’t identify it. He says that … (SWITCH) Journalism 125 fall 2016

Joshua Tree Epiphany “Once you can name something, you’re conscious of it. You have power over it. You’re in control. You own it.” READ – Now what the hell does this have to do with design? Well, remember what Alex told us in his lecture on Friday – once you are aware of the rule of thirds and are aware of light and shadows in photos, you will begin to notice it everywhere. In the same way, hopefully, once you are aware of what I’m about to tell you about design, you will begin to identify these elements and see them everywhere. (SWITCH) Robin Williams, Designer Journalism 125 fall 2016

Good Design Journalism 125 fall 2016 Let’s start with an easy overview of design… Good design is as easy as one two three. (SWITCH) Journalism 125 fall 2016

1. Learn the principles – they’re easier than you might think. Good Design 1. Learn the principles – they’re easier than you might think. READ (SWITCH) Journalism 125 fall 2016

Good Design 1. Learn the principles – they’re easier than you might think. 2. Recognize when you’re not using them – put it into words – name the problem. READ (SWITCH) Journalism 125 fall 2016

Good Design 1. Learn the principles – they’re easier than you might think. 2. Recognize when you’re not using them – put it into words – name the problem. 3. Apply the principles – you’ll be amazed at your results. READ (SWITCH) Journalism 125 fall 2016

. Believe it or not, the four elements of design can be easily remembered because the acronym – the first four letters of each of the words in these elements – reads as …(SWITCH) Journalism 125 fall 2016

C.R.A.P. CRAP – you won’t forget that, right? I hope not because it’s going to be on a quiz. So what exactly is crap? Well, first is… (SWITCH) Journalism 125 fall 2016

C.R.A.P. Contrast Journalism 125 fall 2016 Contrast. And, what do I mean by contrast? (SWITCH) Journalism 125 fall 2016

C.R.A.P. Contrast The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page—it's what makes a reader look at the page in the first place. It also clarifies the communication. READ. Contrast not only serves to draw in the eye, but you can use it to organize information, clarify the hierarchy, guide a reader around the page, and provide a focus. But don't be a wimp. If two elements are sort of different but not really, then you don't have contrast, you have conflict. You cannot contrast 12-point type with 14-point type. You cannot contrast a half-point rule with a one-point rule. You cannot contrast dark brown with black. Get serious with your contrast! Before we go any further, let’s clarify a couple of terms. First… (SWITCH) Journalism 125 fall 2016

C.R.A.P. Font Journalism 125 fall 2016 What is a font? (Discuss) (SWITCH) Journalism 125 fall 2016

C.R.A.P. Font A font is a set of printable or displayable text character s in a specific style and size. The type design for a set of fonts is the typeface and variations of this design form the typeface family . Thus, Helvetica is a typeface family, Helvetica italic is a typeface, and Helvetica italic 10-point is a font. READ (SWITCH) Journalism 125 fall 2016

Helvetica 66 pt. size Helvetica font C.R.A.P. Helvetica typeface READ So it takes all of the elements, typeface, size, italic (or, non) to make up the font. One other element in a font style is serif vs. sans serif. Does anyone know what the french word sans means.? (SWITCH) Helvetica font Journalism 125 fall 2016

Times New Roman serif C.R.A.P. Helvetica sans serif So here are two fonts, one serif and one sans serif. In the body of text that is to be read, research has shown that serif fonts are easier to read. So, use that for your website. Your headlines or titles can be sans serif if you prefer. Generally we don’t want to see more thtn three different font types on a page. (SWITCH) Helvetica sans serif Journalism 125 fall 2016

C.R.A.P. Contrast Journalism 125 fall 2016 Look at these images. Are these two the same guy? Are we supposed to see them as different or are we supposed to see them as the same? They’re only slightly different. It’s like one of those games you play where you have to look at two pictures and figure out the differences between the two. Have you ever played one of those? If they’re supposed to be different, show some contrast. SWITCH (SWITCH) Journalism 125 fall 2016

C.R.A.P. Contrast Journalism 125 fall 2016 Now we have two distinctly different characters. When we compare them to the other picture, it’s easy to see how this works. Make them different. Let your audience see the differences. (SWITCH) Journalism 125 fall 2016

C.R.A.P. Repitition Journalism 125 fall 2016 Repetition. And what do we mean by that? SWITCH Journalism 125 fall 2016

C.R.A.P. Repitition Repeat visual elements of the design throughout the piece. You can repeat colors, shapes, textures, spatial relationships, line thicknesses, fonts, sizes, graphic concepts, etc. This develops the organization and strengthens the unity. READ (SWITCH) Journalism 125 fall 2016

C.R.A.P. What are some of the elements in this design that are repeated? Discuss SWITCH Journalism 125 fall 2016

C.R.A.P. Alignment Journalism 125 fall 2016

C.R.A.P. Alignment The Principle of Alignment states: Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page. The principle of alignment forces you to be conscious —no longer can you just throw things on the page and see where they stick. When items are aligned on the page, the result is a stronger cohesive unit. READ Now, let’s go back to the last image and look at the use of alignment. SWITCH Journalism 125 fall 2016

C.R.A.P. There’s a great deal of alignment in this design, right? Discuss Okay, that’s C R A, now we need, what? Oh, P. SWITCH Journalism 125 fall 2016

C.R.A.P. Proximity Journalism 125 fall 2016 Proximity. What? That’s a news element. Well, it’s important in design as well. What is it? SWITCH Journalism 125 fall 2016

C.R.A.P. Proximity Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the reader a clear structure. READ Let’s take one more look at our graphic design and check out how proximity is utilized. SWITCH Journalism 125 fall 2016

C.R.A.P. How did the designer use proximity here? Discuss Okay, So now we have our full CRAP. Let’s take one look at what is considered to be a great utilization of this in web design. SWITCH Journalism 125 fall 2016

DISCUSS Journalism 125 fall 2016