Design Class

Design Class, Jan-March, 2011
Traci Jones, Studio No. 6 Designs

Notes: Week 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Notes | Attendees
Slides: Week 1 | 2 | 3 | 4 | 5 | The Design Process | 8 |
Homework / Other: SSD Mood Board | Wine Labels: Light Club | Web Dev | Hunter Merlot

Week 1: The secret to powerful compositions - Jan 29

Week 1 slides pdf

1st Stage of Design

most critical
most time consuming
great design is more than a powerful image

Design vs. Branding

Branding: how design fits into client's positioning in landscape of competition
understand positioning and how context occurs
Tropicana example: with the new design, they lost their niche and were confused with generic
delve deep into the products of your client's, or else you'll get generic design
want to communicate idea
positioning brings added value
make people understand - so you need to understand client's business
think bigger
think of yourself as a branding expert, not just a designer
delve in - immerse yourself. this will build trust - you'll be a trustworthy consultant, not just a designer
understand the competition - watch the industry, including their use of color, type, look and feel
how is their product different from others on the shelf?
show your client what their competition is doing. It builds your credibility.
understand the ultimate client - observe, interview, take an active approach to understanding. Example: CU water conservation - Traci hired advertising students to give her a tour of campus. CU is made up of "intelligent partiers"
product positioning comes through having a deep understanding of your client, their clients, the industry and the competition
Live it, then you'll feel it

1976: Apple, Jobs & Woz

Apple needed to distance itself from IBM etc. at the onset
more recent ads with the suit and the trendy geek
creates a feeling and emotion
elegant simplicity in their ads too - minimal look

Lessons from Apple

what components are we selling for our clients?
what makes up their brand offering?
what are your client's core values that they believe in and want to communicate?
how to demystify: talk simpler, smaller sentences, visuals, no corporate speak (Apple example again)
hard to do remotely (hard to present, etc)... screen sharing can be really helpful though
there is a power to walking a client through the presentation - i.e. timing of presentation and interaction counts
Example: Comstore, Fortune 100 company in Lafayette, tied to Cisco, business on 6 continents, Traci and Cindy working on together, need to show opportunities that their brand presents
- competition - and don't be afraid to ask them who their competition is
- where they are now
- pointed out that they were violating some design ideas
- they are a distributor for Cisco; not competition, but wanted to set themselves apart a bit but not having to be opposite i.e. can borrow some of their elements/look/feel (?)
lead your client through the process of one idea rather than present multiple ideas
Apple's success: because they knew their unique place in the market, "a brand" was developed based on the company's core values
Be sure to do and keep up on research related to your client. Spend at least 10 min, how much more depends on you. If you can establish credibility a your first meeting with them, it builds their trust in you. Long-term clients are less costly for you in the long run than new clients (first time research, etc.).
One of the most impactful examples for Traci was when someone told her, "I've been stalking you", meaning they had done lots of research on her and had a level of understanding already. think of Pinkberry also.
begin to feel about your client - if you don't, you'll be doing that generic version of Tropicana
- what is the brand essence?
- create a sensation
- what are the adjectives associated with the developing brand? ok to ask them this directly.
- what is the mood they want to provoke?
- in-person is better - you may get gestures, etc.

Examples:

nutritionist in Boulder
Wyoming - create a sensation of the west: majestic, rugged, western
Sheffa Salad - "bursting" with nutrients, color => nutritious, healthy, modern
Succulent Seafood Festivals - fun, approachable typography
Pinkberry - branding phenomenon - designer who was obsessed with Steve Jobs, took time off and made 90-page design recommendation. the company went from 1 store to many pretty quickly
Psychology of Eating - gather everything early on - screen captures of type, photos, etc.

Starting the design process

begin image research: collect anything that seems relevant, variety is good, and go deep
do something distinctly different from the competition (almost always?)
be careful not to overwhelm while presenting - organize it
texture, color, type, imagery, illustration, composition
what are authentic truths about your client? you can ask the client but realize they may tell you something else and not realize their authentic truths
what is the unique personality of their brand?
when presenting or drawing up presentation, get client to follow the progression of your thought
gather everything early on - screen captures of type, photos, etc.
avoid having your website design look like a template - think about the details

How design differs from branding

build a brand over time - from different places. from a business model, this provides long-term opportunities to help a company grow
think of yourself as a branding expert - implies more long-term perspective
brand building attracts larger clients and campaigns - less hand-holding, vs. smaller entrepreneurs more likely to need to be educated and hand-held
build trust and credibility
understand client expectations - they don't always tell you this; you may then have to ponder it a while and come up with some guesses and then ask for clarification
do your homework - be prepared before you go into a meeting
Steve Jobs clip for iPod - provide context of the competition, and then lead into where he/Apple wants to go

Top

Week 2: An overview of Design History and how to apply to real world projects - Feb 5

Week 2 slides pdf

A Designer's best friend

goal is to give us the basics for how to critique somebody's work
show how to talk about my work; why, what (vocabulary)
not just leave us left to discover principles on our own

Focal Points

Madonna in 1980's - defied all laws of modern design (no focal point)
contrast with elegant simplicity of Angelina Jolie
focal point gives contrast to other parts
without a focal point, the rest fades (fades? or distracts, looks cluttered)
everything that is well-designed has a focal point
a focal point is an object that contrasts with the rest of the picture. other stuff may be well-designed, but doesn't compete and often orderly / grid-like background
clutter is a popular sport in America
you should want to stand out in front of clutter
500 impressions per day: all designed to capture your attention and sell a product
it is overwhelming
the eye doesn't know where to go
it's our job to direct the eye - create attention (remember duck slide)
tell the story through different compositional techniques
3 major categories / principles of compositions
beware of having too much unbroken verbage and making the viewer have to work hard
versus breaking things up with different size headings, images, and blocks of text that aren't too big, etc. - better because people scan
it helps to get your clients to have more discerning eyes, too
Examples:
- DART (bad example)
  - nav at top, right, and left
  - the eye has nowhere to land
  - overwhelming
  - type is small
  - graphics neat, but you want them to be nav, and they are not
  - key item (how to get from A to B) is far down on the page, almost hidden
- Pinocchios (bad example)
  - more minimal but same problems
  - no focal point
  - font color - annoying but also, green can't be seen by color blind
  - placement too - logo is in middle, better to have at left
  - no one element sticks out
  - no real personality
  - no integration / hierarchy
- December Discount (bad example)
  - "cheap"
  - reminded Traci of Woodley's furniture - a high end furniture place but they had cheap-looking ads
  - ideas don't mesh => branding issue

The 3 Principles of Composition

1. The "Poster" Composition

reliance on a primary focal point
a poster should gain attention - historically, that was their purpose
posters are not as important anymore (more online today) but elements within a website may use poster aspects
why use this type of composition?
- design is a product of purpose / function
- billboards, posters are signage
- "drive-bys"
big image, small type
the small type Traci calls "page jewelry"
sometimes it is hard to discern what's modern
deliberate sizing?
band example billboard - too much info for a drive-by

2. Hierarchy: Multiple page elements

hierarchy is the magic word for Traci
clients often don't understand hierarchy
strive for a deliberate page hierarchy - 1, 2, 3...
a beautiful page is well-organized
- a direct and obvious focal point
- secondary level(s) of info
- tertiary level(s)
- huge contrast between sizes
makes your page look beautiful and balanced
Remember example (not pictured) wih the WHAT, YOU, THEY, WORKS in big letters scattered left to right on the (poster?)
developing focal points and directing the viewer through the layout
Examples:
- Ralph Lauren
- Tiffany
  - debate on 2ndary element though
  - pink looked like banner add so some people's eyes bounced off
  - Malina: audience = men mostly so may be different reactions
  - deliberate size relationships though
- Pinkberry - great visual distinction between elements
- Sheffa Salad again
- Martha Stewart (bad example) - visual clutter, too many colors, fonts and size changes
- Belmar (I like this one)
  - interesting to have nav on right
  - color-coded sections are really neat
  - tertiary details - shadow - makes page look finished, sophisticated
- Starbucks package design - background recedes while foreground focal point is popping
- Wisconsin cheese - cheeseburger / the macho nacho. note this one has multiple secondary elements
Traci's opinion on fonts: do they work well together, have similar tone? used to be <= 3, but... don't have to be that strict
typically logo at top left is a first focal point, but page layout drives it. size distinction trumps location and location sequence
thinking about my clients, can still have lots of content, but need to direct the eye and use size, etc.

3. Pattern

wallpaper
uses repetition
use this technique when your client tells you that everything is of equal importance
key is need to make it not look like chaos
organization is key
color groups can help
repeated pattern through layering
used a lot in packaging, sometimes also web design
grid pattern sometimes, repetition
most in play when selling products
- want to make them look uniform
- uniform symmetrical photography of products in a catalog
- example: Oak Street Bootmakers

The 3 principles seem different, but they can live together

can live together and feel deliberate
e.g. as one piece
find ways to unify the disparate elements

Probably the most important and common concept of the 3 is Hierarchy

Size
Color
Contrast
Placement
Dimension

Size

2 images can make up one focal point if they are placed together (Ben Thompson Photography example)
but must act as one, can only be one focal point
can have 2 or more (separated) secondary and tertiary focal points
sometimes Traci puts page details/jewelry there even if not really needed, for visual / design impact - to 'finish' the page

Color

add contrast through color
Maren Caruso Photography - rest gets grayed out until you hover over it
Unity in color - example, One Piece site of the day Jan 30 2011
but also focal point may be a different popping color like red
Example, The Gift of Giving
- photos are well-chosen
- contrast foreground and background
- red is unity of color and pops out at you
color can make a page look 3-D, have depth
gray type is great for receded text
photography principles work here too

Will finish the other 3 next time.

Secret weapon of a great designer:
develop a hierarchy through a series of focal points

From last time: More on Comstor and
the question about whether to go opposite of your competition

competition vs. copetition (or co-opetition)
how do you amplify and clarify the brand? (Comstor example)
what are you communicating verbally and visually
what are the core concepts behind your brand?
line length should be 12 words across for optimal readibility
Comstor used cheesy fake stock images
competitors used photos of their employees - shows pride
Cisco had a lot of neat elements - people, type, color, etc.
Comstor said it wanted to "demystify technology" but this clashed with their images which were futuristic
photography was contrived, staged-looking. changing this would add depth
long line lengths reduce legibility
don't say 'click here'
don't have long headlines
don't have too much plain type (without breaking it up)
Strategy in design was or became to align with Cisco but/and stand out from the competition
The "Fold" - 600-700px? 780px? put the most important info in first 60px, rest up to 760px

Questions to ask my clients

what DO you like about __?
what DON'T you like about __? (Betty)
if it's hard to get them to reveal their competitors to you, take an educated guess and ask: "it appears your competitors are x, y, z... is that right?"

HOMEWORK:

Think about focal points this week - how we incorporate hierarchy in pages, ways to achieve it, and also think about page jewelry too.

Top

Week 3: Color theory and how to apply to modern graphic design projects - Feb 12

Week 3 slides pdf

Color Theory

Contrast
- the more contrast you have between elements, the more contemporary it looks
- have secondary or tertiary pick up colors in the focal point
- numerals are a great way to add character to a page. Use in a graphical way.
Placement... ???
Dimension
- Focal points through dimension:
- viewing distance is a factor to consider an dmay have different results based on it - e.g. billboard vs other stuff
- drop shadow: adds detail and also important for tertiary elements (?)
- think about making it symmetrical
- can be hard to do manually though (time consuming)
- bevelled = internal shadow on an image
- Ideas
- design sponge: the way the highlighted tab is embellished - very unique
- decorative tabs not just lines
- consider something like this for SMMTC: wishbone design studio has neat nav
- Natural Decorations Inc. sort of has 2 focal points

Top

Week 4: Starting Typography... I missed this week - Feb 19

Week 4 slides pdf

Week 5: Typography: studying the great typographers throughout design history, how to combine fonts to create character and enhance branding, creative typography as an art-form - Mar 12

Week 5 slides pdf

what is your approach to working with type?
graphic design repeats in miniature what architecture does monumentally
used to say no more than 3 typefaces (not so hard and fast a rule really today)
Type is a way to inject personaility: easiest way to bring a layout to life
personality in type: how to choose, how to combine fonts?
texture from type
think more deliberately about fonts and be more bold in what we do / how we choose
cutting off of type can make something look modern
choose fonts from the same time period - some people's philosophy. great place to start if we want a specific look.
deliberate contrast of typeface e.g. see fruition strawberry
choose type that communicates the same feeling and/or same character
technical terms:
tracking: space across a line
kerning: space between two letter forms

Using type to create hierarchy and page texture

web safe issue?
font foundry: license to put on your server
or use them as images (still need to buy them)
or find similar fonts - Angela says there's places to find this on the web
Traci uses Font agent Pro to manage fonts. Categorizes folders in type. Suitcase problems. Font explorer, font book...keywords?

Why is type so important?
- beyond words
- type has become art
- ask yourself what the type is communicating
- a more affordable way to add character to a page

Historical periods

1950's

architecture: less is more
1957: Helvetica - beginning of modernist movement
purpose: neutral typeface - great clarity, no intrinsic meaning in its form (utilitarian, no personality). no serifs.

1960's

modernism, pop art, psychadelic art
Pop Art: antiestablishment, use of color, popular culture
Psychadelic Art: rebellion, LSD, San Francisco, Vietnam war... type is flowy, organic; vibrant color; curvy... influenced by music... lots of work was hand-done
Optical Art (Op Art) first appears then too

1970's

colors are similar as in 1960's but reinterpretted
art pieces in nature (the spiral jetty)
disco most defined typography in the 1970's
neon, defined, streamlined
early 70's - major things in computers - since 1930's but not til 70's was it mainstream. 1976/77: Apple I, II etc. i.e. 1st consumers' computers
IBM logo from disco?
graphic design was called "commercial art"
Paul Rand (IBM) responsible for changing term to graphic design
similar shift going on now? graphic design -> branding (=> higher level)
70's a bit of a hodge-podge - harder to categorize (disco, corporate, computer heavy, 60's leftovers

1980's

the period of excess
bright pink
desktop publishing getting going
Cranbrook Michigan art school - Katherine McCoy: type becomes more about graphic design than for reading... pixels... reading text and viewing image are not separate... reading and viewing overlap... type becoming images
post-modernism draws from multiple things into collages

1990's & 2000's

post modernism, not very definable
(me: what about 90's and grunge etc.?)

The "Type Master", Fred Woodward

art director of Rolling Stone beginning in 1987
he pushed type to a whole nother level
at age 23 he was an art director for a publisher
Traci liked the phrase describing him: "waiting for the miracle"
he reinstated the 'oxford rule' (boundary along page edge)
illustrative portraits of celebrities
the celebrity inspires the type - and the type takes on the celebrities' personalities
breaks hierarchy rule and gets away with it
the range / inconsistency / diversity of his work is what makes him a master

Examples of fonts, websites using them, websites for choosing them, design firms

Fonts

Museo - mixes serif and non-serif
archer is a neat new font - modern take on a slab serif (westerna nd southwestern)
lower case g is one of the most beautiful letters in the alphabet (I like & too)
slab serifs are where serifs have same weight as the vertical
Baskerville's mistress = Mrs Eves font (Optima goes well with this)

Websites using them

PJ Madisons: traditional yet modern and elegant; nice detail on the J; it 'families' really nice; if it's legible it's beautiful
bahamas: type meshes with logo

Websites selling / giving them

Myfonts.com
Veer.com: choose tags from bottom right
typography.com (archer is here)
the Encyclopedia of Fonts book - Angela has
FontAgent Pro
Defont

Designers known for fonts

Duffy in Mpls
Louis Fili in SF (package design

Top

Week 6: More on Color - Mar 19

How to choose colors when beginning a project

What are we trying to communicate? Choose colors that sybolically integrate with the concepts. Colors have a history, mood associated with certain topics.
- Yellow: happiest, seasonal (spring and fall), education, cautionary. Angela: yellow stands out against any background. But, yellow type on white not good because not enough contrast
- Green: organic, healthy, money, sustainability, serenity
- Blue: peace, serenity, relaxing, trustworthiness. Periwinkle is America's favorite color. Blues always recede into the distance. Use it to make rooms appear larger.
- Red: bold, sensual, sexy, patriotic, cautionary, pops forward, tasty associations (ripe), holidays
- Orange: least favorite color... fall, vibrant, tasty, sunsets, caution
- Silver: important color now - technology, illusion of metallic with blacks and whites. #1 car color; Apple logo
- Purple: history and spiritual connotations (Christian or Jewish, also new age / metaphysical) - seriousness and weight, also a spring color, royalty (this color was expensive to make historically). Purple and red in native american colors were powerful / spiritual.
- Brown: organic, western, safari. Lots of texture. Can be sophisticated too (tans). Means 'inexpensive'.
- Black: loaded with personality - dual personality: elegant and sophisticated, but also mourning and death. 'Evil' connotations sometimes also
- Gold: bounty and harvest, luxury, fall. Use sparingly though. Difft connotation in difft parts of the country - e.g. don't see much in Boulder.
- White: clean, innocent, pure; could be sophisticated.
Choosing a color scheme
- usually pick a primary color first, then 3 main schemes: monochromatic, analogous, complimentary
- also pay attention to having type and positioning mesh with your color choices.
- Monochromatic: modern, fresh and contemporary, minimal, simple, stunning, elegant, sophisticated. It is variations of one color. Phillippe Starck, 'master of color' per Traci; used lots of whites. Martha Stewart created signature looks with monochromatic color. Psychology of Eating website (before they butchered it) was good also. Monochromatic unifies background, nav, logo etc.
- Analogous: colors next to each other on the color wheel (12-colors on her wheel).
- Complimentary: opposite on the color wheel. If you look at them long you see vibration. Don't use e.g. red type on green background, it is hard to read. If you must, surround type with some white. Complimentary colors give a sense of being alive - energy, vibration, movement. Used in athletics a lot, and packaging.
- These concepts contrast but the key is to make it look deliberate - have something unify it. Some designs can be haphazard as a concept but still need to unify it.
- AT&T example: how to do color gradation?
- Wedding invitations are an indicator of hit pallets at a point in time. Lime green + brown has been popular for a while now.
Other Color terms, techniques, etc.
- Saturation: how pure a color is. Be sure to design with equal levels of saturation. e.g. no pastels with bold colors. Saturation is pretty important - if someone doesn't grasp color well you often see it in poor saturation choices.
- Spot Color: emphasize one element. Use neutrals as backdrops to full color imagery - creates focal points. Beware black background - don't want a lot of body copy against it. 3 lines ok but that's pushing it. Beware printing it too - size difference.
- Segmenting by Color: colorful palette juxtaposed a neutral. Belmar example again.
- Pastels: feminine
- Vintage: layering, depth, desaturated, muted. Pair with texture and appropriate type.
- Limit the palette: simplify
- color is often used to unify a composition

Top

Week 7: Homework assignment: 3 Wine Labels - Mar 26

The Design Process slides pdf

Assignment

a promotional thing to be given to clients or family
type / color theory / image hero
composition: primary focal point / hierarchy / pattern
Traci's critique of my Funktional Fashion: she imagines color and light; try istock for images - transparent light? images inside circles?


Light Club	Liz Web Developer	Hunter Merlot

Graphic Design Tools

Illustrator better for the wine label assignment, and for type also... Illustrator is vector-based (scalable).
Photoshop - multiply is faking an overprint. Use to achieve equal amounts of saturation in images. Drop shadows should take on background - use multiply here too. White goes to transparent in multiply. Photoshop is pixel-based.
Suggeestion: design in Illustrator - there is no typography control in Photoshop. InDesign is useful for more of a page layout thing.
For a website, Traci usually starts in Illustrator, then translates into Photoshop, then sends it to her programmer.
GIMP: look for gradation palette. You can apply to images too, not just solid colors. Look for drop shadow also. GIMP is pixel-based.
Vector-based: better for printing; continuous, stores 2 points; more accurate and takes less space, but not good for 3D; to change e.g. colors of an area have to deal with the shapes available. Pixel-based: discrete; might be easier to work e.g. editing photos with since you can change each pixel; can be greatly detailed for computer screens but takes more space to store each pixel.
Inkscape: Open Source vector graphics editor like Illustrator
Pixlr: the most popular advanced online image editor in the world!
CGtextures for textures / images
Morguefile - free images
iStock - images
Photoshop has free brushes
be careful about commercial use with images

Misc tips

Compositional techniques: a place to start and a place to critique from
When showing client your work, show at most 2-3 designs. Always show the solution they've asked for; if you don't like it, be sure to also show others. Only say positive things about the one you like; if their's has problems show it in a way that is less favorable. For the one they asked for, say 'This is what I heard you say... Here's how I solved the problem...'
good rules in general: add more dimension, texture and detail to improve a design.
2 different opposite concepts paired together looks contemporary and deliberate
always think about the IDEAS you are trying to communicate visually. What colors, type, background textures, and graphics support those ideas?

One of the biggest keys to design is to make things look deliberate

Top

Week 8: Example - Client Asks for a Brochure - Apr 2

Week 8 slides pdf

Hands-on Project: Make a 2-page brochure

Recall the process:

create a mood board aka paceboard, and put LOTS on it & keep it loose
ask client lots of questions - goals of project, what differentiates them from competition, what makes them unique
research the competition

Hypothetical client: Spa in Jackson Hole, infromtheout.com

Client discussions:

more for the athletic trailsy types than usual spa-goers
rustic elegance, friendly
rough rocks image
showers like in a grotto
'no naked blond girls' in images
"You've been roughing it, now it's time to be pampered"

Competition

not much competition
one with naked blond girl
buddhist one - brown and red colors
Tootsy's, lots of pink

Fonts

slab serifs maybe
font purchasing: having a lot of different weights and styles in a font family is something to look for
Get FontAgentPro - costs about $100 though
Get dingbats! great for page jewelry and general details / interest / depth

Images

For textures / backgrounds, stay away from grays? depressing?
istockphoto recommended - photos for purchase, 1 credit = $1.50
Stockxchng is the free version of istockphoto
with istockphoto: tip - add price to file name when saving; be sure to read and understand license; there's a away to group/gather them

Specific Tasks and Tips Using the Tools

wavy text: see if GIMP lets you do. In Illustrator it's Object-style-flag
don't have thin black edge around your type (called stroke type) - if you want it, do instead: put a stroke behind it: select type, group it, copy, paste to back, path - offset path. Alternative: Cindy and Betty use the appearance palette
arched text or shapes: envelope distort - make with warp - arch
changing color of text: expand puts it into outline, then easier to change
save before turning to outline as you can't go back!
also with outline, you can do witty things like change middle horizontal of letter E to a dot - other interesting styling like this
don't stretch or condense type, it destroys the integrity and indicates a designer that doesn't know what they're doing
neat look is to do layers of text and move / overlap the layers
Traci influenced by Michael Schwab for type styling
DO use transparency (opacity change) frequently
DO use gradient to add dimension. Overlapping can build dimension too and also integrate things
Illustrator Multiply - takes on a color behind it
overlapping image - put a photoedge on it (CGtextures or istockphoto) and a subtle drop shadow
Gaussian blur - on drop shadows and more. Use with multiply also to make shadow look very natural.
Edge treatments - peeking out around photos and on edges (dingbats => page jewelry)
Rough edges too - filter-distort-ruffin

Top

Notes

check out Google API web fonts for special fonts that should work in most (but still not all?) browsers. Some really special fonts you can only get with images.
check out Google Alerts to keep up with client research
nav idea: different font size within a tab can allow for longer phrases but with emphasis on key word(s)
title idea: gradiate text color e.g. Pinkberry; or, gradiate button or tabs colors
pricing: one of Traci's clients on tight budget paid her $4k for logo, web, brochure and business card
question about working in niche markets - bad if recession, Traci lost 1/2 revenue because she was heavy in real estate. niched in transit seems ok for her though. another danger of niching is conflict of interest.
at Studio No. Six Designs, Traci does "Branding Campaigns"... think about how you describe your work, think up a term that encompasses what you really do. Other ideas: Branding Designer, Interactive Media Expert, Building Your Complete Online Presence, Wordpress Implementation (Angela - but she doesn't really stick to that, she's building a custom PHP app now), Web Therapy?... "when you don't know what you want, you can inadvertently push away the things you do want" (Angela)
elongation communicates elegance
Page jewelry more important to women than to men?
SMMTC colors considerations: browns, sage green? and consider picking up logo curvature in other parts of the pages / design. (Maybe re-do logo?)
SSD Nav: add something techie?
My web dev promo page: consider showing a gear
"Good designers copy, great designers steal" - Betty

Attendees

Liz
Eliana
Malina
Bret
Cindy
Betty
Angela
Bethany

Top

Liz Baumann

Design Class, Jan-March, 2011 Traci Jones, Studio No. 6 Designs