Presentation is loading. Please wait.

Presentation is loading. Please wait.

Design Patterns of Web 2.0. Ajax and more! Michael Curry Designer/Developer of PushHandle, Inc.

Similar presentations


Presentation on theme: "Design Patterns of Web 2.0. Ajax and more! Michael Curry Designer/Developer of PushHandle, Inc."— Presentation transcript:

1 Design Patterns of Web 2.0. Ajax and more! Michael Curry Designer/Developer of PushHandle, Inc.

2 About Me I am a UI designer and internet enthusiast – NYU grad. B.A. in Media Studies and Visual Comm. – 6 years working interactive design positions from Retail to Analytics and Optimization – Currently I work for my own startup design company:PushHandle Inc.

3

4 Overview What is Ajax? What are Design Patterns? Recent successes in modern UI design PushHandle Messenger Walkthrough Q & A

5 What is Ajax? Term coined by Jesse James Garret of Adaptive Path in 2005. Main idea/goal is to achieve uninterrupted interaction between the browser and servers for a better user experience. Main interruption defeated by Ajax is the unnecessary page refresh. An action now can occur with out the wait time of same page loading again after retrieving server information.

6

7

8 What are Design Patterns? Design patterns are generally considered common problems found in a specific type of design. With Ajax being practiced for a few years now – new design patterns of Web Design have surfaced. In this discussion, I want to point out some of these patterns but more importantly some of great solutions have been created.

9 Modern UI Success! JavaScript Libraries: YUI, Jquery, & Prototype Script.aculo.us Sites Jquery Sites YUI Sites

10 Javascript Libraries: YUI, Jquery, & Prototype A JavaScript library has the motto: …make JavaScript suck less. – mochikit.com No, Cross browser handling sucks and non- standard browsers suck! (Less than 15% of web users use IE6: hooray!) – http://www.w3schools.com/browsers/browsers_stats.asp Still, its true they provide less typing which leads to condensed file sizes and usually less problems. No matter which you pick – necessary tool.

11 Javascript Libraries… For Starters: YUI For Designers: Prototype and Script.aculo.us For Devs: JQuery

12 YUI success Layout/Element Oriented improvements. Muttons - Contextual/Assoc. Navigation Inline Editor – No repetition, or space hog Both are not exactly form elements If you are not aware of YUI-reset.css - get it! * YUI 3 coming soon…

13 Muttons 1.Initial View 2. Action Invitation 3. Action Initiated 4. Action Results and Sub-actions reveal Muttons are a display element that give great contextual navigation while keeping interface clean, simple, and unintimidating.

14 Inline Editing 1.Initial View2.Invitation to Action3.Quick Same Page Inline Edit Inline Editing uses Ajax to accomplish binary page goals (display and edit) in one streamlined dynamic page.

15 Jquery Success Most Popular Library now. Dev favorite. FriendFeed : real-time twitter, mail, blog, communication mashup. WundrBar and Tripeedo – amazing RegExp project. Although still needing some additions built for future of web. Both incredible projects that take idea of Ajax to a new level.

16 Scripty Notes Technically is an extension of Prototype.js – one of oldest js libaries. But packages it in its releases. Started as a way to do cool animations without having to add flash to a page. Is the default lib. for Ruby on Rails dev: Basecamp - 37 great UI design ref *http://scripty2.com*

17 Script.acul.ous Success Freckle Time Tracking: Created by same folks who created the library: Thomas Fuchs and Amy Hoy How do we use inputs? Why so many? When we can do tags & descriptions in same box. More… http://letsfreckle.com/blog/

18 PushHandle Messenger Inspired by various sites we talked about – I have started a webapp for smart-chatting Smart-chatting means a lot of things. But essentially it is about taking known conventions of an instant messenger and improving the performance.

19 Twitter, Google, and IM These 3 services are among the most used and known in internet and modern communication. What is most interesting about this is they are all interacted in the same way. The main differences are results and expectations. To use anyone of these – you simply type into an input and submit. SO SIMPLE – BUT SATISFYING! IM is the oldest & yet not much has changed since the days of AOL member chat. But so much more is available today…

20 Thanks For the Time Feel Free to contact me: mcurry@pushhandle.com


Download ppt "Design Patterns of Web 2.0. Ajax and more! Michael Curry Designer/Developer of PushHandle, Inc."

Similar presentations


Ads by Google