Combo with -VIC 3001 Final- and 1 other

Your page rank:

Total word count: 6586
Pages: 24

Calculate the Price

- -
275 words
Looking for Expert Opinion?
Let us have a look at your work and suggest how to improve it!
Get a Consultant

Mindy McAdams Lecture

Responsive design

Responsive design

You design a page or a frame or an app so that it automatically reformats itself When you open it on a little tiny screen the code itself recognizes that and it reformats itself so it looks close to the original or matches the original

Jasper Fessman Lecture

International PR

International PR

Recognize cultural differences PR culture is different in different countries Journalism is different in different cultures

Which of the following is the most popular color in the US and is often used for social media websites?

Blue

Which of the following is trite ____________?

Using papyrus because your topic is ancient in some way.

Which of the following is NOT a component of Moriarty’s process for creating a cultural palette?

Have company executives select relevant visuals.

Which of the following is NOT a good thing?

Putting stroke lines around text to improve legibility

True or false: all browsers display files in the exact same way

False

Can you perfectly match color across all platforms?

No

According to WSINYE, which of the following is an advantage of the print medium over the web medium?

More predictable/reliable tools for creation.

Is print color reflective?

Yes

Is web color reflective?

No

According to the author of the article titled "how Gap learned a hard lesson in consumer resistance," what was the reason for public pushback to the Gap logo redesign?

The public was strongly committed to the Gap brand

Kerning

the spacing between the characters

Leading

spacing between lines of type, measured from baseline to baseline

13 layout sins

1. centering everything 2. warped or naked photos 3. too many fonts 4. bulky borders and boxes 5. cheated or missing margins 6. trapped negative space 7. busy backgrounds 8. tacky type emphasis 9. bad bullets 10. widows and orphans 11. justified rivers 12. stairstepping 13. 4 corners and clutter

Warped or naked photos

keep photos proportionate, and use hairline rules to border photos that have ambiguous edges

Bulky borders and boxes

use negative space to group or separate things. If you must use a border or a box, choose an understates one

Stairstepping

keep headlines in a straight line

4 corners and clutter

clutter=bad. clustering=good

Trapped negative space

push extra negative space to the outside edges of your layout

Tacky type emphasis

think twice about reversing, stroking, using all caps or underlining

Bad bullets

use real bullets for lists, and use hanging indents to properly align lists

Widows and orphans

avoid inelegant breaks at the bottoms and tops of legs of type

Justified rivers

avoid unsightly rivers of negative space flowing through legs of justified type

Contrast

Offers a great deal of flexibility and is an important principle for designing interesting layouts. You can employ contrast between filled and empty space, you can employ contrasting sorts of lines or shapes, you can juxtapose contrasting sizes of objects, textures, patterns, colors, etc. You need contrast to avoid boredom.

Balance

you want your layouts to include visual balance. Three kinds of visual balance: radial, symmetrical and asymmetrical.

Radial balance

circular designs which are often associated with spiritual meanings. Wherever you split radial balance, you end up with symmetrical halves.

Symmetrical balance

can tend toward conservative, stuffy or boring. Each side of a bisected design must be a mirror image of the other in terms of visual weight.

Asymmetrical balance

reveals two unequal sides if bisected. Tends to be more visually exciting.

Gestalt

the brain automatically and unconsciously simplifies, arranges and orders objects the eyes see. Specific patterns of perception emerged from this research, which became the Gestalt laws.

Four Gestalt laws

Proximity Similarity Continuity Closure

Proximity

we perceive objects that are close together as belonging to the same group.

Similarity

our minds group things with similar properties, such as color or shape.

Continuity

our minds will continue a pattern beyond its ending points. Applying this concept can add a sense of direction and movement to your layout.

Closure

we mentally fill in the gaps in order to complete a perceived shape. The idea of designing with only a part but having your viewer perceive the whole opens up interesting compositional opportunities, including interplay of positive and negative space.

Placing visuals in your layout

place visuals near the top of the layout. If your picture has direction, make sure it’s pointing the right way. Ex if there’s an arrow or strong line, make sure it’s pointing to the corresponding text. Flipping photos is a bad idea. Don’t position a photo where it interrupts the flow of reading. Pay attention if you’re "wrapping" text (don’t leave columns that are too skinny to read).

Multi-page layouts

maintain visual unity (consistent font styling, same grid skeleton, etc.) Break up copy-heavy designs with visuals, headlines and subheads, using negative space strategically, and use a grid and set copy into inviting legs of type. Help readers keep track of their whereabouts with navigational signs- tables of contents, teasers, jump lines pointing to the rest of the story or even flags and sigs.

How web design is similar to print design

The end product must convey information, control the eye’s movement, convey information and evoke emotion. Your website design will need a focal point, visual hierarchy, balance, rhythm, flow and consistency across multiple pages

How web design differs from print design

You cant completely control the way your layouts will appear onscreen. Your layout is built on an incredible shrinking (not expanding) canvas. Today’s websites are as likely to be viewed on a smartphone screen as a laptop screen. You must plan for a high degree of layout flexibility. Websites are nonlinear. Rather than move from chapter 1 to chapter 2, viewers can jump to any point in a website at any time, and things need to make sense when they arrive. The Web can be a multi-sensory experience. The Web is an interactive experience.

SEO

To optimize your site, make a list of the most likely keywords people would use to search for your site and incorporate those words into your page content. The more often keywords appear in your content, the more favorably search engines will rank your page when someone searches using those terms.

A few best practices and design conventions

Establish content hierarchy Define relationships among assets on the page- what design tools can you use to indicate what goes with what on your page? Create a sense of direction- show your visitors where to start and where to go next. Limit the need to scroll Keep navigation near the top Use logo as a home page link

Navigation

Includes the list of buttons or links that take folks to other parts of your site, hence the name. Navigation often sits above or below the header and may run right down the right or left side of the screen page. Try to limit the quantity of items in your navigation to between 5 and 10. If you can’t limit to 10, use accordion or pulldown menus.

Some tips for creating good GUI/getting GUI

Make the purpose of each page clear at a glance. Keep link names clear and simple Make the link name match the title of the corresponding page Make buttons and links look like buttons and links Navigation should be persistent Be wary of pulldown menus Have a link to the home page as part of the persistent navigation Place navigation, and any other important content, "above the fold" aka no scrolling required Use color to organize and order Consider using a breadcrumb trail (shows visitors where they’ve been and how to get back) Provide a search box

Primary color relationships (CR)

yellow, blue, red

Secondary and primary color relationships (CR)

yellow + blue = green blue + red = purple red + yellow = orange, etc.

Tertiary CR

mix a primary color with the closest secondary color on the color wheel to get those subtler "in between" tertiary colors.

Triads (CR)

Form any triangle four hours apart on the color wheel to locate a visible color-scheme triplet.

Analogous CR

mixing colors next to each other on the color wheel produces "in between" colors. Side-by-side colors on the wheel are related because they contain some of the colors sitting next to them, hence, analogous.

Color temperature

one side of the wheel is warm, one side of the wheel is cold. You can warm up a cool color by adding a little orange, red or yellow. You can cool down a color by adding a little, blue, green or purple. When used in layouts, warm colors appear to come forward while cool colors appear to recede.

How to choose color: Culture

Consider the culture of your target audience….and context of the message.

Color technology: That’s not the color I chose. What happened?

Screens and printers dont speak the same language. Screen color is electronic color, which overlaps light to achieve colors. For printed color, we layer inks.

Working with screen color

RGB- the intensity of red, green and blue. For any electronic color, the red, green and blue in RGB each has a numerical value between 0 (meaning off) and 225 (meaning fully on). Hexadecimal code- designers specify web colors by their corresponding combination of numbers/letters in the hexadecimal system. Ex – #0053C8 RGBA- a= alpha, specifically alpha channel, which controls transparency.

Specifying color for print

Print designers work in CMYK. Most common process is 4-color printing where printers use four separate plates to build colors on the paper. This process is called color separation. Setting up a document for commercial printing- save the graphic in CMYK mode, specify the colors in software program using CMYK builds.

Spot color printing

designers can also choose premixed colors from a swatch book. when printing with spot colors, printers create a plate for each spot color the designer has specified.

Types of printing and printers

In-house Quick printer Commercial/Offset

In-house printing

works when you need it fast, have little to no budget and need relatively small quantities. Drawbacks: design within the paper sizes that your printer can accomodate (legal or letter, usually). Your design cannot bleed bc most printers have built-in margins. Limited paper options (inkjet or laser printer paper, usually). Printing documents designed to fold is painful to do in-house. Don’t expect any consistency with color.

Quick printer

have more paper choices than in-house, can print bleeds and offer a few more binding and furnishing options.

Commercial/offset

offer the greatest flexibility. Wide variety of paper stock, paper sizes, handle bleeds, impositioning, folding collating, some types of binding and even address labeling. Die cutting, embossing and even foil stamping. Use PANTONE. However, remember the greater the print run, the lower the printing cost per piece. You save money per piece by printing the greatest number you can use.

Document Details (DD): Image resolution

high resolution & proper format

DD: Spot or process-color?

make sure your color setup is appropriate for your final output.

DD: Set up document bleeds

go through your document and extend your bleeds ⅛ inch beyond the document edge. When printers print a document with bleeds, they print the design on a larger piece of paper and trim it down to size. If your design doesnt extend that extra ⅛ inch, you run the risk of white edges where the bleed should have been.

DD: Clean up your pasteboard

remove any extra unused graphics from your file’s pasteboard. Nonessential materials add unnecessary file size.

DD: Clean up your swatch palettes

Remove unused colors fro your list of available swatches. Nonessential materials add unnecessary file size

Font categories (FC): Old style/transitional

Have little serifs or "feet." They are bracketed: they start thick and taper to thin at angles, creating little triangles. Uses: for print body copy, old style fonts are the most readable. Larger, bolder versions can be used for headlines. They get lost on computer and television screens.

FC: Sans Serif

Contemporary in style, sans serif fonts have no serifs (feet). Includes grotesque, humanist and geometric. Uses: In print, sans serif fonts are best used for headlines and other quick nuggets of text such as sidebars and cutlines. Onscreen, sans serif "rule in the readability department." Bigger, bolder versions make for excellent headings and subheadings (onscreen).

FC: Slab Serif

Uniformly thick, fat serifs. Some slab serifs look like a hybrid between an old style font and a sans serif font. Sort of a sans serif with fat serifs. Uses: slab serifs were invented for retail display advertising, so they work well in print headlines. Some slab serif can work for body copy, but old style fonts are generally a better choice. Slab serifs work for web and tv but in the same limited way as decorative fonts.

FC: Modern

extremely thin serifs, and their stress lies on the vertical, unlike old style’s diagonal stress. Uses: headlines, decorative detail or ornaments. Not a good choice for reading copy. Not a good choice for screen application.

FC: Decorative

characteristics widely vary. They can resemble handwriting, vintage type, grunge type or whimsical lettering. Uses: limit use to headlines, decorative details, ornaments or very small amounts of type for both print and screen.

FC: Script

tend toward formality and often resemble old-style penmanship (EX: wedding invitations) Like cursive writing, the glyphs in script fonts tend to be connected on the downstroke. Uses: readability and legibility issues — limited to small amounts of copy in both print and screen applications. Individual characters make interesting decorative elements in watermarks and logos.

Best practices for combining typefaces

Combine a serif with a sans serif Avoid similar classifications Assign roles Design a role-based scheme for each font or typeface Contrast font weights Create a variety of typographic colors Don’t mix moods Contrast distinct with neutral Avoid combinations that are too disparate Keep it simple — two typefaces Use different point sizes to create contrast and distinction

Legibility

the design of the typeface, as in the width of the strokes, whether or not it has serifs, the presence of novel type design elements etc. It is easy to tell one letterform from another in a legible typeface.

Tips for legibility

Choose typefaces with conventional letterforms Choose typefaces with generous spacing. Choose typefaces with a tall x-height.

Readability

How your typeface is set, combined with the basic legibility of the typeface, yields a certain level of readability. Readability is the dynamic interaction of the type style, size, tracking, leading, color and other properties all combined into one overall impression. In most cases communication comes before style, so resolve readability first

Tips for readability

Choose typefaces that were designed for the purpose Align text to "right ragged" for comfortable word spacing online to avoid "rivers". Make sure your line height is greater than the point size of your typeface for multi-line texts.

Plan your hierarchy

Have a good grasp of the content and typographic hierarchy your design job will dictate. Ex: What if you need five fonts? Can your typeface provide enough variation with bolds, italics and small caps? Or do you need more than one typeface to create more distinction in the hierarchy? Use a mind-mapping tool or make a traditional outline to see as much as you can before you start choosing typefaces. Use as many levels as you need as long as there is distinction and clear purpose in your choices.

Avoid anachronisms and trite correlations

For instance, if you don’t know the particular history of typeface, you could end up using it in a way that makes you look a little silly. Ex: Roman font for poster about Greece. That would be an unintended anachronism Sometimes it pays to be neutral by choosing something safe

Pushback to Gap logo redesign

The public was strongly committed to the Gap brand "I Love You Just The Way You Are" Logos are important

Steps in Moriarty’s process for creating a cultural palette

1. Majority Culture Images 2. Subculture Images 3. Image Bank 4. Expert Panel Evaluation 5. Cultural Palette 6. Cross Cultural Palette

1. Majority Culture Images

Investigate the images of the subculture as seen and used by the source or dominant culture and the images currently used to communicate about the subculture to and within the dominant culture.

2. Subculture Images

Investigate the images used by the subculture itself in its self presentation. These can come from field research and interviews with local experts.

3. Image Bank

Develop an image bank combining all these symbols.

4. Expert panel evaluation

Establish a panel of experts for that culture and ask the experts to rate the images in terms of their appropriateness, representativeness, and potential for offensiveness.

5. Cultural Palette

Eliminate the symbols from both lists that are deemed inappropriate by the experts.

6. Cross-Cultural Palette

Compare the two lists. Identify a palette of the most appropriate colors and bias-free symbols that appear on both lists and thus communicate to both the dominant culture and the subculture.

Helvetica

Helvetica is the typeface that you will see most often everywhere (graphic design) Created to increase legibility Helvetica emerges in 1957 when there was a need for "rational" typefaces that work in a variety of settings to convey information in an intelligible way More neutral Some designers are against Helvetica because they believe it isn’t expressive enough or will lead you to communicate in a certain way because the type "demands it"

Layout Sins

1. Centering everything- gives the readers no visual line to follow, avoid centering 2. Warped or naked photos- keep photos proportionate and use hairline rules to border photos that have ambiguous edges. **Can’t tell where photo ends against background, warped = squished 3. Too many fonts- try to stick to 2 per layout 4. Bulky Borders and Boxes- use negative space to group or separate things. If you must, choose an understated one 5. Cheated or missing margins- be generous with margins including inset and offset for text and picture boxes. **Maintain margins, you want some white space 6. Stair stepping- keep headlines in a straight line **Lines of words to take up space 7. 4 corners and clutter – clutter: bad, clustering: good 8. Trapped negative space – push extra negative space to the outside edges of your layout **trapped space is bad space between two elements that draw attention for no reason 9. Busy backgrounds – design backgrounds as negative space to the outside edges of your layout 10. Tacky type emphasis: think twice about **reversing, stroking, using all caps and underlining 11. Bad bullets – use real bullets for lists, and use hanging indents to properly align lists 12. Windows and orphans – avoid inelegant breaks at the bottoms and tops of legs of type **orpan- random word on a line by itself at the bottom **windows – " " at the top 13. Justified rivers – avoid unsightly rivers of negative space flowing through legs of justified type.

balance

radial: circular designs fulcrum lies at center ex dream catcher symmetrical: mirror image of other side/formal balance, good for museums asymmetry: two unique sides

Gesalt

The whole is greater than the sum of its parts The four laws are: 1. Proximity 2. Similarity 3. Continuity 4. Closure

Placing visuals in your layout

-place visuals near the top of the layout -if your picture has direction, be sure it’s pointing the right way -flipping photos is a bad idea -don’t position a visual where it interrupts the flow of reading -pay attention if you’re wrapping text (don’t want skinny columns)

multiple page layouts

-visual unity -loads of type: use one of following: grid, headlines/subheads, visuals, deploy negative space strategically

How web design is similar to print design

websites use compositional elements and principles like print does

How web design differs from print design

-you can’t control the way your layouts will appear on screen -your layout is built on an incredible shrinking or expanding canvas -websites are nonlinear (viewers can jump to any location, it’s not in order so things need to make sense) -the web can be a multisensory experience -the web is an interactive experience

SEO

search engine rankings are based on the quantity and quality of your page content. Quality means keyword-rich.

A few best practices and design conventions

-establish content hierarchy -define relationships among assets on the page -create a sense of direction -limit the need to scroll -keep navigation near the top -use a logo as a home page link

Navigation

-the list of buttons or links that take folks to other parts of the site. -should be consistent across all pages -left side screen is common for websites and right side common for blog -use side navigation if list of links won’t fit across horizontally

Some tips for creating good GUI"/"Getting GUI (graphical user interface)

-make the purpose of each page clear at a glance -keep link names clear and simple -make the link name match the title of the corresponding page -make buttons and links look like buttons and links -navigation should be persistent -be wary of pull down menus (sometime hard to use) -have a link to the home page as part of the persistent navigation -place navigation and any other important content "above the fold" (when the page opens without scrolling) -use color to organize and order -consider using breadcrumb trail -provide a search box

primary colors

red yellow blue

secondary and complementary colors

mix two primary colors at a time, opposite of the color it complements on the wheel comp- good for sports teams

tertiary colors

mix primary color with closest secondary color on the wheel to get the in-between colors

triad colors

any triangle four hours apart on the color wheel will make a viable color scheme triplet not as much contrast, eye catching ex. burger king

analogous color

mixing colors next to each other creates unity soothing to eye

How to choose color: culture

-not everyone associates red and green with Christmas, -meaning people attach to color depends on their culture -ex, red wedding dress in china, white associated with mourning, -consider context with color: green (nature, fresh → hospital green → envy

Color technology: That’s not the color I chose. What happened?

-screens and printers don’t speak the same language -screen: overlaps light and electronic color, print: layers ink -color management: getting colors to match properly across devices

calibration

translation between screen and print color

screen color

-RGB color (red green blue) -numeric values between 0 and 255 -designers specify web colors by their hexadecimal code -RGBA: A stands for alpha channel and controls transparency -when you design electronic screens, expect color shifting

Specifying color for print

-CMYK (cyan, magenta, yellow, key=black) color space/4color process

"out of gamut"

the color won’t reproduce accurately in print -spot color printing: using only one, two or three inks

color separation

putting each color on its own printing plate

PMS

pantone matching system-most common color matching system for solid colors

Printing in house

-need it fast, -small budget, -small quantities, -restricting paper -options/anything that folds/, -no consistency with color

Quick printers

more paper choices, can print bleeds and offer more options, limiting though

Commercial/Offset

greatest flexibility. Produce matched and process colors faithfully to swatches, The greater the print run → the lower the printing cost per piece. Print more to save money

Web offset

when you need to print a very large run (10,000-20,000) pieces or more, newspapers, magazines, catalogs and books, *web offset uses extremely large rolls of paper as opposed to cut sheets in traditional offset printing

Digital printing

*can’t print spot ink -gained popularity, -uses toner and is closer to laser -printing or photocopying, -for small runs is can be cost effective, -no price break for greater quantities, -best for small quantities, -output VDP (variable data printing): it can print customized pieces like addressed letters.

image resolution

make sure all images are high resolution and in proper format

document bleeds

if you’re not printing in-house, extend document bleeds 1/8th inch beyond document edges

old style/traditional font

-classic -have serifs (little feet) at the tips of glyphs -bracketed (start thick and taper to thin at an angle) -thick stem/thin hairline strokes, diagonal stress ex. Anthro logo USE: print body copy, most readable, bold in headlines

sans serif

-contemporary style -"without feet" -types: grotesque, humanist, geometric. USE: headlines and quick nuggets of text like sidebars and cut-lines, good when reversed, online: Helvetica, arial, verdana,

slab serif

thick fat serifs hybrid of old style font and sans serif font ex. Volvo USE: retail display advertising, print headlines, limited web and TV. use

modern serif

extremely thin serifs and vertical stress lines USE: headlines, decorative details or ornaments, not good for reading copy or screen applications.

script

wedding invitation, old fashioned penmanship, like cursive USE: small amounts of copy, drop caps or decoration.

leading

"led-ding",vertical spacing between lines of text -baseline to baseline

kerning

manually adjusting the space between two characters

tracking

automatic spacing between all characters

What you need to know about
logo design

-should be unique to the subject/product -should be scalable -simplicity is a virtue -limit the number of colors -make sure the logo is reproducible in black only -make sure you can "reverse out" your logo -be weary of designs that are too horizontal or too vertical

Designing logo on your own

-consider type only logo -avoid using the font-de-jour -no clip art -add a simple shape -test it out -turn fonts to graphics

Best practices for combining typefaces

-Combine sans serif (header) with a serif (body): a classic combo -Avoid similar classifications- can easily create discord when combined, choosing typefaces from different classifications at the start avoids needless tension -Assign distinct roles- design a role-based scheme for each font -Contrast font weights-help guide reader’s eye around design -Create a variety of typographic colors- the combined effect of the variations of font weight, size, stroke width, leading, kerning and other factors. Clever use of it reinforces the visual hierarchy of a page -Don’t mix moods- it can draw attention to the typography instead of the message -Contrast Distinct with Neutral -Avoid combinations that are too disparate- creates a visual imbalance that works against the whole design -Keep it simple: just try two typefaces -Use different point sizes: to create contrast and distinction

Legibility

* think design of typeface *making out what it says ex. Salt Life (low) -design of the typeface -choose typefaces with conventional letterforms, generous spacing, tall x-height

Readability

*think large amounts of text alignment *how easy it is to read interaction of the type style, size, tracking, leading, color and other properties. Communication comes before style. -choose typefaces that were designed for the purpose, align text to ‘right ragged" for comfortable word spacing online to avoid rivers, make sure your line height is greater than the point size of your typeface for multi-line texts.

Plan your hierarchy

-have good grasp on content your design job will dictate -use mind-mapping tool or make outline to see as much as possible before you start choosing typefaces -use as many levels as you need as long as there is distinction and clear purpose in your choices

avoid anachronisms

know the history of the typeface. Someimtes it’s better to be neutral

avoid trite correlations

don’t do something blatantly obvious (Lithos for greek topics and comic sans for funny topics)

Explanation given for pushback to Gap logo redesign

the public was strongly committed to GAP brand

Steps in Moriarty’s process for creating a cultural palette

1. majority culture images 2. subculture images 3. image bank 4. expert panel evaluation 5. cultural palette 6. cross cultural palette

Good Design

-conveys information -captures attention -contrast: guides movement of eye -directional force: evokes emotion -focal point: every visual tactic should have a focal point -one visual element the eye goes to first -create visual item -more than one element can create one focal point -circles attract eyes eyes attract eyes eyes become directional force for the product (beauty product)

4 main design principles: CRAP

contrast, repetition, alignment, proximity

Contrast

-most important according to Kay -draws eye to package -focal point- what do you want to be seen first -needed to avoid visual boredom, -essential for logos, -use dark and light to make contrast.

Repetition

• important for branding • should be consistent • quick visual cue • headings are good place to start repetition • rhythm created by repetition • Repeating cues results in unity, proximity and harmony

Alignment

• Left alignment is good • Types: horizontal and vertical • Creates unity • A grid can help for print, web and mobile.

Proximity

•Collection of objects forms a group •Elements should be associated visually by proximity •Captions should be close to photos •Heading should be close to the copy

scale/proportion

scale: size relation proportion: contrast

The most basic element of design is

visual cue

Dots

enable printing photographs

Lines

sequence of dots that create energy

Straight line

stiff & rigid

horizontal lines

-creates horizon, -it confines if it’s high in the frame

vertical

brings eyes to a hault

diagonal

strong stimulating effect (key in creative perspective)

curved lines

• Create a mood of playful fullness suppleness and movement • Soften content of message

Thick and Dark

strong and confident

Thin and Light

delicate , timid

Grouped Lines

form spaces that the eye wants to expect

Parallelograms

squares & rectangles

Circles

• associated with endless rhythmic patterns of time, • symbolize eternity, • no beginning or end, draw our eye

Triangles

• most dynamic and active shape • convey direction • can burden design with tension

rules of Focal Point

1. have one 2. limit one per screen/page

Full Color Photography

CMYK ink

Pantone colors can be trademarked

true

halftones

process of color separation itself, 1/8th

color caveat

standardized color systems let us get as close to repetition of color as possible

can you ever perfectly match a color across all platforms?

no

what color is reflective?

print, not web

never use ____ in logo

photographs

Physiological color

1. people see color differently 2. context is everything 3.convey information 4. assist in mnemonic value

hue

name of color

saturation

range of intensity

brightness

range of light to dark

tone

amount of grey mixed into base color

tint

base color mixed with white

shade

base color mixed with black

psychological associations of color

warm and cool

most people associate cool with

a definite object

Red

power energy can be overwhelming

Orange

friendly creative energy affordable Home Depot

Yellow

Playful Youth

Green

health nature organic calming

Blue

light-peace bright-strength dark-trustworthy most popular color in US (social media?)

Purple

royalty light- spring/rebirth

does tint of ink count as a new color?

no.

tetradic color

2 pairs of complementary colors hard to balance

monochromatic

one color with different tints and shades

responsive design

a page/frame/app to auto reform itself appropriately to be visible on each different screen size two sites do not need to be made

most organizations have 2 sites

"www." "mobile" – can pull up on computer and it won’t show ads NOT RESPONSIVE DESIGN

web designs use

-html -css -javascript -responsive framework (bootstrap, foundation)

Helvetica

-Vinelli -Modernism liked it because of post WWII, clean accessable, it holds message and isnt distracting

post modernists helvetica

1970’s, carry the message, medium is the message

post-post modernists helvetica

obsessed with it mix of modernism and post modernism

handwritten

difficult to read use with caution humanist

novelty fonts

hard to read good start for logo design

avoid these fonts

comic sans brush script papyrus harabara hobostd marker felt

IN PRINT

Sans serif headline with Serif copy

ON WEB

serif headline with sans serif copy

type crimes

1. don’t bold underline and italicize all at once 2. typing in all caps has low legibility and readability- looks like someone is shouting 3. underlining for emphasis looks ammerature and like a hyperlink online 4.stroking chokes letterform

baseline

imaginary line that text sits on

meanline

horizontal line that marks the top of lowercase letters

decender

lower portion of lowercase letters that extends below baseline (like tail of q)

ascender

extension in lowercase letters that rise above the meanline (like top of k)

counter

negative space (inside u)

x-height

space between base and mean line (vertical height of lowercase x)

type is measured in

-points -top of ascender to bottom of descender -72 pts = 1 inch

if large x height

increase space between lines of text. (leding)

centered/justified allignment

symmetrical effects hard to read

Guest speaker Jasper

1. cultural differences 2. different views on the role of media/journalists 3. different roles of PR Be Aware!

what’s the most popular color in the us in regards to social media?

blue

Which is an example of trite correlation

using papyrus because your content is "ancient" in some way

Which is not a tip to improve legibility

put a stroke line around letterforms

x height goes from

baseline to meanline

which is not a component of moriarty’s process for creating a cultural palette

having company executives select relevant visuals

dominant culture

anglo sax white male

sub culture

mexican american – cultural roots

T/F all browsers display files in the exact same way

False

which is an advantage of the print medium over web medium

print has more predictable and reliable tools for creation

what was the reason for public pushback to the GAP logo redesign?

the public was strongly committed to the GAP brand

WSINYE: Ch. 4: What are the layout Sins? What do they mean?

1) Centering everything – Creates visual flow issues. The eye bounces around in search of the next eye entry point. 2) Warped or naked photos – If people and objects in your picture don’t look like that in real life, then the picture is warped. Naked photo sins apply to only photography. Naked photo is a photograph that needs a border.If you can’t tell where the photo begins or ends because the photo color blends with the color of the screen or paper, then the photo probably needs a border 3) Too many fonts – 4) Bulky borders & boxes – 5) Cheated or missing margins – 6) Stairstepping – 7) 4 Corners & clutter – 8) Trapped negative space – 9) Busy backgrounds – 10) Tacky type emphasis: Reversing, stroking, using all caps & underlining – 11) Bad Bullets 12) Widows & orphans 13) Justified rivers

WSINYE: Ch. 5: Mini Art School: Contrast

It’s an important principle for designing interesting layouts. Offers a great deal of flexibility. Contrast between filled and empty space, lines or shapes, juxtapose contrasting sizes of objects.

WSINYE: Ch. 5: Mini Art School: Balance

Each side of the board must carry equal weight. You want designs and layouts to be visually balanced, unless your communication purpose if to unsettle people by making them feel unbalanced and tense or anxious. Radial, symmetrical and asymmetrical balance.

WSINYE: Ch. 5: Mini Art School: Gestalt

Discovered that the brain automatically and unconsciously simplifies, arranges and orders objects the eyes see. Gestalt’s Four Laws: Proximity, Similarity, Continuity and Closure.

WSINYE: Ch. 6: Placing Visuals in Your Layout

Place visuals near the top of the layout. If your picture has direction, be sure it’s pointing the right way. Flipping photos is a bad idea. Don’t position a visual where it interrupts the flow of reading. Pay attention if you’re "wrapping" text.

WSINYE: Ch. 6: Multi-page Layouts

Visual unity Loads of type Navigational signs

WSINYE: Ch. 13: How is web design SIMILAR to print design?

Both products must capture attention, control the eye’s movement, convey information and evoke emotion. Both need a focal point, visual hierarchy, balance, rhythm and flow.

WSINYE: Ch. 13: How does web design DIFFER to print design?

You can’t completely control the way your layouts will appear on screen. Your layout is built on an incredible shrinking (or expanding) canvas. Websites are non-linear. The web can be a multi-sensory experience. The web is an interactive experience.

WSINYE: Ch. 13: Search Engine Optimization

CONTENT IS KING!

WSINYE: Ch. 13: Navigation (Under home page design)

List of buttons or links that take folks to other parts of your site. Often sits above or below the header, or in both places when there is more than one set of links. Can run down the right or left side of the screen page. Limit number of items in navigation to a quantity of 5-10.

WSINYE: Ch. 13: All tips under "Some tips for creating good GUI"/"Getting GUI"

1) Make the purpose of each page clear at a glance. 2) Keep link names clear and simple 3) Make the link name match the title of the corresponding page. 4) Make buttons and links look like buttons and links 5) Navigation should be persistent. Be wary of pull-down menus. Ask questions: 1) Is your navigation easy to find? 2) Do the links make sense? 3) When you click past the home page, is it easy to tell where you are in the site? 4) Can you tell how to get back?

WSINYE: Ch. 8: Color Relations

Primary colors: Red, Blue, Yellow Secondary colors: Purple, Green, Orange Tertiary colors: Mix a primary and secondary color. Analogous color: Mixinng colors next to each other on the wheel produces "in between" colors. Color temperature: red/orange/yellow – warm green/blue/purple – cool

WSINYE: Ch. 8: How to choose color: Culture

Culture, or example, white symbolize purity, such as a white wedding dress, a custom began as a way to communicate the bride’s virginity. But in China brides often wear red, a color that symbolizes good fortune. It’s important to consider the audience when communicating with color. It is also important to consider context. The same color can symbolize multiple things within the same culture depending on the circumstances.

WSINYE: Ch. 8: Color technology: That’s not the color I choose. What happened?

Color matching from device to device is one of the most difficult challenges designers face. The short answer to the question "what happened to my color" is that screens and printers do not speak the same language. Screens and printers render color using totally different technologies. Screen color is electronic color, which overlaps light to achieve colors. For printed color, we layer inks.

WSINYE: Ch. 8: Working with screen color

Designers to prepare layouts and graphics for electronics screens work and RGB space – an acronym for red, green, blue — has its own version of the wheel. All colors in RGB space are made from combining varying degrees of just red, green and blue. …

WSINYE: Ch. 14: Types of printing and printers

-Printing in house: When you need it fast, have little or no budget and need relatively soft small quantities, in-house printing might be fine. But there are significant drawbacks. You’ll need to know what paper size your printer can accommodate (usually letter or legal, and sometimes ledger) and design within these parameters. Limited paper options. Printing documents designed to fold are painful to do in house. Don’t expect any consistency in color. -Quick printers -Commercial / offset -Digital printing

WSINYE: Ch. 7: Leading, Kerning, Tracking

Leading/line spacing: Is the space between lines. Decrease it when you are creating large multi-line headline. Kerning: Refers to adjusting the space between individual glyphs. Tracking: Refers to adjusting the spacing between character across a string of characters. It can be increased or decreased for copyfitting or for effect.

WSINYE: Ch. 7: Basic font categories: Old style/traditional, Sans Serif, Slab Serif, modern and script characteristics and best uses

(Canvas) "Best practices for combining typefaces": Understand each tip and what it means

(Canvas) "How to choose a typeface": Legibility and readability

(Canvas) "How to choose a typeface": Plan your hierarchy

(Canvas) "How to choose a typeface": Avoid anachronisms and trite correlations

(Canvas) "How Gap learned a tough lesson in consumer resistance": Explanation given for push back to GAP logo redesign

(Canvas) "A review of cultural palettes": Steps in Moriarty’s process for creating a cultural palette

Share This
Flashcard

More flashcards like this

NCLEX 10000 Integumentary Disorders

When assessing a client with partial-thickness burns over 60% of the body, which finding should the nurse report immediately? a) ...

Read more

NCLEX 300-NEURO

A client with amyotrophic lateral sclerosis (ALS) tells the nurse, "Sometimes I feel so frustrated. I can’t do anything without ...

Read more

NASM Flashcards

Which of the following is the process of getting oxygen from the environment to the tissues of the body? Diffusion ...

Read more

We can Write a Custom Essay

Consectetur labore ullamco magna do irure fugiat Lorem

Check Price

Successful message
sending