Contrast

ContrastBy: Katie BocskorMy presentation is on Contrast. As you can see from this first slide, I am using Contrast with the warm and cold colors; along with the font style and size.1dont be a wimp

INFORMATIONTECHNOLOGY INFORMATIONTECHNOLOGYThis is important with Contrastdont be a wimp2To be effective, it must be strongContrast

For Contrast to be effective, it must be STRONG.

31. create interest

2. organizationPurpose

Contract has 2 basic Purposes:

To create INTEREST on the page: If a page is interesting to look at, it will likely be read.

To create ORGANIZATION: A read should be able to INSTANTLY understand the organization and flow of the document. The contrasting elements should never confuse the reader.

4Contrast vs. Conflict

contrastconflictwww.jayce-o.blogspot.comContrast is created when 2 elements are different. (See upper left image). Using the colors Red & Green make contrast. They are 2 colors that are not related. This is what draws people in and sells.Conflict is created when 2 elements are sort of different, but not really. (Purple and Blue colors are similar.) You do not want to use conflicting elements when designing.

Robins Principle of Contrast states If two items are not exactly the same, then make them different. REALLY DIFFERENT.5Creating Contrast

Small Type Large TypeTypeOldstyleFonts Bold Sans SerifFontThin with Thick Lines s LinesHere are a few ways to create Contrast.

Type: Large Type with Small TypeFonts: Using an Oldstyle Font with a Bold Sans SerifLines: Thin with Thick or Circle with SquareShapes: Circle with a Square

6Creating Contrast

Complementary ColorsWarmColdHere are a few ways to create Contrast.

Colors:

Hot: Red, Orange, YellowCold: Purple, Blue, Green

Complementary Colors: Yellow/Purple Blue/Orange Red/Green7Creating Contrast

Circle withSquareShapesDirectionTexture

www.eleven2.comHere are a few ways to create Contrast.

Shapes: Circle with a SquareText Direction: Vertical with Horizontal Texture: Rough with Smooth8Creating Contrast

ImageSize

Here are a few ways to create Contrast.

Image Size: Big vs Small9Creating Contrast

Elements

SpacingClosely packed linesClosely packed linesClosely packed linesClosely packed linesWidely spaced linesWidely spaced linesWidely spaced linesWidely spaced linesHere are a few ways to create Contrast.

Page Layout/Elements: Horizontal with VerticalSpacing: Widely spaced line with closely packed lines10Example 1 Contrast

www.underconsideration.com/fpo/archives/2013/06/pointpath-studios-business-cards.php

BackFront Type Font

Example 1: Business card design I found on Pinterest. The source is listed below.

1. The first 2 images are the front and back of the business card. You can see the contrast in color with the black and blue.The 3rd image shows a close up of the font used and the use of type. The large name with small job description. Also the name/job description are in all caps and the contact information is all lower case.11Example 1 Contrast

www.underconsideration.com/fpo/archives/2013/06/pointpath-studios-business-cards.php

LinesTexture & Colors

Example 1:

They added some texture to cards, used a unique font, and they were designed with other color schemes. Logo is designed connecting lines to different dots.12Example 2 Contrast

www.insightonbusiness.comPublication: www.a2zdesign.comDesign By:

Example 2: Insight on Business Magazine. There magazine is very well designed by A2Z Design in Appleton.

1. This is a screenshot I took of all just a couple magazine covers. I am going to use there current magazine to show you some contrasting elements.13Example 2 Contrast

www.insightdigital.biz/i/147468/

Read Article: Example 2:

The first spread uses big images with small images (mouse with people). The text and color used are very contrasting. And the texture of Whey is designed to have the look of Cheese, which the company produces and this article is about. The mouse pointing actually makes me want to flip to read the article.

When going into the article, you can see the use of fonts, font colors, yellow text boxes, images of employees. All the contrasting elements really tie this piece together.14Example 2 Contrast

www.insightdigital.biz/i/147468/Read Article: Example 2:

The first spread uses big images with small images (mouse with people). The text and color used are very contrasting. And the texture of Whey is designed to have the look of Cheese, which the company produces and this article is about. The mouse pointing actually makes me want to flip to read the article.

When going into the article, you can see the use of fonts, font colors, yellow text boxes, images of employees. All the contrasting elements really tie this piece together.

And just remember to Be STRONG!15