intro to graphic design- ch 1 definition of graphic design some basics design process graphic design...

of 112 /112
Intro to Graphic Design- Ch 1 Definition of Graphic Design Some Basics Design Process Graphic Design Fundamentals

Author: ashton-hoole

Post on 15-Jan-2016




13 download

Embed Size (px)


  • Intro to Graphic Design- Ch 1

    Definition of Graphic DesignSome BasicsDesign ProcessGraphic Design Fundamentals

  • Defining Graphic Design

  • Defining Graphic DesignNot about Software (just tools)Visual Communication/ Functional ArtProblem SolvingInformation ArchitectsThe designer conceives, plans, and executes designs that communicate a specific message to a specific audience within given limitations

  • Some BasicsLogos- simplified formsContrast- attentionVisual Hierarchy- comprehensionLayout- organizationIntegrating Type and ImageVisual Themes

  • The Design ProcessDefining the ProblemResearch (Audience, Constraints, Goals)Build your Visual Vocabulary- search for samplesBuild on the work of others- combine in a new original wayThumbnailsRoughsComprehensivesPresentationReady for Press

  • It Starts With CreativityGood design is created with a basic understanding of:- Design processes- Theories and concepts of designDesigner/client relationship governs the entire design process

  • Fundamentals of DesignDesign elementsLine, Shape, Value, Color, Texture, Space Design principlesBalance, Proximity, Alignment, Unity, Emphasis, Rhythm

  • Elements of Design- Ch 2We have a catalog in our brains that filters the information.How the eye sees and the brain organizes to give meaning.Big Idea- Purposeful use to create meaningful designs

  • Basic Design ElementsLineShapeValueTextureSizeColorGestalt Principles

  • LinesBegins with 4 lines- edges of the page/screenTypeDirectionQuality

  • ShapeLines to create 3-D worldGeneral outline of somethingGeometric, Natural, AbstractDesign is the arrangement of shape.Figure and Ground

  • Geometric ShapesSquare- What does a square symbolize?

    Circle- What does it symbolize?

    Triangle- What does it symbolize?

  • Grouping ShapesShapes affected by surrounding shapesBegin to understand by identifying overall patternTend to recall letters if grouped in words.Group marks into recognizable/repeating shapes is the simplest way to perceive

  • Figure and GroundWhat is the object and what is the background?

  • Figure and Ground-CategoriesStableReversibleAmbiguous

  • Figure and Ground-ConditionsEnclosed areaTextured areaConvexSimplicityFamiliarityLower Half (gravity)Black tendency

  • ValueLightness/DarknessGives the image detail and textureContrast is the relative emphasisCreate Movement

    Lead the Eye

  • TextureTactile- actual paperVisual-Objects in PhotosPhotoshop effectsPictures of TexturesSymbolic Textures

    Choose textures that relate to the concept of the piece and are appropriate to the design

  • Size or MassNeed to hold contentExpectationsMood and EmphasisContrastCreating Balance

  • Creating BalanceSuccessful communication requires balance, the directing and conducting of visual tensions. Equal tension created by all elements pulling equallySymmetry and Asymmetry

  • Balance- SymmetryTraditional balance thru mirrored images left to rightThe traditional bookGood is looking for a quiet sense of order, tradition and stability.

  • Balance AsymmetryBalance thru contrastVisual Weight- dominance of an objectVisual Direction- way the eye is drawn between elements

  • DirectionHow to move thru the information?Text and Images are intentionally placed to direct the viewers eye and to achieve visual unityHow do we get them to look at what we want and see the connections?Use of contrast and unity

  • Intellectual vs. Visual UnityOne is thinking of subject matter (intellectual unity); the other is looking at the design (visual unity).Intellectual is idea and wordVisual is placement for the eye

    Ideally work together to create the message.

  • Visual DynamicsTop to bottom comfort of gravityVertical and Horizontal- comfort in stability (diagonal lines- dynamic flux)Left to right- comfort in reading

  • Weight and Direction InfluencesLocationSpatial DepthSizeTextureIsolationSubject matterValueShapeStructureColor

  • Color- Color Wheel

  • Properties of ColorHue- name for the colorValue- degree of light/darkIntensity or Saturation- purity and brightness

  • Psychology of ColorColors evoke specific emotional responses (personal or universal)Warm StimulateCool- Relax

  • Psychology of ColorAssociations- personal and culturalRed- aggressive, sexual, national colorExample- sports carBlue- authoritative (darker), cleanliness and honesty (middle), overall calming colorExample- power blue suitYellow- warmth, good health and optimism (in the past-weakness and cowardliness)Example- food packagingGreen- natural, environment, soothing and coolingExample- cigarettes

  • Selecting ColorCultural Color AssociationsThe profile of the audience and its color preferenceThe character and personality of the organization presentedThe designers personal relationship to the colorAn awareness of current color trends

  • Understanding Electronic ColorRGB vs CMYK

  • Gestalt PrinciplesWhole is the sum of its partsEach part is influenced by those around it.The eye seeks to create a wholeSimilarityProximityContinuationClosureFigure and Ground

  • Application PracticeRead the Golbeck Handout on Art TheoryBefore Friday, meet in your groups and find a website to examine.Friday, come in with a website example and be prepared as a group to discuss how basic graphic design principles were applied to this site.

  • TypographyTypeface- design of the lettersFont- complete set of characters (software typeface)

    Above all else, the audience must be able to read it!

  • Typeface CategoriesSerif- conservative and highly legibleSan-Serif- casual and legibleScripts- hand writtenNovelty-immediate tone setting and hard to read

  • Type Characteristics SizeMeasured in pica or points- 72 points in an inch 12 points in a pica 6 picas per inchComputer screen can be deceptivePrinted proof to see actual sizeWeb design should be judged on a screen

  • Type Characteristics cont.Line LengthMeasured in picaFlow to fill predetermined columnStyleLegibility prime concernEither stick to one type family or they need to be very different

  • Type Characteristics cont.LeadingVertical Space between linesReadability concerns SpacingKerning- space between lettersWord Spacing

  • Type Characteristics cont.FormatJustified-all lines same lengthUnjustified- flush left or right, center and asymmetricalStyle and ContentVisual toneAffects image of client

  • Type Characteristics ExaminedTypeTypeTypeTypeTypeType


  • Typeface Layout TipsSerif body/San Title or vice vercaNo novelty in bodyItalics for emphasisNever all capsLimit 2 fonts per pageLimit 3 font sizes per pageSimplify

  • Text Contrast Layout TipsContract title and body text for interestVary size, weight, style, separation, color differencesBest legibility (black text/white paper)Reduce legibility (black text/dark paper)Simplify

  • Text Format TipsConsistent spaceSeparate paragraphs with either line space or indent, not both.50-70 words per lineLeave plenty of white spaceBalanceLook at the wholeSimplify

  • Type Design

  • Type Design

  • Images- Ch 4Creating GraphicsIllustration- using images that represent or express to make a visual statementCan show something that cannot be photographedPurpose- present product, tell story, clarify concept, or demonstrate a service.

  • Basic Types of Graphic Creation ProgramsDrawing- Vector programsIllustrator- draws object no layersPaint- Bitmap programsPhotoshop- working in pixels and layers

    .bmp .jpeg .gif .pic .tif

  • What is a Pixel?Building Blocks# of pixels and color determine image quality, size and the look of the imageCannot delete a pixel, just change its colorMore pixels, larger file size so eliminate unnecessary pixels# of pixels per inch determine resolution, the key to image quality

  • Pros/Cons of Bitmap imagesMost appropriate for photo-realistic images and complex drawingsLarge file size, inability to resize or scale without effort and loss of qualityBit-depth determines # of colors that can be displayed by individual pixelCan grab from screen, scan it, download or capture itCan manipulate it, adjust it, cut and paste it

  • Pros/Cons of Vector imagesMost appropriate for shapes (mathematically expressed)Can be filled with color and patternsUse a fraction of the file space as bitmapsFor web, downloads fasterMost programs can export vector to bitmapVector images require a plug-in to display on the web (Flash)Can not be used for photo-realistic images

  • File FormatsHigh Quality for printingTIFF- high image qualityEPS- less commonCompression Formats for ScreenJPEG- photos and illustrationGIF- text, logos and chartsPNG- need transparency around the graphicPDF- design intact- paper files

  • Basic Photo DesignIssuesAspect RatioScanning and Essential Area- Over scanInformation Density Watch for information overloadTry not to crowd too much info into one space

  • Digital Cameras and ScanningChoosing the Best Resolution? Input and OutputHow distribute? 72 for web, 100-300 for printingFormula for resolution- x 1.5 or 2Pros use 1,200 or 2,400 hundred for original and link to file

  • Impact of PhotographyNot capturing realityFact that camera is there can change thingsEditing and Manipulating

  • Website Requirements GatheringSite Owners goalsWhat do you want? A jobSite Users goalsWhat matters to that specific employerHuman and Technical ResourcesWhat can you do? What can the host server do?Content Needed

  • What is the goal(s)?Owners GoalsBusiness aspect = Making moneyMeasure the audienceBrand Positioning = PersonalityUsers GoalsInformationCommerceEasyUseableIdentifiable

  • Defining Owners GoalsHow do you make money? How are they successful?What are the goals for the site?Research size of market opportunityWhat are the competitors doing?Identify the users behaviors that will best support the site?Decide on Brand Personality or Positioning (3 key adjectives)

  • Identifying Business GoalsLets use the website your group is working on.

    What would be some goals for a site?What is their market?What are the potential user behaviors?What are the 3 key adjectives for brand positioning?

  • Defining Users GoalsAnalyze the users habits and environmentWhat characteristics would affect the users interaction with the site?What is the user looking for?What steps are involved for the user to perform tasks ?

  • Identifying User GoalsAgain, lets use the website your group is working on.

    What would be some user goals for a site?How would they use the site?What do they want from this site?How many steps would be acceptable to perform a task?

  • Technical ConsiderationsWhat tech resources do you have?Any technical restraints? (security, bandwidth, etc.) Who will host the site?Is there people to maintain the site?

  • Determine cost, timeline, and tasksAs a general rule, three variable are time, money, and people.Budget is total of estimated hours for each task at hourly rateHave contractors and consultant work off-site and with own equipment, so they are not employees

  • Project Bid The cover and packageTable of contentsNeeds analysis and descriptionTarget audienceCreative strategyProject implementationBudget

  • Content AcquisitionSelf producedThird party content sources (clip art, stock footage library, public domain sources)Public Domain has no owner, but never assumeCopyrighted material can not be used without permissionIf in doubt, dont use it unless you paid for it.

  • Using TalentAmerican Federation of Television and Radio Artists (AFTRA) or Screen Actors Guild (SAG)Talent AgencyAuditions and Casting CallsUnion Contracts ($540/8 hour day)Release FormsAlways think about future use, when working with release forms.

  • Layout- Ch 5Balancing ActDiverse Elements of the Design that communicates and looks goodEvery element affects how the others are perceived

  • Review the Fundamentalsof DesignDesign elementsLine, Shape, Value, Color, Texture, Space Design principlesBalance, Proximity, Alignment, Unity, Emphasis, Rhythm

  • Size and ProportionOrganization of several things into a relationship (size, quantity, or degree)

  • Visual RhythmRepetition of shapes, values, colors, and texturesLife is rhythm

  • Grid LayoutGrids provide order, but are flexibleChoosing a gridElements- CopyArt- Photos

  • Path LayoutNo gridDesigner visualizes elements on blank sheet of paperUnity relies on Unit FormingFocal PointClear Path to next element

  • Path LayoutFocal Point TipsMake an object brightMake an object dark and the rest lightMake an object sharp and all else soft focusGive object different texturePlace object in an unusual direction/positionIsolate the object

  • Path LayoutIntegrating Type and ImageNear focal pointAlong the path of the focal pointVisual HierarchyImportance of the infoFollow path of understanding based on size, color and placement.

  • Path LayoutUnityEach object has a relationshipAlignment, color, direction, shape, etc.Symmetrical/Asymmetrical LayoutSymmetrical is not always engagingAsymmetrical more conscience of placement and balance.

  • Photo LayoutDynamic photos, strong in design and human interestCropping-focus and dramaResizing- ratioSelecting- Quality, Merit, Strength

  • Multi-panel Design3-D designEach unfolding present new facet of design1st panel- lureBuild interest / themeMailer?

  • Designing Content ElementsUsing Photographs Effectively

    Tell story or relevant to textAttention grabbingClear, sharp, look goodWell cropped and focusedDo you have permission to use it?

  • Designing Content ElementsText Design

    Emphasize headingsText to background contrastUse Sans-Serif fonts, not Serif.Larger Type SizeShorter LinesNO ALL CAPSAvoid excessive italicsUse plenty of blank space around text

  • Logo Design- Ch 6Types of LogosCreative Process

    Simple little marks that communicate an enormous amount of information.Must be visually uncomplicated

  • LogosEase of RecognitionQuick or partial viewingHow fast can you recognize logos?

  • LogosEase of RecallToo many details are hard to rememberGood logos with simple marks are easy

    How many logos can you put on paper right now?

  • LogosEase of ReproductionVariety of sizes and mediaMust be crisp and clear.Limit number of colors (1 or 2)-CostBlack and White repo- Do greyscale

  • LogosThey must encapsulate the company without focusing on one aspect.

  • Types of LogosLogotypesInitialsAbstract SymbolsAllusive Abstract SymbolsPictorial SymbolsAssociative Symbols

  • Creative ProcessUnderstand the ProblemGet inspiredBrainstormSketchProduce

  • Creative ProcessUnderstand the problemRestate in own wordCommunication GoalAudienceResearch client and industryUnderstand organization, product and competitors

  • Creative ProcessGet InspiredLook around youOthers art can be an inspiration to your creativityBrainstormGenerate as many as possibleDont judge- No bad ideasEdit after.

  • Creative ProcessSketchThumbnailsAlways use paper before keyboardProduceNeed a clear ideaCreate many optionsGet FeedbackRehearse explanations (concepts and choices)

  • Creating a LogoFont choiceTry typing name in many fontsDesigning a symbolIconic or Symbolic pictureColor combinationsKey is simplicity in form

  • Visual Themes- Ch 7Unify the overall look of multi-page publications.MagazinesWebsitesBrochuresAd CampaignsInconsistent themes confuse and lose.

  • Creating Visual ThemesColor ChoiceTypefaceImage StyleLayoutVisual HierarchyEditorial themesTactile effectsCosts?

  • Computers connected to thousands of printers outputting more paperwork than ever beforeDifficult to store, retrieve informationEnvironmental concerns 1992 Adobe Solution: first version of the Portable Document Format (PDF)Electronic Publishing and Printing

  • CompressionLossless- less compression but preserve original fileLossy- high compression but lose some info (JPEG- high frequency)

  • Preparing Electronic FilesAssemble files in page layout programBring all your imagesSelect automatic trapping option in layout program and ask to checkAll files must be CMYK if you are doing full color outputIn Photoshop, check color picker for an alert symbol (will not print)Include all original scans and vector graphicsBe sure all documents are linked.Supply all fontsOrganize and label all the files on a disk