Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BETTER DESIGN, BUILT FASTER Using new UI technologies to speed development mix 06 03.21.2006
AGENDA /  INTRODUCTIONS <ul><li>Agenda </li></ul><ul><li>UI Technology Trends </li></ul><ul><li>Web Example </li></ul><ul>...
/ UI TRENDS  / THE EARLY YEARS The first human-computer interfaces were strictly utilitarian.
/ UI TRENDS  / THE COMMAND LINE / UI TRENDS  / TEXT AND EARLY GRAPHICAL INTERFACES The next wave of computer interfaces fo...
/ UI TRENDS  / DAWN OF THE GUI / UI TRENDS  / DAWN OF THE GUI Graphical User Interface (GUI)-based operating systems striv...
/ UI TRENDS  / THE WEB ..then the Web happened. In the evolutionary history of software user interfaces, the advent of the...
/ UI TRENDS  / USER EXPERIENCE / UI TRENDS  / SYSTEM LEVEL USER EXPERIENCE Operating systems respond to user demand for co...
/ UI TRENDS  / BLURRING THE WEB/DESKTOP BOUNDARY While the web was influencing operating system and application user inter...
/ UI TRENDS  / WEB/DESKTOP CONVERGENCE  <ul><li>As web and desktop technologies become more intermingled, the distinction ...
/ UI TRENDS  / WHAT’S NEXT? enjoyable useful physical ui clui gui ? intuitive
/ UI TRENDS  / WHERE IS THIS GOING? ? web desktop robust fragile flat rich
/ UI TRENDS  / LAYERS, LANGUAGES & TOOLS Various JavaScript HTML, XHTML CSS, XSL AJAX / DHTML Visual Studio C++ C++ Win32 ...
/ UI TRENDS  / LAYERS, LANGUAGES & TOOLS Various JavaScript HTML, XHTML CSS, XSL AJAX / DHTML Visual Studio C++ C++ Win32 ...
/ EXAMPLES /  WEB / BLOCKBUSTER.COM
/ EXAMPLES  / WEB / TYPICAL PROCESS (SIMPLE) CSS PHP Designer / Developer Images Photoshop Text Editor Web Site
/ EXAMPLES  / WEB / TYPICAL PROCESS (COMPLEX) Designer Developer Visual Design (Comps) HTML Design Analyst Wire- frames Si...
/ EXAMPLES  / WEB / WIREFRAME
/ EXAMPLES  / WEB / UI SEPARATION WITH CSS client-side server-side
/ EXAMPLES  / WEB / UI SEPARATION WITH CSS client-side server-side web browser application server
/ EXAMPLES  / WEB / UI SEPARATION WITH CSS client-side server-side ASP/ C# / Java / JSP / etc web browser application server
/ EXAMPLES  / WEB / UI SEPARATION WITH CSS client-side server-side <HTML> ASP/ C# / Java / JSP / etc web browser applicati...
/ EXAMPLES  / WEB / UI SEPARATION WITH CSS client-side server-side Style Layout Data ASP/ C# / Java / JSP / etc <HTML> web...
/ EXAMPLES  / WEB / UI SEPARATION WITH CSS client-side server-side <HTML> CSS ASP/ C# / Java / JSP / etc web browser appli...
/ EXAMPLES  / WEB / UI SEPARATION WITH CSS client-side server-side <HTML> Layout Data CSS Style ASP/ C# / Java / JSP / etc...
/ EXAMPLES  / WEB / UI SEPARATION WITH CSS client-side server-side <HTML> CSS ASP/ C# / Java / JSP / etc web browser appli...
/ EXAMPLES  / WEB / UI SEPARATION WITH CSS client-side server-side Style Layout ASP/ C# / Java / JSP / etc <HTML> CSS Data...
/ EXAMPLES  / WEB / GENERIC CONTAINER HTML
/ EXAMPLES   /  WEB / DEMO
/ EXAMPLES  / WEB / REVISED PROCESS Designer Developer Visual Design (Comps) Design Analyst Wire- frames Sitemap (IA) CSS ...
/ EXAMPLES   /  WPF
/ EXAMPLES  / WPF / TYPICAL SOFTWARE PROCESS Architect Developer Functional Specification Marketing Marketing Requirements...
/ EXAMPLES  / WPF / TYPICAL SOFTWARE PROCESS + DESIGN Architect Developer Functional Specification Marketing Marketing Req...
/ EXAMPLES  / WPF / REDLINE DESIGN SPEC
/ EXAMPLES  / WPF / UI SEPARATION WITH XAML Style Layout Form.cs Program.cs Logic Application
/ EXAMPLES  / WPF / UI SEPARATION WITH XAML Style Layout Window.xaml Window.xaml.cs Logic Application
/ EXAMPLES  / WPF / UI SEPARATION WITH XAML Style Window.xaml Window.xaml.cs Logic Application Styles.xaml Layout
/ EXAMPLES   /  WPF / DEMO
/ EXAMPLES  / WPF / DEMO
/ EXAMPLES  / WPF / DEMO
/ EXAMPLES  / WPF / DEMO
/ EXAMPLES  / WPF / REVISED SOFTWARE PROCESS Architect Functional Specification Marketing Marketing Requirements Document ...
/ CONCLUSIONS
/ CONCLUSIONS <ul><li>Translation = Information Loss  </li></ul><ul><li>Information Loss = Slower Process and Inferior Res...
/ CONCLUSIONS <ul><li>So what does this mean for the Web?  </li></ul><ul><li>AJAX shows potential, but… </li></ul><ul><li>...
QUESTIONS?
Session Evaluations We value your feedback, so please submit an online evaluation for each session you attend! To make it ...
Upcoming SlideShare
Loading in …5
×

Better Design Built Faster: Using New UI Technologies to Speed Development

5,578 views

Published on

Achieving complete separation between visual design, content, and logic has long been the Holy Grail of the Web design world. By keeping these separate layers loosely-coupled, they can be developed and changed independently of one another, resulting in faster, more parallel development and more manageable code

Published in: Technology, Business
  • Be the first to comment

Better Design Built Faster: Using New UI Technologies to Speed Development

  1. 1. BETTER DESIGN, BUILT FASTER Using new UI technologies to speed development mix 06 03.21.2006
  2. 2. AGENDA / INTRODUCTIONS <ul><li>Agenda </li></ul><ul><li>UI Technology Trends </li></ul><ul><li>Web Example </li></ul><ul><ul><li>Typical Process </li></ul></ul><ul><ul><li>Demo </li></ul></ul><ul><ul><li>Revised Process </li></ul></ul><ul><li>WPF Example </li></ul><ul><ul><li>Typical Process </li></ul></ul><ul><ul><li>Demo </li></ul></ul><ul><ul><li>Revised Process </li></ul></ul><ul><li>Conclusions </li></ul>Mason Hale Chief Technologist frog design Austin, Texas [email_address] Nelan Schwartz Technology Manager frog design Austin, Texas [email_address]
  3. 3. / UI TRENDS / THE EARLY YEARS The first human-computer interfaces were strictly utilitarian.
  4. 4. / UI TRENDS / THE COMMAND LINE / UI TRENDS / TEXT AND EARLY GRAPHICAL INTERFACES The next wave of computer interfaces focused on increasing productivity for expert users.
  5. 5. / UI TRENDS / DAWN OF THE GUI / UI TRENDS / DAWN OF THE GUI Graphical User Interface (GUI)-based operating systems strived for system-wide consistency.
  6. 6. / UI TRENDS / THE WEB ..then the Web happened. In the evolutionary history of software user interfaces, the advent of the World Wide Web began a Cambrian explosion of UI diversity. Certain conventions such as: - the shopping cart, - tabs, - navigation bars, and - search boxes catch on and are nearly universally adopted.
  7. 7. / UI TRENDS / USER EXPERIENCE / UI TRENDS / SYSTEM LEVEL USER EXPERIENCE Operating systems respond to user demand for compelling user experience.
  8. 8. / UI TRENDS / BLURRING THE WEB/DESKTOP BOUNDARY While the web was influencing operating system and application user interfaces, web applications were becoming more robust and desktop-like.
  9. 9. / UI TRENDS / WEB/DESKTOP CONVERGENCE <ul><li>As web and desktop technologies become more intermingled, the distinction between “web app” and “desktop app” is becoming less and less clear. </li></ul><ul><li>iTunes Music store </li></ul><ul><li>Google Desktop Search </li></ul><ul><li>Dashboard Widgets built with web technologies </li></ul>
  10. 10. / UI TRENDS / WHAT’S NEXT? enjoyable useful physical ui clui gui ? intuitive
  11. 11. / UI TRENDS / WHERE IS THIS GOING? ? web desktop robust fragile flat rich
  12. 12. / UI TRENDS / LAYERS, LANGUAGES & TOOLS Various JavaScript HTML, XHTML CSS, XSL AJAX / DHTML Visual Studio C++ C++ Win32 / MFC Visual Studio C#, VB.NET, J# (any .NET) C#, VB.NET, J# (any .NET) .NET WinForms Visual Studio “Sparkle” / “Cider” C#, VB.NET (any .NET) XAML WPF (Avalon) Laszlo IDE plug-in JavaScript LZX OpenLaszlo FLEX Builder ActionScript 2.0 MXML, CSS FLEX Various JavaScript XUL, CSS XUL Flash ActionScript none or ActionScript Macromedia Flash Any Java IDE Java Java Java Swing / SWT Tools Logic User Interface
  13. 13. / UI TRENDS / LAYERS, LANGUAGES & TOOLS Various JavaScript HTML, XHTML CSS, XSL AJAX / DHTML Visual Studio C++ C++ Win32 / MFC Visual Studio C#, VB.NET, J# (any .NET) C#, VB.NET, J# (any .NET) .NET WinForms Visual Studio “Sparkle” / “Cider” C#, VB.NET (any .NET) XAML WPF (Avalon) Laszlo IDE plug-in JavaScript LZX OpenLaszlo FLEX Builder ActionScript 2.0 MXML, CSS FLEX Various JavaScript XUL, CSS XUL Flash ActionScript none or ActionScript Macromedia Flash Any Java IDE Java Java Java Swing / SWT Tools Logic User Interface
  14. 14. / EXAMPLES / WEB / BLOCKBUSTER.COM
  15. 15. / EXAMPLES / WEB / TYPICAL PROCESS (SIMPLE) CSS PHP Designer / Developer Images Photoshop Text Editor Web Site
  16. 16. / EXAMPLES / WEB / TYPICAL PROCESS (COMPLEX) Designer Developer Visual Design (Comps) HTML Design Analyst Wire- frames Sitemap (IA) CSS Design Tech JAVA Photoshop Eclipse Visio / OmniGraffle Text Editor Web Site
  17. 17. / EXAMPLES / WEB / WIREFRAME
  18. 18. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side
  19. 19. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side web browser application server
  20. 20. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side ASP/ C# / Java / JSP / etc web browser application server
  21. 21. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side <HTML> ASP/ C# / Java / JSP / etc web browser application server
  22. 22. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side Style Layout Data ASP/ C# / Java / JSP / etc <HTML> web browser application server
  23. 23. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side <HTML> CSS ASP/ C# / Java / JSP / etc web browser application server
  24. 24. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side <HTML> Layout Data CSS Style ASP/ C# / Java / JSP / etc web browser application server
  25. 25. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side <HTML> CSS ASP/ C# / Java / JSP / etc web browser application server
  26. 26. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side Style Layout ASP/ C# / Java / JSP / etc <HTML> CSS Data web browser application server
  27. 27. / EXAMPLES / WEB / GENERIC CONTAINER HTML
  28. 28. / EXAMPLES / WEB / DEMO
  29. 29. / EXAMPLES / WEB / REVISED PROCESS Designer Developer Visual Design (Comps) Design Analyst Wire- frames Sitemap (IA) CSS Design Tech JAVA Photoshop Eclipse Visio / OmniGraffle Text Editor Web Site Design Tech Text Editor HTML
  30. 30. / EXAMPLES / WPF
  31. 31. / EXAMPLES / WPF / TYPICAL SOFTWARE PROCESS Architect Developer Functional Specification Marketing Marketing Requirements Document (MRD) C++ Code Visio / UML Word App Analyst Visual Studio Word Software Architecture
  32. 32. / EXAMPLES / WPF / TYPICAL SOFTWARE PROCESS + DESIGN Architect Developer Functional Specification Marketing Marketing Requirements Document (MRD) C++ Code Visio / UML Word App Analyst Visual Studio Word Software Architecture Designer Photoshop UI Design
  33. 33. / EXAMPLES / WPF / REDLINE DESIGN SPEC
  34. 34. / EXAMPLES / WPF / UI SEPARATION WITH XAML Style Layout Form.cs Program.cs Logic Application
  35. 35. / EXAMPLES / WPF / UI SEPARATION WITH XAML Style Layout Window.xaml Window.xaml.cs Logic Application
  36. 36. / EXAMPLES / WPF / UI SEPARATION WITH XAML Style Window.xaml Window.xaml.cs Logic Application Styles.xaml Layout
  37. 37. / EXAMPLES / WPF / DEMO
  38. 38. / EXAMPLES / WPF / DEMO
  39. 39. / EXAMPLES / WPF / DEMO
  40. 40. / EXAMPLES / WPF / DEMO
  41. 41. / EXAMPLES / WPF / REVISED SOFTWARE PROCESS Architect Functional Specification Marketing Marketing Requirements Document (MRD) Visio / UML Word App Analyst Word Software Architecture C# Designer “ Sparkle” Developer Visual Studio + “Cider” XAML
  42. 42. / CONCLUSIONS
  43. 43. / CONCLUSIONS <ul><li>Translation = Information Loss </li></ul><ul><li>Information Loss = Slower Process and Inferior Results </li></ul><ul><ul><li>Good: Enable designers to work directly in the medium </li></ul></ul><ul><ul><li>Better: Designers and developers working at the same time with the same files </li></ul></ul><ul><li>Better design tools = better design </li></ul><ul><ul><li>A text editor is not a good visual design tool </li></ul></ul><ul><ul><li>Photoshop is not a good interaction design tool </li></ul></ul><ul><li>Going with the flow is easier than swimming upstream </li></ul><ul><ul><li>XAML was designed to build applications and it feels like it </li></ul></ul><ul><ul><li>HTML was designed to build documents and it feels like it </li></ul></ul>
  44. 44. / CONCLUSIONS <ul><li>So what does this mean for the Web? </li></ul><ul><li>AJAX shows potential, but… </li></ul><ul><li>too much of AJAX development is hacking around browser limitations and incompatibilities </li></ul><ul><li>Extensions to the standards are needed to take web-app development to the next level </li></ul><ul><li><canvas> tag looks promising </li></ul><ul><li>Need better visual and interaction design tools for the web </li></ul><ul><li>Why are we still writing HTML and CSS by hand? </li></ul><ul><li>What do you think? </li></ul>
  45. 45. QUESTIONS?
  46. 46. Session Evaluations We value your feedback, so please submit an online evaluation for each session you attend! To make it worth your while, we pick one evaluation from each of the ten session timeslots. If we pick your eval, you will be eligible to win a Creative Zen MicroPhoto

×