Fundamental Design Principles

FundamentalDesign Principles

http://flickr.com/photos/ryanricketts/2295726918/

Hi. I’m Nathan Smith. I work at

as a designer + front-end dev.

http://fellowshiptech.com/

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

(video clip)

MAYA – Human Centered Design

http://maya.com/practices/human-centered-design

WE ARE HARD-WIRED TO RESPOND TO TYPES OF

UNIVERSAL STIMULI:

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

Hi!

“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

I’m wasting your time.

JESUS

Man’s initiative vs. God’s commandTower ofBabel

http://templebuilders.com/Index_Tabernacle_of_Moses_2.php

Structure + Dimensions of Tabernacle

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

Literal Symbol

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

Idealized

PresbyterianChurch(USA)

UnitedMethodistChurch

Open hearts.Open minds.Open doors.

http://umc.org/

http://joinred.com/

THE MOST SOUGHT AFTER BRANDS HAVE BECOME RED

Pyramids Endure

http://flickr.com/photos/liberato/185902386/

Triangle = basic 2-dimensional shape.Used to point towards goal (skyward).

SON

FATHER

SPIRIT

NOT

IS

NOT

NOT

IS

IS

GOD

Trinitarian theologyplaces emphasison a triangularrelationship.

http://flickr.com/photos/icampbellzoom/451536289/

Arrows signify progression of time + spatial direction.

Roman Arch(has staying power)

http://flickr.com/photos/8177037@N06/684520414/

http://sonspring.com/

Arch + Domeimplies authorityand stateliness

http://flickr.com/photos/eob/70343169/

http://smashingmagazine.com/2008/05/27/smashing-texture-contest-results/

Triangles + Arches Structurally Sound

http://flickr.com/photos/justusthane/1252907196/

Heck, just ask your everyday honeybee

Also good forbackgrounds

http://squidfingers.com/patterns/

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

Early Pictograms

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

Mod

ern

Pict

ogra

ms

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

Industrial Revolution

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 >

http://uiandus.com/2009/02/19/video/gems-of-unnoticed-problems/

“Good enough” stops short of great.

http://flickr.com/photos/mwichary/2140391908/

Typographyis Timeless

Well Executed

• Papyrus• Comic Sans

Never use these fonts

1966

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

2007

http://helveticafilm.com/

(video clip)

Helvetica – Documentary on Typography

http://helveticafilm.com/

http://en.wikipedia.org/wiki/Giotto_di_Bondone

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://flickr.com/photos/bwjones/2064502024/

Civilian

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

Military

http://flickr.com/photos/kingfal/3048352401/

Most efficient ratio of surface-area to volume

http://flickr.com/photos/ride/2150067632/

Good for storage of mass quantities

Icons = 1x1 ratio.Many are circular.

Firefox Safari Chrome IE 7

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

Fibonacci sequence

FIBONACCI – GOLDEN RATIO

http://en.wikipedia.org/wiki/Golden_ratio

http://en.wikipedia.org/wiki/Golden_ratio

GOLDEN RATIO – BOOK LAYOUT

Rectangles = lingua franca of web

Rectangles = lingua franca of web

Rectangles = lingua franca of web

http://flickr.com/photos/flametree/145019107/

How do you eat an elephant?

http://flickr.com/photos/24027284@N08/2277860703/

(one bite at a time)

lion lion

lion

lion

lion

lion

SELF-MANAGED TEAM – GREEK MYRMIDONS

Μυρμιδόνες = elite + fearless + took initiativehttp://imdb.com/title/tt0332452/

http://billygraham.org/mediaRelations/photographs.asp

Comfort and prosperity have never enriched the world as much as adversity has.

– Rev. Billy Graham

Zig Ziglar

http://flickr.com/photos/mommamia/2857914776/

hover mode = 230 bps

Attitude, not aptitude, determines altitude.

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

http://flickr.com/photos/cennydd/3191424928/

Conflicting brands + messages

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

http://adactio.com/journal/1154/

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

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

(video clip)

http://objectifiedfilm.com/

Objectified – Documentary on Industrial Design

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

Design is Anticipatory

http://flickr.com/photos/mrjoro/89187454/

twitter.com/nathansmith

slideshare.net/nathansmith

That’s all. Keep in touch!