Multimedia and Web Page Design Final Exam Review
1.01UNPACKED CONTENT
1)Typography – the style, arrangement, and appearance of text
a)Typeface – the basic design of a character
b)Typeface Categories
i.)Serif – the characters have serifs or strokes on the tips
1)Easier to read in large bodies of printed text
2)Examples
a)Courier
b)Times New Roman
ii.)Sans Serif – “sans” is French for without, so the characters do not have serifs or strokes on the tips
1)Easier to read on digital displays such as Smart Boards and monitors
2)Examples
a)Arial
b)Verdana
iii.)Ornamental – artsy typefaces; known for their elaborate features and unique design
1)Designed to catch the eye
2)Should be used sparingly
3)Should never be used in body text
4)Typically displayed in large point sizes
5)Great for banners, initial caps, and headlines
6)Examples
a)Algerian
b)Bauhaus
iv.)Script – the characters appear to have been written by hand
1)Should never be keyed in all caps
2)Can convey a formal or casual mood
3)Examples
a)Brush Script - Formal
b)Kristen ITC - Casual
v.)Symbol - uses decorative pictures or symbols instead of characters
1)Allows the user to use a symbol to convey the message without importing a graphic
2)Can be used for fun or for musical and mathematical symbols
3)Examples
a)Webdings
b)Wingdings
c)Font – a specific size, weight, and style applied to a character. Examples include: Arial, 14 pt., bold and Times New Roman, 12 pt., italic, shadow
d)Typeface Spacing Categories
i.)Monospaced – all characters receive an equal amount of horizontal space regardless of the size of the character.
1)Harder to read than proportional fonts
2)Provide an advantage in math and programming languages because the spacebar can be used to align characters in monospaced
ii.)Proportional – all characters receive a different amount of horizontal space based on the size of the character.
1)Easier to read in body text
2)Disadvantage - the spacebar cannot be used for alignment because the characters do not all have the same amount of horizontal space. Must use tabs for alignment.
2)Usability and Readability Considerations – Font choice has an impact on a design’s effectiveness
a)Font choice should convey the meaning or personality that matches the purpose of the design
i.)Examples:
a)Sympathy Card – Script
b)Flyer Heading – Ornamental
b)Font choice should give visual clues about the order text should be read
i.)Visual Hierarchy - an arrangement of text in a graduated series to help readers scan and know where to enter and exit the text
a)Create hierarchy through changes in weight, scale, positioning, color, tone, spacing, or font
b)Examples:
1)Main headings larger than subheadings
2)Using bold, italics, and color for emphasis
3)Most important information at the top of a web page
c)Font choice should be limited to 2 or 3 fonts
i.)Too many font choices can be distracting
ii.)Do not mix 2 fonts from the same category
a)Example: Times New Roman for a heading and Palatino for a subheading; 2 serif fonts
d)Consider the target audience
i.)Examples:
a)Young readers need fonts that accurately display letters. The lowercase “a” in Arial is not displayed the way young readers learn to write the letter “a” making the font difficult to read
b)Clearview font for highway signs – drivers need fonts that can be read at a distance
e)Consider the medium – Test the typeface to see if it is legible for the intended output, whether digital or in print
i.)Test the Size – the vertical height of a character
a)Suggested body text for print is 10-12 points
b)Suggested body text for the web is 15-25 pixels
ii.)Test the Style – bold, italic, fill color, stroke color, shadow, small caps
a)Use to add emphasis or improve readability
iii.)Test the Spacing
a)Leading – vertical spacing between of lines of text
b)Kerning – horizontal spacing between pairs of letters
c)Tracking – horizontal spacing between all the characters in a large block of text.
3)Multiuse Design Elements
a)Lines – used to organize information, simulate movement, lead the eyes and enhance a design.
b)Space
i.)Positive Space – length, width, and depth of objects
ii.)Negative Space – “white space”; the distance between objects; gives a design breathing room
iii.)Example: Two shapes on a page are positive space. The space between them is negative space.
c)Shapes – 2-deminsional space; used to enhance a publication.
i.)Geometric – square, triangle, circle
ii.)Organic – natural or man-made objects such as leaves, trees, and cars
d)Form – 3-dimensional space added to objects by the addition of shadows, tone, or color transitions
i.)Example: Shadows on computer screen windows give the illusion that they are floating in 3-D space even though the design is 2-D.
e)Mass – the size or amount of space taken up by an element.
f)Texture – used to convey a “visual” sense of feel.
g)Color - can be used to evoke emotion
i.)Color theory
a)Color themes can be used to set a tone or mood for the publication.
b)Color themes:
1)Calming colors – cool colors (blue, green and violet)
2)Exciting colors – warm colors (red, orange and yellow)
3)Neutral colors - beige, ivory, taupe, black, gray, and white
ii.)Color Harmony – a visually pleasing arrangement of colors
a)Color palette – a chart used to choose colors
iii.)Color Schemes
a)Complementary color scheme – any 2 colors directly opposite each other on the color wheel
b)Analogous color scheme - any three colors which are side by side on a 12 part color wheel
c)Monochromatic scheme - uses variations in lightness and saturation of a single color.
iv.)Color Modes
a)On Monitors – colors are created by mixing varying degrees of red, green and blue light.
1)Referred to as RGB (red, green, blue)
2)Expressed as hexadecimals
3)Additive color
b)On Printers - in the four-color printing process, color is created by layering cyan, magenta, yellow and black ink.
1)Referred to as CMYK (cyan, magenta, yellow and black)
2)Expressed as percentages
3)Subtractive color
c)Color Matching – the process of matching the colors produced on the computer screen to the colors that can be printed on paper using ink to ensure the printed publication looks as much like the on-screen publication as possible.
v.)Color Terms
a)Hue – a color
b)Value – the brightness of a color
c)Tint – a hue plus white
d)Shade – a hue plus black
e)Saturation - the amount of the hue used; a color’s intensity
4)Multiuse Design Principles
a)Balance – determined by how elements are arranged
i.)Symmetrical – elements of the design are centered or evenly divided horizontally and vertically on a page.
ii.)Asymmetrical – off-center alignment created with an odd or mismatched number of elements.
iii.)Radial – elements radiate or swirl out from a center point.
b)Contrast – emphasizing the difference between two elements
i.)Creates interest and excitement
ii.)Examples: red and white, squares and circles, rough and smooth textures
c)Unity/Harmony – All of the design elements are consistent with each other in shape, style and color and consistent with the overall message
i.)Helps the reader understand the whole message
ii.)Can be achieved through repetition/consistency
iii.)Examples:
1)Using consistent font scheme or repeated shape throughout
2)Using lines to connect
3)Placement of related objects near each other (Example: Picture with caption)
d)Scale/Proportion – the relationships between the sizes of various elements
i.)Creates visual impact and aids readability
ii.)Examples:
1)Headline larger than body text
2)Exaggerating the size of a design element to make a point
e)Dominance/Emphasis – the first element the eye sees; the focal point
i.)Gets the viewer’s attention
ii.)Assures the viewer starts in the correct order
iii.)Examples
1)Splash of color
2)Shocking image or text
5)Multiuse Design Compositions
a)Grids – visually dividing the layout into columns and/or rows
b)Rule of Thirds - visually dividing the page into thirds vertically and horizontally and placing the most important element along a line or where the lines intersect
c)Optical Center - the spot that the eye sees when it first encounters a page. It is slightly above and to the right of the mathematical center of the page.
d)Z-pattern – the visual path the eye follows when looking at a printed page.
6)The Systems Approach - The process of a design project that involves preliminary research and collaborative planning before design can begin.
a)Advantages
i.)Work is done more efficiently
ii.)Keeps the project organized
iii.)Ensures alignment to customer’s goals and expectations.
b)Steps:
i.)Collect Information - Interview the client and/or use a pre-set questionnaire
1)Who is the target audience?
a)Age
b)Gender
c)Geographic location
d)Cultural considerations
2)What are the goal of the design?
a)To sell, inform, entertain, educate
b)Formal or informal
3)What are the technical requirements?
a)Documents required – flyer, business card, advertisement, web site, etc.
b)Page Size
c)Required colors
d)Copies needed
4)What are the budget and deadlines?
ii.)Develop a Plan - For a business this might include a written proposal, a price quote, a customer contract, the development of a design team, and a detailed action plan
iii.)Brainstorm
1)Find inspiration in books, magazines, museums, and unwinding (taking walks, having fun, etc.)
2)Research similar or competing designs
3)Sketch out ideas
iv.)Experiment – keeping the original goal in mind, experiment with a few different design options to show the client
v.)Proofread – proofread with a partner or have others on the development team proofread the design to make sure it is free from spelling and grammatical errors
vi.)Revise – collaborate with the client for feedback and revise the design if necessary
1.02 UNPACKED CONTENT
1)Graphic Design Layout Options
a)Template – A standard pre-formatted layout which may contain a color scheme, font scheme, pictures, and preset margins
b)The Grid System - organizing content on a page, using any combination of margins, guides, rows and columns.
i)Commonly seen in web design and in newspaper and magazine layouts with columns of text and images.
ii)Used to achieve a consistent look and feel
iii)Types of Guides (or guidelines) – non-printing lines used to assist the developer in placing objects
(1)Margin guides – non-printing lines that indicate the space between the edge of the page and the document contents
(2)Column guides – non-printing lines that control the flow of text within columns
(3)Gutter - space between columns
(4)Ruler guides – non-printing lines used to precisely align objects
2)Formatting Considerations
a)Page size – varies according to publication or digital device.
b)Master page – includes items and formats common to every page; used to maintain layout consistency
c)Prototype – (also called a “comp” or “mockup”) an example of how the final document should appear; often used to show clients in the early stages of design
3)Graphic Design Layouts
a)Business Card - small card printed with one's name, professional occupation, company position, business address, and other contact information
b)Letterhead - a printed heading on stationery stating a person's or organization's name and address
c)Flyer – a one-page document posted for public viewing; can be used to advertise a one-time event or for informational purposes
d)Brochure – informational pamphlet usually folded into sections
e)Newsletter – a bulletin issued periodically to the members of a society, business, or organization; usually outlines news and current events
f)Advertisement - a notice or announcement in a public medium promoting a product, service, or event
g)Magazine Layout – the arrangement of graphics and copy in a magazine
h)Infographic – graphical representation of information or data intended to present complex information quickly and clearly
4)Graphic Design Features
a)Graphics – used to convey meaning and add appeal
b)Bleed – a print effect in which layout, type, or pictures extend beyond the margin to the physical edge of the page
c)Caption – used to identify an illustration or graphic
d)Dropped cap – an enlarged character at the beginning of a paragraph used to grab the reader’s attention
e)Pull-quote – a small section of text “pulled out and quoted” in a larger font size; used to draw attention
f)Sidebar – A smaller self-contained story alongside a larger story which may or may not be related; usually boxed with its own headline and set off from the main text
g)End mark – a symbol, such as a wingding, that indicates the end of an article
h)Nameplate – banner on the front of a document that identifies the publication and usually includes the name of the publication, a logo, and/or motto
i)Main Heading – title of the article, usually set in a larger font
j)Subheadings – subtitles, usually set in a smaller font than the title; can be used to break up body copy
k)Byline – name of author or contributor of photo or article, usually placed just below the headline or photo or at the beginning or end of the article
l)Kicker – words positioned above a headline, usually as a lead-in or teaser
m)Deck – placed between a headline and an article to provide a segue between the headline and the body of the article
n)Running headlines and footers – headers and footers used to indicate dates, page numbers, and/or running titles; help guide the reader
o)Body – the bulk of text in the publication, such as articles and news items
p)Jumpline – line at the end of a continuing article that tells readers which page to refer to for the rest of the article
2.01 Unpacked Content
1)Graphic Images Considerations
a)Graphics – anything on a page that is not actual text, from simple line drawings to fully active images found on the World Wide Web. The two major categories of graphic images are raster and vector.
b)Factors that Affect Graphic Choice
a)Color depth - refers to the number of colors per pixel that can be displayed in an image and affects image quality and file size.
b)Compression - refers to the mathematical algorithm used when an image is saved in order to reduce the file size.
(1)The greater the compression, the lower the quality of the image.
(2)Lossless – no data is lost during compression.
(3)Lossy – some data is lost during compression.
c)Portability – ease at which files are opened, modified, and viewed on computers using different operating systems, software and browsers.
d)Transparency – the background of an image is “see-through” so that the graphic can blend into the background without having a white box around it.
c)Units of Measurement
a)Inches (in) – the standard unit of measurement for US standard size papers that can work well for print. A “Letter” size piece of paper measures 8.5” x 11”, which is the most common size used in printers, for resumes, and other common desktop publishing documents.
b)Pixels (px) – the most common unit of measurement used for computer screen display. A pixel generally represents one dot that is illuminated on a computer screen, many of which make up images. Pixels represent a precise measurement system for web-design, but can lack flexibility as screen size changes.
c)Points (pt) – the standard unit of measure for typefaces, with 1 point representing 1/72 of an inch, therefore text formatted in 72 point font should be approximately one inch with variation due to font designs. 12 point font is generally accepted as the standard font size for paragraph text in print.
d)Picas – a unit of measurement for lines of type with one pica equal to 1/6 of an inch. Therefore, there are six picas in one inch. Picas are often used in print design, as they are more easily divisible than inches, such as with the Rule of Thirds.
d)Resolution
a)Resolution – the amount of detail stored for an image. The higher the resolution, the higher the level of detail in the image.
(1)PPI (pixels per inch) - The number of pixels in one inch. More pixels per inch means better image quality but larger file size.
(a)On-screen resolution - monitors can display an image at a resolution of 72 ppi. Additional resolution beyond 72 ppi will increase file size without a noticeable increase in image quality.
(b)Print resolution - documents that are being sent for print should be 300 PPI to ensure image quality
(2)DPI (dots per inch) - the number of dots of ink or toner per inch on a printed image.
(a)The lower the DPI the less detailed the image.
(b)Images that will be printed need a higher resolution in order to print clearly without pixilation or blurriness.
b)Color Mode (note to teacher: this design element is also covered in objective 1.01 and is intended to be reinforced in this content) – a mathematical model that describes the way colors can be represented as numbers or percentages, typically with three or four values.
(1)RGB (red, green, blue) – assigns an intensity value to each pixel that ranges from 0 to 255 for each of the red, green, and blue components in an image. If all of the RGB values are 0 the result will be black. If all of the RGB colors are 255 the result will be white. RGB color is best used for on screen display.