Devigner Goodness

A Photoshop How To

Frank — Wed, 27 Aug 2008 23:28:00 GMT

Here's an interesting tutorial on how to make a shiny pencil graphic in Photoshop.

The tutorial shows you how to create Web 2.0 style gradients and, while the tutorial specifically mentions Photoshop, you could easily apply the techniques to your design tool of choice.

As an added bonus, the site has tons of tutorials and how-to's in Photoshop.

Technorati Tags: Photoshop,How To,Devigner,Graphic Design

Usability Tip: Put Something Meaningful in Your Window Titles

Frank — Thu, 21 Aug 2008 11:58:00 GMT

Rob Relyea points out one of his pet peeves: applications with window titles like this:

I agree.

Nothing says amateur quite like leaving this at its default value for released software.

Fortunately, this is an easy fix:

XAML:

   1: <Window x:Class="WPF_Fun.Window1"   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   4:     Title="CHANGE ME!" Height="300" Width="300">

Code:

   1: this.Title = "CHANGE ME!";

In the cosmic scheme of things, this probably isn't a big deal, but if you want your app to have a professional polish, then this tiny step is a must.

Technorati Tags: WPF,Pet Peeve,Usability

Bill Hill on the Most Important OS

Frank — Thu, 14 Aug 2008 11:23:00 GMT

Bill Hill works at Microsoft Research and gets philosophical about which OS is the most important.

Think it's Windows? Unix? Linux? Mac OS?

Not even close.

It's the human mind or "Homo Sapien 1.0" as Bill Hill calls it.

Bill Hill - Windows is not the most important OS

I mentioned this in my talk last night and linked to it, but the message is so good that it bears repeating.

When you're building user experiences, remember what OS you're really developing for.

Technorati Tags: Bill Hill,Microsoft Research,User Experience,Devigner

Links from Rockville NUG Graphic Design for Developers Mini-Talk

Frank — Wed, 13 Aug 2008 20:58:00 GMT

As promised, here are the links from my Graphic Design for Developers mini-talk at Rockville NUG tonight.

Slides from the talk.
Kuler, a color swatch generator
Community Megaphone Map
Crossing the Usability Chasm, a great session from MIX08 [PPTX|WMV|Zune]
Story of the Office 2007 Ribbon
Bill Hill's Homo Sapien 1.0 talk. (transcript)

Not mentioned, but also good resources

Mark Miller on The Science of a Great User Experience

Technorati Tags: Graphic Design,Devigner,User Experience,UX

Speaking Tonight at RockNUG

Frank — Wed, 13 Aug 2008 13:26:00 GMT

I'll be doing a quick (15 minute) version of my "Graphic Design for Developers" talk tonight at the Rockville .NET User Group.

[ Event Details | Map | Add to Calendar ]

If you can't make it to Rockville tonight, then you can catch my presentation in the near future.

I'll also be doing a geekSpeak later this month on the topic, as well as the next Richmond Code Camp and the Rockville NUG December meeting.

Technorati Tags: Graphic Design,Devigner

An Olympics Web Site Surprise

Frank — Fri, 08 Aug 2008 00:56:00 GMT

If you go to the Olympics Website homepage at NBCOlympics.com, you may not be surprised to a RIA interface, but what may surprise you is that the homepage is running Flash.

You've not hit the wrong site.

To see the Silverlight magic everyone has been buzzing about, you'll need to launch the video player.

You'll get something like this, which is in Silverlight.

This was likely done to avoid the “Please Download“ screen on the homepage, which no matter how customized it is, still annoys (or confuses) users.

Flash and Silverlight on the same site.

It's just like the Olympics when the world forgets their differences and all compete together in the name of sportsmanship. :)

Technorati Tags: Olympics,Silverlight,Flash,RIA

Silverlight's Big Bang Moment

Frank — Thu, 07 Aug 2008 22:20:00 GMT

Tomorrow is the official start of the 2008 Summer Olympics and, along with it, the "big bang" moment for Silverlight.

It's really the first site with mass appeal to really show off the capability of the platform, especially in places where it excels over Flash.

Comparisons with Flash are unavoidable and expect pundits to dissect everything on the site.

For decision makers and web designers, this will be their first chance to evaluate Silverlight in a real world environment on a site with wide demographic appeal.

It's an opportunity for Silverlight to get eyeballs and downloads.

It's a risky all or nothing proposition, but it's a risk Microsoft has to take for the web world to sit up and take notice of Silverlight.

Redmond Developer News had this to say:

Beijing or Bust
With the world watching, Microsoft's fledging RIA technology must survive this qualifying round to secure a foothold in the Web technology race alongside Adobe Systems' ubiquitous Flash technology. People who access the NBC site can use the Adobe Flash Player, Windows Media Player or Silverlight 2 beta 2 to view different types of content.
A major stumble could consign Silverlight 2 to the fate of the 2008 Summer Olympics torch relay.

The project is ambitious for any RIA platform: 2200 hours of video streamed live and on demand portrayed in a way that appeals to wide array of users.

Adam Kinney has a video up on Channel9 on the design and development process for the site.

So, this is Silverlight's big bang moment and, if all goes according to plan, this will be the start of something even bigger than the Olympics.

Technorati Tags: Olympics,Silverlight,Devigner,RIA,Beijing,2008 Summer Olympics,Adam Kinney

Getting Silverlight to Go 3D

Frank — Wed, 30 Jul 2008 02:52:00 GMT

Believe it or not, 3D has a long, even sordid, history on the web.

Ten years ago, I remember playing around with VRML and watching in amazement at a banner ad for that contained an entire scene yet only was 6k big.</NOSTALGIA>

Of all the things done to make Silverlight more WPF-ish, the one thing that didn't make the cut in version 2 was 3D support.

There are many technical reasons for this, not the least of which is keeping the runtime size manageable.

Given the potentially cool RIAs that could be built with 3D, I would imagine we will see it added in the future.

However, there are a few clever folks out there that are bringing 3D to Silverlight today.

Robby Ingebretsen, whose site NerdPlusArt.com is a great example of a 3D RIA, goes over a few of the ways to "cheat" and add 3D support to Silverlight 2.

Here's a summary:

Real 3D

I really should put "real" in quotes since until holographic projectors become commonplace, we're stuck with rendering a three dimensional spaces onto a 2 dimensional surface.

With the fine print out of the way, let's go over some options for creating 3D spaces like you could with WPF, Adobe Atmosphere or in SecondLife.

You can change camera angles, perspectives, etc and the scene is rendered.

An extreme example of real 3D are first person shooter video games.

There's only one model of that bad guy and as you run around the camera's position changes and the scene updates accordingly.

It's processor intensive, but worth it if you need that kind of dynamic environment.

Both of these open source projects on CodePlex create a 3D rendering engine in Silverlight.

Kit3D
Balder

Pseudo-3D

Pseudo-3D is a time honored practice in the Flash world that Swift3D really took the initiative in simplifying the process.

Basically, the approach is to render every frame of a 3D animation out into discrete frames. [ Silverlight example | Flash Sample 1 | Flash Sample 2 | Flash Sample 3 ]

The upside is that it's simple and quite effective.

The downsides are that the animations are "canned" and file sizes can get unruly.

There's no dynamically generating animations with this method, so you'll have to plan out what you intend to show very carefully.

If done properly, your users will have no idea all your animations are not done in real time.

The Aston Martin Silverlight demo from the MIX08 keynote was just such an example of this method.

Other Tricks

The lack of a "real 3D" rendering never stopped old school video game developers.

The 1983 vintage arcade classic "Star Wars" didn't need a fancy GPU to provide the illusion of 3D neither did Moon Patrol.

Inspiration trumps limitation

As Robby says in his post, "let’s not wait for official platform support to start building some sweet 3D."

If the video game developers of the 80's could do what they did back then with the tools they had, we can certainly "overachieve" with the tools we have today to make the future happen a little sooner.

[found via Andrew Duthie]

Technorati Tags: Silverlight,3D,Swift3D

Expression Blend Training Resources

Frank — Tue, 29 Jul 2008 00:22:00 GMT

The Expression Blend Team has put together a blog post of all the training resources and materials out there to get you up to speed on it.

From the post:

Training Resources from Microsoft

Expression Blend and Design Blog: Tips & Tricks
Expression Community
Expression Blend (Online) User Guide
Expression Blend Tutorials

MIX 07/08 Video Sessions

Building Rich Client Experiences with Blend and WPF (by Celso Gomes and Christian Schormann)
Building Rich Web Experiences (by Celso Gomes)
Applications = Designers + Developers (by Celso Gomes and Kirupa Chinnathambi)
Designing Next Generation User Experiences (Johnathan Lansing)

Tutorials (Videos)

A Lap Around Microsoft Expression Blend (Steve White)
4 Visual State Manager Videos (Steve White)
Animation and Media (Peter Blois)
Blend for Programmers (Jesse Liberty)
contentpresenter.com - WPF Video Tutorials (Lee Brimelow)
Lynda.com - Video Tutorials 1, Video Tutorials 2 (Lee Brimelow)

Tutorials (Articles)

Nibbles Tutorials (Celso Gomes)
Collection of Visual State Manager (VSM) Resources (Steve White)
Electric Beach (Christian Schormann)
kirupa.com - Blend + WPF, Blend + Silverlight (Kirupa Chinnathambi)

If you know some that aren't on this list, then email Kirupa (kirupac[at]microsoft.com) to get them added.

Technorati Tags: Blend,Expression Blend,Silverlight,Devigner

Update to Community Megaphone Map

Frank — Fri, 18 Jul 2008 01:32:00 GMT

I just made the first update to my Silverlight-powered Community Megaphone Map: I added Washington DC.

DC's absence is a glaring omission in the otherwise wonderful map of the US in XAML I started with.

Fortunately, DC's shape isn't to complicated and I found a simplified map of our nation's capitol.

I drew up the shape in Expression Design by starting with a rectangle, rotating 45 degrees, messing around with adding points and moving them around until I got the right shape.

Hmm, that would make a cool screen cast.

Technorati Tags: Expression Design,Blend,Silverlight,Community Megaphone,DC