Shared Flashcard Set

Details

Media Design Final Review
Media Design Final Review
71
Internet/New Media
Undergraduate 3
12/07/2008

Additional Internet/New Media Flashcards

 


 

Cards

Term
double truck
Definition

two facing pages on the same sheet of newsprint, treated as one unit

 

- one design across two pages. designed as one horizontal element

Term
plate
Definition
Piece of paper, metal, plastic or rubber carrying an image to be reproduced using a printing press.
Term
optical center
Definition

The visual center of the page, in distinction from the mechanical center. The area just above the mechanical center of a page.

 

-the eye sees slightly above natural center.  make this the center of your design

Term
CMYK
Definition
an acronym for cyan, magenta, yellow, and black - the four ink colors used in color printing
Term
type page
Definition
the area inside the margins where you design
Term
saddle stitch
Definition

print pages; run pages along saddle and stapled together

 

advantages: 2nd cheapest, more durable than self-binding

 

disadvantages: limited number of pages you can have, can't add anything when done

Term
symmetry
Definition
dominant on optical center, duplicate weights on vertical axis
Term
heated adhesive
Definition

most common; textbooks, novels; all pages printed and run through machine, glued along spine to cover and then heated and cooled

 

advantages - most durable binding, many pages, unlimited pages, lower range of cost

 

disadvantages - can't add to it, not always user friendly

Term
asymmetry
Definition

weight comes from shape and tone as well as size

 

- equipose - equal weight distribution with respect to optical center

Term
plastic comb
Definition

similar to spiral binding but with edge

 

advantage - user friendly and cleaner than spiral binding, can add things in last second

 

disadvantages - more expensive

Term
grouping
Definition
putting related elements together
Term
point of entry
Definition

anyway you can get into a website

 

- have as many of these as possible

Term
gridding
Definition
dividing a page into grids
Term
line chart
Definition

a chart connecting points on a graph to show changing quantities over time; also called a fever chart

 

- could compare 2 or more items

- a little more data

- always best to label data so people don't have to figure what it stands for

- be care with how you label data - check to see how it will affect scale

 

components:

1. vertical scale, measuring amounts

2. horizontal scale, measuring time

3. jagged line connecting a series of points, showing rising or falling trends

Term
aligning
Definition

do this to elements to give directions

 

- group pics, but pics not all same size so it creates movement

Term
bar chart
Definition

a chart comparing statistical values by depicting them as bars - compares two or more items by sizing them as columns parked side by side two basic

 

components:

1. scale running horizontally or vertically showing data totals

2. bars extending in the same direction representing

Term
bleed
Definition

a page element that extends to the trimmed edge of a printed page

 

- picture continues up (or down) to the edge of the page and visually seems to continue beyond the page edge

Term
pie chart
Definition

compare parts that make up a whole

 

components:

1. circle that represents 100 % of something

2. several wedges that divide the circle into smaller percentages (no more than 8 segments)

Term
acetate
Definition
for spot color; piece of clear film used for color separation
Term
offset printing process
Definition

1. making the negative

2. stripping the negative - opaquing

  • -opaquing - "reverse white out"; type of chemical used on negatives to get rid of dust spots; blacking out dust spots on a negative

3. burning the plate - take image and puts it on a plate; done for each page of paper

4. scrubbing the plate - sets image and develops image on plate

 

- add H20

 

-tray with ink

- ink is distributed evenly

- applied to the plate

- offset to blanket

- applied to the paper

Term
advantages and disadvantages of binding options
Definition

1. self-binding

advantages: cheapest; ex) newspaper - easy to share and read

disadvantages: falls apart easily; not durable

 

2. saddle stitch

advantages: 2nd cheapest; more durable than self-binding

disadvantages: limited number of pages you can have; can't add anything when done

 

3. heated adhesive

advantages: most durable binding, many pages; unlimited pages; lower range of cost

disadvantages: can't add to it, not always user friendly

 

4. spiral binding

advantages: very user friendly, cheaper than plastic comb, allow to fold and take less space

disadvantages: more expensive, can unroll and catch on things; not as durable or clean edge

 

5. plastic comb

advantages:user friendly and cleaner than spiral binding, can add things in last second

disadvantages: more expensive

 

6. three-ring

advantages: fairly durable; easy to add stuff

disadvantages:cost - more expensive

Term
four-color process
Definition

process starts with a huge roll of paper that is fed through four banks of rollers. Each roller adds one color at a time, starting with black, then cyan (Blue), magenta (Red), and finally yellow

Term
lithography
Definition

ink is applied to plates

 

- the ink is transferred to a blanket and then to paper

Term
blanket cylinder
Definition
big rubber stamp
Term
the paste-up process
Definition

1. the dummy

2. acetate - for spot color

Term
photo shapes
Definition

1. horizontal

2. vertical

3. square

Term
use of white space in photo spreads
Definition

don't cram text and photos into every square pica, let the page breathe.

 

don't trap dead space between elements, push it to the outside of the page

Term
display head
Definition
clever, punchy phrase with a descriptive deck below it. Something bold, not a standard banner headline
Term
types of magazines
Definition

1. consumer

2. trade

3. associational

4. house organs

Term
consumer magazine
Definition
  • most familiar with Playboy, Better Homes and Gardens;
  • hardest jobs to get;
  • aimed at Broad audience;
  • rely a lot on design to show how they differ from each other;
  • more design oriented
Term
trade magazine
Definition
  • aimed at specific trade/business;
  • more of these, lots of jobs;
  • information-oriented; flowers;
  • lot more jobs
Term
associational magazine
Definition
  • fewer due to cost of printing;
  • magazines for specific group membership; fraternity/sorority;
  • information-oriented
Term
house organs
Definition
  • very rare due to price of printing and internet;
  • mags/newsletters for employees of a business,
  • usually a bigger one
Term
principles of magazine design
Definition

1. appearance should be functionally suitable to its basic editorial goals

  • - how big the magazine is will be part of the editorial goals
  • - "breaking the book" - how magazine is divided between editorial and advertising

 

- layout must take into account the specific personality and character its readers perceive it to have

Term
visual personality
Definition
  • writing style
    • length of stories and how they differ from others
  • ratio of photos to text
    • articles emphasis in New Yorker; photos to text affecy design
  • length of articles
    • " the book?
  • based on audience and non-audience factors
Term
audience factors
Definition
  • demographics
    • age
    • location
    • income
    • education
    • gender
Term
non-audience factors
Definition
  • editorial goals/topic
  • budget ($$)
  • printer
Term
life-size magazine
Definition
  • 10 1/2 by 13
  • less used now because of paper prices and postage rates
  • Advertising Age
  • technology bringing it back
Term
Time-size magazine
Definition
  • 8 1/2 by 11
  • most popular size
  • most standard size
  • cheaper to send
  • best for postage
Term
Readers Digest-size Magazine
Definition
  • 5 1/2 by 7 1/2
  • TV Guide (old)
  • use motivates size
  • Disney Adventures
  • little more expensive to ship
Term
format considerations
Definition
  • ease of handling
    • easy to have in hand and read
  • adaptability of content to form
    • photo mag in RD size not a good idea
  • mechanical limitations of printing-press sizes
    • usually large size-, associational
Term
column width
Definition
  • the wider the column the bigger the type or the more space between lines (leading)
    • not bigger type size
  • depends on age of reader, mood of magazine
  • the fewer columns per page, more bookish the look
  • 1 or 2 col. Page - more formal
  • 4 or more -more like a newspaper
Term
margins - factors
Definition
  • type page
  • optical center
  • double truck
Term
margin sizes
Definition
  • biggest one - bottom, because of optical center.  making this one bigger visually moves center of design up to match optical center
  • the smallest one is the inside (center) one because you are desinging across two pages (keeps center gutter to minimum)
Term
what is a grid and why?
Definition
  • an invisible structure used to guide the placement of elements on your page
  • provides page to page continuity
  • helps speed production
  • allows designer to introduce variations without compromising readability or consistency
Term
margins
Definition
  • define the outside boundary of your page
  • frame the content of your pages
  • may not be equal all around (but are normally consistent from page to page or panel to panel
Term
alleys
Definition
  • when you divide the interior space of your page into uniform parts this is what the white space between the units is called
  • depending on how you've set up your grid they may run horizontally, vertically, or in both directions on your page
  • in some designs this would translate to the white space or "gutter" beween columns of text
Term
gutters
Definition
  • the inside margin
  • space on either side of the fold
  • space between two columns of text as well in some page layout programs
Term
grid units
Definition
  • primary locations on your page where you will place text and images
  • determine placement, not necessarily size
Term
"thinking points" to plan your grid and your design
Definition
  • content or page elements
    • is the publication heavy on text or heavy on graphics? 
    • will there be many headlines, rules, illustrations, pull-quotes?
  • text
    • look at both amount of text and how it is broken down - long articles, lots of short articles, a mix of long and short articles
    • how many subheads?
    • will you use decks, initial caps, and other visual cues?
  • photos and illustrations
    • are there similarities in the type of illustrations or size of photos?
    • can photos be grouped by size or type?
    • are there a lot of rectangular elements are irregular shaped elements?
Term
which grid is best?
Definition
  • a newsletter, brouchure, or magazine with many photographs = a grid with many smaller units = more possibilities for placing and sizing the photographs
  • 4 or more columns offer greater flexibility for pubilcations with text, photos, and other graphic elements and a mix of long and short articles
  • grids based on an even number of grid columns can suffer from too much symmetry if text and graphics are confined to individual or double grid columns throughout
Term
what do users like?
Definition
  1. ease of use
    1. navigation
      1. things are well divided and easy to follow
      2. links
      3. good search engine
      4. site map - has every page part of site
  2. speed
    1. how fast is connection
  3. practicality
    1. no flaming logos - everything on page has a purpose
  4. credibility
    1. information about business
    2. extension
    3. name
    4. copyright information
    5. "last updated"
    6. security
    7. contact information
  5. simplicity
    1. things are well organized
  6. support
    1. contact info.
    2. FAQ
Term
General principles of web design
Definition
  • consistency
    • same basic layout grids
    • same graphic themes
    • same hierarchies or organization
  • interaction
    • predictable - assuming something will pop up
      • use symbols for things like video
    • visible - make sure things are labeled
    • reversible - allow sounds and video to be able to be started/stopped
  • instruction
    • tell them what to do; don't make them guess (make it obvious)
    • use text links, title tags or hovers for instructions (accessibility issues)
    • tell them download times (for various connections, test out)
  • choices
    • more than one way to find what their looking for
  • navigation
    • hierarchical
    • sequential
    • narrow and deep (fewer but longer pages)
    • broad and shallow (more but shorter pages)
  • control
    • allow them to personalize (makes people come back more often)
Term
visual principles of web design
Definition
  • graphics
    • if a navigation tool, should look action-oriented
    • tell at a glance if it's decorate or a link
    • don't underline text unless it's a link
    • keep in mind global audience
    • arrow for movement (it's a link)
    • colors
  • text
    • organize into small, digestable pieces
    • scannable
    • sans serif rather than serif for body text (Arial)
    • nonornamental fonts (script fonts)
    • roman (regular) than italic
    • scan the page
    • highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others)
    • bulleted lists
    • one idea per paragraph (users will skip over any additional ideas if they aren't caught by the first few words in the paragraph
    • 9-11 points for sans-serif fonts, 11-12 pts for serif for body text
    • upper and lower case rather than all caps
    • line lengths fo less than 50 or 60 characters long
    • high contrast between text and background colors (light background with dark type and vice versa)
  • layout
    • most important elements should be most prominent visually (put what people need toward top; top story and navigation toward top)
    • basic functions should be immediately apparent
    • keep number of objects and actions to a minimum
    • eliminate any visual elements (i.e. decorative gra[hics) that don't contribute directly to communication
    • use graphics to illustrate, inform, and aid in navigation
    • use white space with visual "breathing room" to visually organize the page
    • invisible table lines, rather than visible ones
  • color
    • be aware of color connocations (and global audience)
    • don't forget about color blindness
    • web-safe colors (lynda.com)
    • use colors for site organizations
      • let people know what page they're on
      • pick colors that go well together
Term

what a website needs to be

(chapter 9)

Definition
  • Informative- that means useful news, not whizbang gimmickry
  • Easy to navigate - that means a clean, uncluttered, user-friendly interface
  • Fast-moving - that means it's responsive - quick clicks from link to link
  • Current - that means you guarantee freshness everyday
Term

two categories of online newspaper pages

(chapter 9) 

Definition
  • Stories.
    • Taking a story from a newspaper and configuring it to the web (see ex pg. 228)
  • Menus.
    • Home pages and section fronts that function as super-indexes to guide readers through your web site
Term

the homepage

(chapter 9) 

Definition

 what is the gateway to the online newspaper?

Term

typical elements of a online newspaper homepage

(chapter 9) 

Definition
  • Time/date
    • If you update your site more than once a day, you should include the time of this edition, as well.
  • Index (or navigation bar)
    • Easy to get lost in cyberspace
    • A complete, clickable index is vital on the homepage - AND on every other page in the site, as well
  • Lead story
    • Usually just a summary, but you can click the headline to link to the full text - or click the icons below to see photos and a video clip
    • Lead photo may be small, but large images force pages to download much more slowly
  • Page depth
    • This page is designed to fit on one screen, so readers won't have to scroll
    • Best to avoid never-ending vertically scrolling home pages- which requires smart planning and tight editing - but usually, the bigger the site, the deeper the home page
  • Footer
    • Every page on every web site should include copyright information
    • Also a good spot to solicit e-mail feedback from readers or provide links to other sections of the site
  • Links
    • Click on these headlines to read the site's other top stories
    • Many sites add summaries or photos to these headline collections - but that also deepens the page and slows the download time
  • Interactive extras
    • Online newspapers provide features that ordinary newspapers can't:
      • Webcams
      • Polls
      • Photo galleries
      • Games
      • Animated graphics
      • See list pg. 232
  • Ad/promotions
    • These are usually dummied horizontally at the top of the page or (Better) in this right-hand rail
  • Search engine
    • Helps users hunt for specific topics or names
  • Navigation buttons
    • These quickly link users to key sections of the site; the index down the left side if more complete
  • The flag
    • For online editions, newspapers often devise a new name and spiffed-up logo, while maintaining some connection to the print version
Term

navigation

(chapter 9) 

Definition
good web design is all about?
Term

web site extras

(chapter 9) 

Definition
  • Text-only option (for users with slow modem connections)
  • Digital version of your newspaper's front page
  • Reader polls
  • Reader forums: chat rooms, discussion groups, and message boards
  • Photo galleries that are organized by event, topic or day
  • Search engine for entire site
  • Downloadable audio (speech or music excerpts, interviews) or video (sports highlights, broadcast TV clips)
  • A local webcam
  • Contact for buying photos or back issues of the newspaper
  • A "print this story" option
  • Link that lets users e-mail any page or story to a friend
  • e-mail subscription service foe news stories, sports scores, weather, reviews, etc
  • FAQs about your paper, campus, town, etc
  • Complete staff list with phone numbers and e-mail links
  • Overall site map
  • Stock market quotes
  • Local weather or traffic updates
  • Interactive games, puzzles or contests
  • Mp3 clips of local bands
  • Links to downloadable software necessary to run any of these extras: audio, video, games, etc
  • e-mail postcards
  • Animated infographics
Term
evaluate your computer resources

(chapter 9) 

Definition
  1. It takes hardware
    1. A gutsy computer (either Mac or PC, with a big monitor and lots of memory)
    2. A web server (a goofproof computer to host your site.  You can always use your own, but it may be smarter to lease space from an ISP [Internet Service Provider)
    3. An internet connection for browsing the web (modem OK but a high-speed DSL line or cable modem is preferable
  1. It takes software
    1. Image-editing program (like Photoshop) to compress your graphics into GIF and JPEG files
    2. Web browser
      1. Internet Explorer, Firefox, Netscape Navigator
    1. Text-editing program (like SimpleText or WordPad) or a web design program (like Dreamweaver or FrontPage) for writing your HTML
Term

HTML (hypertext markup language)

(chapter 9) 

Definition

the coding that controls all the text and formatting of web pages

Term

dealing with different download times

(chapter 9) 

Definition
  • We all download pages at different speeds - fast or painfully slow
  • The more complex a page is, the more slowly it downloads.  The more slowly it downloads, the more frustrated users become
  • Therefore:
    • Keep things simple
      • When in doubt, minimize
      • Don't overload pages (Especially home pages) with images, colors, and unnecessary eye candy
    • Avoid gimmicks
      • News sites really don't need type that dissolves, sparkles or blinks, unless it's a warning that your site is about to explode
      • Use special effects for good reason - animated graphics for example - not for frills
      • Don't waste bandwidth - make every K count
    • Keep images small
      • Set a limit on routine image file sizes
      • To display full-size photos, use clickable thumbnails that link to larger images
    • Monitor your users
      • Suppose 95% of your users have new computers and superfast access.  Would that make it OK to load your site with huge graphics?
      • Run browser-detection software to analyze who your users really are, then decide
Term

coping with different platforms

(chapter 9) 

Definition
  • Your site will look different to every visitor
    • Stuff that looks great on a big monitor might not on a little laptop
    • Browsers on different operating systems look different
  • Text appears smaller on Macs than PCs.
  • HTML won't let you choose exact point sizes for text; you can only choose one of seven relative sizes
  • Can't select exact fonts either (since users may not own the font you're using); you can only suggest fonts for users who have them installed
    • All users set up different defaults in the browsers (mine Times, another Helvetica)
  • Test carefully
    • View all your pages on all platforms and all browsers
    • Stay aware of the inevitable flux, so you can build a little flex into your layouts
  • Remember your-text only users
    • Those viewing your site on browsers with the graphics turned off
      • Or the visually impaired, whose browsers read the page aloud
        • Provide ALT tags for every image, so if the images don't appear, short descriptions of them do
Term

organizing pages

(chapter 9) 

Definition
  • Avoid clutter
    • Don't have a distracting page
    • Same rules apply whether you design a page for print or the web:
      • You need clean, rectangular modules
      • Dominant image to anchor the page
      • Group related elements (ads in one place, index in another)
    • Don't settle into a dull, inflexible format - Keep pages fresh
      • Design top stories with dramatic headlines and visuals
  • Make easy navigation a priority
    • The busier the page, the more you must label and group everything - like a restaurant menu
    • Use colors, headers and navigation bars consistently
    • Help readers search, click and exit effortlessly.
  • Watch your page width
    • Web dimensions are measured in pixels
      • Standard width is 595 pixels
      • Don't make them any wider, not everyone has a big monitor and scrolling sideways is distracting
      • Standard monitor depth is 480 pixels
  • Let 'em scroll
    • It's not scrolling readers dislike - it's being bored
    • Successful design has always been about fitting the maximum data into the smallest space, so keep pages (Especially home pages) to one or two screens, if you can
  • Think vertical
    • Newspaper web pages flow vertically as you scroll downscreen
    • Fewer traffic-control problems, then, if you plan your pages in ever-deepening vertical modules
    • Long legs of text are just as boring on the web as they are on paper
      • Edit stories tightly; when possible link to sidebars and alternative stories instead of scrolling endlessly downward
  • Include fixed page elements
    • Keep navigation bars close by at all times
    • Users often print out pages or save them to disk
      • Make sure very page contains your publication's name, the date and all relevant contact/copyright information
Term

using effective page grids

(chapter 9) 

Definition
  • You need to divide the page into modules and assign every module a specific job: the index module, big news module, sports module, cheesy promotional gimmick module
  • Can organize your modules with rules, labels, background screens and colors - whatever it takes to unify the elements without creating clutter
  • Avoid random or redundant modules
    • Prioritize and sort everything, especially on crowded, busy home pages
    • Make every element's function and identity clear
  • Align those ads
    • Get noisy ads under control.
    • Stack them neatly, just as you would on a printed page
  • Avoid overcrowding
    • Design white space into the layout, a little extra air between modules.
    • Make all your gutters at least a pica wide to let the page breathe
Term

adding color

(chapter 9) 

Definition
  • Use browser-safe colors
    • Standardized palette of 216 colors - use it
    • If you create your own hues - they may turn weird and blotchy (called dithering) and load more slowly on everyone else's monitors
  • Use color consistently and strategically
    • Develop a color palette that's part of your overall navigational system, one that helps to organize page elements and direct traffic without adding unnecessary noise
    • Select just a  few colors that harmonize well together and reflect your paper's true personality
  • Beware of dark, textured or colorized backgrounds
    • Stick to black type of a white background, unless you've got a great reason
    • Too much color adds clutter, reduced readability and makes printing problematic
    • Use color sparingly; save it for signage and for dramatics display elements
Term

sizing and saving graphics

(chapter 9) 

Definition
  • On the web, the word graphics refers to a variety of elements: photos, display type, flags, illustrations, icons, navigation buttons, and bars
  • Almost anything on your site that's more complex than HTML text and headlines - including and type you want to craft precisely - will need to be imported as a graphic
  • Too many imported graphics will slow your download time and constipate your page flow
  • But too few images can result in pages that are wordy, messy, or dull
  • Compress all your images
    • Convert them into either GIF or JPEG files - two most common web image formats
      • GIF images work best for:
        • Line art
        • Images with just a few colors or with large areas of solid color
        • Display type
        • Black-and-white images
        • Images smaller than a postage stamp
      • JPEG images work best for
        • Photos
        • Complex illustrations
  • Use fewer and smaller images
    • Big photos are a bandwidth clogger
    • Use thumbnails to link to your full-sized photos
    • Try to avoid turning your readers into thumb-twiddling zombies while they wait for big, dumb, unnecessary stand-alone images to appear
Term

using type effectively

(chapter 9) 

Definition
  • Keep your text width comfortable
    • Stacking them in narrow legs (like newspapers do) won't work
    • Better to use one wide column, but don't make it too wide
  • Avoid excessive text on home pages
    • Avoiding running more than a paragraph of text on the home page
    • Think of the homepage as a menu or super-index; think of its main elements as promos - your goal is to click the users ahead
  • Avoid underlining text
    • Underlining must be reserved exclusively for links, or readers will get confused
    • Web visitors have been trained to think that any differently colored or differently styled type is a clickable link
      • Don't colorize ordinary type; colorize only links
  • Be creative when installing links
    • You can link with headlines, words, icons, or images
  • Use different fonts for different jobs
    • Mix bolds and italics when crafting headlines, decks, and bylines
    • Use display type, saved as small GIF files, to create appealing headers and special headlines
Term
what needs to be included with all infographics
Definition
  • headline
    • brief, but informative
  • text - if necessary
    • what does graphic represent?
  • legend - if necessary
    • tells what things mean
  • source credit
    • where you got info (somewhere in graphic)
  • box around the entire graphic
    • make it into piece of art
  • a credit line for you
  • try to keep infographic from looking flat
    • drop shadow
    • layer things
Term

what kind of infographic would you use for this particular type of information?

 

Definition
  • bar
    • comparision between two or more items
    • ex) what people seek on the web - 110 seek news, 70 search engine, 63 corporate sites
  • pie
    • comparing parts that make up a whole
    • ex) how much of us is German? 1/4 of 100%
  • line
    • measure changing quantities over time
    • ex) how TV shows viewing has changed over the past 10 years
Supporting users have an ad free experience!