TheBasicsofDesign

EdTech597:YouTubeforEducators
byKrisMesler

The5thingstoconsider whencreatingdesign
Proximity Alignment Contrast

Repetition UseofColor

Proximity
When several items are in close proximity to each other, they become one visual unity rather than several separate units. Dont be afraid of blank space. The basic purpose of proximity is to organize. Group related items together Simple illustration: SLIDE 1 & 2 You understand that there is a difference between information. You know that the last three car companies are somehow different because they are physically separated from the rest of the list. Physical closeness implies a relationship.

Car Companies Toyota Hyundai Honda GMC Ford Chrysler

Car Companies Toyota Hyundai Honda GMC Ford Chrysler

Using a typical business card layout, how many separate elements do you see? (Squint your eyes slightly and count the number of visual elements on the page by counting the number of times your eye stops.) SLIDES 3 & 4
John Doe (800)555-1212

John Doe

(800)555-1212

JoesBar&Grill
123 Baker Street London, NH

JoesBar&Grill
123 Baker Street London, NH

Your eyes most likely will stop every time you see a section of print, but mostly on the bolded type. In the second card, there are two bolded areas, but your eye will be drawn to the largest bold section. SLIDE 5

JoesBar&Grill
JohnDoe 123 Baker Street
London, NH (800) 555-1212

If you group the many items, they become one visual unit rather than separate units. In this modified version, the title of the business and the persons name is noticed first,Baker Street the London, NH phone number. It is easier to follow by 123 followed by address and scrolling the eyes down the page. The proximity, or the closeness, implies a relationship. The card is now organized visually and intellectually.

When other visuals are made for presentations, you know what pieces of information are logically connected. Look at your information to see what needs to be emphasized and what needs to be de-emphasized. You can show these items by grouping like information together.

For example: SLIDES 6 & 7 Primary Colors blue red yellow Triangles scalene Primary Colors blue red yellow Triangles

acute equilateral Shapes rectangle circle square

scalene acute equilateral Shapes rectangle circle square

The first list needs formatting to make it more understandable. The second list is the same information from the first list, but the categories are more visually defined. Consciously group together information that belongs together. Visually, you can show groups by using contrast and repeating elements. Sometimes when grouping, you need to make changes in the size or weight or placement of text or graphics. Information that is not the main message, can be much smaller font than the rest of the visual display. The idea of proximity doesnt mean that everything is closer together; it means elements that are intellectually connected, those that have some sort of communication relationship, should also be visually connected. Other separate elements or groups of elements should not be in close proximity. The closeness or lack thereof indicates the relationship. SLIDES 8 & 9
BMW Honda Indian RoadWarriorCycles Kawasaki 123AutoDrive Harley Davidson

FunwithMotorcycles!
RoadWarriorCycles123AutoDriveFun,CA BMW Honda HarleyDavidson Ducati Kawasaki Indian Yamaha M

FunwithMotorcycles!

< a FunCity,CA Ducati t Yamaha Comeridewithus! h T Using proximity to organize this information, we can communicate immediately u the who, what, and where. t t If your choice is between clear communication or amateur design, choose clear o communication. Upgrading your design skills is a gradual process and begins r with clear communication. S e s s i o n

White space should have a specific role. It should not be trapped between headlines and their related texts. When white space is trapped, it tends to visually push the elements apart.

Why isntphoneticspelledthewayitsounds? Why arethereinterstatehighwaysinHawaii? Why dofatchanceandslimchancemeanthesame thing? Why doesyournoserunandyourfeetsmell? Why callitabuildingwhenitsalreadybuilt?

ThingstoPonder
Why isntphoneticspelledthewayit sounds? Why arethereinterstatehighwaysin Hawaii? Why dofatchanceandslimchancemean thesamething? Why doesyournoserunandyourfeet smell? Why callitabuildingwhenitsalready built?

SLIDES 10 & 11

If you move the headlines closer to the related text, there is a change showing organization clearer, the white space is not trapped within the elements, and there appears to be more room on the page. The alignment was also changed to flush left, which created more room so I could enlarge the graphic. Things to avoid: Dont put items in the middle or corners of a page just because the space is empty. Dont have too many separate elements on a page. Another problem that can occur is the overuse of all caps. They are very hard to read, so it is better to have caps and lowercase together. Try not to have equal amounts of white space throughout the page, unless each group is part of a subset. Dont put things together that dont belong together! If they are not related, move them apart from each other.

Alignment
Items should not be placed on a page arbitrarily. Each item should have a visual connection with something else on the page. SLIDES 1 & 2

JohnDoe

(800)5551212

TanYourBuns
JohnDoe 123AStreet SunCity,CA (800)5551212 (

TanYourBuns
123AStreet SunCity,CA

By moving all of the elements to the right and giving them one alignment shows organization of the information.

A centered alignment often appears a bit weak. If text is aligned, instead, on the left or the right, the invisible line that connects the text is much stronger because it has a hard vertical edge to follow. SLIDES 3 & 4

TanYourBuns
JohnDoe 123AStreet SunCity,CA (800)5551212 (

TanYourBuns
JohnDoe 123AStreet SunCity,CA (800)5551212 (

The strength of the edge in the second slide is what gives strength to the layout. A centered alignment is the most common alignment that beginners useits very safe. A centered alignment creates a more formal look, a more sedate look, a more ordinary and oftentimes downright dull look. However, this is not to say to never use centered alignment. Just be conscious of the effect a centered alignment has on your visual presentation. SLIDE 5 This text is flush left, or left aligned. This text is flush right, or right aligned. This text is centered. It is hard to tell if this text was centered on purpose because each line ends at a different place. This text is centered. We must work hard to make it look like we aligned it this way on purpose. This is an example of justified text. It is also called a blocked text. The text lines up on both sides of the paper. It is mainly used in newspapers, but can be used effectively if you have enough text to completely fill up a sized column or across the page. If you do not have enough text to fill the gaps,

it leaves large distracting and annoying.

gaps

that

are

very

When you place items on a page, make sure each one has some visual alignment with another item on the page. If lines of text are across from each other horizontally, align their baselines. If there are several separate blocks of text, align their left or right edges. If there are graphic elements, align their edges with other edges on the page. Lack of alignment is the main reason for creating documents that are unappealing to the eye. If a page is well designed, you should be able to draw lines to the aligned objects, even if the presentation has a collection of many items. Occasionally you can get away with using both flush right and flush left text on the same page, but make sure you align them in some way. SLIDE 6 & 7

Sherlock Holmes
Sir Arthur Conan Doyle

Sherlock Holmes
Sir Arthur Conan Doyle

The complete stories of Englands greatest crime fighter

The complete stories of Englands greatest crime fighter

First paragraphs are traditionally not indented. The purpose of indenting a paragraph is to tell you there is a new paragraph, but you always know the first one is a new paragraph. An indent using a computer is two spaces. If you use a photo or a graphic with a strong flush side, align the side of the text along the straight edge of the photo. SLIDES 8 & 9

Soccer
Thegameofsoccerkeeps athletesfitbyusingskillslike running,jumping,throwing, andkicking. Soccerathletesmustalsouse differenttypesofleverage inordertogainpositionon thefieldwhenconfronted withaplayeroftheopposite team.

Soccer
Thegameofsoccerkeeps athletesfitbyusingskills likerunning,jumping, throwing,andkicking. Soccerathletesmustalsouse differenttypesofleverage inordertogainpositionon thefieldwhenconfronted withaplayeroftheopposite team.

Find a strong line and use it. If your alignments are strong, you can break through them consciously and it will look intentional. You cannot be afraid about breaking the alignment either do it all the way or dont do it at all. Dont be afraid to be asymmetrical. Things to avoid: Using more than one text alignment on the page is unattractive if you use a center alignment with a flush left or right alignment. Try to break away from a centered alignment in all of your projects.

Repetition
Repeat some aspect of the design throughout your presentation. It could be a font, a thick line, a bullet, a color, a design format, or anything else that the viewer could recognize as being part of a pattern. Repetition shows a consistency of design in a project. This does not mean, however, that you must show the same heading or logo on every page. You need to decide how much repetition is tasteful and not overdone. Taking the business cards we worked on in the alignment video, we can show that repetition can be shown with just one element, bolding a font. SLIDES 1 & 2

TanYourBuns
JohnDoe 123AStreet SunCity,CA (800)5551212 (

TanYourBuns
JohnDoe 123AStreet SunCity,CA (800)5551212 (

The bold repetition also helps unify the entire design. When you reach the end of the information, your eye will probably bounce between the two bold elements. The repetition ties the piece together and provides unity.

Using the principle of repetition, you can sometimes pull an element from an existing design and create a new design based on that one element for another part of the presentation.

SLIDES 3 & 4

Buddys Pet Care

Buddys Pet Care

Repetition is a major factor in the unity of multi-page presentations. It should look obvious that the first slide, a middle slide, and the last slide tie together. SLIDES 5 & 6

Welcometo London,England
Hqweoasdlkjejfalksjfsldkjfls skdeklkjfnekflpoietioekd, dkdkecia;sd.Aslsldkeoingncl sldkpldkenkikenkdldkejslzle, clslkjeldkcjvdlekjsjc,sldkfjinels lkjdidf.Slwiekvkdiehdkehe vlihtsleidkdkeld.Theickv dkeoliceidhtldxeodiv.Uekgnb dolvkedlekfnpleiskeidkfhsldke aeldeekekcifbjekejhfdkhelvk. Eidkavlekdvopoiekdiceicnd tineidme. Wasleibirdjeoskdkvkdienv slekcnviekvnoeslienvdlendi. Rokenbiekdsowieudjqiejdb kjghwudjvvskcusjdefhedhdh eifg.

WestminsterBridge,London,England

TheVisitorsGuide
Hqweoasdlkjejfalksjfsldkjfls skdeklkjfnekflpoietioekd, dkdkecia;sd.Aslsldkeoingncl sldkpldkenkikenkdldkejslzle, clslkjeldkcjvdlekjsjc,sldkfjinels lkjdidf.Slwiekvkdiehdkehe vlihtsleidkdkeld.Theickv dkeoliceidhtldxeodiv.Uekgnb dolvkedlekfnpleiskeidkfhsldke aeldeekekcifbjekejhfdkhelvk. Eidkavlekdvopoiekdiceicnd tineidme. Wasleibirdjeoskdkvkdienv slekcnviekvnoeslienvdlendi. Rokenbiekdsowieudjqiejdb kjghwudjvvskcusjdefhedhdh eifg. Nokvneidkentighellsikjem odkleikinflsiektgethenkems ldkekililkjejltkg,dmdiniekdlc. Iklidklekhsedkehflkjadekfjl skt.

ABridgeTooFar
Hqweoasdlkjejfalksjfsldkjfls skdeklkjfnekflpoietioekd, dkdkecia;sd.Aslsldkeoingncl sldkpldkenkikenkdldkejslzle, clslkjeldkcjvdlekjsjc,sldkfjinels lkjdidf.Slwiekvkdiehdkehe vlihtsleidkdkeld.Theickv dkeoliceidhtldxeodiv.Uekgnb dolvkedlekfnpleiskeidkfhsldke aeldeekekcifbjekejhfdkhelvk. Eidkavlekdvopoiekdiceicnd tineidme. Wasleibirdjeoskdkvkdienv slekcnviekvnoeslienvdlendi.

TheLondonEye
Hqweoasdlkjejfalksjfsldkjfls skdeklkjfnekflpoietioekd, dkdkecia;sd.Aslsldkeoingncl sldkpldkenkikenkdldkejslzle, clslkjeldkcjvdlekjsjc,sldkfjinels lkjdidf.Slwiekvkdiehdkehe vlihtsleidkdkeld.Theickv dkeoliceidhtldxeodiv.Uekgnb dolvkedlekfnpleiskeidkfhsldke aeldeekekcifbjekejhfdkhelvk. Eidkavlekdvopoiekdiceicnd tineidme. Wasleibirdjeoskdkvkdienv slekcnviekvnoeslienvdlendi. Rokenbiekdsowieudjqiejdb kjghwudjvvskcusjdefhedhdh eifg.

BuckinghamPalace,London,England

BuckinghamPalace
Hqweoasdlkjejfalksjfsldkjfls skdeklkjfnekflpoietioekd, dkdkecia;sd.Aslsldkeoingncl sldkpldkenkikenkdldkejslzle, clslkjeldkcjvdlekjsjc,sldkfjinels lkjdidf.Slwiekvkdiehdkehe vlihtsleidkdkeld.Theickv dkeoliceidhtldxeodiv.Uekgnb dolvkedlekfnpleiskeidkfhsldke aeldeekekcifbjekejhfdkhelvk. Eidkavlekdvopoiekdiceicnd tineidme. Wasleibirdjeoskdkvkdienv slekcnviekvnoeslienvdlendi. Rokenbiekdsowieudjqiejdb kjghwudjvvskcusjdefhedhdh eifg.

TheUnderground
Hqweoasdlkjejfalksjfsldkjfls skdeklkjfnekflpoietioekd, dkdkecia;sd.Aslsldkeoingncl sldkpldkenkikenkdldkejslzle, clslkjeldkcjvdlekjsjc,sldkfjinels
LondonEye,London,England

Note that the text does not completely fill to the bottom of the page. All text need not align at the bottom if there is a consistent, repetitive starting point at the top of the page. Other observations of the two slides will also reveal: Consistent double rule on both pages Consistent typeface in headlines and subheads, and consistent space above each A single rule repeats across the bottom of each page All stories or photos or illustrations start at the same guideline across the top of each page The purpose of repetition is to unify and to add visual interest. Repetition is consistent. It serves as an accent to the text and illustrations that appear. Avoid repeating an element so much that it becomes annoying or overwhelming.

Contrast
Contrast is created when two elements are different. If two elements are too close in resemblance to each other, it is not contrast, but conflict. For contrast to be effective, it must be strong. Contrast can be created in many ways, including large and small font, oldstyle and modern font, cool and warm color, thin and thick line, smooth and rough texture, horizontal and vertical element, small graphic with large graphic. If two things are not exactly the same, then make them VERY different.

SLIDES 1 & 2

INSTRUCTIONS
Special Instructions
Youn mfjfnle ekekehs kk, makskdn dkwk wkditk. Houn fhdh ekd wkw ekekl osoxl lw, dkdh fkehf. Maneoi owekd oeidmd tind e lekfnsl ekdndhe ekghld ekh kdazpkw dkqmdk, dkei dlcpienc. Plekn wkdhne visle lskeih. Puyjk ekdhc wldkv she dhw slek akshemq dkekdi. Qoein keh ldkeh xldken skehf lkshe lskeh slk wlkjd iehnd hked. Youn envie dlekcmk eiddk wlskdh eif ltkhd kehd lilpoih fkehf kehdls eldke, codk. dkei dlcpienc. Plekn wkdhne visle lskeih. Puyjk ekdhc wldkv she dhw slek akshemq dkekdi. Qoein keh ldkeh xldken skehf lkshe lskeh slk wlkjd iehnd hked. Youn envie dlekcmk eiddk wlskdh eif ltkhd kehd lilpoih fkehf kehdls eldke, codk.

Step Two
Youn mfjfnle ekekehs kk, makskdn dkwk wkditk. Houn fhdh ekd wkw ekekl osoxl lw, dkdh fkehf. Maneoi owekd oeidmd tind e lekfnsl ekdndhe ekghld ekh kdazpkw dkqmdk, dkei dlcpienc. Plekn wkdhne visle lskeih. Puyjk ekdhc wldkv she dhw slek akshemq dkekdi. Qoein keh ldkeh xldken skehf lkshe lskeh slk wlkjd iehnd hked. Youn envie dlekcmk eiddk. Ilih eihth dlieh slekf leikkiihs, dkfhflkeidm, dkdke. Shilhe fkdielfi ses ther mene.

Step One
Youn mfjfnle ekekehs kk, makskdn dkwk wkditk. Houn fhdh ekd wkw ekekl osoxl lw, dkdh fkehf. Maneoi owekd oeidmd tind e lekfnsl ekdndhe ekghld ekh kdazpkw dkqmdk,

INSTRUCTIONS
Special Instruction
Youn mfjfnle ekekehs kk, makskdn dkwk wkditk. Houn fhdh ekd wkw ekekl osoxl lw, dkdh fkehf. Maneoi owekd oeidmd tind e lekfnsl ekdndhe ekghld ekh kdazpkw dkqmdk, dkei dlcpienc. Plekn wkdhne visle lskeih. Puyjk ekdhc wldkv she dhw slek akshemq dkekdi. Qoein keh ldkeh xldken skehf lkshe lskeh slk wlkjd iehnd hked. Youn envie dlekcmk eiddk wlskdh eif ltkhd kehd lilpoih fkehf kehdls eldke, codk. wldkv she dhw slek akshemq dkekdi. Qoein keh ldkeh xldken skehf lkshe lskeh slk wlkjd iehnd hked. Youn envie dlekcmk eiddk wlskdh eif ltkhd kehd lilpoih fkehf kehdls eldke, codk.

Step Two
Youn mfjfnle ekekehs kk, makskdn dkwk wkditk. Houn fhdh ekd wkw ekekl osoxl lw, dkdh fkehf. Maneoi owekd oeidmd tind e lekfnsl ekdndhe ekghld ekh kdazpkw dkqmdk, dkei dlcpienc. Plekn wkdhne visle lskeih. Puyjk ekdhc wldkv she dhw slek akshemq dkekdi. Qoein keh ldkeh xldken skehf lkshe lskeh slk wlkjd iehnd hked. Youn envie dlekcmk eiddk.

Step One
Youn mfjfnle ekekehs kk, makskdn dkwk wkditk. Houn fhdh ekd wkw ekekl osoxl lw, dkdh fkehf. Maneoi owekd oeidmd tind e lekfnsl ekdndhe ekghld ekh kdazpkw dkqmdk, dkei dlcpienc. Plekn wkdhne visle lskeih. Puyjk ekdhc

If you got both sets of instructions, which one would be more interesting? They both have the same information, same titles, the same basic layout. The difference? The use of contrast makes the second slide stand out. The contrast came from: A more bold, reversed title More colorful and bolder subtitles A colorful clip art The easiest way to add interesting contrast is with fonts. Use of some color also easily adds contrast. Just be careful not to use so much color that the message is lost altogether. SLIDE 3

Idaho
Headline
as;ldfkjl;akjsd aslkdlkjjcmzk alksdlknvkdln alklkjejdnfknv

The Gem State

Headline
jalskdlkjnvldjd alksdlavndlnvl a;lksdnvndklm lkna;lsknvndk as;elknvndken alksjdhebjbvk aslvknsdlknvn asdlkfjalsdkjj aslfkalskdjfaj jasdljasd;lsdaj

Headline

Headline

asdfa;slkdfsafk asdfkljasdlfkjjj as;dlfjasdkjfljja asldfkjakjfkjsjfk

asldkflkcnken;l asldkm,vndldn alvkdvndndlknd alskjdlvnelkvn a;lskdjkjekjfjdk agkjhaslkdjhfns asdhjdfkljvlnsln alskjdlkjasdlkjfk asldkfjalksjflksjj asldfjlasjflasfdlja

Headline

alskdjlkjvlvnvnl slmnvndldksnal kajslkdjvnvlkdn a;lkjdmvkldnkn a;lskdjenksjekfj asdkjhvhdksjbv alskjlaskdjlnvn ;lkajsdlfjasldjlj asdf;lkjasfjlkjfja asldkfjalsjdflajfl

If you use tall, narrow columns in your presentation, have a few strong headlines to create a contrasting horizontal direction across the page. Besides the contrast in the fonts of this slide, there is also a contrast between the long, horizontal title and the tall, narrow, vertical columns. The narrow columns are a repetitive element, as well as an example of contrast. Contrast is the most dramatic of the design principles. A few simple changes can make the difference between an ordinary design and a powerful one. SLIDES 4 & 5

Bu ddys
Pet Care
Bringinyourfourleggedfriendsforapersonalsessionwithoneof ourpetcarespecialists. Buddyswillprovidegroomingservices,aswellasdaycareand weekendcarefordogs.Kennelsareavailableforshorttermuse whenpetparentsareonvacation. Thursday,December11andFriday,December12,comeoninto Buddystoreceivea25%discountcoupononallservices.Your petwillalsoreceiveabagofminibiscuitstotakehome! DosomethingspecialforyourBuddy! 234PuppyTrail,Dogwood,TN88023 (800)5551212

Buddys
Pet Care
Bringinyourfourleggedfriendsforapersonalsessionwithoneof ourpetcarespecialists.

Buddys willprovidegroomingservices,aswellasdaycare
andweekendcarefordogs.Kennelsareavailableforshort termusewhenpetparentsareonvacation.

Thursday,December11andFriday,December12,comeoninto

Buddys

toreceivea25%discountcoupononallservices.

Yourpetwillalsoreceiveabagofminibiscuitstotakehome!

Do something special for your pet at

Buddys!

234PuppyTrail,Dogwood,TN88023

(800)5551212

Although the second Buddys slide looks like a radical change from the first Buddys slide, it is just an application of the four basic principles: proximity, alignment, repetition, and contrast. One particular item of note is that a readers eye always follows the eye of anything on the page. Make sure eyes of any picture lead to the focus of the page the center.

Fonts need to be attractive to the eye. Try not to use Times Roman and Arial/Helvetica in your presentation. Flush left and flush right are much better alignments than a centered alignment. Find the most interesting or most important item on the page, and emphasize it! Contrast is not the only concept that needs to be emphasized. However, you may find that if you add contrast to your slides, the other concepts will be easier to accomplish. Contrast elements can sometimes be used as elements of repetition. Contrast on a page draws our eyes to it, our eyes like contrast. It creates interest on the page and aids in organization. You can add contrast through your font choices, line thicknesses, colors, shapes, sizes, and space. Main point about contrast: If you are going to use contrast, do it with strength. If you are putting two elements on the page, they cannot be similar. The elements must be VERY different from each other. Dont be afraid to make your graphics very bold or very minimal, as long as the result complements or reinforces your design or your attitude.

UsingColor

Color theory can be complex, so this will be a very simplified version for use in visual and web presentations. The color wheel is the most useful device when you consciously need to choose colors for a project. The color wheel begins with yellow, red, and blue. These are called the primary colors because they are the only colors you cannot create. You can mix blue and yellow to make green, or blue and red to make purple, but there is no way to mix pure yellow, red, or blue from other colors. The primary colors are spaced evenly around the wheel. SLIDE 1

Primary Colors

Secondary colors are the colors that are created by combining two primary colors. A secondary color appears in the color wheel between the two primary colors used to make it. SLIDE 2

Secondary Colors

To fill in the rest of the color wheel, there is a creation of tertiary colors by combining the secondary and primary colors. The tertiary colors fit on the wheel between the secondary and primary colors. SLIDE 3

Tertiary Colors

The primary, secondary, and tertiary colors make up the basic twelve colors of the color wheel. You can use the wheel to create combinations that work together. SLIDE 4

Basic Color Wheel

Colors directly across from each other on the color wheel, are called complements. They are the exact opposites of each other. Some of the combinations look a little strange. If you how to use the color wheel, you may use these seemingly strange combinations to create interesting presentations. SLIDE 5

Complementary Colors

A set of three colors equidistant from each other always creates a triad of pleasing colors. Red, yellow, and blue together is called the primary triad, because it uses the primary colors. You can also experiment with the secondary triad of green, orange, and purple. All triads, except the primary triad, have underlying colors connecting them, which makes them harmonize well. SLIDE 6

Another form of a triad is the split complement. Choose a color from one side of the wheel, find its complement directly across the wheel, but use the colors on each side of the complement instead of the complement itself. SLIDE 7

An analogous combination is composed of those colors that are next to each other on the wheel. No matter what two or three you combine, they all share an undertone of the same color, creating a harmonious combination. SLIDE 8

The basic color wheel shows the pure hue, or the pure color, The color wheel can be expanded by adding black or white to the various hues. The pure color is the hue. Add black to a hue to create a shade. Add white to a hue to create a tint. SLIDE 9

Basic Color Wheel

SLIDE 10 40% SHADE

SLIDE 11 30% TINT

SLIDE 12

Real Color Wheel

The real color wheel shows shades and tints that can be created. If your software program allows you to create your own colors, just add black to a color to create a shade. To make a tint use the tint slider our application provides.

A monochromatic combination is composed of one hue with any number of its corresponding tints and shades. Black and white photographs are really made using shades of black and varying shades of gray. You can use a monochromatic color scheme to add some interest in an otherwise black and white slide. SLIDE 13

Black and White Monochromatic

SLIDE 14

Monochromatic Colors

The four color relationships complements, triads, split complement triads, and analogous colors can be made more interesting by using the same amount of additional black or white to make them into shades or tints. This expands your options tremendously, but you still feel safe that the colors work together. Tone refers to the particular quality of brightness, deepness, or hue of any color. When the tones are similar, it gets a little muddy looking. SLIDES 15 & 16

Haveavery

MERRY CHRISTMAS!
The tones of these dark colors are much too close. It makes the text almost unreadable, when viewed on a computer screen.

Haveavery

MERRY CHRISTMAS!

The contrast is much better in the second slide; the contrast is a result of differences in tones.

Warm Colors vs. Cool Colors

Colors tend to be either on the warm side (which means they have some red or yellow in them) or on the cool side (which means they have some blue in them). You can warm up colors by adding more reds or yellows to them. Conversely, you can cool down colors by adding various blues to them. Cool colors recede into the background, and warm colors come to the front. You can use (sometimes you HAVE to use) more of a cool color to make an impact or to contrast effectively. It takes very little of a hot color to make an impactreds and yellow jump right into your eyes. If you combining hot colors with cool, always use less of the cool color. SLIDES 17 & 18

Outer Space Limits

A Book by Roger Ramjet

Outer Space Limits

A Book by Roger Ramjet

An excess of red is overwhelming and rather annoying. The second slide picks up the red from the knees of the astronaut in the photo to use as an accent.

How do I choose?
Sometimes it can seem overwhelming to choose colors. Start with an organized approach. Ask yourself some questions Is it a seasonal project? If so, you might want to use seasonal colors. Are there official company colors to work with? Are you working with a logo that has specific colors in it? You might want to use a split complement of its colors. Does your project include a photograph or other image? Pick up on a color in the photograph and choose a range of other colors based on that. You might want analogous colors to keep the project sedate and calm, or complementary colors to add some visual excitement. If youre working on a project that recurs regularly, you may want to make yourself a color palette that youll consistently use each time. If youre beginning a new project thats composed of a number of different pieces, try choosing your color palette before you begin. It makes the rest of your project a little easier.

CMYK and RGB

CMYK stands for Cyan (which is a blue), Magenta (which is sort of red/pink), Yellow, and a Key color, which is usually black. These four colors can be combined to print many thousands of colors, which is why its called a four-color process. CMYK colors reflect the colors in a crayon box. CMYK is the color model youll use for projects that are going to be printed by a printing press onto something physical. RGB stands for Red, Green, and Blue. RGB is what you see on your computer monitor, television, iPhone, and other technologies. In RGB, if you mix red and green you get yellow. Mix full-strength blue and red and you get hot pink. Thats because RGB is composed of beams of colored light that are not reflected

off of any physical objectit is light that goes straight from the monitor into your eyes. If you mix all the colors together you get white, and if you delete all the colors, you get black. RGB makes smaller file sizes, and some techniques in software like Photoshop work only (or best and usually faster) in RGB. Switching back and forth from CMYK to RGB loses a little data each time, so its best to work on your images in RGB and change them to CMYK as the last thing you do.

Tips and Tricks

Creating a package One of the most important features of an identity package follows the principle of repetition: there must be some identifying image or style that carries throughout every piece. Business Cards If you use a second color, consider using it sparingly. Dont stick things in the corners. Dont use Times, Arial, or Helvetica or your card will always look like its from the 1970s. Dont use 12-point type or your card will always look unsophisticated. Its okay to have empty space. Its unnecessary to have the words email and web site on your card its clear what they are. Everything on your card should be aligned with something else. Web Pages Two of the most important factors in good web design are repetition and clarity/readability. Repeat certain visual elements on every page in your web site. It provides a unifying factor to the collection of pages. Use shorter line lengths than you might use on paper.

Works Cited

Hong, J. I., Landay,J A. & VanDuyne, D.K. (2007). The Design of Sites. Upper Saddle River, NJ: Prentice Hall. Duarte, N. (2008). Slide:ology: The Art and Science of Creating Great Presentations. Sebastopol, CA: OReilly Media, Inc. Williams, R. (2008). The Non-Designers Design Book. Berkeley, CA: Peachpit Press.