Your SlideShare is downloading. ×
0
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,582

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 …

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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,582
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
147
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. BETTER DESIGN, BUILT FASTER Using new UI technologies to speed development mix 06 03.21.2006
    • 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. / UI TRENDS / THE EARLY YEARS The first human-computer interfaces were strictly utilitarian.
    • 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. / 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. / 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. / UI TRENDS / USER EXPERIENCE / UI TRENDS / SYSTEM LEVEL USER EXPERIENCE Operating systems respond to user demand for compelling user experience.
    • 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. / 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. / UI TRENDS / WHAT’S NEXT? enjoyable useful physical ui clui gui ? intuitive
    • 11. / UI TRENDS / WHERE IS THIS GOING? ? web desktop robust fragile flat rich
    • 12. / UI TRENDS / LAYERS, LANGUAGES &amp; 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. / UI TRENDS / LAYERS, LANGUAGES &amp; 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. / EXAMPLES / WEB / BLOCKBUSTER.COM
    • 15. / EXAMPLES / WEB / TYPICAL PROCESS (SIMPLE) CSS PHP Designer / Developer Images Photoshop Text Editor Web Site
    • 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. / EXAMPLES / WEB / WIREFRAME
    • 18. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side
    • 19. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side web browser application server
    • 20. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side ASP/ C# / Java / JSP / etc web browser application server
    • 21. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side &lt;HTML&gt; ASP/ C# / Java / JSP / etc web browser application server
    • 22. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side Style Layout Data ASP/ C# / Java / JSP / etc &lt;HTML&gt; web browser application server
    • 23. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side &lt;HTML&gt; CSS ASP/ C# / Java / JSP / etc web browser application server
    • 24. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side &lt;HTML&gt; Layout Data CSS Style ASP/ C# / Java / JSP / etc web browser application server
    • 25. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side &lt;HTML&gt; CSS ASP/ C# / Java / JSP / etc web browser application server
    • 26. / EXAMPLES / WEB / UI SEPARATION WITH CSS client-side server-side Style Layout ASP/ C# / Java / JSP / etc &lt;HTML&gt; CSS Data web browser application server
    • 27. / EXAMPLES / WEB / GENERIC CONTAINER HTML
    • 28. / EXAMPLES / WEB / DEMO
    • 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. / EXAMPLES / WPF
    • 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. / 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. / EXAMPLES / WPF / REDLINE DESIGN SPEC
    • 34. / EXAMPLES / WPF / UI SEPARATION WITH XAML Style Layout Form.cs Program.cs Logic Application
    • 35. / EXAMPLES / WPF / UI SEPARATION WITH XAML Style Layout Window.xaml Window.xaml.cs Logic Application
    • 36. / EXAMPLES / WPF / UI SEPARATION WITH XAML Style Window.xaml Window.xaml.cs Logic Application Styles.xaml Layout
    • 37. / EXAMPLES / WPF / DEMO
    • 38. / EXAMPLES / WPF / DEMO
    • 39. / EXAMPLES / WPF / DEMO
    • 40. / EXAMPLES / WPF / DEMO
    • 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. / CONCLUSIONS
    • 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. / 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>&lt;canvas&gt; 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. QUESTIONS?
    • 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

    ×