+ All Categories
Home > Documents > 597 Basics of Design Final Project Plan

597 Basics of Design Final Project Plan

Date post: 07-Apr-2018
Category:
Upload: krismesler
View: 218 times
Download: 0 times
Share this document with a friend

of 41

Transcript
  • 8/3/2019 597 Basics of Design Final Project Plan

    1/41

    The Basics of DesignEdTech 597:YouTube for Educators

    by Kris Mesler

  • 8/3/2019 597 Basics of Design Final Project Plan

    2/41

    The 5 things to consider

    when creating design

    Proximity

    Alignment

    RepetitionContrast

    Use of Color

  • 8/3/2019 597 Basics of Design Final Project Plan

    3/41

    ProximityWhen 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 & 2You understand that there is a difference between information. You know thatthe last three car companies are somehow different because they are physicallyseparated from the rest of the list. Physical closeness implies a relationship.

    Car Companies Car Companies

    Toyota ToyotaHyundai HyundaiHonda HondaGMCFord GMCChrysler 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 pageby counting the number of times your eye stops.)

    SLIDES 3 & 4John Doe (800)555-1212

    Joes Bar & Grill

    123 Baker Street London, NH

    J o h n D o e (800)555-1212

    Joes Bar & Grill

    123 Baker Street London, NH

  • 8/3/2019 597 Basics of Design Final Project Plan

    4/41

    Your eyes most likely will stop every time you see a section of print, but mostlyon 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

    If you group the many items, they become one visual unit rather than separateunits. In this modified version, the title of the business and the persons name isnoticed first, followed by the address and phone number. It is easier to follow byscrolling the eyes down the page. The proximity, or the closeness, implies arelationship. The card is now organized visually and intellectually.

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

    For example:

    SLIDES 6 & 7Primary Colors Primary Colors

    blue bluered redyellow yellowTrianglesscalene Triangles

    Joes Bar & GrillJohn Doe

    123 Baker StreetLondon, NH

    (800) 555-1212

  • 8/3/2019 597 Basics of Design Final Project Plan

    5/41

    acute scaleneequilateral acuteShapes equilateralrectanglecircle Shapes square rectanglecircle

    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 aremore visually defined. Consciously group together information that belongstogether. Visually, you can show groups by using contrast and repeatingelements. Sometimes when grouping, you need to make changes in the size or

    weight or placement of text or graphics. Information that is not the mainmessage, can be much smaller font than the rest of the visual display.

    The idea of proximity doesnt mean that everything is closer together; it meanselements that are intellectually connected, those that have some sort ofcommunication relationship, should also be visually connected. Other separateelements or groups of elements should not be in close proximity. The closenessor lack thereof indicates the relationship.

    SLIDES 8 & 9

    Using proximity to organize this information, we can communicate immediatelythe who, what, and where.

    If your choice is between clear communication or amateur design, choose clearcommunication. Upgrading your design skills is a gradual process and beginswith clear communication.

    Fun with Motorcycles!

    Kawasaki

    Honda

    Yamaha

    Ducati

    Indian

    123 Auto Drive

    Road Warrior Cycles

    Harley

    Davidson

    Fun City, CA

    BMW

    Fun with Motorcycles!Road Warrior Cycles 123 Auto Drive Fun, CA

    BMW Kawasaki

    Honda Indian

    HarleyDavidson Yamaha

    Ducati

    Come ride with us!

  • 8/3/2019 597 Basics of Design Final Project Plan

    6/41

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

    SLIDES 10 & 11

    Why

    isnt phonetic spelled the way it sounds?

    Why

    are there interstate highways in Hawaii?

    Why

    do fat chance and slim chance mean the same

    thing?

    Why

    does your nose run and your feet smell?

    Why

    call it a building when its already built?

    Why

    isnt phonetic spelled the way it

    sounds?

    Why

    are there interstate highways in

    Hawaii?

    Whydo fat chance and slim chance mean

    the same thing?

    Why

    does your nose run and your feet

    smell?

    Why

    call it a building when its already

    built?

    Things to Ponder

  • 8/3/2019 597 Basics of Design Final Project Plan

    7/41

    If you move the headlines closer to the related text, there is a change showingorganization clearer, the white space is not trapped within the elements, andthere appears to be more room on the page. The alignment was also changed toflush 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 isempty.

    Dont have too many separate elements on a page.

    Another problem that can occur is the overuse of all caps. They are very hard toread, 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, movethem apart from each other.

    AlignmentItems should not be placed on a page arbitrarily. Each item should have a visual

    connection with something else on the page.

    SLIDES 1 & 2

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

    John Doe (800) 5551212

    Tan Your Buns

    123 A Street Sun City, CA

    Tan Your BunsJohn Doe

    123 A Street

    Sun City, CA

    (800) 5551212

  • 8/3/2019 597 Basics of Design Final Project Plan

    8/41

    A centered alignment often appears a bit weak. If text is aligned, instead, on theleft or the right, the invisible line that connects the text is much stronger becauseit has a hard vertical edge to follow.

    SLIDES 3 & 4

    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 useitsvery 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 sayto never use centered alignment. Just be conscious of the effect a centeredalignment has on your visual presentation.

    SLIDE 5This 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 wascentered on purpose because

    each line ends at a different place.

    This text is centered.We must work hard to

    make it look like wealigned it this way

    on purpose.

    This is an example of justified text. It is also called a blocked text. The text linesup on both sides of the paper. It is mainly used in newspapers, but can be usedeffectively if you have enough text to completely fill up a sized column or acrossthe page. If you do not have enough text to fill the gaps,

    Tan Your BunsJohn Doe

    123 A Street

    Sun City, CA

    (800) 5551212

    Tan Your BunsJohn Doe

    123 A Street

    Sun City, CA

    (800) 5551212

  • 8/3/2019 597 Basics of Design Final Project Plan

    9/41

    it leaves large gaps that are verydistracting and annoying.

    When you place items on a page, make sure each one has some visualalignment with another item on the page. If lines of text are across from eachother horizontally, align their baselines. If there are several separate blocks oftext, align their left or right edges. If there are graphic elements, align their edgeswith other edges on the page.

    Lack of alignment is the main reason for creating documents that areunappealing to the eye. If a page is well designed, you should be able to drawlines to the aligned objects, even if the presentation has a collection of manyitems.

    Occasionally you can get away with using both flush right and flush left text onthe same page, but make sure you align them in some way.

    SLIDE 6 & 7

    Sherlock HolmesSir Arthur Conan Doyle

    The complete stories

    of Englands greatest

    crime fighter

    Sherlock

    HolmesSir Arthur Conan Doyle

    The complete stories of

    Englands greatestcrime fighter

  • 8/3/2019 597 Basics of Design Final Project Plan

    10/41

    First paragraphs are traditionally not indented. The purpose of indenting aparagraph is to tell you there is a new paragraph, but you always know the firstone 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 textalong the straight edge of the photo.

    SLIDES 8 & 9

    Soccer

    The game of soccer keeps

    athletes fit by using skills like

    running, jumping, throwing,and kicking.

    Soccer athletes must also use

    different types of leverage

    in order to gain position on

    the field when confronted

    with a player of the opposite

    team.

    Soccer

    The game of soccer keeps

    athletes fit by using skills

    like running, jumping,

    throwing, and kicking.

    Soccer athletes must also use

    different types of leverage

    in order to gain position onthe field when confronted

    with a player of the oppositeteam.

  • 8/3/2019 597 Basics of Design Final Project Plan

    11/41

    Find a strong line and use it. If your alignments are strong, you can breakthrough them consciously and it will look intentional. You cannot be afraid aboutbreaking the alignment either do it all the way or dont do it at all. Dont beafraid to be asymmetrical.

    Things to avoid:

    Using more than one text alignment on the page is unattractive if you use acenter alignment with a flush left or right alignment. Try to break away from acentered alignment in all of your projects.

    RepetitionRepeat some aspect of the design throughout your presentation. It could be afont, 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. Youneed to decide how much repetition is tasteful and not overdone.

    Taking the business cards we worked on in the alignment video, we can showthat repetition can be shown with just one element, bolding a font.

    SLIDES 1 & 2

    The bold repetition also helps unify the entire design. When you reach the end ofthe 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 anexisting design and create a new design based on that one element for anotherpart of the presentation.

    Tan Your BunsJohn Doe

    123 A Street

    Sun City, CA

    (800) 5551212

    Tan Your BunsJohn Doe

    123 A Street

    Sun City, CA

    (800) 555 1212

  • 8/3/2019 597 Basics of Design Final Project Plan

    12/41

    SLIDES 3 & 4

    Buddys Pet Care

    Buddys Pet Care

  • 8/3/2019 597 Basics of Design Final Project Plan

    13/41

    Repetition is a major factor in the unity of multi-page presentations. It shouldlook obvious that the first slide, a middle slide, and the last slide tie together.

    SLIDES 5 & 6

  • 8/3/2019 597 Basics of Design Final Project Plan

    14/41

    Welcome to

    London, England

    Hqweo asdlkjejf alksjf sldkjfls

    skdek lkjfnekf lpoie tioekd,dkdkecia;sd. Aslsldk eoingncl

    sldkp ldken kiken kdldkejslzle,

    clslkjeldkcjv dlekjsjc, sldkfj inels

    lkjdidf. Slwiek vkdieh dkehe

    vliht sleidk dkeld. Theickv

    dkeolic eidhtld xeodiv. Uekgnb

    dolvke dlekfn pleisk eidkfh sldke

    a el deekek cifbjek ejhf dkhelvk.

    Eidka vlekdv opoiekdic eicndtine idme.

    Waslei bir djeoskdk vkdienv

    slekcn viekvnoe slienv dlendi.

    Roken biekd sowi eudj qiejd b

    kjgh wudjvv skcu sjd e fhe dhdh

    eifg.

    A Bridge Too FarHqweo asdlkjejf alksjf sldkjfls

    skdek lkjfnekf lpoie tioekd,

    dkdkecia;sd. Aslsldk eoingncl

    sldkp ldken kiken kdldkejslzle,

    clslkjeldkcjv dlekjsjc, sldkfj inels

    lkjdidf. Slwiek vkdieh dkehe

    vliht sleidk dkeld. Theickv

    dkeolic eidhtld xeodiv. Uekgnb

    dolvke dlekfn pleisk eidkfh sldke

    a el deekek cifbjek ejhf dkhelvk.

    Eidka vlekdv opoiekdic eicnd

    tine idme.

    Waslei bir djeoskdk vkdienv

    slekcn viekvnoe slienv dlendi.

    Westminster Bridge, London, England

    The Visitors GuideHqweo asdlkjejf alksjf sldkjfls

    skdek lkjfnekf lpoie tioekd,

    dkdkecia;sd. Aslsldk eoingncl

    sldkp ldken kiken kdldkejslzle,

    clslkjeldkcjv dlekjsjc, sldkfj inels

    lkjdidf. Slwiek vkdieh dkehe

    vliht sleidk dkeld. Theickv

    dkeolic eidhtld xeodiv. Uekgnb

    dolvke dlekfn pleisk eidkfh sldkea el deekek cifbjek ejhf dkhelvk.

    Eidka vlekdv opoiekdic eicnd

    tine idme.

    Waslei bir djeoskdk vkdienv

    slekcn viekvnoe slienv dlendi.

    Roken biekd sowi eudj qiejd b

    kjgh wudjvv skcu sjd e fhe dhdh

    eifg.

    Nokvne idken tighel lsikjemodkleik inf lsiek tget hen kems

    ldke kili lkjejltkg, dmdin iekdlc .

    Ik lidk lekhse dkehflkj a d ekfjl

    skt.

  • 8/3/2019 597 Basics of Design Final Project Plan

    15/41

    Buckingham Palace, London, England

    Buckingham Palace

    Hqweo asdlkjejf alksjf sldkjfls

    skdek lkjfnekf lpoie tioekd,

    dkdkecia;sd. Aslsldk eoingncl

    sldkp ldken kiken kdldkejslzle,

    clslkjeldkcjv dlekjsjc, sldkfj inels

    lkjdidf. Slwiek vkdieh dkehe

    vliht sleidk dkeld. Theickv

    dkeolic eidhtld xeodiv. Uekgnb

    dolvke dlekfn pleisk eidkfh sldke

    a el deekek cifbjek ejhf dkhelvk.

    Eidka vlekdv opoiekdic eicndtine idme.

    Waslei bir djeoskdk vkdienv

    slekcn viekvnoe slienv dlendi.

    Roken biekd sowi eudj qiejd b

    kjgh wudjvv skcu sjd e fhe dhdh

    eifg.

    The Underground

    Hqweo asdlkjejf alksjf sldkjfls

    skdek lkjfnekf lpoie tioekd,

    dkdkecia;sd. Aslsldk eoingncl

    sldkp ldken kiken kdldkejslzle,

    clslkjeldkcjv dlekjsjc, sldkfj inels

    The London Eye

    Hqweo asdlkjejf alksjf sldkjfls

    skdek lkjfnekf lpoie tioekd,

    dkdkecia;sd. Aslsldk eoingnclsldkp ldken kiken kdldkejslzle,

    clslkjeldkcjv dlekjsjc, sldkfj inels

    lkjdidf. Slwiek vkdieh dkehe

    vliht sleidk dkeld. Theickv

    dkeolic eidhtld xeodiv. Uekgnb

    dolvke dlekfn pleisk eidkfh sldke

    a el deekek cifbjek ejhf dkhelvk.

    Eidka vlekdv opoiekdic eicnd

    tine idme.

    Waslei bir djeoskdk vkdienv

    slekcn viekvnoe slienv dlendi.

    Roken biekd sowi eudj qiejd b

    kjgh wudjvv skcu sjd e fhe dhdh

    eifg.

    London Eye, London, England

  • 8/3/2019 597 Basics of Design Final Project Plan

    16/41

    Note that the text does not completely fill to the bottom of the page. All text neednot align at the bottom if there is a consistent, repetitive starting point at the topof the page.

    Other observations of the two slides will also reveal:

    Consistent double rule on both pagesConsistent typeface in headlines and subheads, and consistent spaceabove eachA single rule repeats across the bottom of each pageAll stories or photos or illustrations start at the same guideline across thetop of each page

    The purpose of repetition is to unify and to add visual interest. Repetition isconsistent. It serves as an accent to the text and illustrations that appear.

    Avoid repeating an element so much that it becomes annoying or overwhelming.

    ContrastContrast is created when two elements are different. If two elements are tooclose in resemblance to each other, it is not contrast, but conflict. For contrast tobe effective, it must be strong.

    Contrast can be created in many ways, including large and small font, oldstyleand modern font, cool and warm color, thin and thick line, smooth and roughtexture, horizontal and vertical element, small graphic with large graphic. If twothings are not exactly the same, then make them VERY different.

    SLIDES 1 & 2

  • 8/3/2019 597 Basics of Design Final Project Plan

    17/41

    INSTRUCTIONS

    Special

    InstructionsYoun mfjfnle ekekehs kk,

    makskdn dkwk wkditk. Hounfhdh 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 slkwlkjd iehnd hked.

    Youn envie dlekcmk eiddk

    wlskdh eif ltkhd kehd lilpoih

    fkehf kehdls eldke, codk.

    Step OneYoun 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.

    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 slkwlkjd iehnd hked.

    Youn envie dlekcmk eiddk.

    Ilih eihth dlieh slekf leikkiihs,

    dkfhflkeidm, dkdke. Shilhe

    fkdielfi ses ther mene.

  • 8/3/2019 597 Basics of Design Final Project Plan

    18/41

    INSTRUCTIONS

    Special

    InstructionYoun 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 eiddkwlskdh eif ltkhd kehd lilpoih

    fkehf kehdls eldke, codk.

    Step OneYoun mfjfnle ekekehs kk,

    makskdn dkwk wkditk. Hounfhdh 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.

    Step TwoYoun mfjfnle ekekehs kk,

    makskdn dkwk wkditk. Houn

    fhdh ekd wkw ekekl osoxl lw,

    dkdh fkehf. Maneoi owekd

    oeidmd tind e lekfnsl ekdndheekghld 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.

  • 8/3/2019 597 Basics of Design Final Project Plan

    19/41

    If you got both sets of instructions, which one would be more interesting? Theyboth have the same information, same titles, the same basic layout. Thedifference? The use of contrast makes the second slide stand out.

    The contrast came from:

    A more bold, reversed titleMore colorful and bolder subtitlesA colorful clip art

    The easiest way to add interesting contrast is with fonts. Use of some color alsoeasily adds contrast. Just be careful not to use so much color that the messageis lost altogether.SLIDE 3

    The Gem StatedahoHeadline Headline Headline Headlineas;ldfkjl;akjsd asldkflkcnken;l alskdjlkjvlvnvnl jalskdlkjnvldjd

    aslkdlkjjcmzk asldkm,vndldn slmnvndldksnal alksdlavndlnvlalksdlknvkdln alvkdvndndlknd kajslkdjvnvlkdn a;lksdnvndklm

    alklkjejdnfknv alskjdlvnelkvn a;lkjdmvkldnkn lkna;lsknvndk

    a;lskdjkjekjfjdk a;lskdjenksjekfj as;elknvndken

    Headline agkjhaslkdjhfns asdkjhvhdksjbv alksjdhebjbvkasdfa;slkdfsafk asdhjdfkljvlnsln alskjlaskdjlnvn aslvknsdlknvn

    asdfkljasdlfkjjj alskjdlkjasdlkjfk ;lkajsdlfjasldjlj asdlkfjalsdkjj

    as;dlfjasdkjfljj a asldkfjalksjflksjj asdf;lkjasfjlkjfja aslfkalskdjfaj

    asldfkjakjfkjsjfk asldfjlasjflasfdlja asldkfjalsjdflajfl jasdljasd;lsdaj

  • 8/3/2019 597 Basics of Design Final Project Plan

    20/41

    If you use tall, narrow columns in your presentation, have a few strong headlinesto create a contrasting horizontal direction across the page.

    Besides the contrast in the fonts of this slide, there is also a contrast between thelong, horizontal title and the tall, narrow, vertical columns. The narrow columnsare a repetitive element, as well as an example of contrast.

    Contrast is the most dramatic of the design principles. A few simple changes canmake the difference between an ordinary design and a powerful one.

    SLIDES 4 & 5

    BuddysPet Care

    Bring in your fourlegged friends for a personal session with one of

    our pet care specialists.

    Buddys will provide grooming services, as well as daycare and

    weekend care for dogs. Kennels are available for shortterm use

    when pet parents are on vacation.

    Thursday, December 11 and Friday, December 12, come on in to

    Buddys to receive a 25% discount coupon on all services. Your

    pet will also receive a bag of minibiscuits to take home!

    Do something special for your Buddy!

    234 Puppy Trail, Dogwood, TN 88023(800) 5551212

  • 8/3/2019 597 Basics of Design Final Project Plan

    21/41

    Although the second Buddys slide looks like a radical change from the firstBuddys 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 ofanything on the page. Make sure eyes of any picture lead to the focus of thepage the center.

    BuddysPet Care

    Bring in your fourlegged friends for a personal session with one of

    our pet care specialists.

    Buddys will provide grooming services, as well as daycareand weekend care for dogs. Kennels are available for shortterm use when pet parents are on vacation.

    Thursday, December 11 and Friday, December 12, come on in to

    Buddysto receive a 25% discount coupon on all services.Your pet will also receive a bag of minibiscuits to take home!

    Do something special for your pet atBuddys!234 Puppy Trail, Dogwood, TN 88023 (800) 555 1212

  • 8/3/2019 597 Basics of Design Final Project Plan

    22/41

    Fonts need to be attractive to the eye. Try not to use Times Roman andArial/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, youmay find that if you add contrast to your slides, the other concepts will be easierto accomplish. Contrast elements can sometimes be used as elements ofrepetition.

    Contrast on a page draws our eyes to it, our eyes like contrast. It creates intereston the page and aids in organization. You can add contrast through your fontchoices, 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 twoelements on the page, they cannot be similar. The elements must be VERYdifferent from each other.

    Dont be afraid to make your graphics very bold or very minimal, as long as theresult complements or reinforces your design or your attitude.

  • 8/3/2019 597 Basics of Design Final Project Plan

    23/41

    Using ColorColor theory can be complex, so this will be a very simplified version for use invisual and web presentations.The color wheel is the most useful device when you consciously need to choosecolors for a project. The color wheel begins with yellow, red, and blue. Theseare 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, butthere is no way to mix pure yellow, red, or blue from other colors. The primarycolors are spaced evenly around the wheel.

    SLIDE 1Primary Colors

  • 8/3/2019 597 Basics of Design Final Project Plan

    24/41

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

    SLIDE 2Secondary Colors

  • 8/3/2019 597 Basics of Design Final Project Plan

    25/41

    To fill in the rest of the color wheel, there is a creation of tertiary colors bycombining the secondary and primary colors. The tertiary colors fit on the wheelbetween the secondary and primary colors.

    SLIDE 3

    Tertiary Colors

  • 8/3/2019 597 Basics of Design Final Project Plan

    26/41

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

    together.

    SLIDE 4Basic Color Wheel

  • 8/3/2019 597 Basics of Design Final Project Plan

    27/41

    Colors directly across from each other on the color wheel, are calledcomplements. 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 interestingpresentations.

    SLIDE 5

    Complementary Colors

  • 8/3/2019 597 Basics of Design Final Project Plan

    28/41

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

    SLIDE 6

  • 8/3/2019 597 Basics of Design Final Project Plan

    29/41

    Another form of a triad is the split complement. Choose a color from one side ofthe 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

  • 8/3/2019 597 Basics of Design Final Project Plan

    30/41

    An analogous combination is composed of those colors that are next to eachother 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

  • 8/3/2019 597 Basics of Design Final Project Plan

    31/41

    The basic color wheel shows the pure hue, or the pure color, The color wheelcan 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

  • 8/3/2019 597 Basics of Design Final Project Plan

    32/41

    SLIDE 10 40% SHADE

  • 8/3/2019 597 Basics of Design Final Project Plan

    33/41

    SLIDE 11 30% TINT

  • 8/3/2019 597 Basics of Design Final Project Plan

    34/41

    SLIDE 12 Real Color Wheel

    The real color wheel shows shades and tints that can be created. If yoursoftware 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.

  • 8/3/2019 597 Basics of Design Final Project Plan

    35/41

    A monochromatic combination is composed of one hue with any number of itscorresponding tints and shades. Black and white photographs are really madeusing shades of black and varying shades of gray. You can use amonochromatic color scheme to add some interest in an otherwise black andwhite slide.

    SLIDE 13 Black and White Monochromatic

  • 8/3/2019 597 Basics of Design Final Project Plan

    36/41

    SLIDE 14 Monochromatic Colors

  • 8/3/2019 597 Basics of Design Final Project Plan

    37/41

    The four color relationships complements, triads, split complement triads, andanalogous colorscan be made more interesting by using the same amount ofadditional black or white to make them into shades or tints. This expands youroptions 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

    The tones of these dark colors are much too close. It makes the text almostunreadable, when viewed on a computer screen.

    Have a very

    MERRY

    CHRISTMAS!

    Have a very

    MERRYCHRISTMAS!

  • 8/3/2019 597 Basics of Design Final Project Plan

    38/41

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

    Warm Colors vs. Cool ColorsColors tend to be either on the warm side (which means they have some red oryellow 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. Youcan use (sometimes you HAVE to use) more of a cool color to make an impact orto contrast effectively. It takes very little of a hot color to make an impactredsand 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

  • 8/3/2019 597 Basics of Design Final Project Plan

    39/41

    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 touse as an accent.

    How do I choose?Sometimes it can seem overwhelming to choose colors. Start with an organizedapproach.

    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 thephotograph and choose a range of other colors based on that. You might wantanalogous colors to keep the project sedate and calm, or complementary colorsto add some visual excitement.

    If youre working on a project that recurs regularly, you may want to makeyourself a color palette that youll consistently use each time.

    If youre beginning a new project thats composed of a number of differentpieces, try choosing your color palette before you begin. It makes the rest of

    your project a little easier.

    CMYK and RGBCMYK 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 becombined to print many thousands of colors, which is why its called a four-colorprocess. CMYK colors reflect the colors in a crayon box. CMYK is the colormodel youll use for projects that are going to be printed by a printing press ontosomething physical.

    RGB stands for Red, Green, and Blue. RGB is what you see on your computermonitor, television, iPhone, and other technologies. In RGB, if you mix red andgreen 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

  • 8/3/2019 597 Basics of Design Final Project Plan

    40/41

    off of any physical objectit is light that goes straight from the monitor into youreyes. If you mix all the colors together you get white, and if you delete all thecolors, you get black.

    RGB makes smaller file sizes, and some techniques in software like Photoshopwork only (or best and usually faster) in RGB. Switching back and forth fromCMYK to RGB loses a little data each time, so its best to work on your images inRGB and change them to CMYK as the last thing you do.

    Tips and TricksCreating a packageOne of the most important features of an identity package follows the principle ofrepetition: there must be some identifying image or style that carries throughoutevery piece.

    Business CardsIf 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 itsfrom 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 PagesTwo of the most important factors in good web design are repetition andclarity/readability.Repeat certain visual elements on every page in your web site. It providesa unifying factor to the collection of pages.Use shorter line lengths than you might use on paper.

  • 8/3/2019 597 Basics of Design Final Project Plan

    41/41

    Works Cited

    Hong, J. I., Landay,J A. & VanDuyne, D.K. (2007). The Design of Sites. UpperSaddle River, NJ: Prentice Hall.

    Duarte, N. (2008). Slide:ology: The Art and Science of Creating GreatPresentations. Sebastopol, CA: OReilly Media, Inc.

    Williams, R. (2008). The Non-Designers Design Book. Berkeley, CA: PeachpitPress.


Recommended