Peter Stern's WebLog

Peter Stern

2005-02-23T16:52:00Z

Since this site is for MS employees, I’ve transferred my blog to a new site:

http://peterstern.blogspot.com/

I can always be reached through my website:

http://www.petersterndesign.com/

Aloha

-Peter

Forgive me father for I have sinned

2005-02-10T18:16:00Z

It’s been 5 months since my last confession. A lot has happened since I last blogged back in August. At the time my focus was on my upcoming trip to Bermuda. Since then I have left Microsoft and returned to freelancing. The decision to leave Microsoft was not an easy one to make, but I felt it was time for some new challenges. It’s interesting that several hundred of my Microsoft friends and colleges responded to my departure mail and not a single one asked “why?”.

I vowed to spend the winter skiing… the goal was to rack up 40 week days before March. The good lord apparently had other plans for me, because there is absolutely no snow this year. Ok, plan B – work hard this winter so I can take time off for salmon fishing this spring and summer.

I’ve been freelancing, working from home, for over a month now. Here are the pros & cons…

Pro: I no longer have people constantly drifting in and out of my office to commiserate, brainstorm or eat their breakfast.

Con: My dog does like to barf up unidentifiable objects under my desk.

Pro: Half a day’s work in my home office is equal to about 4 days work in my Microsoft office.

Con: I’m losing track of days & nights. I find it irritating that nobody else seems to want to work Sat. & Sun.

Pro: Money’s better. Yes… even factoring in the posh Microsoft benefits package. Thanks to the MS Alumni Network I still have privileges at the company store and I’m still a member at the Pro Club.

Con: Uhhh… money doesn’t buy happiness?

All in all it’s been a great month, I love working for me. I’m a great boss.

Since this site is for MS employees, I’ve transferred my blog to a new site:

http://peterstern.blogspot.com/

I can always be reached through my website:

http://www.petersterndesign.com/

Aloha

-Peter

Deep Sea Fishing and Offshore Banking

2004-08-17T23:11:00Z

I’m off for a family vacation to Bermuda. OK, it’s not my first choice, but because of an interesting turn of events that includes offshore banking and my mother in law… Bermuda it is. Apparently the fishing is good and you gotta love a country that has, not one, but two national cocktails. The Dark n’ Stormy and the Rum Swizzle. BTW – I’m a bit alarmed that Robert Hess aka “Drinkboy” doesn’t realize that Bermuda is not in the Caribbean, and is in fact closer to Nova Scotia.

I’ll be incommunicado, but if you want to send me a Rum Swizzle I’ll be staying at the Fairmont Southhampton and you can probably find me at the beach.

XOXOXO

ASP.NET Customer Feedback

2004-08-10T17:38:00Z

Dimitri Glazkov gave me some feedback on my post about pixel pushers. I’m happy to say his head did not burst into flames, nor did he experience any bleeding from the eyes.

I asked him to elaborate on his comment:

“If I look at ASP.NET today (and even in tomorrow, in Whidbey), I can see some significant deficiencies in understanding how Web sites are typically built, with the sole emphasis on developers (I would even say small shop developers) and not the overall process.”

I’m not sure how the Bogeyman fits into all this, but check out his feedback he has some great ideas.

I’m not just a data-binder!

2004-08-10T17:35:00Z

What I want in a next generation design/development platform.

I’ll start with the most obvious - control of the “look and feel”. I think there is a common misconception as to why this is so important. It’s not about ego, it’s about efficiency. I spend at least 50% of my budgeted “design time” on projects not designing but documenting my designs. Then the Developers spend cycles interpreting (or not) my documentation. Then I document the items the Developers misinterpreted, and on and on… It’s wildly inefficient.

Next on the list is control of the page interaction: animation, behaviors, error messaging, tabbing, paging, etc. These are things that are currently much harder to mockup, and extremely tedious to document. Today this is typically done using flash or director, which is time consuming, throw-away work.

Last and certainly not least is user and or system flow. UML, stick figures, and Visio circles and arrows work OK to a point. That “point” being theoretical and not suitable for a full-fledged design review.

I’m looking forward to the day I can hand off final UI to a developer and say “wire it up”

I’m looking forward to the day a frustrated developer snaps at me “I’m not just a data-binder ya know!”

SVG to XAML conversion tool

2004-08-09T23:43:00Z

In response to my last post (gradients are kicking my ass) DonXML has uploaded versions of his SharpVectors project that will run on the WinHec build. I’ve just started testing it and so far I’m getting mixed results. Some of the gradients translate well and others don’t. It’s probably an issue with the SVG that Adobe is spitting out. Also from the SVG viewer the WCPD is not offering me the Markup option, only the container option. Anyway, it looks promising and it was awful darn nice of Mr. Demsak. Thanks Don.

WinHec Builds Posted

DonXML • August 09 2004 06:17 AM

Builds of Svg2Xaml and SharpVectors that will run using the latest public Longhorn release, WinHec (build 4074) have been added to the release files.

Printing to XAML with the Windows Client Print Driver – AKA gradients are kicking my ass

2004-08-06T00:47:00Z

I’ve done a lot of experimenting to generate XAML with my vector drawing tools, and Office apps. I learned if you copy vectors from Illustrator and paste them into PowerPoint, they are rasterized into a .png. If you copy and paste those vectors into Visio they remain vectors… or so I thought. I couldn’t figure out why sometimes my process generated rasterized bits and pieces of my file, and other times it didn’t. The problem seemed to be the gradients.

Here’s an example: I have exported an svg file from Illustrator via the Windows Client Print Driver to XAML. I expected to preserve the vectors and generate a single XAML file. What I got was a XAML file and a folder with 189 .jpg files and 1 .png. It was as if my file had been rasterized, sliced, and diced.

Wei Zhu had an answer for me:

The WCPD does handle GDI’s GridentFill calls. The problem is that no application (that I am aware of) seems to use GDI’s GradientFill API. I think it’s most likely due to the fact that GradienFill in GDI is only available on Windows 2000 and up and applications seemly choose to simulate gradient fills with bitmap strips.

Not every app simulate gradient fill the same way either. The Illustrator app seems generate a lot of bitmap strips. Office 2003 does a smarter job and simulates a gradient fill with just a single 1 pixel high image strip. If you try the attached power point file, you can see the result xaml to be like this.

</FixedPage>

Where image_1.jpg is a 2KB 1x2604 dimension file.

Turns out when I’m pasting vectors into Visio it’s preserving what it can, and rasterizing the little bits and pieces it can’t (gradients). Who knew? Mr. Zhu knew, did you?

Swag saves lives

2004-08-05T00:13:00Z

One more off topic post then I promise to get back to business.

I’ve designed a lot of swag in my career. By swag I mean conference crap… stuff, loot… not as dictionary.com defines it:

Slang. Stolen property; loot.
Australian. The pack or bundle containing the personal belongings of a swagman.
Slang. Herbal tea in a plastic sandwich bag sold as marijuana to an unsuspecting customer.

It’s typically hats, t-shirts, mouse pads or junky, overpriced toys.
When it comes to my own swag it’s a different story. I spare no expense. Take for example a personal favorite – my Y2K survival kit.

It’s packaged in a fashionable, yet rugged, cardboard box (mine is a bit abused)
Every box is a little different, but they all contain pork gravy mix and vivarin – staples in a survival situation.
Vitamin drink, kool-aid, potted meat food product, and a mouse trap.
Who knew a vitamin drink could do all that?
I don’t understand why everyone is so squeamish about canned meat.
Coffee, tequila, matches, ginseng, carmex, tabasco, a lotto scratch ticket, a plastic knife and fork and chewing gum round out the kit.
The kits also came with a deck of cards, and a hand-made wooden yo-yo.

I’m happy to report 100% of the kit’s recipients survived Y2K.

Bad, plastic, oak veneer

2004-08-04T00:50:00Z

I work in one of the older buildings on campus. Dark hallways, everything’s covered in a bad, plastic, oak veneer… it’s totally cheesy... it’s great. About a month ago they came through and replaced the name tags on our doors, with some new, fancy Plexiglas and aluminum thing. I’m staging a peaceful resistance and have replaced it with my own handmade signage.

From pixel pusher to stakeholder

2004-08-02T21:33:00Z

I’m often asked how designers can gain credibility and influence on the product development cycle. To move from PhotoShop Jock, to someone who can influence the products your team builds, you’ll have to think like a business owner and apply some process around how and where you commit to providing your services.

In the short term, the next time someone requests a screenshot ask them:

who is the audience?

what are the design goals?

Is there data to inform these changes?

What are the success metrics?

In the medium term, create a design brief template. It will save you a lot of repetition, and boost your credibility. It also requires a small amount of effort on the part of the requestor, which tends to weed out the less motivated, or ill-conceived.

Here’s a simple one I created, I’m sure others have better models.

Longer term, document your process, your goals, when you should be engaged, what deliverables you provide, how you prioritize your work, etc.

Here is an example of my UX plan.

Create an intranet site to communicate with your team. You can use it to expose your work and processes, but also to evangelize innovative work going on elsewhere. Once folks start to understand you’re in touch with what’s happening inside and outside your company, you’ll become the “go to” for all things UX.

Voodoo over IP

2004-08-02T20:50:00Z

Consider this fair warning, I’m armed and dangerous. According to the instructions I don’t need a lock of hair, just an IP address.

Annoying Chris Sells

2004-08-02T20:48:00Z

When I originally designed my personal site I had an animated splash screen.
Chris Sells was quick to point out it was annoying as hell, and it looked like an “under construction” sign. He’s right on both counts. I knew better, but couldn’t help myself. Surely the annoying splash screen rule doesn’t apply to me? This animation (which I’ve used for years) was painstakingly crafted from an archival photo. No… damn it, he’s right.

I had also been experimenting with a moveable, carbon fiber and glass toolbar which I eventually scrapped as cool, but impractical. I have a big pile of designs that fit into that category.

Microsoft.com circa 1994

2004-08-02T20:41:00Z

Check out my Microsoft.com home page archive. It dates back to 1994, when MSCOM ran on 4 servers. Today MSCOM runs on 80 servers and two data centers.
For the record - I'm not responsible for most of these. I started in 1998, so I designed the last one and a couple that aren't included here (and more than a few that never saw daylight).

Creating a handwriting font

2004-07-30T18:30:00Z

Chris Sells asked how I created the handwriting font I use so often. It’s quite simple, just a bit tedious.

Font creation/editing programs range from free to $350 for Macromedia Fontographer and $550 for FontLab.

I chose High Logic’s Font Creator. It’s around $50 and offered far more features and functionality than I will ever need. It’s stable and simple to use. The UI is basically a set of boxes for all the possible glyphs that make up a font. There can be a lot of glyphs if you decide to create upper/lower case, italics, bold, special symbols, etc.

I chose to create a block letter font, uppercase only with numbers and a handful of special symbols I use most frequently.

This process would be simpler if I used a tablet, but I wanted to capture the feel of pen on paper (ok, I don’t have a tablet).

So…

Write out the characters you want in your font

Scan at a high resolution 300dpi or greater

Cut and paste characters into separate files

Import these files into the appropriate boxes in Font Creator

Preview and tweak, preview and tweak, preview and tweak

Most of the tweaking is to get consistent sizing and spacing.

Voila!

Nice crayons designer boy

2004-07-29T23:32:00Z

I’m Peter Stern a User Interface Designer for Microsoft - currently working for MSDN. In the past 5 years I’ve designed a lot of web applications, content management tools and various other software and systems. I also do a lot of concept work around future products and services – hardware, software, smart clients, mobile clients. I still enjoy designing the occasional t-shirt, or poster… it’s good for the soul.

I am often asked about my sketches. How are they made? Do I use a tablet? Is that my hand writing or a font?

I sketch a lot. I sketch because it’s the fastest way for me to communicate ideas, and because people respond so well to them. I think folks are surprised by something hand-made and “rough hewn”. The effect is intensified when I apply them to the latest technology. Like my hand-drawn playing cards in XAML.

I start with pen on paper, crazy I know, but it’s fast and I can do it anywhere.

After scanning them …I sometimes paint them digitally
http://petersterndesign.com/images/syndication.gif

Sometimes I just use markers (fancy, expensive markers)
http://petersterndesign.com/images/tech_articles_sm.jpg

I use a pen because it’s fast, but it’s not as fast when you need to manipulate a lot of text. So… I made a font from my handwriting for jobs like this: http://petersterndesign.com/images/library_tier1.jpg It was a bit tedious to create, but has saved me lots o’ time.

I have traditionally used PhotoShop for a final rendering like this: http://petersterndesign.com/images/Lib_skinned.png I'm starting to design using vectors (Illustrator) so I can generate XAML.

To see a real bad-ass with markers check out Chip Foose.