Wednesday, October 31, 2007

Current Read: About Face 3 - Update

I've been reading this book on the bus, to and from work. I have gotten as far as chapter 5 and I have a few impressions.

Good Things:
  • The information is comprehensive and detailed. Cooper & gang include some good real world example cases and anecdotes.
  • The authors are obviously seasoned experts and can explain why they advocate the approach they do, because they've tried the other theories and adopted the best parts for themselves.
  • Their process is detailed and well documented.

Bad Things:
  • They don't use plain english. Many of the words they use are either new to me or not part of my common vocabulary.
  • The author also LOVES to use commas. They create extremely long sentences that group several concepts, subjects, phrases, terms, and methods together, and, that just aint kosher, cool, desirable, or advantageous.
Combine these two things together I have to re-read certain passages several times. Part of the problem seems to come from trying to be too complete and thorough. It isn't so bad that I won't continue but it is very frustrating!

That's all for now. Happy halloween.

Tuesday, October 30, 2007


Pretty nifty flipbooks at True Nature espcially this one:

Arte en Balde from jenny on Vimeo.

Make My Logo Bigger!

Oh brother. My nightmare. I wish it was this easy, I could get these types of problem clients out the door quicker if I could just spray a little neon color over my work.

Living Moving Typography

The beginning is a little slow, but it gets better.

via swissmiss

Monday, October 29, 2007

Time saver: Fireworks for Rapid Prototyping

Do you ever find yourself wishing for a faster way to create websites. Something that would let you scale buttons, scrollbars, and browser chrome without distortion or complicated and painful area duplication techniques? You can! How you ask? The answer is nine slice scaling, object library, layer styles, and editable vectors. Fireworks does all these things! Download the free trial and check it out.

In my opinion the only thing that fireworks is missing is a better type engine and support for paragraph styles.

The video features a designer for yahoo talking about how they use rapid prototyping in their work.

Sunday, October 28, 2007

Designer Profile: Mossimo Vignelli

Renaissance Designer, Mossimo Vignelli was trained as an Architect but did not restrict himself exclusively to that discipline. Vignelli is a conceptual designer that strives for function in addition to timeless form. His conceptual approach has allowed him & his company to design brand identity systems for American Airlines, Benetton (1995), and Ducatti (1998) to furniture for Knoll, Heller plasticwear, and interiors for churches and department stores. The couple has also written a few books. Vignelli and his Wife were recently featured among nine designers who changed perceptions by New York magazine. The couple have received many awards for their work and the fact that they have continued to produce work well after they no longer needed to is inspirational to me. While his design philisophy might be too narrow for some people, there is much that can be learned from him.

The video is of the couple discussing some of their furniture and design philosophy.

Thursday, October 25, 2007

Designer Profile: Matthew Carter

Matthew Carter is a name you should know. His work is all around us, ever read a webpage or magazine? That is where you'll find it. He has created many well known screen legible fonts for Windows and the Macintosh, the list is a long one and includes Verdana, Georgia, and Tahoma.

He even co-founded two font foundry companies, bitstream and carter&cone inc. (nothing there tho, but you can see a selection of fonts they have released here)

Nice summary of his work here.

Eye magazine articles
Feature Article By Erik Speakermann

Microsoft page back from 1997, put up after he finished the fonts for Microsoft.

Silverlight: Happy Halloween

Quick little Halloween greeting done using Microsoft Expression Blend 2 (September preview) and the opacity fade method I covered last post. It actually wasn't that quick, I had to redraw this several times (always ctl + save! alot). The problem seems to come from complex polygons & bezier curves. At least, that is when it would crash on me!

Anyway, happy halloween.

Wednesday, October 24, 2007

silverlight experiment: fading 2

I posted a partial solution to fading yesterday. Today, I think i have figured out how to efficiently fade almost anything. The big challenge for me was removing storyboards that I was no longer going to use. The solution was to use and event listener that would remove the storyboard after it had completed. I wasn't sure if the event listener would work (if mouseEnter storyboard fades target to end value, wouldn't that trigger a complete?). Surprisingly though, it actually works quite well.


<>Canvas xmlns="" xmlns:x="" Width="200" Height="150"
Background="#FF666666" x:Name="Page" Loaded="onLoaded" <>
<>Path Width="63" Height="52" Fill="#FFFF8B00" Stretch="Fill" Canvas.Left="20.794" Canvas.Top="29.663" Data="M56.487645,98 L74.805883,83.663793 92.204852,97.5 89,97.5 89,113.2481 60.029416,113.2481 60.029416,98 z" x:Name="home" Cursor="Hand"
MouseLeave="fadeMeIn" MouseEnter="fadeMeOut"/<>
<>Path Width="63" Height="52" Fill="#FFFF8B00" Stretch="Fill" Canvas.Left="112.794" Canvas.Top="29.663" Data="M56.487645,98 L74.805883,83.663793 92.204852,97.5 89,97.5 89,113.2481 60.029416,113.2481 60.029416,98 z" x:Name="home2" Cursor="Hand"
MouseLeave="fadeMeIn" MouseEnter="fadeMeOut"/<>


function onLoaded(s)
plugin = s.getHost();
function fadeMeOut(sender, mouseEventArgs)
var sName = makeName(sender);
var sTo = "0.3";
var sFrom = "1.0";
var sTarget = sender.Name;
var fader = makeStoryBoard(sName, sFrom, sTo, sTarget);
sender.findName('rCount').Text = 'Number of Storyboards: '+root.Resources.Count.toString();
fader.AddEventListener("Completed", "removeStoryBoard")
function fadeMeIn(sender, mouseEventArgs)
var sName = makeName(sender);
var sTo = 1;
var sFrom = sender.opacity;
var sTarget = sender.Name;
var fader = makeStoryBoard(sName, sFrom, sTo, sTarget);
fader.AddEventListener("Completed", "removeStoryBoard")
function makeName(sender)
var sBi= 1;
var tempName = (sender.Name+'_sb_'+sBi);
var sBtrue = sender.findName(tempName);
while (sender.findName(tempName) != null)
return tempName;
function removeStoryBoard(targetBoard)

function makeStoryBoard(sName, sFrom, sTo, sTarget)
var xamlFragment = '<>Storyboard xmlns:x="" x:Name="'+sName+'"<>' +
'<>DoubleAnimation Storyboard.TargetName="'+sTarget+'" ' +
'Storyboard.TargetProperty="(Opacity)" ' +
'From="'+sFrom+'" To="'+sTo+'" Duration="0:00:00.3" AutoReverse="False" /<>' +

var myStoryBoard = plugin.content.createFromXaml(xamlFragment);

return myStoryBoard;

Does anyone have a better way to achieve this result?

Tuesday, October 23, 2007

silverlight experiment: fading

I recently posted something about my attempts to fade an object in Microsoft Silverlight. I have succeeded, sort of. It's not quite complete yet because i have the storyboard names hard coded. Ideally, these would be unique each time, so that they don't conflict. That will have to wait for the next post though.

FYI, don't rollover/rolloff too quickly or you will receive an error and have to reload the page =(. This is one of the problems with hard coding the Storyboard name.

The xaml
Width="200" Height="200"
x:Name="Page" Loaded="onLoaded"


The Javascript
function onLoaded(s)
plugin = s.getHost();
function fadeMeOut(sender, mouseEventArgs)
var sName = "fader4";
var sTo = "0.3";
var sFrom = "1.0";
var sTarget = sender.Name;
var fader = makeStoryBoard(sName, sFrom, sTo, sTarget);

function fadeMeIn(sender, mouseEventArgs)
var storBor = sender.findName("fader4");

var sName = "fader3";
var sTo = 1;
var sFrom = sender.opacity;
var sTarget = sender.Name;
var fader = makeStoryBoard(sName, sFrom, sTo, sTarget);

fader.AddEventListener("Completed", "removeStoryBoard")

function removeStoryBoard(targetBoard)

function makeStoryBoard(sName, sFrom, sTo, sTarget)
var xamlFragment = '<>storyboard x="" name="'+sName+'"<>' +
'<>doubleanimation targetname="'+sTarget+'" targetproperty="(Opacity)" from="'+sFrom+'" to="'+sTo+'" duration="0:00:00.3" autoreverse="False"<>' +

var myStoryBoard = plugin.content.createFromXaml(xamlFragment);

return myStoryBoard;

Designer Profile: Paul Rand

Paul Rand created some of the most recognizable corporate identities of the 20th century.

Mobil, CBS, IBM, ABC, Cummins Engines, Enron, Yale, UPS

A designer who never stopped trying to do it better, he was actively designing up until his 90's. Perhaps his most important contribution was to sell design to corporate America.

THANK YOU! Paul Rand.

Monday, October 22, 2007

Eames Classic

Powers of Ten by Charles And Ray Eames, is a classic and powerfull piece of information design (the one above is slightly different, here is the original). My professor showed this in our History of Design class and everyone was blown away by how simple and compelling it was. I know I saw things in a slightly different perspective afterwards.

Official website for p10 with schwag!

Charles & Ray Eames foundation website.

I also got curious about other films the two might have made and nipped off over to imdb. Holy guacamole, lots and lots. I will have to look for them.

Lastly, for those of you who looove the all things Eames, you can see their exhibit "Mathematica" at the Pacific Science Center in Seattle Washington. This exhibit exists in other areas as well, but I live here.

Sunday, October 21, 2007

Designer Profile: Erik Spiekermann

Erik Spiekermann is one of the most well known modern day type designers. The author of many books, including "Stop stealing sheep and Find Out How Type Works", which is a great resource for seasoned professionals or people just beginning. He is the man behind many well known typefaces that are characterized by Humanist forms. Learn more about him here or read his blog. Or you can drool over fonts produced by his company FontShop (auf deutsch) or the english version.

A presentation given by him about him

Why Arial is Steve Job's Fault
Audio is a little tough to hear but the gist of it is that Steve Jobs included Helvetica on Macs. Which was copied by Microsoft and turned into Arial.

Speakermann breaks it down. Speak son, speak the truth.

peaceful typography

Video is called "Typography a wish" and the word is french for vows. Not sure if it's the music or the rhythm of movement, but I find this to be very peaceful.

Client Relations

Sometimes a designer gets a client's requests for solutions that isn't really ideal for the project. "Can you make the logo bigger?" is probably the most common question I get.

Eric Karjaluoto from IDEAS wrote a great article on how to combat their most difficult requests.

Saturday, October 20, 2007

Stinky stossel

Found this bad boy on youtube, cruising for design candy again.

Whether this is a joke or not, I think he is out of line. While design may not be handing out rice in africa, neither are reporters. They usually just sit in the studio or objectively (not getting involved) report on great, awful, crazy things other people are doing. Design and journalism aren't that different when it comes to affecting lives and history. Think "hanging chat" or Maury Povich.

So, heres to you, Mr. self important stinky guy. Have a can o' whoop a$$.

Smashup: Blend 2 vs Flash

I've been dutifully attempting to learn Microsoft Blend 2. I have a few gripes so far.

I am not a programmer. I often wish I was. While immersion techniques work well for learning things, it can be quite the learning curve. I really do think programmatic approaches are usually more flexible and can be easier to control, but c'mon Microsoft! give me a little break here!

Example you say! Ok, says I: Fading

mc.onRollOver = function(){
--- mc.onEnterFrame = function (){
------- if(mc.alpha >= 20){
----------- mc.alpha -= 10;
------- }
--- }

blend 2
I am actually not sure how you go about this... I have found that you can't invoke a loop and use setTimeout or setInterval to achieve it (common and pre-existing methods to achieve this with javascript). It appears that you have to use a "storyboard". Storyboards are a method to animate things.

My understanding at this point is that there are three ways to go about this:

You can set up unique storyboards for each object you want to fade in blend itself.
Imagine that you want to fade a button as you hover over it, each button will need it's own Storyboard (time line based transition). Not efficient use of my time or of the technology.

Semi-programmatic. Have several predefined
duplicate storyboards that have the storyboard target dynamically modified with javascript. Why several of the same thing? Silverlight can only have one instance of a storyboard running at a time. So if you want multiple fading elements, you will have to have x number of storyboards that you switch back & forth between when they aren't in use. Kind of a hassle!

Programmatic. Dynamically create storyboards on demand and insert them into your xaml code structure. This approach is most flexible but I haven't gotten it to work yet. I find this method as annoying as the rest because, rather than just needing to manage my javascript fade code, I also need to create xaml, insert it into the document structure, and then remove it when I'm done. Way more complicated than what I did with flash.

I am left feeling like microsoft wants me to be a programmer. Or at least have one on speed dial. While I really enjoy learning programming, there is a point when it gets kind of ridiculous just to do something simple like an opacity fade.

Why so many hoops? Maybe someone can explain why their way is better?


Hillman Curtis, a well known designer in his own right, has been busy capturing design legends on film.

Check it out on aiga.

Interested in learning more about Mr. Curtis? Check out Hillmans' book "MTIV: Process, Inspiration and Practice for the New Media Designer" on amazon. I own it and often refer to it for inspiration.

Dear After Effects, i love you.

Today is Saturday, but it should be renamed to after effects affection day. Cruising youtube for "design" yielded many goodies and here are some of them.

Yet one more thing to learn.

I really like this one, good music too.

Pulp fiction as a typographic motion study. Warning, it's pulp fiction so be prepared for "$#$%@" and "*(@#&(#".

On the wacky tip

This one just tickled me. He's a serious hardcore g.d. Actually, he seems to be more of a illy killa (illustrator for those of you not from the mean streats of design city). I'm not sure if I can agree with his critique of indesign either. Indesign is a multi-page design tool, I think he meant illustrator. Any who, I checked out his site, and I really like his illustrations. He even has one of the jesus warrior who vanquishes the dark sighted heathens.

Design is: ____________ vol.1 :::: issue.1

I recently posted the question of "What design is to you". While surfing youtube I came across this little gem. Not sure if they needed to make the letterbox effect so drastic. I think it diminishes their ability to "communicate" but the message about process is a good one.

video find

Technology, humbug! Blogger just made me re-type everything!

I recently saw this presentation by Paul Bennett, Creative Director at Ideo. The firm behind the revolutionary Treo and Palm Pilot. His concept was simple - "design is in the details", and I agree with him. How many times have I tried to change everything in the quest to innovate, when I only had to change just one detail that would transform the experience into something more compelling. It reminds me of something I've heard about writing good fiction. Imagine a scenario with normal people doing normal things, then make one element fantastic and let everything else react to that difference. Design IS in the details.

Thursday, October 18, 2007

designer confessional: writing

I have a little secret to confess. Here goes.

I love writing but I also hate it.

I love expressing my ideas and communicating with people but I loath grammar and spelling, the rules & framework of writing. Which to me is a little strange. As a designer, I love requirements, it gives me a context to form a solution around. However, when I am trying to write I find the rules to be a hindrance. I get so wound up about whether i should use a , or ; that I just stop and do something else. The other option is to just write and forget about all the rules that cage the words in. Awesome right!? Nope, now when I re-read it, its a bloody rambling mess that could use some order, punctuation, and spell check. Writing has become something to be avoided at all costs. Find it a little strange that I've started a blog? I do!

Btw, ever notice how many designers or graphic artists are terrible at spelling and grammar. Ironic since we've chosen to work so closely with letters, words, and language. Thank goodness for spell check.

Any thoughts, tips, stories, confessions?

Wednesday, October 17, 2007

what is design to you?

Designers will often get this question during interviews. It's a pretty ambiguous question and probably doesn't have a universally correct answer. The best answer is the one that is true for you. The correct answer for that interview, depends on what they want to hear. Not necessarily mutually exclusive answers and that is good. Don't be who you think they want you to be, be you, because sooner or later you will show up.

I like to think of Design as problem solving. You are given a series of requirements and goals, and you find a way to achieve those goals within the requirements. The aesthetic choices and technology should be the tools used to reach the goal. Hopefully, this definition will keep me out of a rut or style and allow me to adapt.

What does design mean to you?

Tuesday, October 16, 2007

first take: Microsoft Blend 2

A few observations about getting started with Blend 2.

Installation. A Little painful. First off, you need windows, so osx users unless your mac has windows on it, you are out of luck. Since I'm still running Win XP I needed to install the .NET 3.0 framework. This actually went pretty well. The Blend installation was smooth too. It took a long time to reboot, very long time, I actually rebooted 4-5 times because I thought the machine had locked up.

First Launch. I was impressed with the small minimal splash screen and smooth charcoal grey interface. Despite some minor areas where it seemed like they neglected to completely skin the os interface, this is definitely not something I expected to see with a Microsoft application. I also found the welcome screen to be attractive and smoothly interactive. I loaded and tested a few of the sample projects. The samples were fairly impressive, similar to lots of different flash apps that I've seen, but it was nice to see that comparable solutions were possible. I poked around in one or two of the sample files, just to see how it was done, and found myself quickly lost and confused. Having used Adobe & Macromedia applications for many years, I was probably expecting similarities to Flash, but from some basic exploration, Blend 2's method for building projects is closer to Dreamweaver than Flash.

Similar to Dreamweaver, you have "Design" & "Code" panes and you have a lot more external files that you need to manage than with flash. The code that you work is called "xaml" with is also more like html or xml than actionscript or javascript.

That's it for now, my next trick will be to attempt a little project of my own.

current read: About Face 3

The third edition from Alan Cooper & gang. This book focuses on interaction design as it relates to the software creation process and how design (in various forms) can influence the "process" for the benefit of those who are supposed to actually use it.

One thing that I'm slowly learning as I progress in my design career. You must never stop learning. This is true for most things really, life, job, relationships; change is the only eternal constant. Add in some technology, and you have a future that requires you to be smaller, faster, and stronger than ever.

Nothing like an interview to bring this piece of reality to your attention. I am going to try reading more and watching soap operas less.

Btw, I noticed the prices from Amazon for this book are really good. I picked mine up from the University Bookstore for $45. Good bookstore, but a little spendy.

Monday, October 15, 2007

Portfolio Trends

One Page Portfolios. An interesting trend in online portfolios, by way of

In general, I like this as a solution. Having recently redesigned my own portfolio using this approach, I found that it reduced the complexity of organizing your work into sections.

I have usually organized my work into categories like web, print, identity, etc. The main problem that I have with this approach, is that projects will usually cover at least 2 categories and sometimes more. Requiring you to choose one category over another or use some other approach that could lead to more work for you.

Another strategy that I've seen is to organize things by client or product name. This is usually not a good way to find specific types of projects, and a potential client or employer might not find the example that will get you the job. A link to a great portfolio as an example of this.

Hence, the one page portfolio to unite them all.

Silverlight and Blend

You may have heard about this new product from Microsoft called Silverlight. Silverlight is a cross platform (or soon to be cross platform) media plug-in. Similar to adobe Flash player, this technology can be used to deliver HD video, rich user experiences, and all around good ol' slick sex appeal right in your audiences very own browser. Microsoft Expression Blend is an application that allows you to build content for Silverlight.

Ok, great. Why do I care?

Resume Gold. If a designer seriously plans on looking for a job with anything to do with software or the web, they should consider getting their hands dirty with stuff ASAP. It won't necessarily get you the job, but it will really make you stand out. Not many people have much experience with it but lots of companies are looking for people who do. Need more reasons?

It's not flash. The more technical folks will appreciate the fact that complete experiences can be created with Javascript. That's right, Javascript! The same cool language that you use for your neat css, dhtml widgets can be used with this. Now you don't need to have another language with its own unique syntax and issues floating around in your head.

Competition is good for us; the designers, consumers, computer users. Hopefully, this will drive both companies to continue to innovate in the area of rich interaction tools marketed toward the design crowd. Innovation is good!

Efficiency is the key to a profitable business. Blend is an application that tries to shorten the development time involved in creating the awesome user experiences we strive for. Design the actual interface & elements, hand this very same file off to the developer to add the mechanical bits. Viola, you no longer need countless emails to the dev team that they didn't recreate your design exactly to spec.

If you want to experience this product yourself, you can download a free demo here.