Make Web, Not War - Building & Designing a Twitter Application - DigiFlare


Published on

Digiflare came up with DigiTweet as an open source Twitter client for users who require a great user experience for free. The coolest part is we used non-Microsoft products in combination with Microsoft design and developer tools to make this happen. Most of our interaction was built using Microsoft Expression Blend and Visual Studio, however our design artifacts were created in Adobe suite of products. We were able to utilize the seamless workflow of Expression to import our Adobe artifacts in order to use them in our WPF application.

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

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Make Web, Not War - Building & Designing a Twitter Application - DigiFlare

  1. 1. This deck is available at: Bu i l d i n g & De s i g n i n g a T wi t t e r Ap p l i c a t i o n : Di g i T we e t make web, not war. Mano Kulasingam Director, Professional Services
  2. 2. G o a l s f o r T o d a y ’s Se s s i o n • Social Networking service: Twitter • What is Twitter? • Is there a better User Experience than • What is User Experience? • UX across Desktop and Web • Demo DigiTweet • Express yourself with Expression Blend • How to use Adobe artifacts in Expression Blend
  3. 3. Po l l t h e Au d i e n c e Who uses Twitter on a regular basis? A. Yes, all the time B. Sometimes C. No, not into micro blogging D. Never heard of it
  4. 4. Wh a t i s T wi t t e r ? Twitter is a free social networking and micro-blogging service, that allows its users to send and read other users' updates (otherwise known as tweets), which are text-based posts of up to 140 characters in length. Answering one simple question. What are you doing?
  5. 5. Wh o i s u s i n g T w i t t e r ? • Barack Obama • Al Gore • Richard Branson • Oprah Winfrey • Shaquille O’Neal • Coldplay • Ashton Kutcher • ...
  6. 6. T wi t t e r Cl i e n t s TweetDeck Tiny Twitter Twhirl Twitteriffic TwitterBerry
  7. 7. Po l l t h e Au d i e n c e Who has heard of User Experience (UX)? A. Yes B. No
  8. 8. Wh a t i s U s e r E x p e r i e n c e (U X )? Engage • Is the screen attractive and well planned? • Is the information useful, up-to-date and easy to comprehend • Avoid UI pitfalls – long forms, slow response time, or complex passwords Empower • What does the user want from the visit – Is it to get info, perform task, or to be entertained • Does the site deliver what the user wanted? • Does user actions produce desired results – Use icons and tool tips Ease of Use • Ensure all links are clearly clickable • Does the user know where a click will take them, and do they know how to get back? • Reduce errors and unpleasant surprises
  9. 9. UX o n t h e Br o ws e r a n d De s k t o p
  10. 10. Po l l t h e Au d i e n c e Who downloads and tests out Open Source applications on sites like CodePlex? A. Yes, all the time B. Sometimes C. At least once D. Never
  11. 11. Di g i T we e t DigiTweet is an open source desktop Twitter client for Windows. DigiTweet provides Twitter functionalities with rich user interface through Windows Presentation Foundation (WPF). Project source code available at Codeplex.
  12. 12. dem L e t ’s s e e w h a t we c a n c r a s h t o d a y DigiTweet o
  13. 13. Di g i T we e t v s T w i t t e r .c o m DigiTweet • Create and view tweets • features ++ • Reply, Retweet, Direct • Interactive dockable pane Messages and • Share pictures with TwitPic • User Profile • Friends List • Favourite • Categorize Contacts with • Search Colors & Toast Alerts • Preview Tweet URL
  14. 14. Po l l t h e Au d i e n c e Did you know that you can use non- Microsoft design tools to create artifacts for Silverlight and WPF application? A. Yes, way cool with the integration features of tools like MS Expression Blend B. No, but I'd like to know more C. No, design isn’t really my thing
  15. 15. Ex p r e s s i o n Bl e n d Fe a t u r e s • Design for Desktop and Web • WYSIWYG Design Surface • Over 30 Controls and Containers • Professional Timeline • Styling and Customization • Importing Photoshop and Adobe Illustrator files • Effects • Design-time annotations • XAML • Visual Studio Integration
  16. 16. A d o b e F i l e I mp o r t • Adobe Photoshop files – Layers with positions – Bitmap and vector graphics – Text – Masks – Gradient and solid fills • Adobe Illustrator files – Equivalent to support in Expression Design – PDF compatible files
  17. 17. dem o L e t ’s s e e w h a t we c a n c r a s h t o d a y Import Adobe design artifacts into Blend 3
  18. 18. Q &A Mano Kulasingam Director, Professional Services