236: II'nMIInitial Design Phase

Associated Word Lists,Mood Boards,Color and Texture,Typography

Associated Word ListWhat is an associated word list?

A small set of specific and potent adjectives that describe a topic/project.

I.e.: Your website design theme.Treat it like brainstorming:

Come up with gobs of words (~50).Then whittle the list down to the best few (~5).

Help from Andrea Herstowski from U. Kansas

How to Make an AWL1.Brainstorming

Brainstorm a set of words describing (directly and indirectly) your website design theme. Choose words that evoke emotion or images, set the tone in time, place, genre. Don't edit; keep brainstorming until you have at least 50 words. (Note: Use a thesaurus and/or dictionary for ideas.)To help get you started, think about where your website design theme falls within these pairs of opposites:organic/digital, minimal/ornate, retro/futuristic, naive/sophisticated, rough/elegant, mechanical/handmade, traditional/untraditional, simple/complex

2.Selecting the Key WordsLook at your brainstormed associated word list critically. Select the words that you feel best describe how you want your design theme to look and feel.

Word List ExamplesTheme Word ListFreedom power, confidence, open, spacious, joyousJustice fairminded, balanced, righteous, equalitySecurity safe, enclosed, protected, sturdy, perfectionistCommunity connected, individual/group, networked, relationships

Theme Word ListDuty ...Wonder ...

Your turn:

Theme and Word Listorganic/digitalminimal/ornateretro/futuristicnaive/sophisticatedrough/elegantmechanical/handmadetraditional/untraditionalsimple/complex

Theme and Word Listorganic/digitalminimal/ornateretro/futuristicnaive/sophisticatedrough/elegantmechanical/handmadetraditional/untraditionalsimple/complex

Theme and Word Listorganic/digitalminimal/ornateretro/futuristicnaive/sophisticatedrough/elegantmechanical/handmadetraditional/untraditionalsimple/complex

Mood Board Creation Tips1. Text it up!

Don't ignore the power of a few isolated words on a board. They're fantastic show-stoppers and give your viewer pause for thought. Big, bold words juxtaposed together work very well at creating drama, tone and meaning for any project.

2. Make the theme obviousObscure references can be fun but try to have a number of relatable items or 'touch points' featured in your mood board. You want to let others in, so being deliberately obtuse will earn you no points at all. It’s much harder to be clear and use imagery to sell your vision than hiding behind a pile of incomprehensible references just to fill the board out with. But it's worth the effort to do so.

3. Aim to spark an emotional responseThink a little bit left of centre if you’re presenting a mood board to a client. What would give them a genuine emotive response to? Real word objects are good for this. If you were inspired by the beach, bring in a shell. If your eureka moment happened on the bus, bring in the ticket. This type of thing intrigues people's brains and gains that all-important emotive reaction.

Mood BoardWhat is a mood board?

A collage of image and text objects that enables designers to get a sense of where they are headed design-wise and to communicate this to other members of the design team.

How do you make a mood board?Hunt through image galleries, websites, books and magazines looking for that perfect images/text to sum up your intended feel for the design.Use the word list as a guide.

Mood Board Creation Tips4. Don't simply presume your audience will get it

Presumption making can be the difference between a successful mood board and one that's dismissed as being too cerebral. There's a danger of expecting too much of the audience, that they'll 'know what you mean'. Chances are they won't. So if it takes a few more references, images or textures to get what's inside your head into a client’s then add them in.

5. Have fun and be creative!The whole process of creating mood boards should be fun, a refreshing break from the often tedious tasks of the jobbing designer. If you're not having fun, not being creative ... it's a sure sign you're going about things the wrong way.

Mood Board Examples

Mood Board Examples

Mood Board Examples

Mood Board Examples

Okay, let's make a mood board for a web page, right on this slide. Mood: Freedom / power, confidence, open, spacious, joyous

Color Psychology, Take 1red = alert, passion, hot blue = confidence, stability,

tranquilitygreen = natural, clean, outdoors,

wealth, techwhite = pure, cleanblack = elegant, strong, mysterious,

evil

pastels = soft, non-threateningearth tones = naturebright saturated = loud, bold, happy,

youngdark saturated = indulgent, royal

Take 2

Take 3

Take 4Color Psychology (3)

Textures, Take 1

Textures, Take 2

Typography, Take 1

2 ≤ # typefaces ≤ 4Be wary mixing:

2 different serif typefaces

2 different sans-serif typefaces

Use variants of one font instead: normal, bold, italic.We Use Too Many Fonts! (7.5)

t

Typography,Take 2

Typography, Take 3Don't be afraid to ...

Use plenty of blank space.

Be asymmetrical.

Make words very large or very small.

Make graphics very bold or very subtle as long as it complements or reinforces your design.

Typography, Take 4Helvetica (start at 45:30)