Fundamental
Design Principles
http://flickr.com/photos/ryanricketts/2295726918/

Hi. I’m Nathan Smith. I work at
as a designer + front-end dev.
http://fellowshiptech.com/

dign \"...
An orderly method of
arrangement to drive
a particular purpose.

MAYA – Human Centered Design
(video clip)
http://maya.com/practices/human-centered-design

WE ARE HARD-WIRED TO
RESPOND TO TYPES OF
UNIVERSAL STIMULI:

Hi!
http://flickr.com/photos/nathansmith/3265163619/

“Big-D” design is broad.
Today, I will address...
http://flickr.com/photos/yakobusan/2363688612/

Shapes Ratios
Symbols Brands
Audience Workflow
Usability Interface

But, if it’s not all about
JESUS
I’m wasting your time.

Man’s initiative vs. God’s command
Tower of
Babel

Structure + Dimensions of Tabernacle
http://templebuilders.com/Index_Tabernacle_of_Moses_2.php

Literal Symbol
http://flickr.com/photos/freefoto/2552357124/

Idealized
http://flickr.com/photos/paullew/2215265396/

Presbyterian United
Church Methodist
(USA) Church

Open hearts.
Open minds.
Open doors.
http://umc.org/

THE MOST SOUGHT AFTER BRANDS HAVE BECOME RED
http://joinred.com/

Pyramids Endure
Triangle = basic 2-dimensional shape.
Used to point towards goal (skyward).
http://flickr.com/photos/liberato/185902386/

FATHER
Trinitarian theology
IS
places emphasis
on a triangular NOT NOT
GOD
relationship.
IS IS
SPIRIT
SON NOT

Arrows signify progression
of time + spatial direction.
http://flickr.com/photos/icampbellzoom/451536289/

Roman Arch
(has staying power)
http://flickr.com/photos/8177037@N06/684520414/

http://sonspring.com/

Arch + Dome
implies authority
and stateliness
http://flickr.com/photos/eob/70343169/

Triangles + Arches
Structurally Sound
http://smashingmagazine.com/2008/05/27/smashing-texture-contest-results/

Heck, just ask your
everyday honeybee
http://flickr.com/photos/justusthane/1252907196/

Also good for
backgrounds
http://squidfingers.com/patterns/

Early Pictograms
http://flickr.com/photos/upyernoz/2149312640/

Modern Pictograms
http://en.wikipedia.org/wiki/Pictogram

Industrial
Revolution
http://flickr.com/photos/zou-san/2293618925/

Our craft is becoming a commodity
and people in charge don't care
about the quality of the markup, CSS
or how nice our JavaScript is. What
matters is how fast you can get it to
market, how many people it reaches
and how cheaply it can be built.
– Christian Heilmann
http://thinkvitamin.com/dev/web-development-is-moving-on-are-you/

Luddites were a social
movement of British textile
artisans in the early nineteenth
century who protested, often by
destroying mechanized looms,
against the changes produced
by the Industrial Revolution,
which they felt were leaving
them without work.
http://en.wikipedia.org/wiki/Luddite

I’m convinced the people railing
against CSS frameworks are just
trying to drum up false job security.
– Jeff Croft
http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks/

There’s a somewhat disturbing thing
going on with people advocating a
rebirth of table based web design.
Why? Probably because CSS
layouts are “hard.”
– Marco van Hylckama Vlieg
http://i-marco.nl/weblog/archive/2009/02/18/the_death_of_web_development_a

http://twitter.com/nathansmith/status/1212765549

Modularity
http://gun-parts.com/

Good designers
solve problems

Great designers
prevent them >

“Good enough” stops short of great.
http://uiandus.com/2009/02/19/video/gems-of-unnoticed-problems/

Well Executed Typography
is Timeless
http://flickr.com/photos/mwichary/2140391908/

Never use these fonts
• Papyrus
• Comic Sans

1966
http://flickr.com/photos/ekusupo/114732870/

2007
http://helveticafilm.com/

Helvetica – Documentary on Typography
(video clip)
http://helveticafilm.com/

In Lives of the Artists, Giorgio
Vasari relates that when the
Pope sent a messenger to
Giotto di Bondone, asking
him to send a drawing to
demonstrate his skill, Giotto
drew, in red paint, a circle
so perfect that it seemed as
though it was drawn using a
compass and instructed the
messenger to give it to him.
http://en.wikipedia.org/wiki/Giotto_di_Bondone

Civilian
http://flickr.com/photos/bwjones/2064502024/

Military
http://flickr.com/photos/kamoda/61229055/

Most efficient ratio of
surface-area to volume
http://flickr.com/photos/kingfal/3048352401/

Good for storage
of mass quantities
http://flickr.com/photos/ride/2150067632/

Icons = 1x1 ratio.
Many are circular.
Firefox Safari Chrome IE 7

Fibonacci
sequence
http://flickr.com/photos/lucapost/694780262/

FIBONACCI – GOLDEN RATIO
http://en.wikipedia.org/wiki/Golden_ratio

GOLDEN RATIO – BOOK LAYOUT
http://en.wikipedia.org/wiki/Golden_ratio

Rectangles = lingua franca of web

Rectangles = lingua franca of web

Rectangles = lingua franca of web

How do you eat an elephant?
http://flickr.com/photos/flametree/145019107/

(one bite at a time)
lion
lion lion
lion
lion
lion
http://flickr.com/photos/24027284@N08/2277860703/

SELF-MANAGED TEAM – GREEK MYRMIDONS
Μυρμιδόνες = elite + fearless + took initiative
http://imdb.com/title/tt0332452/

Comfort and prosperity have
never enriched the world as
much as adversity has.
– Rev. Billy Graham
http://billygraham.org/mediaRelations/photographs.asp

Attitude, not aptitude, determines altitude.
Zig Ziglar
hover mode = 230 bps
http://flickr.com/photos/mommamia/2857914776/

My brother Wesley acted wisely –
the souls that were awakened under
his ministry he joined in class [study
groups], and thus preserved the
fruits of his labor. This I neglected,
and my people are a rope of sand.
– George Whitefield

“SCRUM WALL” at FELLOWSHIP TECH
http://flickr.com/photos/34694527@N06/3221379926/

If I had eight hours to chop
down a tree, I'd spend six
hours sharpening my axe.
– Abraham Lincoln
http://flickr.com/photos/bigberto/2764464101/

Make everything as
simple as possible,
but not simpler.
– Albert Einstein
http://en.wikipedia.org/wiki/Albert_Einstein

Conflicting brands + messages
http://flickr.com/photos/cennydd/3191424928/

http://flickr.com/photos/sensorydrive/3003498238/

Once the pedestrian
begins walking, there
is no safety indicator.
When you’re halfway
across the road, you
have no idea whether
or not it is safe.
– Jeremy Keith
http://adactio.com/journal/1154/

Documentation
is no substitute
for good design
http://adactio.com/journal/1154/

Must unlearn what you have learned.

Let choirs sing well or not at all.
Otherwise we merely confirm the majority
in their conviction that the world of
business, which does with such efficiency
so much that never really needed doing, is
the real, the adult, and the practical world;
and that all this culture and religion (horrid
words both) are essentially marginal,
amateurish, and rather effeminate activities.
C.S. Lewis

fivesimplesteps.co.uk principlesofbeautifulwebdesign.com

960.gs – Helpful tools are available :)

Those who code XHTML + CSS as
well as they design will always
have an edge over those who only
design... You’re able to foresee
potential layout and coding issues
while the comp is still in Photoshop
or Fireworks or even Illustrator.
– Cameron Moll
http://cameronmoll.com/archives/000036.html

The artisan is not dead!
Modern-day craftsmen are in high demand.
31three.com SquaredEye.com

Objectified – Documentary on Industrial Design
(video clip)
http://objectifiedfilm.com/

Design is Anticipatory
• Don’t wait for problems. Solve ahead of time.
• Know your audience, adapt your workflow.
• Communicate function via aesthetic form.
• Learn to convey more, by saying less.
• Don’t lose sight of the primary focus.

That’s all. Keep in touch!
twitter.com/nathansmith
slideshare.net/nathansmith
http://flickr.com/photos/mrjoro/89187454/