introduction to visual design

Introduction to Visual Design

This presentation introduces the fundamentals of visual design with examples from art history to pop culture, then explains how they translate to best practices in designing graphic user interfaces.

We polish it off with a demonstration of how to implement some of these concepts using Expression Studio.

Whether you have a designer-developer workflow or you ARE the designer-developer workflow, this presentation aims to simplify the mystery of why things “look good.”

Ever wonder how to think like a Designer?

This is me:

Twitter: dianeleeper

www.dianeleeper.comwww.42stars.com

This is me:

This is also me.

Twitter: dianeleeper

www.dianeleeper.comwww.42stars.com

Lin Bolin

Seeing the Invisible

What is Art & Why is it Important?

Don’t worry.We are not (really) going there.

Don’t worry.We are not (really) going there.

But we do need to mention two things which art can do really well.

Some art is “just decorative”

Some art is createdto match your sofa

Some art is createdto make people say

“oh how pretty!”

In my opinion, the best “Art”makes you ask a question.

Computers are useless. They can only give you answers.

Pablo Picasso

1977

1977 (pong)

Ceci n’est pas un pipe.

But if

EVERYTHING IS ART

NOTHING IS ARTThen

So what can you talk about?

Intention & Success

Design is Art with objectives.

Art does not need set goals to be Art. It’s ok with experimentation.

Design favors set goals and restraints. It resides in the realm of the measurable.

There is overlap between art and design.

It’s not really necessary to define how much.

There is overlap between Art and Design.

It’s not really necessary to define how much.

Design favors set goals and restraints. It resides in the realm of the measurable.

Design brings order.

Design brings order.

Design solves problems.

Design solves problems.

How do we design an advertisement that makes people read our copy?

Design creates empathy.

Design creates empathy.

Better yet, Design is about visually telling your story to someone else.

Design is creative.

A Design Process

A Design Process

Get an IdeaDecide on the Form it should takeDecide what Methods to useCreate the Structure Craft itPolish

A Design Process

Observe and CollectBrainstorm and SketchEdit and RefineProduce

Observe & Collect

Be a Pirate.

Brainstorm & Sketch

Edit & Refine

Produce

DEBORAH ADLER

Visual Tools of the Trade

Visual Tools of the Trade

ColorTextureImageType

Look and Feel

Color

Warm

Cool

Some Good Color Resources

Visual Tools of the Trade

ColorTextureImageType

Look and Feel

TEXTURE CREATES THE ILLUSION OF SPACE

Some Good Texture Resources

Visual Tools of the Trade

ColorTextureImageType

Look and Feel

Visual Tools of the Trade

ColorTextureImageType

Look and Feel

And then she saw it…

And then she saw it…

And then she saw it…

Oh, you get the idea.

And then she saw it…

And then she saw it…

Some Good Type Resources

Whitespace is not wasted space.

Consider the alternative.

Negative space is not wasted space.

Use a Grid Give your design some room to relax.

5% to 8% of men are color blind

1%of women arecolor blind

Color should not be your only visual clue in a design.

Browser Inconsistency

The Fold

The term “fold” comes from newspaper design and refers to any content that is not visible when a viewer first comes to the screen.

The Fold

I’m going to

let y

ou finish, but…

Web Design has it’s own rules.

But it’s a fun game.A few good resources:

What is Skill & Why is it Important?

Spark Your Creativity

Observe and Collect

Check out local art!

Take Photos

Take a class

Sketch

Learn Typography

Just do it.