Foundations Of Design

1,198
-1

Published on

The 10 foundations of design that anyone can use to create better work online and off. This presentation is geared towards non-design types, but can act as a refresher for us in the industry as well.

The focus and examples are centered around the web but the general concepts are platform agnostic.

Published in: Design
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,198
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Foundations Of Design

  1. 1. _ Vt. .. ‘ 7»-»—{ 351:: T. r-‘tA' I
  2. 2. N m S E D F O
  3. 3. Psychologically we react to groups of three similar elements put together. Three musketeers, three little pigs, three amigos, three sheets to the wind. Fundamentally we react to repetition when we see elements share color, weight, and style.
  4. 4. NIKE PRO . mm “mm _n M EXPLORE TECHNOLOGY mSEASO STAY WARM STAY WARM r_ . Kyle's Laser Focus
  5. 5. PINE‘ " W «cm storms clues cuslounmno low runs out» Inc-Isuuuuus scvunm4tLm| Asouvus IRONS P0 WE R nu. mmuam Ia -nrslanwronnumons bcusvornnvxmo I B. ““ up . . mi slonure. cums GISVDHFIHIND mun mos sun Rtomtnctuas sovuwvinniut A8(lUVU mvmc. vIo(os innnnnulons IDESIGNEDIDR woman 3 p«r. 'gg: :u' ‘ com ‘
  6. 6. Sites with lots of actionable items need a schema/ flow to direct users eyes around. Eye path can help the flow of narrative and/ or help guide how we want users to receive and digest content. Do this, then this, and then do this, thanks.
  7. 7. 5uLnuo: uuI»eoAau: aIicvL-; r>uum~u me‘ (Avenue . ..a . .. EVEN! .. .. .0. E -ru Imam. mu In nun-n r nTTT7‘[, *" '1 Mnsroe-«Ar: C-E1 VOUFI 200! VICYORV YSNIRI mm. A r. ;». m.: ~ m Sxn nk mu 8. RACK ANNOUNCES DRGA/ EJIZING AMERICA no-. .E'~o« . :.m I’-‘fr , FOUNDATIONS *' 3 OF DESIGN
  8. 8. an n I: - I ul u UIVBCBUOILCOW vnmnvna: .. ... ... .,. ..-. ... .. uunuunu unnnuuln :2-uunnu TO Junn1ry‘2009 In on n u . ..a. u— human »¢. _s. ... .- Ammo gs. .. 1 T M. »-nnu u_u. .-an-. .v. -~ mos. - . . . 1.. ... . —n-5 mu nun uu-nu -nu: w my vucu nun IICLUIIVI VI mvuvliv I OUY MI I TENNESSEE3 LATEST uuuuvul o M T H Gmr WEM PLA NN
  9. 9. ACTAS “*- EMOT COPASETIC ION VA EXCITED
  10. 10. You can communicate an idea by using similar elements that support that idea. You can also set a tone or mood depending on the elements you use, getting people to feel a particular emotion or vibe.
  11. 11. m)'a0L‘oun( wishlist gificards biog S apparel acces so: -es . n‘1~a”es ; Lu¢$ SWITCH IT UP ' ONE SKIRT FIVE DIFFERENT V SHOP ALL CONVERTIBLE SKIRT Home > what's new . . . 9 1711/ 4r'r"c‘ccn1gJ' freepeople. com
  12. 12. ELE _ g MENTS Q ‘ EMOT ION I/5.? New Publishing Layout Vlow oi’. fl’cemac, com
  13. 13. YOU ARE HERE AND E R E AND HERE i
  14. 14. 1,“: , .»« « Contrast draws your eye to a certain area, and creates hierarchy so content can be delivered in chunks. Contrast can be used to draw your attention to a particular focal point, like let's say, a “give me all your monies” button.
  15. 15. I-an mulann nuu -1.. . AMERICA‘ man u I, a. W ~. y.Iw. . W I E I rl N n - M Lei . m :5 n ‘ w. .5 m . n m i . I-an mlulnn ruruvn vita I I-lm the caramel flavor.
  16. 16. kontain . ... .. . ... .. . ... .. M. om-nAny the easiest and most beautiful way D. U n M. 5 lull Konlamed ' vodayaxxonu-x I "‘ -. .u. .. L van . ..x. ..s bun. .~u- . .. ... ... ... ... ... ... ¢'« - . , . . - . '. . ——u . . ' . u zuauoou luau Air Alfllbux-on ‘ A. la»: In puv , / Blog About wiumm! Mu Muullnnvthns
  17. 17. ". I InI_: ;4 110;: l~' . 'l; .". ‘m1n
  18. 18. The weight, size, and color of type on a page defines it’s importance relative to other content. Think of an article as an upside-down triangle. By using weight, size and color we are free to place content where we want it, instead of from the top to the bottom.
  19. 19. iIli . ‘ II i'—-. i iii - . - ‘ ' A O. VE«D. AY C0.FhRLVCI-L on Dl§| (i. ‘‘, F_'TRIJ'RL I(SIllI'iJJId LVSPIRANON ‘ On Friday, June the 6th 2008 in Chicago Lieamaboultaldngcontmlafyaurawnworkbyseeldngoulmetliodsto Iwi'iu- 'I I rm. Kx. ('i A. I) ADOPT I'. (‘()V‘v'l-Tl(). 'Al. II)! M Al-Ii()IT(‘()llAHIJRATlI)S A‘x'l) Ill lI . 'lA six Pxrsl “rAn0V< A. DDI<1 s:01u) av l‘S| (3'AL§. | Gl'l(AIC. (‘0l'DAL PiirrI R5 ¢VDI>E1I‘D§ The 3rd SEED CONFERENCE WII I. I III. VUI H IIIAD WITII KVUHT I IX? ! Y0!" (‘A5 l'l TIIIS | "T AHIJITTIII-(WY. IT'S AHOLT PRAKTIKT Yum Lhmildiurtrld I/ UVMIIVY H d(lIA'VI(f' f[1’I’lII_ xxxrh or ial(u[ U70 blAJIll(U Nll7Id(d um! vxhn u Ionlmg Ia nil! Urulur rdrm and iiim mm IIIIU ldflklhlflf SATISFYIVG .4 BA. 'A‘ABl£ Axlllvllt . -mime -MM dl vprn fllllld | l hlkt d| IX lofllflhlllg | LI(fill niii ii fl isiix (| f1ik‘II¥f Ifaflllllj. ID! /I|1Ik1I(Il1I(lIIIIi{.0IIh . v7i. iimi. iiiiiiiiim. iu; uisn: n NOW nu ‘i. .L1.Iu. I.IokM nu. DISCL. ‘ 100.311.! ) v1.LL BI. IIu. D Ix nu '(‘AT1Iu>iu. l_ of . l0DI. R.l§. I" CROWN HALL by Mies van der Rohe I-iaiii. iiiiiiiii—ii miamiid III : m5,< i i. i I . m»i. i.i a. l ant aflkr non ii-ipociiuii iiiiiiziuiii . i/iii. Iflndffll E53! and ii mi IIIAI) Mir». lkt iiiiiii-ii "iii": 1», iii. -i iiiiiiii-.1.. .» MIME ll i~im; ».i. iii. .i nii "III! am. im i-yiiimii llfllhlllg - ' THE DAYS SCHEDULE and INVITED CL STS ' Cnins . ’u. i nixiiieraiiineicii: Jwux niuiii-:2 roiiaseiix Jun: .i(’u. u.iiiiii: miaiaeiux: »- 1- | n"WI'lM| II‘l$.1II_V 7’ -. iir'. (iiiiii; ini. xni~4 JDHIIDVKAI. mu iizhc Cruz It mi-. niiixa x. i.ii' f(| lII'llIllII iiixiix -no banal (I. V', '.'r. 'k'§ vii IIIII DRVIIV nl‘ «. i . , hr fmvc trhiix: ¢V0llI[lII‘y mi: 4.-iuiixot . .- the i-nii. x~in: iixii imix i -'l i. . J: II7I| I‘f‘piN< ii-i. —_-iix. - - txucxsiu IQCIXCWEJ-IIC lJIl)p(I| Ild. l')| .I I‘AI. ).&(l . ’IlflIJl. ’A)fI(lI e iriiixiaixiixiiinsiiiziii -. ulldl ac. ..--i-~ , -~-i~i, iiii1i. ¢ bixaiii i: .1.~¢p<iai. 'u aepiiixuuniciiixinex . -.x i «Nix -em»; x . . x . , umiuiii mu» ix. rxii . i—. .i am. .IIICII1I)AI i. ii‘! riiiii. .1eiiiii i nun Wu Nll')ll u ix ‘.1 | IVl‘91Irki Iusiiimrexpiiiiiiei-i, ui>iiiimiiiui-i; . in iiseiii~iii= i:. :xei-. iiiiig ol‘ 1: I 1ndIpt! ‘.a. '1 w ‘ill: lira I ( . II me '1lI| III| E£_) Ihlt . -iii imiix: hA. ‘SrKIfl eiiiiig-2 iii imimii -mi riii um III: KIHJIIAKE $«Ib. l1Ix'III)c1i! ‘.]III. .|l'| lfl 2:. -.: x .1r|1-. ‘l)ll‘[‘( xii. .. x' -en mi: IIII mi. i: .eiiiiii_x In iigmx ni'ii in isiii i, Iufkh imiii -.2 rimiii . . . :5: pima (II nix pmimi (7IlL IIIIII (Ill iii. irniiiipiiiuiiuiin i. ii <' rllld. Aii urn PA. ll. I)| .(1 xxim -. * iiximx ug pin. -iziiiuix iii: -.>ie iii, vi. I. ’IWK}i4k - - , i iu. i-irno~ GI iuuux ii/ ciimxs "AIJ. .‘(-Illlnllg -iim «And I! ) Mi lyllY(? A_A ’ SIX CONCISE . 'Tl‘_ Ii PR1~'. § . .'I'ATIONS aIIdA. ' OPF_' PA. 'ILL to AILOW FOR ' Much DISCUSSION and INTERACTION . ’ 4,]‘, lT. lI {and III d. :_v: ::l: rv: dI1_' . « I). . xI'1I’IIll| dIIX€p(| (lI|0HII'£IlI‘lI1{5€I'WIIIi, sii I) prxxmcx In as In uiuii; i-ii. iai. xiii. .-ii liIIl Ic1‘¢ )fI| I iii illl mum iumimi-«iciia iii Cnii-i, «.xai iiiic oui med lot II. a xii. -iiniii xm-ma in ciiiiug. » ix prtrly Iuugh II) b<. Il REgL'dI'I}I an i 1.). you can iiiie oziia puxpkx word 10! II I00 H£! EIrrlIcWIl‘‘Irl‘(IISIl| >IA'. ‘l - . i“x, ' '/ " . |l, .l“‘ l. | )I)x‘x -, ~.. ~-vi7i~. - igl . i'T - , i-_i i. piiiu. ' . -» SEED is SOLD 0 . ii.1.' "’V ': (i'r . Jr. il '-( . iii. ..i v-. / -. r. -iitIlII wuiiin ~ Dru u iiiiiiiiiiiiuii-»; i-iii Al in uul mix ciniiivuii: ii. :: iinluik ui hIl'£1 Inth l| .a. :g xi. —ii. iwi (I{I)(| lI. iiiis ipiiiiiiiin ii -2: Ifitfllioe xi: be . Seedcon ferencacom ix ELL KL‘r. ."IE 2., PIINIC ii. iii; mii. ixx In Ix! re (1ii(: im.1.ix f. '.I ii. ».~ii
  20. 20. HONOR TYPE HIE R ARCH Y II IA N SANTA MARIA iv mi. win A ninuu 1iIUI'S ilul-24 so « i --III -i Design - mzv NEXT - Bi-rim I Ii. -(I iiir 1:960.-n Iul M‘I'k I ; i.»iu. -I51; Ix-iuucd aboul ixvip'ii- iln-ami; up :5 iiii-ii i‘iiiixii-. i-i I'I. K'! Iiiii ziiiin I gin iiiiiiiiiiiiiiii. what iiiiiid I «IT» ii, i.ii'-wi»II. iii. i_i »i- iiiiiiiiiii aiipi In IIIl'liIlIlIIIi<IKI1lVI. I"IlIflVl rxm, 'i1'I' iaiizhr I)l‘lI Ivnl IILIIXR wiih A rind In Imisiii I1‘lII. t1t‘I‘iII| Wl(I1lII’(; ) acwrmi VI II you were in typeface, what would you be? ii. ~i'im _YI: iiiixiii-i, ‘l>I| VlII‘( mi. iiii i but IIXIYV‘ I‘iI. 'I mi i~i. iiiii iL'IiMV‘l ». i~‘i _ii. .ii mail uiimii DI IYIHSK iiiiii i_i; .iii. ~i. IILII Iii-i iiiiiii iziiii I"nI'III‘ | lIlrY"5lI: Ig i. 'I$vxI‘I -«1lI‘1Ih(*I_*, ucfarr AI'. KI! (‘ iii. - IIIC1 hr. -sl rfxfmhlr )DIJI(IHl'I. mi. iiiii 9(ll‘. IIi‘ iiiiiia Iviogi-, iIi. <». iI IHIUUH I. Il(‘Ip<‘fh‘l‘ l‘lf. £I(S| xf1¢‘l. I8rI(yLi'Ul. l'. tI. (‘I( I'IrI |4‘I'iII inii. .-ii». iiii. i- III ‘U Ills‘ I AM TRADE GOTHIC ‘Ind: Gqmig v~‘; I. iIi«~i; ;i-. i>iI in I-74H I1) Jlckwn flugkg, ii Ixiiiflii . ‘!I'. lI| }]iI‘IIl‘IxI1l‘fII"()II1 (: x|i. ’iimiii ‘Dir 11)1‘Iill‘l‘}fl<II'TI[Il‘fiY(I' -. IiIh. i I'V‘I'li| II’I A nmgimni-s. and nrn§p.1pcrs dim In its Spaflf) , n rhoicix for Iwiks. ~iim . iiiiiiim and Ii‘gIbIIII It p4)I'iI'A}$ i ixundi-riul rhararlcr and slurdincss. t5p<‘tI: III in wndtnsrd V-! ‘I]2,hIS ‘iIll' 60 COMMENTS JD Gnlkm iii)‘ Adiun says I fl34I(‘Illl' mih I II_IIx. II; u,IIIiIl1IIJl'IIII(5 Iiiii I0! IIIJV4 I‘»<InI'. I ii I Tf—Idl' «; iizIiii- IX iI'. l!(I_ . ii.4 i. .ii. ,.I. ~ i. .iii iiiiii- aiiiiiiiii O! I. lS II i iiipiiiiiiiiii-. IIIIIIIVIHIIIJ. pIa_H iIx1‘I'l i. iiIi. (III‘A‘l l)pl‘I1.«‘r$, iiiii mi. (lfifll si mi lnrhflf ii. » llrllrlllfr In iii i; ii. ii I11-Ifll ii-. i iimzgn. nx_, iiii zini ; »ix : .~ 'A1 Black. Blue. Trade Gothic. while - PREV NEXT - I ilI"I| :tnIx. Axniir an iii-s. g;nnI by . i‘. n.n Fniligrr and rvlrnsod ‘tn IJni)I'pc IIrII M: iii iw I («I Iiiii AI‘I'. li' Vxhtll I AITI ixiiiimii-ii. xiii: I'll) Liri I5 Ifl | .‘I’I(‘r I mi (‘Iran nn| ,({lp xii l)ll)kll‘h . .iii-ii in, iiiii IS ii I'ilI's I am I1. hk-mm ml 5¢n1(I'iii a zzmiini, so I'm . !:<i». iiIi Ixxii fil’l‘. ilI liiIl‘< lhal mm gmi icigiaixii . . ~n' sciii I1 .11! iii: !'. _I(‘. rl1II’I| lIl2ll1IlI. .>f{III; )I'IlC( ismiiiixi I» I>ii-. i-Ii | }ptI. II. ‘I. ' ixift . T. III' Ci-iiii-i» III L'lII'III. I LI1‘Iy. II4'fiLlI(I . l)l: (Il)ll i9i; ni'iii-ii ni- xiiimiiiiii mim. _ I’IIh'IIfll‘rIIIArVl'%, I' suI. iiiiiii. ii. n milixii» i imiii an l‘. I‘. gIl‘ Iiiiiiiiii l_‘p‘IiIl‘I‘ b mixiizi ' Iwi'. i;iriIiii j ason_<. i'i. 'i. I.'i. ari'a. I om
  21. 21. - i Tl0IVS*= ‘ ESIG . ~i. '~. '.“-'1 1
  22. 22. White space is the distance between two object of importance. White space is also the gap between lines of text, also known as leading or line height. Yes, white space is sometimes actually white.
  23. 23. IASIIANIA. AusIIui. IA Jlozlotet 2000 I Inn A! LONG AS "(III II A IOAD. "III II A ROAD-YRII I, addlnq Inullple valve speed and even more precision: in 2001, we created i-VTEC. oun DRIVER NAIE: Allan Wu , I ~ I AGE: 35 / Q’ $9‘ IIOIC: Hong Kong, Tnlwan, Slnqu : N , OCCIIPAIION: Trnvelllnq I < - i ( ' 5 . I ’ v uouics: Outdoors. beach vollevh — ~ FAVOURITE JOUIINEV so rm: Acvos: ‘(K V nun JOIIIINEV: South America ' cmiiucvm Doe! NDDEN 1'A| £N‘I’: Slillled barber i. Ir: -ulluiunumnmzuaulnnia A I I 3 driveeverydrop. com in
  24. 24. uuu-mu nun mm um nu utllu WILD TURKEY BOURBON um unoxs : .. M nnxu }'| _A‘()| ( nun uxrmx um»: -»v— Nu! m . .u. . 4.. n M u-uunn m V , .u. ..‘ . ."C. ?.'. 'ICI RARE BREED mun . ()(ZI| I'| ‘ Inn n um um um I j >2 V . I / 2. VJ‘. ». _‘ J. ‘ ‘(f-‘lL‘(?4‘:1 d. ’l V99’/9.ryd. '0p. Com
  25. 25. , %’§ 1 M, y I", ,1 , v r ‘ II ‘II’, I. '(~J. 9 . /:3’ / ,
  26. 26. Proper unity visually relaxes or excites the eye, depending on the desired effect. Unity ties all the elements of a page together and gives them a common purpose. Proper unity can extend the style of a brand online.
  27. 27. Omihi Waipai-I — New Z4.-Aland Wine BEER Black Estate is a remarkable place for wine. . 2'. «L» ‘ “’fl'l“-lu'. r&7 5'. ‘ '. 3.‘. '§", "._". ‘ * rum, vwncd n(1ld usihtvrimnamy sq. -.miuu. .,, ... r. |l(y. Ihar'. h¢vna gvwlhnmghclnynnd ' g ! unwan: u>. ‘.Iv. opn)du: :nul¢ ( . .r. . — O u mu urinrkvtfy nulu-W n)( this nu Clurunnuvhndatflai um. .m. nu. a.mq. ..: .a. a.; .-. z.m If we seem friendly and obliging, that’: the wine talking. Inanau-w~, —Im¢n—: u . ... .m. ... n.. u.n. . u_. ... ..m. ... ... . n | ¥ . -wn. ..« um i. .. ~. ;.a. ... u_. . . .u u. la pm“ . .a. m . .. ..-an nu. -x. -v. ... ... ..-. -.. . u. ..-. .-. ai>. ... « an. .. . ... .-a. «.-. ..-aw. FN: —-ndlua-. '.nnd -. ... .u. s.u. .-. -us. -.. vwI1~¢rrn: :l>l§ 5.. ... .-v-N u. ..-u * , ... u.a. .u. ..s. u.. a Avlll Hladr Izmir omrm their Home Hllri I-‘sun Riesliruuoofi Gunhnruy2oo7 Hm Sci! 2006 *5-, .
  28. 28. UNI TY: SUM OF ALL PARTS i. .. . ... .. . vuanua-y, :uu-yuzou Emergency In Mumbal? Dial 1298! A-Venn‘-V"F1V'ri< ht-wry an-un. u.r. .(. n.. a-c. -., ., .4-M. -.m. .n. .m murta . vvdlreua-ucu-vosh-Insw<: vaiu v-—»<orv? 'Vv-vxnnovwu n-(Iv . ».. .-mm. .. .am. .-mrpn-. ... a- v-n. Ar-obvua-ac: --<->u'nerv.1 ~. «.. ..w-w~<»-or. -.~m. cv. ..m, gunman : m'1n>1Aclau: sa n. ..»-. ... . -» RECU" CUWWIUUTURS no-u v. .. n. » -o-. 3-: «mm» t V on. " gum. .. _~_u)nn-m’ “I , ;.v _ The Sad Saga of Macquarle Island ~. ..m. m-on Dxu’ -a um. .- . .w. _:. ... .—m». .-. .-u«». vw $; :;; .”, ,.‘, '.", .‘, ','_‘, ',, ’,: §‘, ,"_, ,,, , 0 MOST DISCUSSED burn u. ~¢. ... n.. uu. .a. .. --. .9-la. ..»-u-. u.u~. ... .:. o-n. w.; u I. I-or--n-ur---u mv. -.m= >«. ... «.~. -. In -. .«~m. m. x nanuu--rand»-u-n n. =.a. .~a-. ..<-. ..suu_ in ; ... ... n.. . '-w'-wvs-<‘--'a'-~o<--- acn-u-—---q-1:-= .a— runvvunau u. ..m. .._ -. arm-u_ru-gang. an-. ».. -n-o«o. u r nmc. -o-urn-nu. ..-.9 n human-an-Its‘. v-. nu». .. u. ..—. .¢ no-u ' """"""“ n. -.. ~n-4.. ..-. u.—— 0-. .— . t-¢— . '.oouo-cu’ *“"“"' ‘ good. is pg. .. . _L. _
  29. 29. PERSP EC TI VE: VISUAL EN VIRO
  30. 30. The World is not flat, neither is a website. Depth can add visual interest around an object you want to draw attention to. You can use perspective and depth to reinforce ideas or situations that people are familiar with.
  31. 31. Irbwnno . n%: . m run: gun Thank You begins with a T. PERSP EC TI VE: VISUAL EN VIRO
  32. 32. PE RS P EC TI VE: VISUAL L EN W R 0 - " RXA {:76 ' o o : 'u. i. ... i.: _ WII @ i E mari’okart. com
  33. 33. w , n 7’ CJ mu / J I. r «L
  34. 34. Grids are all about the balancing act of different content on a page. Grids should be heard, but they should never scream, “Hey, I’m a grid! ” The only real rule to building grids is once you create your grid, stick to it site—wide.
  35. 35. H MN Gl L moi. i 4 H I M. _. T. . .1 . i. N _ l NEW SHHQT 55 ‘VHE ISOEO SNOP FOUNDATIONS ‘W OF DESIGN
  36. 36. iMac And this isn't even its best side. 4‘ Power on a pedestal. _ I ‘.533 Nothing peripheral about it. Dislinq uishing details.
  37. 37. ll llll llll
  38. 38. Constricting or opening up your color palette changes the vibe/ emotion of a project. Certain colors relay different emotions depending on the situation and subject matter of the content.
  39. 39. vuvna muss (‘I MENU CHAPTER 1 JOHN'S GAME INSTRUCTIONS Uu wuv ntrlugmu and aqlity m ma-iuulau the urban onvuuvnom. Hawhunhosasauirwasyouun no <ak<uheiO| -Av Runngezr-eaojecunhonzdyouvnhqgecmhewq. Vnu can't mmuruhrsz andlxl no, -cu Va: cm mynna the nbpztsnhwlldynu I . III III Uscthearruukeysua Rearrl-uqethlvcsiriu-Id man we moms umqyouv mouse
  40. 40. suuvi win new f. i. 3. W N m 0 1.. . VI. E >, / H . ..U. T .4». TI mew / ,3 . U|u L / . w n . .. u n; _ W D mm. w W lkua n A mf. .u. 0 M. .. . .II . m. R r H E I. H T FOUNDATIONS ‘W OF DESIGN
  41. 41. T/ ONS? a ME wU IQ

×