Sight, Sound & Motion Notes from slides PDF

Preview

Summary

Notes from the modules of the Sight, Sound and Motion online class...

Description

Chapter 1 (What is Design?) ● ● ● ● ● ● ● ● ●

● ●

●

good design = form and function as a utility form —> material artistry…design is triggered by the industrial revolution (function) and few out of and continues to be inspired by the visual and performing arts (form) aesthetics is important design has to be practical function and form follows function visual culture changes design’s changing forms and functions media literacy = visual culture www changed everything good graphic design: 1. capture attention 2. controls the eye’s moment across the page 3. it conveys information 4. evokes emotion graphic design is planned…plan/organize are purposes of communication three building blocks: 1. visuals = symbols, icons, drawings, etc. 2. typography = copy graphically as a visual form of language 3. space = encourages visual and typography to play well together white space is not your enemy

Chapter 2 (Step away from the Computer) ● ●

●

● ● ●

● ● ● ● 1. ● ●

●

professional designers know that effective graphic design starts with research and brainstorming ask yourself these questions: 1. what is the objective? 2. who is the audience? 3. does design need to coordinate with other design work? vector copies of the organization’s logos…vector images = geometry and math to produce and preserve the proportions and quality of line-art illusions…regulations for logos 1. who are the competitors and what does their visual communication say? 2. how will the final product be delivered or distributed? ads = proper dimensions or technical spec (specifications) size is important and pixels web graphics = memory a file takes up 1. what is the budget? 2. what about timing and turnaround? timing = when the finished design reaches the audience turnaround = how much time the design, production, and placement crew has to deliver the job related to deadlines and there can be calendar issues 1. who is providing content? copywriters are there any design or production considerations or constraints? planning document is the end product of the Q&A brainstorming begins with 1. dump = spit everything out on paper 2. percolate = do something else and split focus 3. morph = change it brainstorming leads to big ideas

● ● ● ● ● ● ● ● ●

think about your audience sketches storyboards = animation or video…shows change over time and key points sitemaps and wireframes  = wireframe = used to work out ideas for the general page layout and interface dummies = thumbnail sketch is a dummy and shows the position of every ad…headlines numerical notations to indicate font size, etc. rough and comps = thumbnails into roughs = more detailed, polished sketches mockups and beta sites = mockup = rendered image of the overall site design (fonts, colors, images) mockups doesn’t demonstrate the site’s moving parts…website’s assets beta site = working version of a website that the public can’t access

Chapter 3 (I need to design this today) ● ●

● ● ●

why it works = westerners read from left to right and top to bottom…the layout works and control’s the eye movements across the layout parts of the layout: 1. margins 2. columns…(trompe l’oeil = trick of the eye for easy reading) 3. visual…hang visual from top margin, top of your web page or top of your story 4. cutline…new situation, photos, and visuals require captions aka cutlines 5. a cutline should be around 9-11 points 6. 8 points is a little hard to read and 12 is horsey = awkwardly large and lacking space 7. headline should be bigger than 11 points. only two fonts. let the copy tell you where to break the line 8. copy = keep headline and lead together…lead is first paragraph of body copy…column of copy is called a leg…aim legs for between 2-10 inches…set copy in transparent font…no times new roman or helvetica….average to 6-12 words per line 9. tags = advertising word for info at the bottom aka logo, themeless, or slogan….don’t forget to include logo or the URL place tags in the lower right corner use two fonts tags may appear in a side column or in a footer at the page’s bottom

Chapter 4 (Layout Sins) ● ● ● ● ● ● ● ● ● ● ● ●

don’t do it: 1. centering everything left or right aligned layouts give the viewer’s eye a vertical line centering is a composition 1. warped or naked photos must resize photos to proportion to resize a photo you can reduce its size naked photos = photograph that needs a border 1. too many fonts two fonts brings character = bad 1. bulky borders and boxes they’re like fences call out attention to themselves 1. cheated or missing margins margins are referred as an offset margins inside a text box = inset

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

1. stair-stepping taking like this 1. 4 corners and clutter good design as a balance between yin and yang group visual information together that belongs together = clustering effect clustering results in fewer groupings of visual positive space clustering = good / cluttering = bad 1. trapped negative space trapped space is a puddle of negative space landlocked in the layout big blog is bad and draws attention 1. busy backgrounds background shouldn’t interfere with your visual communication 1. tacky type emphasis reversing = dark words on light backgrounds…using fonts that have both thick or thin lines… inverted colors storking = type characters (glyphs) have been outlined all caps = it sucks underling = don’t use it to emphasize 1. bad bullets using the wrong kinds of bullets for lists improperly aligning bullet lists always bullets vertically always align type with type vertically 1. widow and orphans orphan = few lonely words stranded at the top of a leg widow = lonely words of hyphenated word stranded at the bottom 1. justified rivers justified works reducing font size / increasing width of column and the longhair of your line

Chapter 5 (Mini Art School) ●

basic units of visual communication 1. space 2. line 3. shape/form —> inorganic vs organic 4. size/scale —> 125x125 5. color 6. texture 7. value

other six principles or rules of good design 1. 2. 3. 4. 5. 6. gestalt theory

focal point/emphasis —> 1. have one 2. limit one per page contrast balance movement rhythm/pattern unity

1. 2. 3. 4.

proximity similarity continuity Closure

Chapter 6 (Layout) ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

first thing you sketch is a grid = series of horizontal and vertical lines charting out an area gridlines help you guide your decisions about visuals, etc. tabloids = 4-5 columns web pages = 2-3 columns 1024x768 dimensions (proportion is essential) balance aesthetics preferences with readability column width should fall within the range of 2-5 inches or 144-360 pixels most web pages = 2-3-4 columns column width aer determined by column content and will vary accordingly you can use rule of thirds or the golden proportion vertical columns, you can add horizontal guides as needed for the design you envision focal point worth —> strong composition, line, shape, color, or interesting angle type treatments also serve as a focal point type placements begins with inserting the main copy and non decorative headlines before adding other typographic you can size it in an appropriate font, size, and color other type tips: 1. keep your headline and your lead together 2. reduce line-spacing (p.70) place visuals near the top of the layout, they are eye magnets if your picture has direction, be sure its pointing the right way…don’t position your visual to point right off the screen or page flipping photos are bad ideas (not acceptable) don’t interrupt the flow of reading copy by placing a visual where it chops a line or a column of type in half do not place a visual between a headline and the lead make sure you don’t end up with text columns that are too skinny, leaving you with little words balance is important rhythmic grid pattern sacrifice asymmetry and visual hierarchy multiple headshots = mug shots and must be aligned by everybody’s eyes negative space is the best tool…provides a visual respite of the viewer to avoid visual overload try to consolidate small puddles of negative space into fewer larger pools avoid trapped space…chunk of white space isolated in the interior of the layout hierarchy tells viewers what parts of the layout are more important than others rank the items intended as layout content in their order of importance a position near the top of the layout gives an element importance larger size also imparts greater importance this applies stop newsletters visual, headlines, body copy = new rectangle body copy —> more than 10 inches per leg is too long…lets than 2 is too shorts headline deck —> under the headline byline —> between the deck and the lead visual/photo —> keep photo placement near the eye magnet thing

● ● ● ● ● ●

● ● ●

visual as a focal point can sit under the headline cutline = under the visual… placing your stories on a module page a sidebar is simply a separate block of type with a solid background includes primary or secondary navigation laying out multiple pages….three biggies: 1. maintaining unity 2. making a lot of type inviting and providing navigational signs visual unity and consistent font loads of type navigational signs….logos

Module 7 (Design Principles) ●

● ● ● ● ●

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

good design should 1. attract attention 2. convey information 3. guide the viewer’s eye 4. evoke emotion clear focal point rule of thirds surrounded by negative space CRAP C = contrast = most important, dark text on light background…creates a focal point…establishing visual hierarchy…designed by values (etc.)…every element has to be sized…human perception…root of everything…size, position, color, texture, and orientation…most important how to check contrast: convert to grayscale contrast is tied to perception and designer…roots of design can be accomplished by size, orientation content must be intelligently imposed R = repetition = color, shape, line, approach to style…lacks united and cohesive feel…sense of unity, same type size…strong branding visual cue to the viewer strong branding A = alignment…we are trained to read from left to right, avoid the urge to center your text…make sure that other elements on the page are aligned as well…horizontal or vertical arrangement of elements match up as closely as possible without lines, we’re lost left aligned, ragged right avoid to center group rather than tacky borders grouping P = proximity…tendency to group like items together balance = symmetrical (exact, formal), asymmetrical (off-center), radial, (gestalt law) our minds group like items, proximate subheadings should be closer to whatever directional force = guide eyes of the viewer proportion = size of parts, contrast, visual hierarchy balance = symmetrical, asymmetrical, radial symmetrical = formal radial = creates tension, focal point lies in the center of the image

● ● ●

directional force = good design, can be implied or actual directional force is implied proportion = size relationship, relates to contrast, largest item first

Chapter 8 (Color Basics) ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

color creates impact color organizes color evokes emotion white light is the mixture of all colors of the spectrum black is the absence of a color ergo = color wheel 3 primary / 3 secondary / 6 tertiary primary colors secondary and complementary colors = mixing two primary colors complement = opposite tertiary colors = in between triads = red, blue, yellow analogous = side by side color temperature = warm & cool colors warm colors help appear to come forward and cool colors recede knowing history of color trends can help choose or avoid time and era-evocative colors colors that appear together are pleasing palettes for your designs make a color palette work for your communication purpose choose one main color and add an accent color or two for interest…less is more design for visibility and readability visibility = clearly rule of thumb = stick with dark-on-light or light-on-dark color combos gray sucks light type of dark background pops but no reverse use splashes of color for visual emphasis using less saturated tints of spot color to highlight larger areas of the compassion - another way to design with color color matching is hard RGB AND CMYK screens and printers don’t speak the same language screen color —> electronic color and overlaps light to achieve colors printed colors —> layer inks color management = calibration color management = your color to match properly across devices color involves the application of color profits to images and layouts ICC = international color consortium…created used color profiles ICC = electronic-screen RGB RGB = red green blue…combing varying degrees of just RGB RGB is 0-255 black is 000 000 000 white is 255 255 255 hexadecimal code = mathematically converts these 9 numbers into six numbers/letters RGBA a = alpha controls transparency rules are expressed in CSS color shifting is a problem

● ● ● ● ● ● ● ● ● ● ● ●

4-color process = 4 ink colors = cyan, magenta, yellow black are combined to build any color k = key = black color separation = each c m y k printing plate save your document in CMYK mode CMYK builds a series of digit pairs that indicate the percentage out of gamut = choosing colors from swatch palettes out-of-gamut = color that won’t reproduce accurately in print documents can be printed using 1,2,3 inks are spot color printing matched color = pantone = pms color-matching system for solid colors RGB —> adding color with overlapping light using the hexadecimal system for screen CMYK —> building full color from separated ink layers in 4-color process printing PANTONE (PMS) —> matching specific colors by ink formula for printing

Chapter 14 (Fit to Print) ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

coated, uncoated, specialty weight is an important paper property paper properties also impact the way ink behaves on paper’s surface uncoated sheets absorb ink color and brightness are the underlying paper influence photo and illustration color as well photo and illustration colors are truest and most vibrant swatch books = are helpful when looking for information on paper properties swatch books = indicate a paper’s properties papers from sustainable materials (bamboo and hemp) are soy-based inks paper manufacturers have switched to non chlorine bleach FSC SFI green seal paper and ink are the most expensive parts of a budget larger budget allows for printing extras types of printing and printers = speed, quality, price in-house printing is whatever most printers have a built-on 1/4 inch margin and 1/2 inch at the bottom commercial/offset = handle bleeds, im-positioning, folding, coating, and some types of binding difference between standard offset and web offset printing = paper digital printing = processes of color laser printing and color photocopying digital printing is reserved for small press runs VDP (variable data printing) = compelling reason to use digital printing…mail merge..printing allows to take a database of names, images, and other information specific to a recipient quantity, flat/finished sizes, number of pages, paper and weight top number indicates the number of inks required on one side of the paper the bottom number indicates the number of inks required on the other side bleeds binding and finishing flight check = quick test to make sure you’ve included all the parts necessary for printing it allows u to package your document to take to the printer more than 5 MB = FTP site to transfer files FTP requires some software on your end and some access information make sure your text, fonts, fp;ops. etc/ os regedit press check allows u to view the first sheets of your actual print run

Module 1: How We See ● ● ● ● ● ● ● ● ● ● ● ● ● ●

●

humans process images 60,000x faster than text psychological approach —> associations with visual (emotional) focus on each object physiological approach —> you are smiling semiotics = iconic, indexical, symbolic icon = sign or resembles what it stands for, easy to interpret index = logically connected to what it represents (where there’s smoke, there’s fire) symbol = no logical connection encoding & decoding visual message = an image is a collection of signs & symbols metonymy = association we make or what they signify metonymy = conveys info (johnnies walker black label with rich white people’s homes) gestalt = the whole is greater than the sum of its parts = organized whole 4 gestalt laws: 1. proximity —> describes how you tend to place items that are close together into groups. the closer 2 items are close to one another, the more likely you are to interpret them (adidas sign) 2. closure —> illustrates how your brain fills in missing information 3. similarity —> place them into groups 4. continuity —> birds in v-formation, how your brain sees something that is continuous although it may never be imposed making meaning of what you see

Video Format ● ● ● ● ● ● ● ● ●

● ● ● ● ● ● ● ● ●

resolution = expressed as pairs of numbers: the number of horizontal pixels by the number of vertical pixels pixels = picture elements more pixels, sharper image low resolution format = standard definition standard definition 720x480  high definition 1280x720  high definition 1920x1080  SD = 720x480 two types of HD 1. HD 720p = 1280x720  2. HD 1080p = 1920x1080  bottom first, then height (ex. 4:3 aspect ratio) 16:9 ratio (all HD video) 4:3 (SD video) letterbox (widescreen) (16:9 to 4:3) pillarbox (fullscreen) (4:3 to 16:9) center cut (central-ish) (16:9 in a 4:3 space) do not do 4:3 in a 16:9 space (stretch) frequency with still images are displayed is expressed as frames per second…we refer to frame rate of video (FPS) typical frame rates: 1. television 30 fps (29.97) 2. movies 24 fps (23.976) (cinematic) 3. hi-frame rate video 60 fps (59.94) (realistic motion) (North American Video Standards)

Field of View & Camera Angles ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

field of view = how close subject is to the viewer ELS (extreme long shot) LS (long shot sometimes full shot) (subject takes up more frame, body language) MS (medium shot or waist shot) CU (close up) ECU (extreme close up) MCU (medium close up or bust shot) (for interviews or whatever) MLS (medium long shot or cowboy shot) two shot (people in conversation) OTS (over the shoulder shot) camera at her eye level…looking slightly upward camera at his eye level (looking slightly downward) bird’s eye view (from overhead) worm’s eye view (from beneath) canted (tilted) (dutch angle) = suggests confusion or chaos

Composition ● ● ● ● ● ● ● ● ● ● ● ●

rule of thirds = dividing frame into thirds, adds visual dynamic has more energy, viewer’s eye explores beyond frame four intersection points (rule of thirds and intersection of thirds) intersections = power points directing viewer’s eye leading lines = encourage eye to follow them…identical objects trail for the eye to follow frame within a frame…foreground elements to create a border color (bright saturated colors (red, oranges)) suggesting depth by composing in z-space…organizing the visual elements (foreground can compare the rest of the picture) rule of thirds (and points of interest) z-space = depth

Module 2: Visual Vectors ● ●

elements in the frame that suggests a direction subconscious arrow 1. graphic vectors (weakest, static lines for eyes to follow) 2. index vectors (overtly suggests…someone pointing, eye line) (common vector) 3. motion vectors (strongest, visual element actually moving through the frame)

Common Types of Cutting ● ● ● ● ● ● ●

editing is specific segments and taking it together putting video event details in...