Communication Design Created by J. Shannon Info from “The Non-Designers Design Book” by Robin...
-
Upload
crystal-jasmin-tate -
Category
Documents
-
view
215 -
download
0
Transcript of Communication Design Created by J. Shannon Info from “The Non-Designers Design Book” by Robin...
Communication DesignCommunication Design
Created by J. ShannonCreated by J. ShannonInfo from “The Non-Designers Design Book” Info from “The Non-Designers Design Book”
by Robin Williams, 3by Robin Williams, 3rdrd edition, 2008 edition, 2008
Communication DesignCommunication Design
Communication design includes both Communication design includes both elements of design and information elements of design and information in such things as printed, crafted, in such things as printed, crafted, electronic media or presentations to electronic media or presentations to communicate and idea with people. communicate and idea with people.
Four Basic PrinciplesFour Basic Principles
ProximityProximity AlignmentAlignment RepetitionRepetition ContrastContrast
ProximityProximity
Group related things together. Group related things together. This helps toThis helps to
• organization informationorganization information• reduce clutterreduce clutter• gives a clear structuregives a clear structure
No ProximityNo Proximity
How many times does your eye stop to look at How many times does your eye stop to look at something (separate elements )?something (separate elements )?
Where do you begin reading?Where do you begin reading? What do you read next?What do you read next? Do you wander around making sure you didn’t Do you wander around making sure you didn’t
miss anything?miss anything?
No ProximityNo Proximity
Now that there is a bolded word, what do Now that there is a bolded word, what do you look at first? Second?you look at first? Second?
Do you know when you are finished?Do you know when you are finished?
Proximity workingProximity working
Proximity or closeness implies a relationshipProximity or closeness implies a relationship Where do you begin to read?Where do you begin to read? Where do your eyes go next?Where do your eyes go next? Do you know when you are finished?Do you know when you are finished?
Expressing information Graphically by Expressing information Graphically by grouping. Good and Bad Examplegrouping. Good and Bad Example
CorrespondencesCorrespondences Flowers, herbs, trees, weeds, ancient Flowers, herbs, trees, weeds, ancient
Greek and Romans Historical Greek and Romans Historical CharactersCharacters
Quotes on motifsQuotes on motifs WomenWomen DeathDeath MorningMorning SnakesSnakes LanguageLanguage Iambic pentameterIambic pentameter Rhetorical DevicesRhetorical Devices Poetic devicesPoetic devices First linesFirst lines CollectionsCollections Small printingsSmall printings KitschyKitschy DingbatsDingbats ThematicThematic Williams and saintsWilliams and saints Drinks and recipesDrinks and recipes Music Music QuizzesQuizzes Fun but difficult quizzesFun but difficult quizzes
CorrespondencesCorrespondences Flowers, herbs, trees, weeds, ancient Greek Flowers, herbs, trees, weeds, ancient Greek
and Romans Historical Charactersand Romans Historical Characters
Quotes on motifsQuotes on motifs WomenWomen DeathDeath MorningMorning SnakesSnakes
LanguageLanguage Iambic pentameterIambic pentameter Rhetorical DevicesRhetorical Devices Poetic devicesPoetic devices First linesFirst lines
CollectionsCollections Small printingsSmall printings KitschyKitschy DingbatsDingbats
ThematicThematic Williams and saintsWilliams and saints Drinks and recipesDrinks and recipes Music Music
QuizzesQuizzes Fun but difficult quizzesFun but difficult quizzes
Proximity Means Clear CommunicationProximity Means Clear Communication
Organize the visual elements of the Organize the visual elements of the pagepage
More than 3-5 visual elements on a More than 3-5 visual elements on a page adds confusionpage adds confusion
Group similar elements together. Group similar elements together.
Things to avoidThings to avoid
Don’t stick things in corners or the Don’t stick things in corners or the middle of the page even if there is an middle of the page even if there is an empty spaceempty space
Avoid more than 5 separate Avoid more than 5 separate elements on a pageelements on a page
Avoid placing things far apart that Avoid placing things far apart that should go togethershould go together
Avoid placing unrelated things Avoid placing unrelated things togethertogether
AlignmentAlignment
Placing things on the page in specific Placing things on the page in specific spots. spots.
Every element on the page should Every element on the page should have some connection with another have some connection with another element on the pageelement on the page
Clean, sophisticated, fresh lookClean, sophisticated, fresh look
AlignmentAlignment
There is no There is no alignment in this alignment in this exampleexample
Everything is just Everything is just placed somewhereplaced somewhere
Alignment AddedAlignment Added
Logical AlignmentLogical Alignment Strength of the edge gives the strength to Strength of the edge gives the strength to
the layout and design. the layout and design.
Ways to AlignWays to Align
There are so many ways to align thingsThere are so many ways to align things• Right justifiedRight justified• Left justifiedLeft justified• CenteredCentered• Top justifiedTop justified• Bottom justifiedBottom justified
See examples of this in the Non-Designers See examples of this in the Non-Designers design handbook on pages 37-49design handbook on pages 37-49
In summaryIn summary
Every element should have visual Every element should have visual connection with unity being very connection with unity being very importantimportant
Unify and organize the pageUnify and organize the page Be conscious of where things are placedBe conscious of where things are placed Avoid using more than one text alignment Avoid using more than one text alignment
on one pageon one page Centered alignment needs more to make it Centered alignment needs more to make it
dramaticdramatic
AlignmentAlignment
““Nothing should be placed on a page Nothing should be placed on a page arbitrarily, Every item should have a arbitrarily, Every item should have a visual connection with something visual connection with something else on the pageelse on the page””
Williams, 2008.Williams, 2008.
RepetitionRepetition
Develops the organization and Develops the organization and strengthens the unitystrengthens the unity
Repetition Repetition
Repeating Visual elementsRepeating Visual elements• ColorColor• ShapesShapes• TexturesTextures• FontsFonts• Spatial relationshipSpatial relationship• Line thicknessLine thickness• FontsFonts• Graphic conceptsGraphic concepts
RepetitionRepetition
““Repeat some aspect of the design Repeat some aspect of the design throughout the entire piece”throughout the entire piece” Williams, 2008Williams, 2008
UnityUnity
On the left only the Mermaid Tavern is boldedOn the left only the Mermaid Tavern is bolded On the right Mermaid Tavern and the phone On the right Mermaid Tavern and the phone
number are boldednumber are bolded Top and bottom are bolded which pieces the Top and bottom are bolded which pieces the
business card togetherbusiness card together
RepetitonRepetiton
When you are making multiple pages When you are making multiple pages for the same company/cause it is for the same company/cause it is important to use repetition to tie important to use repetition to tie things togetherthings together
Fonts, Colors, Lines, Shapes, Fonts, Colors, Lines, Shapes, Alignments etc. Alignments etc.
In SummaryIn Summary
Repetition unifies and adds visual Repetition unifies and adds visual interestinterest
Be consistentBe consistent Avoid repeating an element to the Avoid repeating an element to the
point of being annoyingpoint of being annoying• A lady is wearing a black dress with red A lady is wearing a black dress with red
earrings, a red purse, a red necklace, earrings, a red purse, a red necklace, red shoes and red lip stick-too muchred shoes and red lip stick-too much
Contrast Contrast
Avoiding things on the page that are Avoiding things on the page that are merely similarmerely similar• TypeType• ColorColor• SizeSize• LineLine• ThicknessThickness• ShapeShape• SpaceSpace
ContrastContrast
It is was makes a reader look at the It is was makes a reader look at the page in the first placepage in the first place
If two items are not exactly the same If two items are not exactly the same then make them really different. then make them really different.
In ConclusionIn Conclusion
Create an interest on the page Create an interest on the page whether it be an image, product or whether it be an image, product or informationinformation
Make things differentMake things different Avoid contrasting colors that are Avoid contrasting colors that are
similar togethersimilar together Avoid using fonts that are too similarAvoid using fonts that are too similar