fundamental design principles
DESCRIPTION
My presentation for the Ministry 2.0 conference -- http://ministry2.org/TRANSCRIPT
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!