Designers vs Developers- Coming together to build the best RIAs

ers ign pers Des velo vs. De r to ethe s tog ing est RIA Com the b b uild       // Call the function to create the markup structure;             <div id="lightbox-nav">               <a href="#" id="lightbox-nav-       // Get page sizes Øredev 2009             var arrPageSizes = ___getPageSize(); // Style overlay and show it       $('#jquery-overlay').css({ Theresa Neil         backgroundColor:  settings.overlayBgColor,         opacity:      settings.overlayOpacity, UI Designer                 width:    height:           arrPageSizes[0], arrPageSizes[1] Austin, Texas             }).fadeIn(); // Get page scroll       var arrPageScroll = ___getPageScroll();       // Calculate top and left offset for the jquery-lightbox div       $('#jquery-lightbox').css({         top:  arrPageScroll[1] + (arrPageSizes[3] / 10),         left:  arrPageScroll[0]       }).show();       // Assigning click events in elements to close overlay       $('#jquery-overlay,#jquery-lightbox').click(function() {               });

and - bile sign , mo p de Web p ap net kto nter ) des ich i IAs ly r s (R ace m ost terf lica tion n In n app I’ m a er i ign Texas des in, log onal B A ust - Pers Web g ning - Desi es Blog ac Interf

59 / 4: 0:00 he g oal? 0:00 / 4: 59 t’s t Wha this t as from fas M ove thi s- as To ble ? p ossi ips s Cl Note Tags Info to rs l Tu Digita Title V ideo tion rip desc d nloa Dow to... Add 59 / 4: 0:00

How can we do this? Need a shared vocabulary: Creating a Shared learning both sides of the screen Vocabulary 1 common controls for RIAs 2 interaction patterns 3 reference library 4 interactive sketching notation Iterative Prototyping: move away from exhaustive tech specs The real conflict is based on a lack 1 protoscript of shared and agreed vocabulary 2 protocasting Lea Alcantara 3 Ext Js Designer 4 Balsamiq Mockups + Napkee

Shared Vocabulary: Common Controls for RIAs popular UI 20+ frameworks , libraries, and toolkits

Shared Vocabulary: Common Controls essential UI Designers ~40 controls Explore these frameworks and play with the controls Developers Look outside of the framework you use to see what else is evolving

Shared Vocabulary: Common Controls essential UI Designers ~40 controls Explore these Rich UI Control frameworks and play Inline Edit with the controls Text Text Developers Save Cancel Look outside of the framework you use to see what else is evolving

Shared Vocabulary: Common Controls essential UI Designers ~40 controls Explore these Rich UI Control frameworks and play Inline Edit with the controls I Text Rich U l Contro pa t in STexrkl es Developers Save Cancel Look outside of the framework you use to see what else is evolving

Shared Vocabulary: Common Controls essential UI Designers ~40 controls Explore these Rich UI Control frameworks and play Inline Edit with the controls I Text Rich U l Contro pa t in STexrkl Calend es Developers ar/Evel Save Ca ent nc Schedu ler Rich U Contro I Look outside of the 30 S M Dec 20 T 09 l framework you use to see what else is 1 W 2 T 7 3 4 F S 8 5 9 6 evolving 10 14 11 15 12 16 13 17 21 18 22 19 23 20 24 28 25 29 26 30 27 31 1 2 3

Shared Vocabulary: Common Controls essential UI Designers ~40 Rich UI Fish Eye, Spotlight Control controls Rich UI Gantt Chart Rich UI Rich U Rich UItrol Con I ta Gridich UI: Advanceot Keys H d Control Explore these Portals Control Far far away, behind the word mountains, Control Rich UI Table/Da R Control frameworks and play far from er D etail v the countries Vokalia and Ho Multiple Document Interface (MDI) Rich UI Control Inline Edit Rating Rich UI Control with the controls Consonantia, there live the blind texts. X Separated they live in Bookmarksgrove right Dialogs Z Rich UI Control Control List: Ad shift at the coast of the Semantics, a large Rich UI vanced Scoped Search Rich UI Tabs: Advanced Rich ich UI Magnify language ocean. Control Text R UI Rich UI Control command RichUIUI Controltrol option Rich Charts/Graphs ConRrCon UI t ich ol fn control Feedback Hover Actions Rich UI Control item A Control Dr item B ag and Drop pa t an STeCrkl n i es Docking d Pan item x Zoom Calend Manager Control Rich Tree: Advanced R ingControl UI GrowSearchich UI Sli T on tal Allextrorea C der Developers Control Sorry. You need to correct the fields ! marked below before continuing. item D ar/ Progress Indicator Evel Rich UI VRew UI 2 iich Action item ESav e Cancent Sc ToolbarCarousel/Coverflow Rich UI Authors hedulRule Builder/Predicate Editor1 ! Item To + Success! ggle Control Control Message goes here. Message goes UI erRich UI Controlch UI Collapsible Panels 2,500 visitors Control Ri Title Rich CoGenre Control UI ! Item 2 ntrol of the " Item 2.1 Look outside of the here. Date Picker: eAdvanced 888 Rich Ri l Rich UI Controch UI i-s lect 30 S M Dec 20 Match Any T 09 following: " Item 2.2 framework you use mbSuccess! Mult Co here. i obox: Message goes here. Message goes Control Control to see what else is 1 W ... 2 3 TName F contains ! Item 3 final 7 4 S Rich UI Date Range 8 9 5 Tooltips: Advanced 6 Item 3.2 Rich UILoading... 65% Item 3.1 evolving Control ct 10 14 11 is document ...sele January 2010 Dialogs 21 22 16 17 18 Type 13 Dynamic Filtering 15 12 December 2009 Control 23 19 20 Rich UI Record Locator/Pah U30 tor T W T 5 S Item 3.2 Item 3.2 gina M S I 1 2 3 4 F S M T W T F S 28 24 25 Cox trol n Ric 6 30 1 2 3 4 5 6 29 30 26 27 hoose r Contro7l 8 9 10 11 12 13 7 8 9 10 11 12 13 y C 31 To Cat or 1 , text eg 2 3 14 15 16 17 18 19 20 14 15 16 17 18 19 20 wser Formatted Verti cal Bro 21 22 23 24 25 26 27 28 29 30 31 1 2 3 21 22 23 24 25 26 27 28 29 30 31 1 2 3 Select Today record Go to Select Today 1 of 2 records

Links to demo galleries for all ls Co ntro 20+ frameworks mon y: Com b ular Voca he load t y... ix Down worr atr of fl ipbook atrix on’t is a m D e k patter ns View onlin the m e the r ewor fram om plete c auto l car ouse ch arts r cale nda

ns nP atter tio : In terac lary cabu r ric h as a score n s foions atter eract ght h table tefli edi p nt no tly 100+ i d irec s rin ciple six p d into tille dis irect a k e It D e ight 1. M ghtw eep It Li Pag e 2. K e O n Th s tay tion 3. S n vita v ide I s 4 . Pro i tion rans 5. U se T i ately med ct Im 6 . Rea

ns nP atter tio : In terac cabu lary h uses ools for n r ric s foions P icnik tual t atter eract p nt co ntex diting 100+ i ph oto e s rin ciple six p d into tille dis irect a k e It D eigh t 1. M w ight eep It L e Pag e 2. K O n Th tay s 3. S tion n vita v ide I s 4 . Pro i tion rans 5. U se T i ately med ct Im 6 . Rea

eeps atter ns ord k nd zzw up a : In terac tio nP be Busign all in Ado in, cabu lary h n word sig ot pass e r ric s foions n atter eract forg ame pag the s p nt 100+ i s rin ciple six p d into tille dis irect a k e It D e ight 1. M ghtw eep It Li Page 2. K e O n Th s tay tion 3. S n vita v ide I s 4 . Pro i tion rans 5. U se T i ately med ct Im 6 . Rea

tour duce ses a intro s ttern n Pa terac tio ail uon to Gm tati lary : In and cabu r ric h i nvi new drag n s foions their feature atter eract p nt drop 100+ i s rin ciple six p d into tille dis irect a k e It D e ight 1. M ghtw eep It Li Pag e 2. K e O n Th s tay tion 3. S n vita v ide I s 4 . Pro i tion rans 5. U se T i ately med ct Im 6 . Rea

uses s heese p one C o kee n atter itest ons t o nP n the ti terac lary : In Wh siti ers i cabu r ric h tran custom w n s foions their ping flo atter eract shop p nt 100+ i s rin ciple six p d into tille dis irect a k e It D e ight 1. M ghtw eep It Li Pag e 2. K e O n Th s tay tion 3. S n vita v ide I s 4 . Pro i tion rans 5. U se T i ately med ct Im 6 . Rea

ns nP atter tio terac lary : In Planely to My iat cabu h y r ric s foions delit immed ts Fi ts ac ing inpu n atter eract p nt re + 100 i ch ang s rin ciple six p d into tille dis irect a k e It D e ight 1. M ghtw eep It Li Pag e 2. K e O n Th s tay tion 3. S n vita v ide I s 4 . Pro i tion rans 5. U se T i ately med ct Im 6 . Rea

ns nP atter tio terac lary : In Planely to My iat cabu h y r ric s foions delit immed ts Fi ts ac ing inpu n atter eract p nt re + 100 i ch ang s rin ciple six p d into tille dis irect a k e It D e ight 1. M ghtw eep It Li Pag e 2. K e O n Th s tay tion 3. S n vita v ide I s 4 . Pro i tion rans 5. U se T i ately med ct Im 6 . Rea l See al at ns patter ng i D esign faces er W eb Int

Shared Vocabulary: Reference Library Can include Online, books (PDFs) Collaborativ e, expert’s sites Live live applications RSS feeds videos/ screencasts of good examples

s we e Shared Vocabulary: Reference Library app enc e 50 refer Th or Can include Online, se f books (PDFs) Collaborativ u e, expert’s sites Live live applications RSS feeds videos/ screencasts of good examples Full list available - Google for ’50 Most Usable RIAs’

Shared Vocabulary: Interaction Sketching Notation Emerging visual language Coherent sketching system Tells a clearer story

Shared Vocabulary: Interaction Sketching Notation Emerging visual language Coherent sketching system Tells a clearer story by Jakub Linowsk i, of Wirefram es Magazin e

Iterative Prototyping Iterative Prototyping Design only enough to get stakeholder buy-in: Design 70%, prototype the rest Typically the information Todd Zaki Warfel, Prototyping- A Practitioners Guide architecture and high level screen layouts.

Iterative Prototyping: Why and How How? Why Prototype? get audience feedback quicker classic wireframes + specs only gets you about 3/4 of the way there HTML + Protoscript prototyping lets us (designers + developers) protocasting work through the design issues earlier + 30 more online tools that are still Adaptive Pa Todd Zaki Warfel, Blog- Ra th maturing pid Prototyping- A Practitioners Guide Protoypin g Tools Lis t

cript Protos TM L+ ping:H Pr ototy affle iGr s Omn rame w iref HT ML p t- a sion of scri t ver prot o h ping t weig prototy ligh y for JQ uer

tin g ot ocas g: Pr totypin e Pro ffle k iGra clic Omn s with ame links wirefr ugh thro cast s creen with orks you ue w tool c hniq ing th is te efram ir use a ny w already kr Moc kLin y es an mak mes w irefra le b clicka

e N apke q+ als ami :B with g otypin Prot ockups q ted mq crea ami ami Bals ups Bals k Moc Na pkee

e N apke q+ als ami e for g:B ypin Prot ot pke to Na q orted Imp code ami Bals ups web k Moc Na pkee

e N apke q+ als ami :B code g otypin Prot lex lso get F ami q C an a Bals ups k Moc Na pkee

e N apke q+ als ami g:B otypin Prot pro duct ami q fin ished Bals ups k Moc Na pkee

tlas ping :A ent elopm d y Protot Dev t an new nes the any ombi as: A men Atl iron r m E dito e of that c On cts h e IDE E nv out ith t l La y pr odu ayout w isua ual l : V v is atch to w + nes f low Ot her o k etch o ft S cros Flex 1 . Mi st or ions d y Blen h Catal xtens s n . Fla r 3 w/ E er- a 2 de etch Buil m e Sk refra gin 3 . Wi e Plu clips gner E s Desi XT J 4. E

ky ou Th an Resources Todd Zaki Warfel Prototyping- A Practitioners Guide Rosenfeld san eil Media www.rosefeldmedia.com @there ai l.com Jakub Linowski at Wireframes Magazine @gm neil eresa l.com Peldi Guilizzoni at Balsamiq Studios th eres anei ww w.th Enrico Berti at Napkee Rob Jones at 2SideDesign Studio for the computer image Bert Timmerman for the great notebook image Franco Breciano for sharing the Swebapps examples

Designers vs Developers- Coming together to build the best RIAs

4 comments

Notes on slide 1

21 Favorites