Presentation

DPS Training 2009

Melissa Holcombe Sarah Markland Tony Nunn

Tasmanian Polytechnic and Sublime Studio

1. creative thinking

2. images part one

3. images part two

4. colour

5. space

6. tweaking

7. fonts

8. finishing

programme

abilit

y

proc

ess

rese

arch

analy

sis

thum

bnail

typo

grap

hyim

ager

yco

mpo

sitio

nm

etho

d

style

abilit

y

proc

ess

rese

arch

analy

sis

thum

bnail

typo

grap

hyim

ager

yco

mpo

sitio

nm

etho

d

style

an ability •to imagine/invent something new

•to generate new ideas by combining, changing or reapplying existing ideas

abilit

y

proc

ess

rese

arch

analy

sis

thum

bnail

typo

grap

hyim

ager

yco

mpo

sitio

nm

etho

d

style

a process •creative people work hard, continually improving

ideas and solutions•making gradual alterations and refinements

abilit

y

proc

ess

rese

arch

analy

sis

thum

bnail

typo

grap

hyim

ager

yco

mpo

sitio

nm

etho

d

style

research & discovery •don’t jump into a project or task without examining it•the job, big or small can benefit from research and planning•time spent on this phase is usually proportional to scope and

planned duration

abilit

y

proc

ess

rese

arch

analy

sis

thum

bnail

typo

grap

hyim

ager

yco

mpo

sitio

nm

etho

d

style

competitive analysis •identifying strengths and weaknesses of existing designs

abilit

y

proc

ess

rese

arch

analy

sis

thum

bnail

typo

grap

hyim

ager

yco

mpo

sitio

nm

etho

d

style

thumbnail sketching •thumbnails are small sketches•intended to capture basic ideas of page composition:

header placement, column structure, text alignment•don’t be tempted to focus on small details early in the process•thumbnails are like icons for thoughts

abilit

y

proc

ess

rese

arch

analy

sis

thum

bnail

typo

grap

hyim

ager

yco

mpo

sitio

nm

etho

d

style

typography •typography affects the overall formality or informality of a design

abilit

y

proc

ess

rese

arch

analy

sis

thum

bnail

typo

grap

hyim

ager

yco

mpo

sitio

nm

etho

d

style

imagery •not always necessary in a design•some of the most beautiful designs use typography alone

abilit

y

proc

ess

rese

arch

analy

sis

thum

bnail

typo

grap

hyim

ager

yco

mpo

sitio

nm

etho

d

style

composition •overuse of photography and illustration creates crowded, chaotic

designs that obscures viewers from the intention and message

abilit

y

proc

ess

rese

arch

analy

sis

thum

bnail

typo

grap

hyim

ager

yco

mpo

sitio

nm

etho

d

style

why have a method? •allows consistent creative process enabling you to make deadlines

ensuring happy clients

abilit

y

proc

ess

rese

arch

analy

sis

thum

bnail

typo

grap

hyim

ager

yco

mpo

sitio

nm

etho

d

style

establish the style •what’s your target audience?•does the type and imagery fit the style for the target audience?•think cultural references that appeal to the target audience

1 define the design problem• who?• what?• when?• where?• why?• how?

2 investigate• research• analyse information

create your own resources library

typefaces for all kinds of clients www.dafont.com

stock photo libraries www.sxc.hu (free)

colour themes, associations & meaningsswatch palette suggestions: adobe kulerkuler.adobe.com

3 generate ideas• brainstorm• make lists• make sketches

basic guidelines for brainstormingBrainstorming is useful for attacking specific problems and where a collection of good, fresh and new ideas are needed.

Brainstorming can take place either individually or in a group of two to ten, with four or seven being ideal.

suspend judgementIdeas are said, no critical comment is allowed, all ideas are written down.

“To think creatively and criticise at the same time is like watering and pouring weed killer onto seedlings at the same time.”

think freelyWild, impossible, and unthinkable thoughts are fine. Thinking outside the boundaries of ordinary, normal thought, brilliant solutions can arise.

tag onImprove, modify, build on the ideas of others.

quantity of ideas is important Generate a large stock of ideas so that later on they can be sifted through.

•design scrapbook, place to dump ideas and experiment

•develop creativity over time

•storage for scraps/sketches and ideas that are valuable but scribbles on torn

or otherwise occupied paper

•non-conventional journal entries can inspire and extend creativity

eg: painting, drawing, sketching (although it is very important not to waste too

much time on your journal instead of your artwork)

•entries can be easily revised and used as possible content/inspiration

for later work

•keeping a journal close at hand to record any unexpected ideas or thoughts

•thumbnailing

• as a studio, establish a design scrapbook

• entries can be easily revised and used

evaluate the design solution• if steps 1-3 in the creative checklist have been accomplished a design solution will be apparent• does the solution solve the design problem?• does it need to be redesigned or modified?• what improvements would I make?

1 Is the layout simple?• Can elements of a design be removed whilst still getting the message across?

2 Does the layout hold together?• Test by squinting at the design. Is it seen as a single unified whole?

3 Does the most important element dominate?• What catches the eye first?

4 Logical, obvious visual flow• Does eye flow from one element to the next?• Quickly show the design to someone. What is the first thing they see? Is that what you want?

5 Are the graphic elements visually balanced?• Where is it heavy?• Where is it light?• Is the design top heavy, or the opposite?• What is the item next to the heavy spot?• Is that where you want the viewer to look next?

6 Is the space attractive?• Is something too big or small?• Are there holes in the layout?• Does everything look eye sweet?

7 Is there white space?• Is it positioned correctly?• Is it balanced with the rest of the design elements?

8 Do the headlines have impact?• Broken correctly for quick reading?• When read aloud, does it sound right?• Is the illustration appropriate?• Do the visuals support the personality of the message?• Does it have a message, and is it the correct message?

8 Is there a visual storyline?• Is there a logical visual order, can the reader be comfortably led through the visual?

Thank you for travelling with us.

Please retain your ticket for the next boarding.

placement

eye path

figure/ground

rule of thirds

design principles

design elements

design elements

colourHas three properties: hue, intensity and value.

valueThe lightness or darkness.

lineStraight, curved, thick, thin, solid, dashed, dotted, blurred, fuzzy, etc.

shapeLines that join.

formatA design’s relationship to its border.

textureFlat, glossy, wet, furry, sandy, leathery, etc.

design principles

balanceThe way elements are arranged.

emphasisDominance given to an element.

harmonyA union of aesthetically compatible elements.

movementProduces the look of action.

pattern/rhythmRepetition of an element.

proportionRelationship of one part to another.

tensionCapable of causing anxiety or excitement.

unityCombination of all elements into one whole.

varietyThe use of diversity.

rule of thirds

golden sectionThe Fibonacci sequence is a number sequence in which each number is the sum of the two previous numbers. The golden section is a measurement divided by Phi 1.618 which produces the larger of the two golden sections.

1+1+2+3+5+8+13+21+34+55+89+144+233+377

rule of thirdsThe rule of thirds states that by dividing a design with two evenly spaced horizontal and vertical lines to create 9 parts, the intersections of these lines are the most preferred focal points of a design. This is because at these points, the eye has the best perception of the main object in relation to the surrounding objects.

rule of thirdsBy applying the rule of thirds to your artwork, you can stress the focal point.

figure/ground

figure/groundThe cognitive ability to separate elements.

eyepath

eyepathThe eye follows the path you create.

placement

placementCentred.

placementOff centre.

placementAlong an edge.

placementCover the whole ad.

placementCropped off by the format.

placementRotated.

read

abilit

y

valu

e

image manipulation

type selection

readability

readabilityUsing type over images effectively.

readability

readabilityPlacing a solid shape under type.

readabilityIs it meant to be read?

valueValue gives emphasis to type.

image manipulation

image manipulationUse Photoshop

image manipulationUse inDesign

image manipulationUse both

type selection

type selectionType should suit the image.

type selection

type selectionPoint size, leading, line length, tracking and kerning.

Use of colourCreating colour schem

esThe colour wheel

Colour harmonies

Warm

& cool colours

Colour associations

Use of colour Colour is one of the most important elements of design.

It evokes emotions and has deeppsychological and cultural associations. It is important as a designer to use these to create an association between your client and their target audience.

Cool colours

Warm colours

The colour wheel is the most basic tool for creating harmonious colour schemes. It can be divided into two distinct colour schemes, cool and warm.

White, black and greys are considered neutral colour schemes.

Colour schemes are formed in relation to the colour’s position on the wheel.

Analogous Split Complementary

Complimentary

Triad Tetrad

Square

Launceston’s largest range of pool and spa options 128 Invermay Road, Launceston . 6300 4455

www.prestigepools.com.au

ALPINE

Everything you need to get outdoors.

108 Charles St Launceston · 6326 4848

Tasmania’s largest range of outdoor gear.

The true experience of Australia’s vast and beautiful outback.

108 Grenfell Street, Adelaide · (08) 8422 7799 · www.spinifex.com.au

e xc lu si v e

autos

want one?

118 Hobart Road, Launceston · 6340 5590www.exclusiveautos.com.au

hot funfast activepassion adrenalineattention grabbing stimulates appetite

brightcheerful noticableenergeticoptimisticimaginative

warmgentle informalcomfortingenthusiasmaffordable/cheapappealing to children

calmfertilerestfulnaturalhealthyyouthfulrefreshingenvironmental

coolcalmserenetranquilrelaxingspiritualpeacefultrustworthy

securedignifiedconfidentexpensive prestigiousdependableprofessionalbusinesslike

regalqualitywisdomopulenceexclusiveluxuriousceremonial

cutesweetlovingcaringtranquilcalmingfeminineromantic

strongsolemnmodernpowerfulintelligentauthoritativesophisticationalways in fashion!

securitystabilitysuccessaffluenceneutralityprofessionalism

rusticearthynaturalmatureoutdoorswholesomeenvironmental

Colour associations are widely used in developing brand identites.

natural, refreshing fun, imaginative

strong, sophisticated, fashionable

attention grabbing, stimulates appetite, fun

macro/micro space

whitespace space in design

space using type

economising space

space in design

space in designEfficiently using space in design.

space in designSpace is added to a design to emphasize information.

space in designBalance

space in designHarmony

whitespace

whitespaceWhitespace shouldn’t be considered blank or empty space.

whitespaceUsing whitespace can eliminate the chance of a design appearing busy and cluttered.

whitespaceUsing whitespace can make a design easier to read.

macro/micro space

macro/micro spaceMacro space is the space between majorelements in a design.

macro/micro spaceMicro space is the space between smaller elements.

macro/micro spaceUsing macro and/or micro space can be a subtle way to enhance a design.

space using type

space using typeSpace can be applied to a design through the use of margins and leading.

space using typeSpace can also be applied through the correct use of type family and weight.

space using typeType hierarchy.

economising space

economising spaceSet up a basic grid.

economising spaceUse margins.

economising spaceChoose the correct point size.

economising spaceChoose correct leading, kerning and tracking.

Estibea dipsus que vel ipsandunt volupta volupta esequas am ut et quiae rerae molent et, voluptionse nonsedione dolore voloritem auditati re audae at ad mo quidele nisque etur?Conseque verum aut atiasperspid es veligen imporia ea sa sitia nullicit por re que volent, id mod maximi, omnimin ulparchillor aut laut iunt, sus alis de nis perferum vendus et perem facerum quamenis aut re volupid quam, audaeribus. Dus, sed magnis est, suntis consers pidelle nistrum re enihiciis alicitis expliaepra coratiatiam aborepra et pressin nis nimusdae. Nem event, utatquos .

Estibea dipsus que vel ipsandunt volupta volupta esequas am ut et quiae rerae molent et, voluptionse nonsedione dolore voloritem auditati re audae at ad mo quidele nisque etur?Conseque verum aut atiasperspid es veligen imporia ea sa sitia nullicit por re que volent, id mod maximi, omnimin ulparchillor aut laut iunt, sus alis de nis perferum vendus et perem facerum quamenis aut re volupid quam, audaeribus. Dus, sed magnis est, suntis consers pidelle nistrum re enihiciis alicitis expliaepra coratiatiam aborepra et pressin nis nimusdae. Nem event, utatquos .

leading

kerning and tracking

TypographyTypographyTypography

economising spaceCrop images.

economising spaceUse whitespace.

economising spaceUse your creativity.

1. Creative Thinking

Ability ................................................... 5Process ................................................. 6Research ............................................... 7Analysis ................................................ 8Thumbnail ............................................. 9Typography ..........................................10Imagery ...............................................11Composition .........................................12Method ................................................13Style ...................................................14Creative Checklist .................................15Define the Design Problem .....................16Investigate ...........................................17Own Resource Library ............................18Typefaces for Clients .............................19Stock Photo Library ............................... 20Colour Themes & Meanings..................... 21Generate Ideas ..................................... 22Brainstorming ....................................... 23Basic Guidelines .................................... 24Suspend Judgement .............................. 25Think Freely ......................................... 26Tag On ................................................. 27Quantity of Ideas .................................. 28Resources Library ................................. 29Visual Diary .......................................... 30Thought Process ................................... 31Plan ..................................................... 32Design Scrapbook ................................. 33Evaluate Design ....................................34Proof Reading ....................................... 35Simple Layout ....................................... 36Layout Hold .......................................... 37Dominate Element ................................. 38Visual Flow ........................................... 39Visual Balance ...................................... 40Attractive Space ....................................41Whitespace........................................... 42Headlines Impact .................................. 43Visual Storyline ..................................... 44Suica ....................................................45

2. Images : Part OnePart One : Images ..................................46Design Elements ....................................47Colour...................................................48Value ....................................................49Line ......................................................50Shape ...................................................51Format ..................................................52Texture .................................................53Design Principles ....................................54Balance .................................................55Emphasis ..............................................56

Harmony ...............................................57Movement .............................................58More Movement .....................................59Pattern and Rhythm ...............................60Proportion ............................................. 61Tension .................................................62Unity ....................................................63Variety ..................................................64Rule of Thirds ........................................65Golden Section ......................................66Thirds Rule ............................................67Focal Point ............................................68Figure and Ground .................................69Seperate Elements .................................70Eyepath ................................................71Eyepath Creation ...................................72Placement .............................................73 - Centred .............................................74 - Off Centre ..........................................75 - Edge .................................................76 - Whole Ad ...........................................77 - Cropped .............................................78 - Rotated .............................................79 - Suica .................................................80

3. Images : Part Two

Part Two Images ....................................81Readability ............................................82Type over Images ...................................83I Love this Town .....................................84Solid Shape under Type...........................85Meant to be Read ...................................86Value ....................................................87Emphasis to Type ...................................88Earthquake ............................................89Street Edition ........................................90Image Manipulation ................................91Use Photoshop .......................................92Use InDesign .........................................93Photoshop and InDesign combined ...........94Type Selection .......................................95Type Suit ...............................................96Caulfied Race .........................................97Point size, Leading, Line Length, ...............Tracking and Kerning. .............................98Suica ....................................................99

4. Colour...........................................................100Use of Colour ........................................ 101Colour Schemes ....................................102Colour Wheel ........................................103Colour Deal ..........................................104Harmonious Colour Schemes ..................105Colour Harmonies ..................................106Colour Relationships ..............................107

Forms of Colour ....................................108Warm and Cool Colours ..........................109Cool Colour Chart .................................. 110Prestige Pools ....................................... 111Alpine .................................................. 112Warm Colour Chart ................................113Spinifex ............................................... 114Ferrari ................................................. 115Colour Associations ............................... 116Colour Associations in Western Culture .... 117Red Colour ........................................... 118Yellow Colour ........................................ 119Orange Colour ......................................120Green Colour ........................................121Light Blue Colour ...................................122Blue Colour ..........................................123Purple Colour ........................................124Pink Colour ...........................................125Black Colour .........................................126Grey Colour ..........................................127Brown Colour ........................................128Colour with Brand Identity .....................129Coca-Cola and Dolce & Gabbana .............130McDonald’s Logo Colour Comparison ........131Suica ...................................................132

5. Space...........................................................133Space in Design ....................................134Efficiently using Space ...........................135Why add Space to a Design? ...................136Balance ................................................137Harmony ..............................................138WhiteSpace ..........................................139Is it Blank or Empty Space? ....................140Using Whitespace .................................. 141Whitespace with Readabilty .................... 142Macro or Micro Space ............................ 143Macro Space Definition ..........................144Micro Space Definition ........................... 145Using Macro/Micro Space .......................146Space Using Type .................................. 147Space, Margins and Leading ...................148Other ways to use Space ........................ 149Type hierarchy ......................................150Economising Space ................................151Set up a basic Grid ................................152Use Margins ..........................................153Point Size .............................................154Leading, Kerning and Tracking ................155Crop Images .........................................156Use whitespace .....................................157Creativity .............................................158Suica .....................................................

Please retain your ticketfor the next boarding. ............................159

Index

Presentation

Design

Transcript of Presentation