Not about Software (just tools) Visual Communication/ Functional Art Problem Solving “Information Architects” “…The designer conceives, plans, and executes designs that communicate a specific message to a specific audience within given limitations…”
Some Basics Logos- simplified forms Contrast- attention Visual Hierarchy- comprehension Layout- organization Integrating Type and Image Visual Themes
The Design Process Defining the Problem Research (Audience, Constraints, Goals) Build your Visual Vocabulary- search for samples Build on the work of others- combine in a new original way Thumbnails Roughs Comprehensives Presentation Ready for Press
It Starts With Creativity Good design is created with a basic understanding of: - Design processes - Theories and concepts of design Designer/client relationship governs the entire design process
Fundamentals of Design Design elements Line, Shape, Value, Color, Texture, Space Design principles Balance, Proximity, Alignment, Unity, Emphasis, Rhythm
Elements of Design- Ch 2 We 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 Elements Line Shape Value Texture Size Color Gestalt Principles
Lines Begins with 4 lines- edges of the page/screen Type Direction Quality
Shape Lines to create 3-D world General outline of something Geometric, Natural, Abstract Design is the arrangement of shape. Figure and Ground
Geometric Shapes Square- What does a square symbolize? Circle- What does it symbolize? Triangle- What does it symbolize?
Grouping Shapes Shapes affected by surrounding shapes Begin to understand by identifying overall pattern Tend to recall letters if grouped in words. Group marks into recognizable/repeating shapes is the simplest way to perceive
Figure and Ground What is the object and what is the background?
Figure and Ground-Categories Stable Reversible Ambiguous
Figure and Ground-Conditions Enclosed area Textured area Convex Simplicity Familiarity Lower Half (gravity) Black tendency
Value Lightness/Darkness Gives the image detail and texture Contrast is the relative emphasis Create Movement Lead the Eye
Texture Tactile- actual paper Visual- Objects in Photos Photoshop effects Pictures of Textures Symbolic Textures Choose textures that relate to the concept of the piece and are appropriate to the design
Size or Mass Need to hold content Expectations Mood and Emphasis Contrast Creating Balance
“Successful communication requires balance, the directing and conducting of visual tensions.” Equal tension created by all elements pulling equally Symmetry and Asymmetry
Balance- Symmetry Traditional balance thru mirrored images left to right The traditional book Good is looking for a “quiet sense of order”, tradition and stability.
Balance Asymmetry Balance thru contrast Visual Weight- dominance of an object Visual Direction- way the eye is drawn between elements
Direction How to move thru the information? Text and Images are intentionally placed to direct the viewers eye and to achieve visual unity How do we get them to look at what we want and see the connections? Use of contrast and unity
Intellectual vs. Visual Unity “One is thinking of subject matter (intellectual unity); the other is looking at the design (visual unity).” Intellectual is idea and word Visual is placement for the eye Ideally work together to create the message.
Visual Dynamics Top to bottom – comfort of gravity Vertical and Horizontal- comfort in stability (diagonal lines- dynamic flux) Left to right- comfort in reading
Weight and Direction Influences Location Spatial Depth Size Texture Isolation Subject matter Value Shape Structure Color
Properties of Color Hue- name for the color Value- degree of light/dark Intensity or Saturation- purity and brightness
Psychology of Color Colors evoke specific emotional responses (personal or universal) Warm – Stimulate Cool- Relax
Psychology of Color Associations- personal and cultural Red- aggressive, sexual, national color Example- sports car Blue- authoritative (darker), cleanliness and honesty (middle), overall calming color Example- power blue suit Yellow- warmth, good health and optimism… (in the past-weakness and cowardliness) Example- food packaging Green- natural, environment, soothing and cooling Example- cigarettes
Selecting Color Cultural Color Associations The profile of the audience and its color preference The character and personality of the organization presented The designers personal relationship to the color An awareness of current color trends
Application Practice Read the Golbeck Handout on Art Theory Before 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.
Typography Typeface- design of the letters Font- complete set of characters (software typeface) Above all else, the audience must be able to read it!
Typeface Categories Serif- conservative and highly legible San-Serif- casual and legible Scripts- hand written Novelty-immediate tone setting and hard to read
Type Characteristics Size Measured in pica or points- 72 points in an inch… 12 points in a pica… 6 picas per inch Computer screen can be deceptive Printed proof to see actual size Web design should be judged on a screen
Type Characteristics cont. Line Length Measured in pica Flow to fill predetermined column Style Legibility prime concern Either stick to one type family or they need to be very different
Type Characteristics cont. Leading Vertical Space between lines Readability concerns Spacing Kerning- space between letters Word Spacing
Type Characteristics cont. Format Justified-all lines same length Unjustified- flush left or right, center and asymmetrical Style and Content Visual tone Affects image of client
Typeface Layout Tips Serif body/San Title or vice verca No novelty in body Italics for emphasis Never all caps Limit 2 fonts per page Limit 3 font sizes per page Simplify
Text Contrast Layout Tips Contract title and body text for interest Vary size, weight, style, separation, color differences Best legibility (black text/white paper) Reduce legibility (black text/dark paper) Simplify
Text Format Tips Consistent space Separate paragraphs with either line space or indent, not both. 50-70 words per line Leave plenty of white space Balance Look at the whole Simplify
Images- Ch 4 Creating Graphics Illustration- using images that represent or express to make a visual statement Can show something that cannot be photographed Purpose- present product, tell story, clarify concept, or demonstrate a service.
Basic Types of Graphic Creation Programs Drawing- Vector programs Illustrator- draws object… no layers Paint- Bitmap programs Photoshop- 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 image Cannot delete a pixel, just change its color More pixels, larger file size… so eliminate unnecessary pixels # of pixels per inch determine resolution, the key to image quality
Pros/Cons of Bitmap images Most appropriate for photo-realistic images and complex drawings Large file size, inability to resize or scale without effort and loss of quality Bit-depth determines # of colors that can be displayed by individual pixel Can grab from screen, scan it, download or capture it Can manipulate it, adjust it, cut and paste it
Pros/Cons of Vector images Most appropriate for shapes (mathematically expressed) Can be filled with color and patterns Use a fraction of the file space as bitmaps For web, downloads faster Most programs can export vector to bitmap Vector images require a plug-in to display on the web (Flash) Can not be used for photo-realistic images
File Formats High Quality for printing TIFF- high image quality EPS- less common Compression Formats for Screen JPEG- photos and illustration GIF- text, logos and charts PNG- need transparency around the graphic PDF- design intact- paper files
Basic Photo DesignIssues Aspect Ratio Scanning and Essential Area- Over scan Information Density Watch for information overload Try not to crowd too much info into one space
Digital Cameras and Scanning Choosing the Best Resolution? Input and Output How distribute? 72 for web, 100-300 for printing Formula for resolution- x 1.5 or 2 Pros use 1,200 or 2,400 hundred for original and link to file
Website Requirements Gathering Site Owner’s goals What do you want? A job Site User’s goals What matters to that specific employer Human and Technical Resources What can you do? What can the host server do? Content Needed
What is the goal(s)? Owner’s Goals Business aspect = Making money Measure the audience Brand Positioning = Personality User’s Goals Information Commerce Easy Useable Identifiable
Defining Owner’s Goals How do you make money? How are they successful? What are the goals for the site? Research size of market opportunity What are the competitors doing? Identify the user’s behaviors that will best support the site? Decide on Brand Personality or Positioning (3 key adjectives)
Identifying Business Goals Let’s 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 User’s Goals Analyze the users habits and environment What characteristics would affect the user’s interaction with the site? What is the user looking for? What steps are involved for the user to perform tasks ?
Identifying User Goals Again, let’s 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 Considerations What 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 tasks As a general rule, three variable are time, money, and people. Budget is total of estimated hours for each task at hourly rate Have contractors and consultant work off- site and with own equipment, so they are not employees
Project Bid The cover and package Table of contents Needs analysis and description Target audience Creative strategy Project implementation Budget
Content Acquisition Self produced Third party content sources (clip art, stock footage library, public domain sources) Public Domain has no owner, but never assume Copyrighted material can not be used without permission If in doubt, don’t use it unless you paid for it.
Using Talent American Federation of Television and Radio Artists (AFTRA) or Screen Actors Guild (SAG) Talent Agency Auditions and Casting Calls Union Contracts ($540/8 hour day) Release Forms Always think about future use, when working with release forms.
Layout- Ch 5 Balancing Act Diverse Elements of the Design that communicates and looks good Every element affects how the others are perceived
Review the Fundamentals of Design Design elements Line, Shape, Value, Color, Texture, Space Design principles Balance, Proximity, Alignment, Unity, Emphasis, Rhythm
Size and Proportion Organization of several things into a relationship (size, quantity, or degree)
Visual Rhythm Repetition of shapes, values, colors, and textures Life is rhythm
Grid Layout Grids provide order, but are flexible Choosing a grid Elements- Copy Art- Photos
Path Layout No grid Designer visualizes elements on blank sheet of paper Unity relies on Unit Forming Focal Point Clear Path to next element
Path Layout Focal Point Tips Make an object bright Make an object dark and the rest light Make an object sharp and all else soft focus Give object different texture Place object in an unusual direction/position Isolate the object
Path Layout Integrating Type and Image Near focal point Along the path of the focal point Visual Hierarchy Importance of the info Follow path of understanding based on size, color and placement.
Path Layout Unity Each object has a relationship Alignment, color, direction, shape, etc. Symmetrical/Asymmetrical Layout Symmetrical is not always engaging Asymmetrical more conscience of placement and balance.
Photo Layout Dynamic photos, strong in design and human interest Cropping-focus and drama Resizing- ratio Selecting- Quality, Merit, Strength
Multi-panel Design 3-D design Each unfolding present new facet of design 1 st panel- lure Build interest / theme Mailer?
Designing Content Elements Using Photographs Effectively Tell story or relevant to text Attention grabbing Clear, sharp, look good Well cropped and focused Do you have permission to use it?
Designing Content Elements Text Design Emphasize headings Text to background contrast Use Sans-Serif fonts, not Serif. Larger Type Size Shorter Lines NO ALL CAPS Avoid excessive italics Use plenty of blank space around text
Computers connected to thousands of printers outputting more paperwork than ever before Difficult to store, retrieve information Environmental concerns 1992 Adobe Solution: first version of the Portable Document Format (PDF) Electronic Publishing and Printing
Compression Lossless- less compression but preserve original file Lossy- high compression but lose some info (JPEG- high frequency)
Preparing Electronic Files Assemble files in page layout program Bring all your images Select automatic trapping option in layout program and ask to check All files must be CMYK if you are doing full color output In Photoshop, check color picker for an alert symbol (will not print) Include all original scans and vector graphics Be sure all documents are linked. Supply all fonts Organize and label all the files on a disk