• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designers vs Developers- Coming together to build the best RIAs
 

Designers vs Developers- Coming together to build the best RIAs

on

  • 18,629 views

Presented on Nov 3, 2009 at Øredev in Malmo, Sweden. ...

Presented on Nov 3, 2009 at Øredev in Malmo, Sweden.

What is the fastest way to get from a product idea to a rich internet application? By breaking down the communication barriers between designers and developers.

This talk takes a quick look at how to build a shared vocabulary and use prototyping to bypass extensive wireframes and development specs.

Take a look at 5 simple and effective prototyping tools:
Balsamiq Mock-ups + Nakpee
Any wireframes + Protoscript
Prototcasting (using click-throughs and screencasts to convey requirements)
Atlas and other development environments + visual layout editors

This presentation goes hand in hand with our book (Bill Scott & Theresa Neil) called Designing Web Interfaces: Principles and Patterns for Rich Interaction.

Statistics

Views

Total Views
18,629
Views on SlideShare
12,017
Embed Views
6,612

Actions

Likes
54
Downloads
427
Comments
5

30 Embeds 6,612

http://theresaneil.wordpress.com 3179
http://designingwebinterfaces.com 1721
http://designgalleria.tumblr.com 584
http://www.ahmedrabieh.com 548
http://eismann-sf.com 262
http://www.ortizdesign.com 147
http://www.slideshare.net 39
http://smwilson.edublogs.org 14
http://deanyan.com 10
https://theresaneil.wordpress.com 9
http://jydesign.tumblr.com 9
http://jaquesomosdesign.ueuo.com 9
http://www.techgig.com 9
url_unknown 9
http://translate.googleusercontent.com 8
http://thefronts.com 8
http://blog.ownport.net 7
http://www.jydesign.com 7
http://www.linkedin.com 6
http://smwilson.edublogs.org. 4
http://www.eismann-sf.com 4
http://theresaneil.tumblr.com 4
http://blog.jydesign.com 3
http://ownport.blogspot.com 3
http://jydesign.posterous.com 2
http://safe.tumblr.com 2
http://www.netvibes.com 2
http://webcache.googleusercontent.com 1
http://feeds.feedburner.com 1
https://translate.googleusercontent.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Designers vs Developers- Coming together to build the best RIAs Designers vs Developers- Coming together to build the best RIAs Presentation Transcript

    • 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, Blog ign A ust -M y Des 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
    • 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