Fundamental Design Principles

Fundamental Design Principles http://ﬂickr.com/photos/ryanricketts/2295726918/

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

dign quot;... 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://ﬂickr.com/photos/nathansmith/3265163619/

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

Shapes Ratios Symbols Brands Audience Workﬂow 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://ﬂickr.com/photos/freefoto/2552357124/

Idealized http://ﬂickr.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://ﬂickr.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://ﬂickr.com/photos/icampbellzoom/451536289/

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

http://sonspring.com/

Arch + Dome implies authority and stateliness http://ﬂickr.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://ﬂickr.com/photos/justusthane/1252907196/

Also good for backgrounds http://squidﬁngers.com/patterns/

Early Pictograms http://ﬂickr.com/photos/upyernoz/2149312640/

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

Industrial Revolution http://ﬂickr.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://ﬂickr.com/photos/mwichary/2140391908/

Never use these fonts • Papyrus • Comic Sans

1966 http://ﬂickr.com/photos/ekusupo/114732870/

2007 http://helveticaﬁlm.com/

Helvetica – Documentary on Typography (video clip) http://helveticaﬁlm.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://ﬂickr.com/photos/bwjones/2064502024/

Military http://ﬂickr.com/photos/kamoda/61229055/

Most efﬁcient ratio of surface-area to volume http://ﬂickr.com/photos/kingfal/3048352401/

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

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

Fibonacci sequence http://ﬂickr.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

How do you eat an elephant? http://ﬂickr.com/photos/ﬂametree/145019107/

(one bite at a time) lion lion lion lion lion lion http://ﬂickr.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://ﬂickr.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 Whiteﬁeld

“SCRUM WALL” at FELLOWSHIP TECH http://ﬂickr.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://ﬂickr.com/photos/bigberto/2764464101/

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

Conﬂicting brands + messages http://ﬂickr.com/photos/cennydd/3191424928/

http://ﬂickr.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 conﬁrm the majority in their conviction that the world of business, which does with such efﬁciency 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

ﬁvesimplesteps.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 workﬂow. • 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://ﬂickr.com/photos/mrjoro/89187454/

http://www.slideshare.net	23
http://kshitizanand.com	7
http://www.kshitizanand.com	2
http://mysampler.wordpress.com	2
http://www.e-presentations.us	1
http://bccc.blackboard.com	1

Fundamental Design Principles

by Nathan Smith on Feb 27, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 36

Statistics

Fundamental Design Principles — Presentation Transcript