236 ii nmi initial design phase associated word lists mood boards color and texture typography
This presentation is the property of its rightful owner.
Sponsored Links
1 / 26

Associated Word L ist PowerPoint PPT Presentation


  • 71 Views
  • Uploaded on
  • Presentation posted in: General

236: II'nMI Initial Design Phase Associated Word Lists, Mood Boards, Color and Texture, Typography. Associated Word L ist. What is an associated word list? A small set of specific and potent adjectives that describe a topic/project. I.e.: Your website design theme.

Download Presentation

Associated Word L ist

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


236 ii nmi initial design phase associated word lists mood boards color and texture typography

236: II'nMIInitial Design PhaseAssociated Word Lists,Mood Boards,Color and Texture,Typography


Associated word l ist

Associated Word List

What 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 awl

How to Make an AWL

  • BrainstormingBrainstorm 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

  • 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 examples

Word List Examples

Your turn:


Theme and word list

Theme and Word List

organic/digitalminimal/ornateretro/futuristicnaive/sophisticatedrough/elegantmechanical/handmadetraditional/untraditionalsimple/complex


Theme and word list1

Theme and Word List

organic/digitalminimal/ornateretro/futuristicnaive/sophisticatedrough/elegantmechanical/handmadetraditional/untraditionalsimple/complex


Theme and word list2

Theme and Word List

organic/digitalminimal/ornateretro/futuristicnaive/sophisticatedrough/elegantmechanical/handmadetraditional/untraditionalsimple/complex


Mood board creation tips

Mood Board Creation Tips

1. 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 obvious

Obscure 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 response

Think 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 board

Mood Board

What 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 tips1

Mood Board Creation Tips

4. 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 examples1

Mood Board Examples


Mood board examples2

Mood Board Examples


Mood board examples3

Mood Board Examples


Associated word l ist

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 1

red = alert, passion, hot

blue = confidence, stability, tranquility

green = natural, clean, outdoors, wealth, tech

white = pure, clean

black = elegant, strong, mysterious, evil

pastels = soft, non-threatening

earth tones = nature

bright saturated = loud, bold, happy, young

dark saturated = indulgent, royal

Color Psychology, Take 1


Take 2

Take 2


Take 3

Take 3


Take 4

Take 4

Color Psychology(3)


Associated word l ist

Textures, Take 1


Associated word l ist

Textures, Take 2


Associated word l ist

Typography, Take 1


Associated word l ist

Typography,Take 2

  • t

2 ≤ # typefaces ≤ 4

Be 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)


Typography take 3

Typography, Take 3

  • Don't be afraid to ...

    • Use plenty of blank space.

    • Be asymmetrical.

    • Make wordsvery large orvery small.

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


Associated word l ist

Typography, Take 4

Helvetica (start at 45:30)


  • Login