introduction to visual design
DESCRIPTION
Slide deck of my presentation at SWF Code Camp on Oct 3, 2009TRANSCRIPT
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.