Piece of web-art

For the past few days I have been working on a Silverlight demo along with David and Ted that our management is planning to present to internal folks. Since we did not have a Designer who would "pretty" it up, making the demo look polished and professional was a task that was thrust upon us. Having never really played with anything beside Paint to create any digital art and with absolutely zero website design experience, getting familiar with the Expression suite and coming up with a good looking and usable demo was a tough one for me. It seemed so easy before I started though because I thought I was good at art in school and generally had my creative juices flowing. But when it came to website design, keeping it simple yet elegant meant curbing my creative instincts at most times in favor of usability. Also, given that this was my first stint with Expression my thoughts did not translate very well digitally.

From my brief designer experience I learnt that it is important to...

• Know the tools: Designer tool tutorials are a must if you would like to successfully create what you have in your mind. If not you will keep struggling with a bezier curve not behaving properly or a gradient not displaying the right shades. I started off thinking that I will learn as I go but as I did the tutorials in later periods I realized how much time I would have saved if I had known that one cool feature.
• Create the skeleton before you add the flesh: It is important to make sure that you understand where different controls will be placed on the page and the individual tasks each of them enable. The framework should be independent of any "design" work you do and should be used as a blue-print to which you will add granite or marble. I created a button in Expression Blend and spent hours getting the right gradient on it. It was all glossy and shiny and raised. Yes, it looked like a great button but what I had thought it would do, where it would be placed and how it would customized was not aligned with how the website ended up being and it never made it into the demo. I should have insisted on fleshing out details on the raison d'etre of the button. It was a good Expression experience nevertheless but I do not wish to repeat the same thing in the future. If the original design is bad no gradients are going to save the day.
• Get the colors right: I can go on boasting about my discerning taste in fashion but when it came to translating that taste digitally I was a disaster. I committed all possible fashion faux-pas possible and I was greatly embarrassed by my choice of colors. Shawn pointed me to a cool site by Adobe that helped me overcome this handicap to some degree. Things to takeaway: Don't use colors that are too over-powering, keep them in sync with the general theme of the site, don't use too many of them unless they look really good, basically you know it when you see it, use colors to aid users not to distract them, be consistent with them across the site, use colors to draw attention to actionable items.
• Draw the object by hand: Now that you know what goes where make sure that you have the art for the individual components well sketched on paper. A lot of times I went back and forth struggling with what I thought was possible in Expression but not doing it in the end because I was unaware of its complete feature set and ended up with something that did not remotely resemble what I had in mind. Although it was a rough idea, I would have been better off first drawing it on paper and confirming that my mind and my hand were on the same page. Drawing it on paper allowed me to be more creative as well than when I was attempting to create something in Expression from scratch. Also, I would recommend looking at the world with vector graphics glasses to create cool real world graphics. I do not see a my bar stool back, but an ellipse with a warp applied and a elliptical gradient. That helped me a great deal. Forget your imagination, just place an object in front of you just like painting a still life picture.
• Keep the design layer separate from the programming layer: This bullet is easier said than done. My attempts to be loyal to this one caused me a lot of agony. I hope to improve on this further and avoid not overlapping the two and share my learnings with you.
• Keep it simple and focus on the end goal: You can be lured into using lots of curves, gradients, colors to make it look awesome but you don't want the styles to steal the thunder from the website's true goal. They should merely be there to complement them. I went overboard at times trying to add to add curves and shadows everywhere or getting the right level of transparency when they were unnecessary and weighing the website down. All that the button was trying to do was open a file dialog. Let it be no more than that in look and feel as well.

I am sure that the things I talked about here may be very obvious to lot of you and you may find plenty of mistakes in my approach. But it was a decent learning experience for me and I would love to hear your thoughts on what I could do to change and/or improve and learn more tricks of the trade.

And now that I am off this campaign I will begin my search for some books that will help me hone this skill. If you have recommendations let me know.

Kirti

Comments

• Anonymous
  October 08, 2007
  PingBack from http://www.artofbam.com/wordpress/?p=6349

• Anonymous
  October 08, 2007
  For the past few days I have been working on a Silverlight demo along with David and Ted that our management

• Anonymous
  October 16, 2007
  funny you mentioned adobe for choosing colors while using expression.  but then again, how can you not mention adobe when talking about silverlight?