VIC Exam 3

Good design should

Get attention, attract the eye, convey information, and evoke emotion -choosing good visuals is very important

Focal point

One focal point on the design only but can have many points aiming towards where the eye should go. Need contrast, texture and color. Use rule of thirds to select a focal point Negative (white, empty space) can also be used to get to a focal point. In general we tend to be drawn towards the eyes, which usually are pointing towards the information or product that is wanted to be sold

C.R.A.P

Contrast, repetition, alignment, proximity

Contrast

arguably the most important design principle. It can refer to different type of important things in design. Emphasis in subordination can create a focal point. It should be used strategically to draw the viewer’s eye. It’s really important, it goes back to how we look and perceive things. It can be used to establish the importance of different things. Each time it should be different between what’s good what’s not and when. Use a visual hierarchy to set it. It’s not just colors. It can be size and position too. With the gray scale test we can check the contrast and how effective it is. Usually you want to go with dark type on a light background. If you have light text, go with VERY dark background

Repetition

The stop sign example, it’s always hexagonal, same size and way to be written. If all were different there would be chaos. Repetition allows for a visual clue. Includes repetition of color, type face, photographic style, strove lines, etc. It’s important for branding. Can give a more professional look. In a multiple page layout it can be very important. To notice that it’s the same book. It should always be used with headings and subheadings. Important to know that it is for the same organization.

Alignment

the eye is used to read from left to right. Avoid the urge to put the text to the center. Do it towards the left because our eye is used to read from left to right. It creates kind of natural order that makes it easier for us to read. It goes for the entire tactic. Don’t attract information by using borders. Use alignment and negative space.

proximity

From gestalt laws. We group things that are grouped together. Same for captions.

Balance

symmetrical: very formal assymetrical radial: like throwing everything off the center, everything is raiding out of it

Directional force

Used to guide the eye towards a certain point. It can be actual or implied. Implied: we don’t have a particular line that points us towards it Actual: actual lines that points us towards a certain point.

Proportion

Goes hand with hand with contrast. If everything in the page is important, nothing is important. It means emphasizing something. The relationship of elements within a design. Go big with the photos and text, don’t be afraid of white space. Too many things makes the eye wonder, not a definite point where to look at. Have ONE specific focal point. Make sure not to make your eye wonder, compete over different things.

Color

Web color and print color are different. Color shifts, changes, depends on each screen. The designer has more control in print than virtually. They use different color models. Poster, flyer, In Design. When using InDesign usually you’ll use it for print CMYK. For web you’ll usually be using Photoshop. You can also design on Photoshop with RGB.

Color shifting

Colors shift depending on the medium, on what medium you’re viewing or using. You can never match the color perfectly on every platform. You can get close, but it might never be perfect.

How colors work

When light passes through a prism it’s divided in the electromagnetic spectrum. How humans perceive colors We all have different color perception capabilities. The color cones in your eye are RGB. Humans can perceive about 10 million colors. Because the colors in the eye are RGB, every color we see is a combination of these three. How humans see A lot of things that we see are known as reflective color if we have an object, like a red apple. The apple absolves all colors except red. The color hits the apple, the apple absolves all colors but red and then reflects to get into the eye. If it receives all the colors, it’s white.

Reflective colors

reflective colors are what we see CMYK, in print, all colors are absorved but one, which is viewed by the eye. Prism –>object–>eye on screens we use RGB because the color is lit up to hit the retina directly. There is color shift.

Hue

technical word for color. It can also be referred to as the base color. Saturation and brightness are very similar.

Saturation

the pyramid of a hue. It’s a very rich condensed color. When it’s de-saturated it’s when the color is mixed with black or white.

Brightness

reflective quality base color and the intense of white in there.

tint

adding white to a pure hue

shade

adding black to a pure hue

tone

adding grey to a pure hue

subtractive color

Cyan magenta and yellow. All mixed make black. That’s they they’re the printers primary colors.

CMYK

Four color process You have four cyan, magenta, yellow and black. Black is known as key. Layering these creates millions of colors. If you’re ever printing a full-color photograph and you’re printing it, you have to use CMYK. CYMK can capture the different shades and shadows more accurately. You print little dots. The half-tone process it’s like all the little dots process is half-tone. They are all different angles Rossette or daysi pattern are the patterns in CMYK in the print.

Half-tone process

CMYK printing using many dots one on top of the other

Halftones

couple names, ink, it’s the process of moving all the dots in CMYK to create an image

spot color/ink

used in print. Spot color is premixed ink. Contrary to CMYK where we use all colors to get the desired color, on spot color is all premixed, no layering needed to get the color. It gives a rich pure color, precise. Good for branding. We tie colors very closer to brands. All these brands use specific tones to achieve the desired results. You can print a piece using CMYK and Spot colors. Full color photographs need CMYK for shadows, spot ink for some other parts. There are different kinds of printing. 5 or more ways.

digital printing

can not use spot ink with it

offset/commercial printing

spot can only be used in this type of printing

Pantone maching system PMS

Ensures color consistency. It’s a brand of spotning. Pantone is used by industrial designers, among others. Pantone is the most common brand of spotting. Every organization should have designated color values. UF brand guide has all the primary color palets that each brand has. The more inks that you use when printing, the more expensive it’ll be. They can also use CMYK to print but the colors will not be the same. If you have enough money to get the colors that you want, you can get close enough using CMYK and nothing else.

web color = additive color

Is not reflective. Web primaries are RGB. Red green and blue. The corneas are seeing these directly. If we have all at full brightness all at once, it creates white. CMYK all at once is black, RGB all at once is white. You can never match print and web colors exactly. You can get close colors but that’s as far as you’ll get. Even things like the type of paper (stock) can bring get to different results. Establish pantone, CMYK, RGB values that you can ensure consistency. The color picker dialogue box can convert colors for you. Color libraries takes you to spot colors.

CMYK all at once

black

RGB all at once

white

Web colors vs print colors

you can never match web and print colors exactly. Even things like paper (stock) can yield to different results.

HEX codes

the #and six numbers inside

understand limitations

There are budget constraints. Not enough budget to get the color that you want. Different media can also make them different. If you’re printing something in a commercial printer where the more ink, the more money you’ll use. To save money but save visual interest is to use percentages of each color. To get to one ink. Tenth of ink to do it. It can give to different sizes of ink. Meet with the printer, call him or her about templates, what bleeds are requires. Each printer is different, but It’s always good to meet.

Offset/commercial printing

Create an aluminum plate for each spot ink and then print them all together. Has a high set up cost. When printing at least 2,000 of them, it’ll be worth it. Good for really long runs. Use of spot ink. Get the exact color that you want. Any special kind of texture, foiling or raised up colors, special paper or cuts, loosying, foiling are all necessary for it. Specialty papers.

Digital printing

More affordable for 200 pieces, just short pieces. It’s faster and cheaper. Can print variable data – different pieces of information in each tactic- with it. Good for specific information that might be part of specific

color theory

It’s about creating visually pleasing color combinations. Color institute checked that in 90 sec. in viewing an object we make an assessment about the object. 60 – 90% of our assessment depends on the color that the object has. The 12-step color wheel has 12 hues (colors) all with the same brightness.

color harmony

Deals with using different pairings to get to color USING A VARIATION OF TINTS AND COLORS (MIXING THE COLORS WITH GRAY, WHITE OR BLACK ARE BETTER THAN USING THE COLORS PLAIN W/O ANY MIX)

complementary

Colors positioned opposite colors in the color wheel. Very high in contrast. Very visually exciting, vibrant. Generally the color pallet has 5 colors. Be careful to use only pure saturated hues. Pure hue is purely saturated, no white, gray, black. When you mix a color with white you create a tint. Mix a gray color with gray create a tone. Mix base with black create a shades.

analogous

Have 3 colors. Adjacent to each other in the color wheel. Next to each other in the color wheel. Because the colors are kind of similar they don’t have a lot of contrast. More calming. Harmonious. Not a lot of vibrancy. Using tenths of shades

Triadic

Using three colors that are equally spaced out in the wheel. Careful when using them with the primary colors, avoid using them with primary colors.

split complementary

The base color and then the two colors that are adjacent to that color’s compliment color to both sides. Nice approach because it’s visually contrast but not as strong. Almost as much contrast but more sophisticated.

Double complementary or tretradic

Two colors opposite on the color wheel, double that. Red and green are complementary but also one more mix. 4 colors in total, double complementary. Almost overwhelming, hard to balance, too much contrast.

Monochromatic

One color with different tints and tones. Very soothing because there isn’t much contrast. They may not attract attention though, more for relaxation, calming.

neutrals, tints, tones, shades

Important to use them in pallets. Neutral are white, ten, black, blue. Using non entirely black is a little more sophisticated than using only black.

Color quick guide

Color is highly subjective. It’s hard to tell what will work where. Certain colors convey certain messages. Shades of colors are also important change perceptions.

RED

positive, energy, vitality but also anger. Fast pace- 24-hour

ORANGE

friendly, creativity, movement. Affordability. Energetic

YELLOW

negative illness, irritation, bright can be cheerful. Do not use too much yellow, can be too stimulating

GREEN

freshness, nature, organic, morality, health sustainability. Darker green money, stability, affluence, greed, jealousy.

BLUE

bright blue: cleanliness, strength, dependability. Light blue: peace, serenity, spirituality, friendliness.

PURPLE

luxury, royalty, nobility, magic, spirituality, all anti-aging products are also important

Rules of color convey information

alot depends on the culture, nationality and upbringing. Age can determine how we view colors

Gender and color

we have strong associations of colors, blue for boys, pink for gilrs. That’s starting to change. Edgy, avant-garde can send a different message by breaking the difference. Generally women like lighter colors, men like darker colors.

The transparency effect

Some ways on how we see things are biological. When you have two hues mixed together the resulting color is kind of similar to both creating the illusion of transparency. It can be used to call attention to a certain element.

color in context

Simultaneous contrast demonstrate that if you put a color next to other the effect is different

Assist in mnemonic value

We look by color. Mnemonic value is about remembering a brand out of memory.

style guide

Sets example- road map to ensure consistency in design. Ways to use or not use the color it gives all brand colors and secondary colors.

Helvetica movie

Late modernism as a paradigm when Helvetica became really popular – 1957 designed. Like man’s capability to study things, create them and have control around the 60s. It’s ubiquitous, everywhere. Helvetica surged in 1957. Modernist designers said that typeface shouldn’t have a meaning for itself. It should communicate the message, it should be clear, legible, neutral, conveying a message. A defining feature of Helvetica is the horizontal terminals that most letters have that are almost perfectly parallel. The tear drop in the a too. The classist modernist take is that people shouldn’t be aware of Helvetica at all. It’s to convey content. Like a crystal goblet, just hold it and it and what matters is what’s inside. The way the message is dressed can defined the reaction to the message Becasuse it’s so used it can be too dull Pollisher post modernist said the type it’s its own medium, it can communicate by itself Stefan Sagmaister

Postmodernist:

don’t confuse legibility with communication. Not because you can see what it says, it communicates. Like the boring article that was published in a weird font that no one could get because the message didn’t really say anything.

Modernist:

legible, important. The typeface shouldn’t communicate by itself, it should just communicate the context. Like a crystal goblet, holds the content but doesn’t really present the final one.

Post postmodernist:

younger, back to Helvetica. Dialetics, using Helvetica but feel like they can do it in their own way, make it their own.

Baseline

imaginary line that text "sits on"

Meanline:

horizontal line that marks the top of the lowercase letters

Descender:

lower portion of lower case letters that extends below the base line

Ascender:

extension in lower case letters that rises above the mean line

Counter:

negative space in a letter form.

x-height:

distance between the base line and the mean line

measuring type

type is measured in points type is measured from the top of an ascender to the top of the descender or from bottom of descender to the top of the ascender 72 ppints =1 inch 3000 points = high res in print

tracking

automatic spacing between all characters that can be done automatically the more space you have, between the fonts, the more elegant and luxurious something will be

kerning

manual spacing of negative space between individual characters

leading

is the vertical spacing between lines of text. Measured from the one base line to the next. Leading has to be bigger than the fonts size. Same if it’s the other way around. Type faces with a larger x-height needs to have a higher leading.

Left justified/ragged right:

best readability

Right justified, ragged left

limited, not as good for reading

centered or justified

creates symmetrical effect but ins’t the best for reading

Proximity

Always use with headings and subheading. Resumes usually don’t have enough negative space. Try to be more concise. When combining fonts betters sans serif and sans The typeface that we use Actors are like typefaces, they can communicate a lot about the right message

serif vs sans serif

Serif fonts have ornamental strokes; Times New Roman is the most common example serif w/feet Sans w/o feet

serif styles

— In general serifs feel more traditional, old-fashioned, dignity, authority. Like the light blue of fonts. — Sans serifs feel more modern. They can feel friendlier too, less authoritative. Technology company would use it, more legible

slab seif:

industrial, mechanical

Didot – moden serif:

very big contrast between letters and serif. They’re elegant, timeless, associated with fashion very often. Do not set large amounts of texts because it might be hard to read but good for headlines.

old-style serif

traditional, artisanal, antique

baskerville serif:

transitional, fresher, newer

handwritten/script fonts

Handwritten acts as a symbol of humanity, they seem very approachable. Script fonts tend to be difficult to read, not good to use a whole body of text with it.

novelty fonts

Are limited in their use, tend to be difficult to read. Use sparingly. Can add character to the design if used very minimally. Good for logo design. Good point to start, but use little.

blackletter typefaces

The first printing types use these typefaces. Also popular in avant-garde and edgy. Also may be good for beers and also tattoos, also used in newspapers.

caveat

When creating an identity kit/branding, beware of the font du jour. Be careful to use something popular try to go for something more classic than just a usual one. Don’t use overused ones or jut for one.

Basic rules

ODE TO COMIC SANS = never use it Generally disliked: Papyrus, harabara, hobostd, brush script, marker felt, Usually liked: Helvetica, times new roman, future, myriad pro, Baskerville (seemed the most credible), Garamond

readability

how quicly can you read large amounts of texts. Left aligned, leading, tracking, kerning, justified the readability will be lower

legibility

more like a signage, can you tell what the word says? Sans serif is usually more legible from far away like traffic signs, novelty fonts usually have low legivility

print vs web

Print: serif probably better used in large amounts of text, serif has better readability. Becase compbine sans w sans serif Sans serif headline serif for the title Web: sans serif have better readability of the web. Headings in serif, copy in sans serif.

type crimes

Avoid bold, italic, underlined caps. Use one. Don’t type setting in all caps, it has low legibility and looks like someone is shouting Underlining for emphasis seems amateur, looks like a hyperlink on the web, use bold better. Stroking chokes letter forms, seems amateur.

When choosing a typeface

Avoid using a new typeface. Never try to use three. Stick to one or two. Better to go from sans serif to serif. Never use two typefaces that are different but kind of similar. Make them different enough that it makes sense to change them. Google type combinations. General rule of thumb: stick to no more than two typefaces, choose a typeface with several options. Light, thin, italic. Can create hierarchies with the typeface while maintaining consistency. Helvetica movie Morden: after WWII shouldn’t communicate anything by itself, the medium is not the message.

Instagram

Visual. Simple to capture the moment and edit it with the phone. Why use Instagram? -300 million + users -vest visual social media application -people are more visual than text -mobile friendly (maybe more than FB) -archival, it’s there, it doesn’t go -entretaining -informative -good for jou,adv,pr

camera

– Professional – Better quality – Time-consuming: editing, transferring – No access

phone

instant: the basics of Instagram -Low quality, but not bad if done right -Issues with lighting and flash -A lot of editing apps -quick -accessible -no need to be a pro -capturing moments

frame

Always frame the picture. Take a look at the atmosphere. Take a lot of shots, not just one, choose the best one.

Use editing apps and take advantage of filters

Some bad pictures can look great with editing. Snapseed and VSCOcam are two than can help.

instagram photo composition

A good photo can separate from a bad photo. With Instagram you have to think square. Fill the frame/move closer. There should be head room. You may have to cut the head a little bit, justnot alone. Let the background be interested.

Rule of thirds

Composition rule of thirds Main subject should be touching one of the points in the corners instead of the middle. Change the rule of thirds Subject has to be in the quares of the far edges. Fill the frame, or make the subject be on the far edges making the backgrouns the main point.

General tips

shoot action use empty space use text on photos

video on instagram

15 seconds -attention span -visual -sound -slow internet speeds -mobile video quality -light issues -sound issues -battery life -bad videos -no creativity -always shoot a video in landscape Steady movement on video, movement is distracting

variety

-shooting action -interviews: move as close as you can. Watch for the background, make sure the sound is clear, try to keep a steady video, 15 seconds only -cover events: should try to get something that’s interesting, like a quote. Take different shots -promos -time-lapse -slow motion

important desicions

-frequency of posts: you can post every day, but better not to. You have to balance, post but don’t be there all the time Focus on posts -have a focus -what is your goal – show it -not all over the place Variety of posts: people get bored easily, not all pictures should be the same, think outside the box How am I doing? -what are your stats, observe, use application that give statistics like statigram

branding and web design

Need to have own personal brand, colors, CMYK and RGB values. From the styleguide make a resume in InDesign incorporate color into the resume. Create a small wordpress cite with the resume, 3 different portfolio pages, each page will have different work that you want to show. Choose your work.

branding

It’s anything, it can be a symbol, colors, music, smell anything that distinguishes one organization from other organizations in the same field. A brand is also represented by a store.

research

Coming up with a good brand involves research. When creating a brand you should research -the audience: who is using the audience, what are their preferences. How are they using the audience. – also look into the people who works in the company. The corporate culture should also be represented.

content analysis

looking over content what words were used, what typeface was used, etc.

quantitative research

gather data, analyze it with statistics and should be generalizable, like surveys, a census

qualitative research

observational, generally smaller from focus groups, in-depth design, etc.

primary research

conducting your own research

secondary research

looking at research that already exists out there. Pew researcg, cpu or books

positioning

Goes hand-in-hand with branding. It’s also what sets you appart. Volvo: safety, BMW: fun to drive, Mercedes: engineered, Lexus: luxury Find a way to set you stand out from the rest. Find your niche.

vector vs raster

in logo design, always design using a vector never a raster. vector is math-based image that can be used in proportions. Raster is a pixel-based image also known as bitmat, make it bigger and it gets pixelated. Photoshop has rasters. .JPG, .PSD, etc.

web design

A designer never has full control over how a viewer sees a webpage. Color shifting for instance, each person has a different color pattern. Browsers can also affect how things are displayed

browser

It’s software that reads a set of instructions and displays it in a way that’s visually appealing. Every web page is a file. Color changes on each browser due to the arrangement of it’s HTML , CSS code

HTML

Hyper text markup language, the content, writing, etc Tags always begin with a less-than sign (<) and end with a greater than (>) sign Tags are instructions for the browser. Heading tag example: <h1> Welcome </h1>

CSS

cascading style sheets, how the content is formated, the design of it, fonts, colors, etc. [ font-family: Helvetica, arial, sans-seriff; Font-size: 20px; Font-weight: bold; Color: #123213

Links

internal: replace current browser window Extrernal: open new tab or browser window Make links obvious usually and content wise. Style your links

web design strategic considerations

-Who is the target audience for this site? -What is the purpose of this site? -what action do you want viewers to take? -Purpose/content comes before design! Let the purpose of the site drive the design

make action easy

don’t have 3,000 options or barriers to entry.

repetition

Design should be consistent throughout the site. This includes navigation, header, footer, headings, sub-headings, etc. Ease of navigation: should be intuitive Repetition, three-click rule, use of breadcrumbs. Old navy>women’s>shirts>tee’s n tops Viewer should not have to use the browser "back" button Don’t lead viewers away from your site

odds and ends

Proofread! Avoid horizontal scrolling, vertical is OK Include contact info. Break up text into manageable chunks Studies show visitors read only about 20% of the content Place photos/graphics toward the top Use sub-headings Remember sans-serif typefaces have better readability on the screen. Choose the typefaces in InDesign and use similar ones for wordpress to try to get some repetition

dominant or majority culture

white men of anglo-saxon culture

diaspera

group of people who are not part of the majority, part of the subculture

steps for creating a cultural palette

Gather majority culture images: majority uses these to represent the subculture Gather subculture images: produced by the subculture to represent itself Create an image bank to represent the majority culture and the subculture Expert panel evaluation: who makes up the panel? Community members from the subculture. Cultural palette: eliminate inappropriate symbols Create a palette form colors and symbols that appear on both lists

According to the design principles lecture, the acronym CRAP stands for what?

Concrete, repetitive, altruistic and principled The word I say when I don’t study enough for a quiz Contrast, repetition, aesthetics and principles — Contrast, repetition, alignment and proximity

It’s a good idea to center align large amounts of text.

False

The three types of balance are symmetrical, asymmetrical, and radial.

true

You must use CMYK to print a full-color photograph.

true

Based on the film Helvetica, what is one of the major observations made about the typeface Helvetica?

It is under-utilized It was designed in the year 2000 —- It is ubiquitous

According to the readings, when combining typefaces, it is a good idea to combine a serif with a sans-serif.

true

Web color and print color are the same.

false

Which of the following is true of process color?

It is only used for print. It creates an overlapping pattern of dots. It is also known as CMYK. — All of the above.

Which pairing on the color wheel represents the MOST contrasting relationships?

—Complementary Analogous Monochromatic

According to the reading, you should never combine a distinct typeface with a neutral typeface.

false

According to WSINYE, the use of infographics in the mass media is generally credited to which of the following?

Cave paintings thousands of years ago The New York Times in the late 1990s —USA Today in the early 1980s Bloggers in the early 2000s

According to the WSINYE reading, which of the following infographics is the BEST choice for comparing things?

Fever charts Pie charts Maps — Bar charts

An original logo should ALWAYS be which of the following file types?

Raster Pixel-based JPEG — Vector

MANUALLY adjusting the negative space between two characters is called what?

— Kerning x-height Leading Counter

On the screen, serif typefaces generally have better readability.

False (sans serif are best for screen. Serif are best for print)

1. WHICH IS THEW MOST POPULAR in the us often used social networking sites

-Blue

2. which of the following best describes the modernist view of design?

The only purpose of a typeface should serve to clearly convey the message Postmodernists are more about the design of the font

3. Good design should have 2 focal points

False, only one focal points. A focal point CAN be more than one object made of different elements.

4. the article "how to choose a type face" advices us not to use trite correlations. Which of these are trite correlations

combining a serif headline w a sans serif copy using a sans serif to convey modernity using a serif to convey tradition —-using papyrus because your content is ancient in some way , using comic or papyrus shouldn’t be done.

5. which of the following is not true of web color?

—Web color is reflective (it’s not reflective. It starts on the screen and goes straight into your retina) Color can be expressed in hexadecimal codes Web color model is RGB All are true

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

Create an image bank containing sub-culture visuals created by the dominant culture Create an image bank containing sub-culture visuals created by the sub-culture —Have company executives selecting relevant visuals (subculture members should) Have a panel of experts from the subculture selecting relevant visuals.

7. all browsers display files in the same way

False. Each select the color differently. The designer doesn’t have full control over the final design. Be familiar of differences of web vs. print. Print the designer has more control over the final product.

8. according to winsye , which is the advantage of the print medium over the web medium

—More predictable/reliable tools for creation Richer color through use of the RGB color model Lower image resolution is required More space at relatively low cost

Which is true of process color?

a. Only used in print b. Also known as cmyk c. Overlapping of dots —d. All above

9. according to the author of the articles called "how gap learned the hard lesson in consumer resistance" what was the reason for public pushback to the gal logo redesign?

public preferred serif typeface public was commited to brand gap — Public was not commited to gap brand Kerning was atrocious

Halftone process vs color process

Four color process uses the halftone process.

How web design is similar to print design?

Good design is good design, no matter the medium. Th e end product must capture attention, control the eye’s movement, convey information and evoke emotion. Your Web site design will need a focal point, visual hierarchy, balance, rhythm and fl ow. Rare is the site that has one page only, meaning you’ll need consistency across multiple pages and a navigation system to keep visitors oriented. While good design is good design, a Web page does diff er from print in significant ways.

How web design differs from print design

Websites are non-linear, viewers can jump back and pro any time. The web can be a multi-sensory interactive experience. They allow for the addition of multimedia components such as animation, video, audio, etc. Fonts behave differently Choosing fonts for a web project is practically the same as choosing fonts for print projects. Decorative fonts can add character and style. It’s the opposite from print, sans seriff fonts are better than serif. Sans serif of oldstyle font can help too. There are technical considerations because of the coding because if you both don’t have the same font, the PC will pick whichever it thinks works the best. Btter to choose arial, Helvetica, verdana, times,Georgia and trebuchet. Colors behave badly, you can choose colors from your website using the same criteria but colors depend on the monitor, they change.

SEO search engine optimization

SEO are the things you do and how you can make them search engine friendly. Content is key. Make a list of most likely words people will look for in your site. The most often keywords appear, the more likely people are to click and check on your website. So repeat similar words relatively often. Also in your titles, headings and hyperlinks. Also use it in your web site code. Get a domain name that includes keywords too.

Best practices and design conventions

Planning- the final product is only as good as the initial planning. Setting clear objectives is crucial. Everything moves now. Thumnbnail sketching is more involved for web design is more involved for Web design an outline of the content

Homepage design

Navigation should be persistent and include the same links in the same style in the same place on each page. That’s unity technique.

GUI (Graphical user interphase)

1. Make the purpose of the page clear at glance. Use simple descriptive headings and copy. Your visitor should never have to ask, "What is this page about?" 2. Keep link names clear and simple. Don’t title a link "The Sum of Our Experience," when "About Us" will do. 3. Make the link name match the title of the corresponding page. In other words, when you click on "About Us," the page you arrive on should be titled "About Us." Th is seems like a no-brainer. But you’d be surprised at how often this doesn’t happen on Web sites. 4. Make buttons and links look like buttons and links. Make the text or the button itself change color when the mouse rolls over it— something to give a clue that your button is a button. Under no circumstances should your visitor have to work to fi gure out how to get around your site. Th ey won’t work. Th ey’ll just leave. You can take that fact to the bank. 5. Navigation should be persistent, i.e., it should include the same links in the same style in the same place on each page. Th at’s a unity technique. 6. Be wary of pull-down menus. While space saving, pull-down menus can be diffi cult for some people to utilize, especially when the pull-down menu has multiple levels. 7. Have a link to the home page as part of the persistent navigation. If your design includes a consistent logo, make the logo a live link that takes you back to the home page. Th e most common position for such a logo is in the upper left corner of each page. Pull-down menus. They may seem space-saving, but pull-down menus can be diffi cult for your visitors to use. Avoid them when you can, and really avoid those with multilevel drill-down. 210 White Space Is Not Your Enemy 8. Place navigation, and any other important content, "above the fold." In Web design, this means that those components should be visible on a standard size browser when the page loads. No scrolling required. 9. Use color to organize and order complex sites. 10. Consider using a breadcrumb trail so your visitors can see where they’ve been and how to get back. 11. For complex sites, a simple search box can be the best tool ever.

In-house printing

when you need it fast and have little to no budget and also small quantities. Use available software and font issues are less likely to occur. But you also have to deal with drawbacks like knowing what paper sizes a printer can accommodate ledger and parameters. The bleed is different too. Ink will be restricted.

Quick printers

limited to in-house. More paper choices and print bleeds than in-house

Commercial/offset-

good for 500 pieces or more. Handle bleeds, folding, collating, binding and address labeling. Can also use PANTONE and other swatches correctly. The greater the print run, the cheapest. 500 papers for $1,000 or 1,000 for $1,050 for $50 more.

Web offset

For 10,000 -20,000 or more usually used by web offset printers including newspapers, magazines, catalogs and books. Main difference between offset and web offset is in the paper. Web offset users large rolls as opposed to cut sheets in traditional offset.

Digital printing cont.

Uses toner, closer to the process of color laser print or color photocopying. Quality has improved a lot close to offset printing. Good for 500 pieces or more, but no cost break. 1050 pieces will cost you $1,050. Can put VDP variable data printing like names, images, etc fast.

Primary colors:

used the clock analogy, yellow, blue and red.

Secondary and complementary colors:

Mixing two primary colors at a time.

Now you know the relationship between primary and secondary colors:

Mixing any two primary colors produces the secondary complement of the third primary color. Now you also know how to create contrast with color: Pair colors opposite each other on the wheel.

Tertiary colors

is when you mix a primary color with the closest secondary color in the wheel to get a more subtle in between color.

Gray:

lies at the center of the color wheel. It’s a contrasting element. Hue saturation and value, color wheel as described deals with hue or pure color.

Logos

2. Logos must be scalable the design has to be clear and readable. Avoid lines and details that disappear when a logo is reduced. If using more than one fond, they have to be readable use vectors that end with an eps. Extension not to loose resolution, never a picture in a logo. Choose your pairings carefully. 3. Simplicity is a virtue you want versatility. A highly complex logo may look good have a simplified version. 4. Limit the number of colors simplicity in the colors will help. Choose two spot colors, black plus one more. Similar paint color from swatches. 5. The logo has to be able to be reproduced in black only. 6. You need to be able to reverse the logo if the logo works in all black it can reverse easily 7. Careful with design that’s too horizontal or too vertical difficult to incorporate in layouts.

script

like form a wedding invitation. Formal, old-fashion-like. Difficult to read, small use

modern

thin serifs, simpler fondts. not good in copy

slab serif

similar to old fonts, start thick and stay thick. invented for retail. good for TV but restricted on web

Good practices

Combine sans serif with a serif. -Avoid similar classifications – assign distinct roles, design a role-based scheme and stick to it – Contrast font weights -create a variety of typographic colors, it reinforces hierarchy – don’t mix moods, neither dominates the other – contrast distinct with neutral -avoid combinations that are too disparate, not too much contrast -keep it simple, use just two typefaces -use different point sizes to create contrast and distinction

avoid trite correlations

• Don’t use Papyrus just because your topic is "ancient" in some way, especially if it’s about Ancient Egypt. (Better yet, don’t use Papyrus at all) • Don’t use Comic Sans just because your topic is humorous. (Better yet, don’t use Comic Sans at all) • Don’t use Lithos just because your topic is about Greek restaurants. • Don’t use Futura just because your topic deals with "the future". Don’t be too obvious

origins of infographics

they say U.S. beginning of 80s, but reallythey didn’t start in the U.S. they go back to cavemen, Japanese kenji, Chinese ideographs and egiptian heriogriphics.

inforgraphics ethics

Don’t use someone elses graphics as your own, credit the source, same for info you found. Use only facts. Be skeptic about your sources. Avoid flawed numbers that are misleading or false. Common ways to ruin good stats: Cherry pick numbers to prove your point, Fail to adjust money for economic inflation or deflation Inflate the significance of large numbers if they represent a small percentage of the whole Specious comparisons (apples and oranges)

infographics types

Text boxes: Profiles: bio-boc, at-a-glance, in-a-nutshell, quick tips, fact box Horse races: Ordinal lists, outlines, rankings, ratings, scores Two-fers: Before-after, pro-con, problem-solution, compare-contrast. Sequences: Demos, how-tos, timelines Maps • Locator • Geological • Data/Statistical Diagrams • Cutaways • Schematics • Diagrams • Figures • Illustrations Charts & Graphs • Pie • Bar • Fever • Scatter • Flowchart Infographics should be able to stand alone. They need research to be made. Use a grid, group things, use a compatible design, Use care if your graphic is in black and white and attribute.

Maps

Maps. Put your map on a grid and eliminate unnecessary details, called "map fat." Streamline and simplify. Be sure to include a scale showing distance. Include a legend as needed and directional indicators (at least North, if not all four directions), and indicate reference points for your reader.

Pie charts

Pie charts are intended to show parts of a whole. Th e full circle represents 100 percent. So don’t forget to indicate what the "whole" is. Th is ain’t no mystery. Th en slice your pie portions accurately.

Fever charts

Fever charts. Known for their spikes and valleys, fever charts are good for showing change over time. A background grid helps readers quickly grasp the trends. Remember algebra, slope and "rise over run"? Didn’t think so. But you do need to know that the Y-axis equals the rise going up and down vertically. What are you measuring? Th e stock market? Rainfall? Daily traffi c? Th at’s your Y. Th e X-axis is always time or "run," running left (from the past) to right (into the future). In 3D, the Z-axis pushes out towards the viewer.

bar charts

Bar charts. Bar charts are good for comparing things. Generally, use horizontal bars—except if you’re dealing with time. If your bar chart shows change over time, revert back to the idea of time as horizontal

how to create a diverse 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, representiveness, 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

map

Maps are a common infographic form. There are several types including locator maps, geological maps and statistical maps.

timelines

Timelines. Timelines are excellent for sharing history, providing context, demonstrating cause and eff ect, etc. Th e rules say it’s good practice to limit a timeline to 10-20 items or "frames." Th e best timelines are visually to scale or proportional to the time range they represent, which suggests enlisting the help of a grid again. Or think in terms of the timeline-equivalent of a measuring tape segmenting and parsing out your particular units of time. If your timeline includes giant gaps, a list format may be a better choice.

diagrams and illustrations

Th ese are the most complex of the graphic styles and usually require real artistic skill to execute. Diagrams and illustrations are best when kept simple. Again, the rules for good composition will help you set up strong diagrams and illustrations. Give them focal points, as well as rhythm and fl ow

Why Gap pushed back changing its logo

Changing the logo is like changing the grand canyon. A lot depends on brand commitment that keeps commitment company-audiences Consumers with weak brand commitment are unlikely to see the brand as an integral part of themselves and have little or no personal relationship with the brand. So, for them, a change in the logo’s shape as novel, which will lead them to evaluate the logo more positively. Even consumers with very strong brand commitment can be affected, unless they’re VERY brand-committed. They could tell the consumers they’re changing the logo, or get consumers to participate in the creation of the logo.