Introduction to design specifications to Summer of Code NZ students

2,417 views
2,325 views

Published on

This talk was designed and aimed at summer of code students - computer science interns for summer. But would still love to hear your thoughts in communicating designs to developers and businesses.

Published in: Design
1 Comment
12 Likes
Statistics
Notes
  • slide 33 was where I was showing examples that I had prepared for this audience. sorry can't load those here :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,417
On SlideShare
0
From Embeds
0
Number of Embeds
55
Actions
Shares
0
Downloads
133
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Introduction to design specifications to Summer of Code NZ students

  1. 1. Design Specifications An
Introduction
by
Lulu
Pachuau 14th
January
2008,
Summer
of
Code 1
  2. 2. Who am I? 2
  3. 3. problem solver ent r f fe & information architect di s hat s e rol strategist evaluator facilitator communicator critic sales person teacher mentor implementer interaction designer business person 3
  4. 4. ple d peo rke wo i’ve with Logos I could find... 4
  5. 5. ? Why Design Why Specify 5
  6. 6. Context 6
  7. 7. Lots of people have & use computers 7
  8. 8. So many choices!! 8
  9. 9. Everyone wants things right now!! 9
  10. 10. so... ? How do you know what to build? 10
  11. 11. er sw is n A th in es li ANSWER: When do you design? 11
  12. 12. s ces pro ent m p velo e ed war Analysis Build & deliver t sof Technical Requirement “Gathering” Build Test Design Who will use it? What’s the GAP What should it DB code do? and structure tive s fec ent f ine rem ui tion req fini Gap in Delivery de the proc ess Adapted from Cooper, Interaction Design Practicum course material. 12
  13. 13. ess c pro ent m lop e dev are Analysis Design Build & deliver tw sof Technical Requirements Design Build Test Design Definition What Who will interaction use it? meets requirements? What’s the What DB code Common practise should it What does it and structure do? look like? How does it r tte nd Be n a behave? o ser niti efi r to u d e Gap los eeds Delivery c filled n by Des ign Adapted from Cooper, Interaction Design Practicum course material. 13
  14. 14. Lost in translation – different picture 14
  15. 15. Got
it Got
it Got
it Got
it Got
it Same picture 15
  16. 16. so... ? How do you know what to build? 16
  17. 17. “ You’ll know what to build when you know what the Design looks like... 17
  18. 18. ? What is a Design Specification? 18
  19. 19. Documents that communicate... • What the THING is pictures conversation • What the THING Looks like see what • How the THING works you’re discussions getting • Why the THING is needed • Who will use the THING see what you • How the THING will behave will be building 19
  20. 20. blue print of your product 20
  21. 21. Design specifications... • Communicate: • Front end - user interface elements • User experience of your web site or application • Technical implications on the end-user’s experience 21
  22. 22. Different types • Site maps • Navigation pathways • Activities overview • Task flows • Page layouts - structural • Interactions specifications for tasks within an Activity 22
  23. 23. f so n Concrete Completion ent at s software interface io Web as hypertext system pon plic m Co ite/ap Visual Design: visual treatment of text, Visual Design ebs in quot;look-and-feelquot;) esign: graphic treatment of interface graphic page elements and navigational ts (thew quot;lookquot; components e Design: as in traditional HCI: Navigation Design: design of interface of interface elements to facilitate elements to facilitate the user's movement Interface Design Navigation Design eraction with functionality through the information architecture Information Design tion Design: in the Tuftean sense: Information Design: in the Tuftean sense: ng the presentation of information designing the presentation of information tate understanding to facilitate understanding Interaction Information ion Design: development of Information Architecture: structural design time Design Architecture tion flows to facilitate user tasks, Typ of the information space to facilitate how the user interacts with ical intuitive access to content com ctionality ly mun for Functional Content content elements required inica nal Specifications: quot;feature setquot;: Content Requirements: definition of elem the site te descriptions of functionality the site Specifications Requirements ents clude in order to meet user needs in order to meet user needs o UX User Needs: externally derived goalsf eds: externally derived goals User Needs site; identified through user research, for the site; identified through user research, chno/psychographics, etc. ethno/techno/psychographics, etc. Site Objectives jectives: business, creative, or other Site Objectives: business, creative, or other ly derived goals for the site internally derived goals for the site riented information-oriented Abstract Conception This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development.of User experience - Jesse describe a development process, nor does it define roles within a Elements Also, this model does not James Garret user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. 23
  24. 24. Site Maps • AKA Site overviews - BIG PICTURE view of the site or application • Main areas of the website/application • Information hierarchy • Identify where people will potentially start from or end up at • Identify types of pages or templates • Identify main navigation pathways 24
  25. 25. !quot;#$%&'()%*+,()-(./(%0)12(34)5 0>%?-@(21, 0>%?-@(21, !quot;#$%&*%0)12(34)5%89:;:8'< 6-7(.12( ,1=(%.12( ! A('/)-,@-4.D Q)4-0Kquot;K Z$%#0#%'-a4=W0#$)!#0'$-0*64`-<0)&04=%*0#-('%)*#0'$-0#%'-0$=#quot;0Z$-0#6`a #-('%)*#04=P0()*'=%*04)<-0#6`a/-.-/#quot;0M)<0&6//0/%#'0)&0#-('%)*#0=*70W=8-#0 <-&-<0')0'$-0bT0M<=4-!)<U07)(64-*'quot; >%'-0#-('%)*09quot;K0!%//0*)'0`-0W=<'0)&0'$-08/)`=/0%*&)<4='%)*0=((-##quot;0Z$%#0 #%4W/P0#$)!#0!$-<-0'PW-#0)&0()*'-*'0#%'#0!%'$%*0'$-0#%'-quot;0 T('%.%'%-#0V0 -&-<-*(-0V0 Z)06*7-<#'=*70'$-0*=.%8='%)*=/0W='$!=P20$)!0%*&)<4='%)*0%#0/%*U-70')0 ?<)80)6'()4-# T##%#'0V0=7.%#- M6*7%*80YD,Z?[ >%'-0$-/W W<)X-('# Z))/# -=($0)'$-<20#--0'$-0()*'-*'04)7-/#0%*0'$-0&)//)!%*80W=8-#quot; 1quot;K Squot;K Iquot;K 9quot;K Bquot;K Lquot;K Z$-0#-('%)*#04=<U-70!%'$0(%<(/-#0%*7%(='-0*)'-#0=8=%*#'0'$-4quot;0Z$-0<-#'0 =<-0*)<4=/0W=8-#0)<0()*'-*'0=<-=#quot; # @6'()4-#0 5-#'0W<=('%#-0 T`)6'0T('%.%'P0 M%*70=0 0E./@-4.17%F%G4.@(.@%1..4@1@-4.' T`)6'0D,Z? >%'-0#'<6('6<- ).-<.%-! 86%7-/%*-# _/=##-# <-&-<-*(- Iquot;1 9quot;1 1quot;1 Squot;1 Bquot;1 Lquot;1 ! Z$-0$)4-W=8-0%#0'$-0/)8%(=/0#'=<'%*80W)%*'0=*70'$-<-&)<-0=('#0=#0 '$-07))<!=P0')0'$-0#%'-quot;0D)'-0'$='0'$-0#-('%)*#0(=*0`-0=((-##-70 quot; &<)40'$-08/)`=/0*=.%8='%)*0=#0!-//quot; $ !quot;quot;#quot;$#%&' !..*)0$#*%' ^=*=8%*80P)6<0 quot; ()*%*+#)' /3*)(quot;quot;' 7#%,'0)$#-#$#(quot;' =#$('1((,60)? M%*70=0'))/ M%*70=('%.%'%-#0!%//0$=.-F =##-'# ,(-(.*/+(%$ *-(3-#(8 Bquot;S 9quot;S Hquot;1 1quot;05<)!#-0`P0%*7-A0/%#'0)&0=('%.%'%-# Squot;S 1quot;S Iquot;S % Squot;0>-=<($0`P0U-P!)<7 Bquot;05<)!#-0`P0T('%.%'P0_/=##-# # !quot;quot;#quot;$#%&' M%*70=0<-&-<-*(-0!%//0$=.-F quot;01($2'0%,' 9(-(.*/#%&' M%*=*(%*80P)6<0 1quot;05<)!#-0`P0<-&-<-*(-0'PW- ;(3+quot;'*1'4quot;( /(3quot;*%0.' 2*43':;< W<)X-('# Squot;0>-=<($0`P0U-P!)<720#)6<(-207='-20#)0)* C(quot;(03)@ 9quot;B quot;()43#$2 Squot;B Iquot;B Bquot;05<)!#-0`P0%*7-A Lquot;1quot;1 1quot;B $ M%*70=0'))/0!%//0$=.-F 1quot;05<)!#-0`P0'))/0'PW- 5+/3*-#%&' =46+#$$#%&' Z<=*#W)<'0 Squot;0>-=<($0`P0U-P!)<7 0))(quot;quot;'0%,' !))(quot;quot;#6#.#$2 2*43':;< 4)7-# Bquot;05<)!#-0`P0%*7-A >0%40.quot; +*6#.#$2 9quot;I Squot;I Iquot;I Lquot;1quot;S 1quot;I % >%'-0&--7`=(U0!%//0$=.-0=0&)<40'$='006#-<#0(=*0#-*70&--7`=(U0 =`)6'0'$-0#%'-quot; <3*$()$#%&' >0?#%&' 0%,' N76(='%*80 )@0%&(' =$0%,03,quot;'D' /3*+*$#%&' W-)W/- 3(A4(quot;$quot; E4#,(.#%(quot; /46.#)'@(0.$@ Squot;L Iquot;L Lquot;1quot;B 1quot;L F%quot;43#%&' F%-#3*%G. B.0#+#%&' ]/)##=<P :(&#quot;.0$#*% quot;4quot;$0#%06#.#$2 74%,quot;'Iquot;H Squot;H Lquot;1quot;I 1quot;H >*%#$*3#%&' ?)/%(%-#0V0 _)*'=('%*80 /(31*3+0%)(' >'<='-8%-# ,ZDE C(/*3$quot; 1quot;9 Squot;9 Iquot;9 Lquot;1quot;L AB C0 !4,#$#%&' quot; /3*&30++(quot; B#3)4.03quot; Iquot;: Lquot;1quot;L !!!quot;#$%&'quot;()quot;*+,-.-/01203)4%*%)*056%/7%*8209:0;%(')<%=0>'<--' ,-.-/0B20D='%)*=/0NO6%'P0Q)6#-209L0R6--*0>'<--' ?@05)A0110::B20C-//%*8')*20D-!0E-=/=*7 ?@05)A01KH0S1120T6(U/=*720D-!0E-=/=*7 ?F0GHI0I0IJJ0:KLK000MF0GHI0I0IJJ0:K9L,-.-/0B20D='%)*=/0NO6%'P0Q)6#-209L0R6--*0>'<--' ?F0GHI0J0B9901SBL000MF0GHI0J0B9901SJB ?@05)A01KH0S1120T6(U/=*720D-!0E-=/=*7 ?F0GHI0J0B9901SBL000MF0GHI0J0B9901SJB 25 ?=8-0H0)&01B
  26. 26. Navigational Pathways • Aka navigational patterns • Main ways to navigate around the site or application • Identify where to strategically place information • How pages link to each other • Validates templates and scalability of these pages • Clearly shows which template to use when 26
  27. 27. 27
  28. 28. Task flows • User’s experience – Flow • Objective look at “Flow” (as opposed to Form) • Identifies gaps • Scenario based 28
  29. 29. yes selects Name 1 2 no yes My Sci Page sign up/ Email MySci register/ Password no (try again) Any Page Logout Some content my kete Tools Some content Any Page Any Page Register Name Email Some content Register S YE Password 2 Tools Some content Some content NO Tools My Sci Logout Some content Some content Some content Alternate path Detailed functionality Page content to be further analysed 1 is email address correct format? is it unique? (i.e. not in database) Page Function 2 is user in the middle of adding an item to kete? DISCLAIMER: The layouts displayed in this diagram represent information structure only and should not be construed as final screen designs MORST & UoW / ScienceLearn Hub Information Architecture Framework 29 March 2007 CLIENT / PROJECT DATE 29 F5 / Registration 1.1 Page 6 of 28 ID / PROCESS TITLE VERSION
  30. 30. Page layouts • Aka Template Specifications • High-level structure • Global navigation • Major components • Content placement • Content hierarchy • Metadata 30
  31. 31. +$,(-quot;*=>$'(:('&#()quot; 7&-$*9*):*;< /+,8(+8,quot;-%quot;*#%>*+$,4quot;($%!,quot;:$5),7 )*#++%quot; .*N$%L, .*O$8> .*2)quot;#&'#*)%*-(P$*:$$AF&'G* ! ' ?203%50,$%4,quot;:$%32)53%+2$%)9$,quot;--%37$-$+quot;-%3+,8(+8,$%quot;*#%+2$%2012%-$9$-%),%()::)*% Q)-)5# R $-$:$*+3%)4%+2$%@)8,*$;%A-quot;**$,B3%83$,%0*+$,4quot;($. I4)5%quot;$6*78&quot;quot;$%*8)-)J*I/012*F%&quot;A$A*K$&A$%*3*L&6*F$*A(::$%$quot;#*:)%*A(::$%$quot;#*')5quot;'(8,*F&,$A*)quot;*5,$%M,*,$8$'#()quot;*):*%$-()quot;J quot; A,0:quot;,;%quot;(+090+0$3%)4%+2$%+))-C D.%E,)530*1%#$301*quot;+$#%Fquot;-70*1%quot;*#%G;(-0*1%'quot;+25quot;;3H I.%J$++0*1%#0,$(+0)*3H K.%A-quot;**0*1%quot;%@)8,*$;H L.%M0$50*1%quot;+%@)8,*$;3%>B9$%3quot;9$#%quot;*#%83$#.% % 7%(quot;#*S&> .*ZL&(8*S&> 0$88(quot;-#)quot;*1$-()quot; 78&quot;*&*4)5%quot;$6 S6*4)5%quot;$6, # quot; ?2$%N$quot;#$,%6quot;**$,%+2quot;+%50--O(quot;*%6$%(83+):03$#%4),%$quot;(2%()8*(0-. !! $ S&> E&A$*S&> ?$6,@ ) & 0&6,*#)*:(quot;A*B*:(8#$%*%)5#$,*B*A(%$'#()quot;,C ! P0*73%+)%quot;#:0*03+,quot;+09$%0*4),:quot;+0)*%quot;*#%5quot;;3%+)%()*+quot;(+%+2$%G)8*(0-.% A$)'-$%(quot;*%-)1Q0*R%,$103+$,%quot;*#%-)1%)8+%4,):%2$,$. # A,0:quot;,;%*quot;901quot;+0)*%)4%+2$%+))-C D.%E,)530*1%#$301*quot;+$#%Fquot;-70*1%quot;*#%G;(-0*1%'quot;+25quot;;3 DE$$AF&'G*&quot;A*(quot;,#%5'#()quot;,H I.%A-quot;*%quot;%@)8,*$; K.%&;%@)8,*$;3%S%#0,$(+0)*3%quot;*#%'-quot;*3%>B9$%3quot;9$#%quot;*#%83$#.% Dquot;5LF$%*):*8(,#$A*(#$L,*B*>&-(quot;&#()quot;H % T+0-0+0$3%+2quot;+%38''),+%+2$%A,0:quot;,;%quot;(+090+0$3. $ /2)5ON0#$%50#1$+.%/$-$(+0*1%+203%0()*O50#1$+%32)53%),%20#$3%+2$%-$4+%'quot;*$-. Screen/ Wireframe/Prototype Annotations/Notes & U$;3%:$*8.%VW'quot;*#0*1%+203%()*+,)-%#03'-quot;;3%+2$%,$-$9quot;*+%7$;3%+)%+2$%:quot;'%quot;*#%X)):% -$9$-.% ?$6,@ ?$6,@ 26'8(quot;- ,#*(-+. DS&>H Q(,#*):*%)5#$,*&#*#K(,*8$P$8C DQ(,#*(#$L,H*T*;U V#(8(#($,*B*E&'(8(#($, 7)(quot;#,*):*(quot;#$%$,# $ DV>A&#$,*WK$quot;*S&>*(,*5,$A*3*X))L$A*(quot;Y* >&quot;quot;$AY*$#'CH =$$*&88*?$6, R ( ) !quot;#$%&quot;'%()*+,)-.%/-0#0*1%+203%()*+,)-%-$4+%+)%,012+%50--%4quot;#$%+2$%&quot;'%6quot;(71,)8*#% /!'quot;01%*%23%405'63%0'quot;0)*#+7 )8+%quot;%60+%+)%,$9$quot;-%+2$%,)8+$3%:),$%',):0*$*+-;.%<*0($%+)%2quot;9$= ;28&<&)&41*=*>)&<&)&41 Aquot;&9)1*quot;B*C9)4%41) ?<4@2)&quot;9 E&A$*S&> 836990'+03:%0&#;< I[##%(F5#$,J E&A$*S&> Dquot;5LF$%*):*8(,#$A*(#$L,*B*>&-(quot;&#()quot;H ( Y++,068+$3%#$+quot;0-%'quot;*$-%4),%3$-$(+$#%Z)8+$%),%A-quot;**$#%@)8,*$;. D.%Y11,$1quot;+$3%+2$%4quot;(8-+0$3%[%T+0-0+0$3%)*%+203%,)8+$H % #$ I.%Y11,$1quot;+$3%+2$%A>B3%)4%+203%,)8+$H !quot;#$%&'#()quot;*+$,(-quot;*.*/012*3*4)5%quot;$6*78&quot;quot;$% quot; !quot;#$%&'()*+*,--.*/01(2&*/&3&)456*7quot;*%4#%quot;508)&quot;9*:&)(quot;0)*#4%3&11&quot;96* K.%/2)53%+2$%V-$9quot;+0)*%4),%+2$%Z)8+$H ! !quot;#$%&'quot;( 31
  32. 32. Interaction specifications • Detailed descriptions • Form • Behaviour • Task-oriented or Flow • One spec per task 32
  33. 33. examples... 33
  34. 34. Annotations - overview • General description of the screen/ wireframe • What users can do from this screen • Default display 34
  35. 35. +$,(-quot;*=>$'(:('&#()quot; 7&-$*9*):*;< !quot;#$%&'%()*quot;+,-%.#/0,quot;1%&*%-2)%3&+'$)1%4,quot;$$)'5 Name of the screen/activity $%H, .*K$8> .*2)quot;#&'#*)%*-(L$*:$$CG&'D* % !quot;#&$(quot;$%&#quot;#2*#'$=(*-$,$7(quot;*$/.$,77$'#quot;(32,*#'$=,7>(23$,2'$):)7(23$%,*-quot;$=(*-(2$*-#$ M)-)5# N ,&#,$*-,*$*-(quot;$?#3(/2,7$@/02)(7$)/+#&quot;4$A*$(quot;$B//C#'$(2$,*$*-#$-(3-#quot;*$7#+#7$/.$*-(quot;$ Description & intention )/02)(7$)/+#&,3#4$D77$%,*-quot;$,*$*-(quot;$7#+#7$7//>$*-#$quot;,C#4 8$'#()quot;*):*%$-()quot;F !quot;#&quot;$),2E What users can do F4$@-,23#$*-#$C,(2$7#+#7$/.$./)0quot;$1#*=##2$*-#$8$)/02)(7quot;$/.$5G?@H I4$J#7#)*$*/$+(#=$*-#$'#*,(7$/.$,$%,*-=,:H K4$L//C$(2$*/$quot;##$*-#$'(..#&#2)#$1#*=##2$G,7>(23$,2'$@:)7(23$%,*-quot;H 7%(quot;#*O&> .*BH&(8*O&> M4$?#.(2#$*-#$7(quot;*$1:$&#3(/2$/&$quot;010&1H N4$5#*$'(&#)*(/2quot;$.&/C$,2'$*/$)#&*,(2$%/(2*quot;H O4$P(#=$1/*-$G,7>(23$,2'$@:)7(23$%,*-quot;$/&$.(7*#&$*-#$7(quot;*$1:$#(*-#&$C/'#H O&> ,X 84$P(#=$,77$'(quot;*,2)#quot;$/&$#2*#&$*-#$'(quot;*,2)#$,2'$.(7*#&$*-#$7(quot;*$1:$*-,*$'(quot;*,2)#4 Q4$R*-#&$<,%$.02)*(/2quot;$&#C,(2$*-#$quot;,C#$,quot;$/2$L//C(2$/&$5//37#$C,%quot;4 S(quot;%7,:E F4$A2quot;*&0)*(/2quot;$,2'$7,1#7quot;$,quot;$quot;-/=2H Default elements on the page I4$;##'1,)>$/2$-/=$C,2:$(*#Cquot;$0quot;#&$(quot;$+(#=(234 ! !quot;#$%&#'()*(+#$quot;#,&)-$./&$quot;010&1quot;$,2'$&#3(/2quot;4 quot; 5#*$'(&#)*(/2quot;$6$quot;##$'#*,(7$/2$%,3#$84$9&/+('#quot;$,1(7(*:$*/$#2*#&$quot;*,&*$,2'$'#quot;*(2,*(/2$ %/(2*quot;4 # 35
  36. 36. Annotations - Detail • • Detailed descriptions of elements and Reference to other technical document behaviours (e.g. Business rules or SOW or Requirements) if relevant. • For each annotation provide: • UI Rules: Element > Action > Result • Default display • Any notes 36
  37. 37. +$,(-quot;*=>$'(:('&#()quot; 7&-$*9*):*;< !quot;#$%&'%()*quot;+,-%.#/0,quot;1%&*%-2)%3&+'$)1%4,quot;$$)'5 =&$11quot;6 .*J$%H, .*K$8> .*2)quot;#&'#*)%*-(L$*:$$CG&'D* % !quot;#&$(quot;$%&#quot;#2*#'$=(*-$,$7(quot;*$/.$,77$'#quot;(32,*#'$=,7>(23$,2'$):)7(23$%,*-quot;$=(*-(2$*-#$ M)-)5# N ,&#,$*-,*$*-(quot;$?#3(/2,7$@/02)(7$)/+#&quot;4$A*$(quot;$B//C#'$(2$,*$*-#$-(3-#quot;*$7#+#7$/.$*-(quot;$ )/02)(7$)/+#&,3#4$D77$%,*-quot;$,*$*-(quot;$7#+#7$7//>$*-#$quot;,C#4 $%*3*H&6*G$*C(::$%$quot;#*:)%*C(::$%$quot;#*')5quot;'(8,*G&,$C*)quot;*5,$%I,*,$8$'#()quot;*):*%$-()quot;F Name of the panel or block on the screen !quot;#&quot;$),2E F4$@-,23#$*-#$C,(2$7#+#7$/.$./)0quot;$1#*=##2$*-#$8$)/02)(7quot;$/.$5G?@H I4$J#7#)*$*/$+(#=$*-#$'#*,(7$/.$,$%,*-=,:H K4$L//C$(2$*/$quot;##$*-#$'(..#&#2)#$1#*=##2$G,7>(23$,2'$@:)7(23$%,*-quot;H 7%(quot;#*O&> .*BH&(8*O&> M4$?#.(2#$*-#$7(quot;*$1:$&#3(/2$/&$quot;010&1H UI Rules: Element > Action > Result N4$5#*$'(&#)*(/2quot;$.&/C$,2'$*/$)#&*,(2$%/(2*quot;H O4$P(#=$1/*-$G,7>(23$,2'$@:)7(23$%,*-quot;$/&$.(7*#&$*-#$7(quot;*$1:$#(*-#&$C/'#H O&> Y&C$*O&> S$6,X 84$P(#=$,77$'(quot;*,2)#quot;$/&$#2*#&$*-#$'(quot;*,2)#$,2'$.(7*#&$*-#$7(quot;*$1:$*-,*$'(quot;*,2)#4 Q4$R*-#&$<,%$.02)*(/2quot;$&#C,(2$*-#$quot;,C#$,quot;$/2$L//C(2$/&$5//37#$C,%quot;4 S(quot;%7,:E F4$A2quot;*&0)*(/2quot;$,2'$7,1#7quot;$,quot;$quot;-/=2H I4$;##'1,)>$/2$-/=$C,2:$(*#Cquot;$0quot;#&$(quot;$+(#=(234 > ? ! !quot;#$%&#'()*(+#$quot;#,&)-$./&$quot;010&1quot;$,2'$&#3(/2quot;4 9 E%)5#$*quot;&H$F*ESH,F*E?%,F E&L-*$8$L&#()quot;F EH)C$F quot; 5#*$'(&#)*(/2quot;$6$quot;##$'#*,(7$/2$%,3#$84$9&/+('#quot;$,1(7(*:$*/$#2*#&$quot;*,&*$,2'$'#quot;*(2,*(/2$ E&##%(G5#$,F %/(2*quot;4 E%&#(quot;-F*E>?)#),F*E')HH$quot;#,F T*UCC*#)*O6*4)5%quot;$6 ; # ;(7*#&$1:$</'#quot; C T*78&quot;*&*V)5%quot;$6*)quot;*#?(,*%)5#$ /$#*C(%$'#()quot;,*#)*#?(,*1)5#$ N ;*'<).*0&8D(quot;- .*26'8(quot;-*%)5#$, UI Rules: Element > Action > Result D W)#? .*8$&/012 .*26'8(quot;-*%)5#$, ! $ ;(7*#&$1:$S(quot;*,2)# !quot;#$%&%'((quot;)*%+,%-(% 9&&):07'$14quot;7).*Bquot;#$%*C(,#&quot;'$ .)//+,0-(,%1)0+(,%#2)#3 +(,#&quot;'$*(quot;* ,- EF7).*K%, A +(,#&quot;'$*(quot;*SH, .* = ?67 @ & ;##'1,)>$/2$*-#$7(quot;*$/.$(*#Cquot;4$ B ' T(quot;*$&/0*#quot;$U(*#Cquot;V$6$quot;-/=$0%$*/$FW$,*$,$*(C#4 37
  38. 38. Components Task
flow
or
context
 About
the
doc scenario Cover Flow
of
interactions
–
step

by
step
 interaction
and
experience 38
  39. 39. Design specs are used by... eve r yo ne invo lved • !! Visual designers • Integrators or user interface developers (HTML/CSS people) • Developers or programmers • Testers to know what to test for • Business people to understand the evolution of the software and plan future enhancements 39
  40. 40. “ You’ll know what to build when you know what the Design looks like... 40
  41. 41. Thanks!! lulu@lushai.com More about Summer of Code http://www.summerofcode.co.nz Photos found on Flickr and Google images 41

×