Designers vs Developers- Coming together to build the best RIAs
•
55 likes•11,535 views
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.
![// Call the function to create the markup structure;
<div id="lightbox-nav">
<a href="#" id="lightbox-nav-
// Get page sizes
var arrPageSizes = ___getPageSize();
// Style overlay and show it
$('#jquery-overlay').css({
backgroundColor: settings.overlayBgColor,
opacity: settings.overlayOpacity,
width: arrPageSizes[0],
height: arrPageSizes[1]
}).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() {
});
Designers
vs. Developers
Coming together to
build the best RIAs
Øredev 2009
Theresa Neil
UI Designer
Austin, Texas](https://image.slidesharecdn.com/designersvsdevelopers-091109122929-phpapp02/85/Designers-vs-Developers-Coming-together-to-build-the-best-RIAs-1-320.jpg)
Designers vs Developers- Coming together to build the best RIAs
- 1. // Call the function to create the markup structure; <div id="lightbox-nav"> <a href="#" id="lightbox-nav- // Get page sizes var arrPageSizes = ___getPageSize(); // Style overlay and show it $('#jquery-overlay').css({ backgroundColor: settings.overlayBgColor, opacity: settings.overlayOpacity, width: arrPageSizes[0], height: arrPageSizes[1] }).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() { }); Designers vs. Developers Coming together to build the best RIAs Øredev 2009 Theresa Neil UI Designer Austin, Texas
- 2. I’m an Interface designer in Austin, Texas Web, mobile and desktop app design- mostly rich internet applications (RIAs) - My Design Blog - Designing Web Interfaces Blog
- 3. What’s the goal? Move from this To this- as fast as possible 0:00 / 4:59 0:00 / 4:59 0:00 / 4:59 ? Clips Notes Tags Info Add to... Download Video Title description Digital Tutors
- 4. How can we do this? Need a shared vocabulary: learning both sides of the screen Iterative Prototyping: move away from exhaustive tech specs common controls for RIAs interaction patterns reference library interactive sketching notation protoscript protocasting Ext Js Designer Balsamiq Mockups + Napkee 1 2 3 4 1 2 3 4 Creating a Shared Vocabulary The real conflict is based on a lack of shared and agreed vocabulary Lea Alcantara
- 5. 20+ Shared Vocabulary: Common Controls for RIAs popular UI frameworks , libraries, and toolkits
- 6. Shared Vocabulary: Common Controls ~40 essential UI controls Designers Explore these frameworks and play with the controls Developers Look outside of the framework you use to see what else is evolving
- 7. Shared Vocabulary: Common Controls ~40 essential UI controls Designers Explore these frameworks and play with the controls Developers Look outside of the framework you use to see what else is evolving Rich UI Control Inline Edit Text Save Cancel Text
- 8. Shared Vocabulary: Common Controls ~40 essential UI controls Designers Explore these frameworks and play with the controls Developers Look outside of the framework you use to see what else is evolving Rich UI Control Inline Edit Text Save Cancel Text Rich UI Control Sparklines
- 9. Shared Vocabulary: Common Controls ~40 essential UI controls Designers Explore these frameworks and play with the controls Developers Look outside of the framework you use to see what else is evolving Rich UI Control Inline Edit Text Save Cancel Text Rich UI Control Sparklines Rich UI Control Calendar/Event Scheduler Dec 2009 30 3 29 1 2 31 28 24 21 23 25 27 26 22 20 18 14 17 19 16 15 12 9 11 8 7 10 13 S 6 F 5 T 4 W 3 T 2 1 M 30 S
- 10. Shared Vocabulary: Common Controls ~40 essential UI controls Designers Explore these frameworks and play with the controls Developers Look outside of the framework you use to see what else is evolving Rich UI Control Inline Edit Text Save Cancel Text Rich UI Control Sparklines Rich UI Control Calendar/Event Scheduler Dec 2009 30 3 29 1 2 31 28 24 21 23 25 27 26 22 20 18 14 17 19 16 15 12 9 11 8 7 10 13 S 6 F 5 T 4 W 3 T 2 1 M 30 S Rich UI Control Dialogs Record Locator/Paginator 1 of 2 records Go to record Rich UI Control Tooltips: Advanced Formatted text Rich UI Control Vertical Browser, Category Chooser Rich UI Control Dynamic Filtering Rich UI Control Charts/Graphs 2,500 visitors Rich UI Control Drag and Drop Manager Rich UI Control Carousel/Coverflow Rich UI Control Collapsible Panels x Rich UI Control Fish Eye, Spotlight Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. Rich UI Control Gantt Chart Rich UI Control Portals Rich UI Control Dialogs Rich UI Control Magnify 2 ºÝºÝߣr Rich UI Control 888 Progress Indicator Loading... 65% Rich UI Control View Toggle Toolbar Rich UI Control Rich UI Control Zoom and Pan Rich UI Control Rating Rich UI Control Table/Data Grid: Advanced Tree: Advanced ! Item 1 ! Item 2 " Item 2.1 " Item 2.2 ! Item 3 Item 3.1 Item 3.2 Item 3.2 Item 3.2 Rich UI Control Hover Detail Rich UI Control Hover Actions Action + Rich UI Control Rule Builder/Predicate Editor Any Match of the following: Name contains final Type is document ... ... Rich UI Control Combobox: Multi-select select Search All Authors Title Genre Scoped Search Rich UI Control List: Advanced item A item B item C item D item E Rich UI Control Date Picker: Advanced To Date Range 30 3 29 1 2 31 28 24 21 23 25 27 26 22 20 18 14 17 19 16 15 12 9 11 8 7 10 13 S 6 F 5 T 4 W 3 T 2 1 M 30 S December 2009 Select Today 30 3 29 1 2 31 28 24 21 23 25 27 26 22 20 18 14 17 19 16 15 12 9 11 8 7 10 13 S 6 F 5 T 4 W 3 T 2 1 M 30 S January 2010 Select Today Rich UI Control Docking Rich UI Control Growing Textarea Rich UI Control Hot Keys shift Z X fn control option command Rich UI Control Multiple Document Interface (MDI) Rich UI Control Tabs: Advanced Rich UI Control Feedback Sorry. You need to correct the fields marked below before continuing. ! Success! Message goes here. Message goes here. Success! Message goes here. Message goes here. i
- 11. Vocabulary: Common Controls autocomplete carousel charts calendar framework Links to demo galleries for all 20+ frameworks Don’t worry... there is a matrix Download the flipbook of patterns View the matrix online
- 12. cabulary: Interaction Patterns 100+ patterns for rich interactions distilled into six principles 3. Stay On The Page 4. Provide Invitations 5. Use Transitions 6. React Immediately 1. Make It Direct noteflight has a directly editable score 1. Make It Direct 2. Keep It Lightweight
- 13. cabulary: Interaction Patterns 100+ patterns for rich interactions distilled into six principles 3. Stay On The Page 4. Provide Invitations 5. Use Transitions 6. React Immediately 1. Make It Direct 2. Keep It Lightweight Picnik uses contextual tools for photo editing 2. Keep It Lightweight
- 14. cabulary: Interaction Patterns 100+ patterns for rich interactions distilled into six principles 3. Stay On The Page 4. Provide Invitations 5. Use Transitions 6. React Immediately 1. Make It Direct Adobe Buzzword keeps sign in, sign up and forgot password all in the same page 2. Keep It Lightweight 3. Stay On The Page
- 15. cabulary: Interaction Patterns 100+ patterns for rich interactions distilled into six principles 3. Stay On The Page 5. Use Transitions 4. Provide Invitations 6. React Immediately 1. Make It Direct Gmail uses a tour invitation to introduce their new drag and drop feature 2. Keep It Lightweight
- 16. cabulary: Interaction Patterns 100+ patterns for rich interactions distilled into six principles 3. Stay On The Page 5. Use Transitions 4. Provide Invitations 6. React Immediately 1. Make It Direct Whitestone Cheese uses transitions to keep their customers in the shopping flow 2. Keep It Lightweight
- 17. cabulary: Interaction Patterns +100 patterns for rich interactions distilled into six principles 3. Stay On The Page 5. Use Transitions 4. Provide Invitations 6. React Immediately 1. Make It Direct Fidelity MyPlan reacts immediately to changing inputs 2. Keep It Lightweight
- 18. cabulary: Interaction Patterns +100 patterns for rich interactions distilled into six principles 3. Stay On The Page 5. Use Transitions 4. Provide Invitations 6. React Immediately 1. Make It Direct Fidelity MyPlan reacts immediately to changing inputs 2. Keep It Lightweight See all patterns at Designing Web Interfaces
- 19. Shared Vocabulary: Reference Library Can include books (PDFs) expert’s sites live applications RSS feeds videos/ screencasts of good examples Online, Collaborative, Live
- 20. Shared Vocabulary: Reference Library Can include books (PDFs) expert’s sites live applications RSS feeds videos/ screencasts of good examples Online, Collaborative, Live
- 21. Shared Vocabulary: Reference Library Can include books (PDFs) expert’s sites live applications RSS feeds videos/ screencasts of good examples Online, Collaborative, Live The 50 apps we use for reference Full list available- Google for ’50 Most Usable RIAs’
- 22. Shared Vocabulary: Interaction Sketching Notation Emerging visual language Coherent sketching system Tells a clearer story
- 23. Shared Vocabulary: Interaction Sketching Notation Emerging visual language Coherent sketching system Tells a clearer story by Jakub Linowski, of Wireframes Magazine
- 24. Iterative Prototyping Todd Zaki Warfel, Prototyping- A Practitioners Guide Design 70%, prototype the rest Iterative Prototyping Design only enough to get stakeholder buy-in: Typically the information architecture and high level screen layouts.
- 25. Iterative Prototyping: Why and How Why Prototype? get audience feedback quicker prototyping lets us (designers + developers) work through the design issues earlier classic wireframes + specs only gets you about 3/4 of the way there Todd Zaki Warfel, Prototyping- A Practitioners Guide How? AdaptivePath Blog- Rapid Protoyping Tools List + 30 more online tools that are still maturing HTML + Protoscript protocasting
- 26. Prototyping:HTML+ Protoscript OmniGraffle wireframes protoscript- a lightweight version of JQuery for prototyping HTML
- 27. e Prototyping: Protocasting OmniGraffle wireframes with click through links screencast this technique works with any wireframing tool you already use MockLinkr makes any wireframes clickable
- 28. Prototyping: Balsamiq + Napkee Balsamiq Mockups Napkee created mockups with Balsamiq
- 29. Prototyping: Balsamiq + Napkee Balsamiq Mockups Napkee Imported to Napkee for web code
- 30. Prototyping: Balsamiq + Napkee Balsamiq Mockups Napkee Can also get Flex code
- 31. Prototyping: Balsamiq + Napkee Balsamiq Mockups Napkee finished product
- 32. Prototyping: Atlas Atlas: A Development Environment and Visual Layout Editor One of many new products that combines the visual layout with the IDE Other ones to watch: 3. Wireframe Sketcher- an Eclipse Plugin 4. EXT Js Designer 1. Microsoft Sketchflow + Blend 2. Flash Catalyst or Flex Builder 3 w/ Extensions
- 33. @theresaneil Thank you Resources Todd Zaki Warfel Prototyping- A Practitioners Guide Rosenfeld Media www.rosefeldmedia.com Jakub Linowski at Wireframes Magazine Peldi Guilizzoni at Balsamiq Studios 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 theresaneil@gmail.com www.theresaneil.com