6 hours of videos. Get your popcorn. Scott Gu-athon.

• Silverlight intro, what's new in v.3  (zero to 60)


• Visual Studio 2010 IDE, .NET 4.0, ASP.NET 4.0


• MVC (File/New, MVC 2 features, Unit Testing why and how)

http://www.vimeo.com/user2306475/videos

Videos are in 30 min parts. Most are downloadable. 

Immerse yourself.

A previous post explained symmetry and asymmetry, the yin and yang of effective design (different, but inseparable).

Symmetry helps the viewer group items into a "box" (category).  Asymmetry provides a touch of visual interest.

Take a look at a screen capture of a web page with several images.

Each image was originally completely different, but a few things tie them together as a single group:

The center image is different in its orientation, but it has the same dimensions as the other images, just turned on its side.

The boy in the straw hat was a black-and-white photo scaled down and cropped to the same size and dimensions as the others, but it looked out of place.  It drew the viewer's attention to itself as the only image without color.  (Interesting.  When everything is colorful, something black-and-white stands out.)

I tinted the grass green and the sky blue, giving it a look similar to hand-painted photographs from the early 1900s.

Then to tie the images together as a whole, I placed the center image so its horizon line was even with the baseline of the top-left and top-right images.  The center image is not exactly vertically spaced between the top and bottom images, but this gives the group a slight asymmetrical visual tension.

Another unifying feature is the same color is used as the background for the HTML body of the web page and as the background for the Silverlight application.  You don't have to stick with the default white background that Blend or Visual Studio give you on a new Silverlight project.

Note how the arms and legs of the center image point directly to the other 4 images. This unifies the group as a set of interrelated images. I didn't plan it.  It just turned out that way.

To see the full web page and hear the songs (Silverlight required), visit http://www.avrashow.net/music/Default.html

This article from ASP.NET Pro magazine (Apr 2009) describes the simple steps to add Silverlight to an ASP.NET page. Silverlight skills will be important for any Microsoft Web developer to know in the future. You can read this article and put video or a simple Silverlight application on any ASP.NET page in minutes.

Whenever you show a group of related items, it's important to show 1) that each item is different and 2) that items share some commonality that places them in the same conceptual group. These contradictory goals are most easily achieved by having the individual items be noticeably similar, but visually unique.

Here are some buttons from a web page I designed. 

The unifying features are:

• All have the same size and shape and border
• All use the same colors (black, white, and gray with a blue border)

Yet within these constraints, each button is unique:

• The camel is shown in negative space -- it's what's not there that looks like a camel
• The snowflake has shades of gray
• The chameleon is defined in negative space, like the camel, but also has shading suggesting skin texture and three-dimensional detail
• The porpoise is also defined using negative space
• The palm tree uses shades of gray to suggest lighting effects
• The man was someone "whose presence in London could compete for attention with an eclipse" so having the face extend past the boundaries suggests someone larger than life

I'll explain how I (as a non-artist) created these images in a subsequent post. The color scheme or lack thereof was chosen purposely, as I'll explain in the next blog post on " Using Color Effectively."

Graphics you place on a web page or in a Silverlight application can sometimes be more effective if the image file boundaries are not seen. This is especially true when the main subject in an image is non-rectangular.

Here is a blog post I wrote about a kitchen utensil:

A graphics file has a rectangular image area. If the main subject is not rectangular, a background color generally fills the areas where the subject isn’t to make the image rectangular. And when the main subject IS rectangular, it might be smaller than the dimensions of the graphics file, so a background color fills those areas the subject doesn’t extend to.

Compare the graphic in this blog post where the graphic has a transparent background and is seamlessly integrated into the page:

Some graphics formats (png, gif) allow transparency.

There are several ways to achieve transparency and semi-transparency with graphics in a Silverlight application or on an ASP.NET Web page that I will describe in an upcoming blog post. Stay tuned.

Open Microsoft Word and you will see about 150 font choices (Office 2003 on XP)  or even 250 (Office 2007 on Vista). Some of them are for symbols or different languages, but you still have a dizzying array of choices. Where to begin?

Let's start with two basic categories of fonts:

• Serif fonts have little embellishments on the ends of the letters:
  
• Sans serif fonts are often used for headings and do not have embellishments on the ends of letters:
  

Serif fonts are often used for body text in book publishing or print magazine articles. The London Times newspaper created the Times New Roman font which is perhaps the most common choice for body text such as in a newspaper article. The curly terminations help the eye scan words quicker when reading lines of text.

Here are some serif fonts:

• Times New Roman
• Bookman
• Garamond
• Goudy Old Style
• Palatino
• Georgia

Sans Serif fonts such as Arial or Helvetica are often used for headings or for large lettering such as signs.

Here are some sans serif fonts:

• Arial
• Arial Black
• Arial Narrow
• Futura
• Verdana

Which newspaper headline has the most impact?

Viewing Fonts Onscreen

Georgia (serif) and Verdana (sans serif) were designed for use on computer screens and are easy to read on screen at small sizes.

Some designed-for-print fonts lose their subtle variations in line thickness and gentle curves, especially at some point sizes (type is measured in points, 72 pts per one inch. Traditional printers had a limited selection of point sizes. That's why you often see 10pt and 12pt sizes for body text and 24pt and 36pt for headings.

Generally  you should still use these conventional settings because the eye sees a 12pt body text or 24pt heading as normal and correct. But you can use the computer's ability to scale fonts to any size. There are sometimes I find that 10pt is too small and 12pt too large. Try using Verdana 11pt for emails you write.

Other Types of Fonts

There are several other specialty classifications of fonts:

• Calligraphic or script fonts
• Decorative casual informal fonts
• Symbol fonts (Dingbats or Wingdings)
• Monospace fonts (Courier and the like)

Examples

For the quotes from Ben Franklin in my previous post, I used Garamond as it is an old fashioned font often used by printers. I used a bold version for the heading and regular for the individual quotes.

You can mix traditional and modern fonts sometimes for a nice effect. Here is my .NET samples page, where I used Verdana for the heading and Garamond for the list items:

You can use informal fonts for large lettering, as I did here (you wouldn't want to read paragraphs of text in this font).

And finally, sans serif fonts are traditionally used for negative space (white text on a dark background):

This used to be done because ink would seep into the small curly serifs on letters. Now it just looks right because we've seen so many examples of sans serif used to define negative space.

Here is a Web page consisting of text.

Here is an illustration of a child.

Here is an airplane with a fish design (no special effects, BTW).

Here is a drawing (top hat? short Greek column?).

Adding a Gradient as a Design Element

A gradient can add visual interest. The Web page previously shown has just two colors: blue text on a white background.  By adding a gradient at the left side of the page, the page has more visual interest.

The gradient softens the previously monochromatic (one color) design. It acts as a kind of bridge that goes from dark blue (the text color) to white (the background color). The gradient also reinforces the page layout, acting as a vertical column that reinforces the invisible line formed by the left margin of the heading and text lines.

Using a Gradient to Simplify an Image

This was the photo I used as a basis for the illustration.

The piano and power cord distract from the main subject, so I replaced them with a background with a gradient that is brighter on the left and slightly darker to the right.

In this case, the gradient adds a visual hint that the objects are in a realistic space. A solid color background would make the illustration look flat.

Did you notice the gradient in the illustration before I described it?

The original picture of the airplane has a cloudy sky that competes for the viewer's attention, so I replaced it with a simple vertical gradient. This makes the plane more prominent. Addition by subtraction.

Using a Gradient to Give a 3-Dimensional Appearance

I added some rectangles with semicircles to the "side" of the cylinder and a rectangle with white rectangular dot on the "top" of the cylinder of the geometric drawing shown earlier in this post.

These added rectangles represent indentations for gripping and turning the plastic knob. The rectangle on top of the knob indicates where the knob is pointing.

The effect is convincing because the gradients used on the plain shape shown earlier trick the eye into thinking the graphic represents a three-dimensional shape with light reflected due to its curvature.

Summary

We've seen how gradients can be used as an element in page layouts, as a background that adds power to an image by eliminating unnecessary details, and as a visual device that suggests three-dimensional space.

There's lots more to cover. I know I didn't give any how-to directions or even suggest what techniques were used. I'll cover all that and plenty more. Stay tuned.

Many developers say they have no design skills. Some say it apologetically, some proudly. You may have no artistic ability (nor do I), but the good news is that you can use the computer to draw the graphics for you. Whether you are a WPF application developer, an ASP.NET web site developer, or work with any other technology that displays something for a user to interact with, there are simple rules and guidelines, principles if you will, that apply to your presentation layer.

Microsoft is making it easier to separate appearance from behavior. ASP.NET 3.5 in Visual Studio 2008 offers much better handling of Cascading Style Sheet (CSS) files. And WPF controls can be styled to look almost any way you want. Still, the ideal situation of having a dedicated graphic designer on your team may or may not be a reality.

Besides, you may be able to give that designer some ideas that he or she can apply their magic to. After all, you have an understanding of what the user wants to accomplish with your user interface, so offering one or more possible design ideas to the designer on your team can only improve communication.

But I'll bet that there are many small teams that don't have a separate designer job title. If you're in that boat, and your boss is hankering for some of the nifty animation and gradients and rounded rectangles and something-instead-of-boring standard buttons, you might enjoy this series of articles.

Topics to be covered:

• Gradients — a developer who wants to show someone a gradient might define a rectangle with a gradient fill that goes from blue to orange. To show off the power available with gradients, he or she might define a colorstop of purple at the halfway point. The only problem is that I can't picture when that combination of colors would ever be useful.
  
• Animation — I've seen more than one presenter demonstrating how to do animation expressing a hope that this will not be used for evil purposes (the next generation of blink tags). If you apply rule #1, given at the end of this post, you will be ready to use animation and gradients in an effective and professional way.
  
• Fonts — We have lots of fonts at our disposal. You may want to try something new and different, but how do you go about doing something different that is still harmonious and effective? I'll give you a crash course in typography so that once you know the rules, you'll know how to break them.
  
• Color — There was a time that most web sites had a bright background color. But just because something is possible doesn't mean it should be done. There are books and courses on color theory and harmonious color schemes. A few simple principles and examples will help you avoid using colors that don't support your purpose.
  
• Layout — Arranging the elements on a web page, a printed page, or application window should help the user (or viewer or reader) organize the information without effort. Your users should understand what you're presenting at a glance--they shouldn't have to struggle to see how information is interrelated. Information should come off the page or screen like hotcakes off a hot griddle--it should slide off without a struggle.

Rule #1: No graphic design element or effect should call attention to itself. Design should be invisible.

The next post in the series will be about gradients: how to create them and where to use them.