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

make web, not war.

Building & Designing a Twitter Application:

DigiTweet

Mano KulasingamDirector, Professional [email protected]://blog.digiflare.com

This deck is available at: http://tinyurl.com/xxx

Goals for Today’s Session

• Social Networking service: Twitter

• What is Twitter?• Is there a better User Experience than Twitter.com

• What is User Experience?

• UX across Desktop and Web• Demo DigiTweet

• Express yourself with Expression Blend

• How to use Adobe artifacts in Expression Blend

Poll the Audience

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

What is Twitter?

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 upto 140 characters in length.

Answering one simple question.

What are you doing?

Who is using Twitter?

• Barack Obama• Al Gore• Richard Branson•Oprah Winfrey• Shaquille O’Neal• Coldplay• Ashton Kutcher• ...

Twitter Clients

Twitter.com

TwitterBerry

Tiny Twitter

Twhirl Twitteriffic

TweetDeck

Poll the Audience

Who has heard of User Experience (UX)?

A. Yes

B. No

What is User Experience (UX)?

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

UX on the Browser and Desktop

Poll the Audience

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

DigiTweet

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.

demoDigiTweet

Let’s see what we can crash today

DigiTweet vs Twitter.com

Twitter.com• Create and view tweets• Reply, Retweet, Direct

Messages and • User Profile• Favourite• Search

DigiTweet• Twitter.com features ++• Interactive dockable pane• Share pictures with TwitPic• Friends List• Categorize Contacts with

Colors & Toast Alerts• Preview Tweet URL

Poll the Audience

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

Expression Blend Features

• 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

Adobe File Import

• 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

demoImport Adobe design artifacts into Blend 3

Let’s see what we can crash today

Q&A

Mano Kulasingam

Director, Professional Services

[email protected]

http://blog.digiflare.com

http://www.digitweet.com