in

ASP.NET Weblogs

Austin Avrashow

  • The Value of Minimalism (Less is More)

    One of the principles graphics expert Edward Tufte advocates is doing the least necessary to achieve a desired effect.

    An obvious example is blinking text on a Web page. This effect was once popular to call a user's attention to an area of a page. Blinking text is annoying because even after the eye is drawn to that part of the screen, the effect continues annoyingly. It also interferes with any attempt to view other parts of the page. One alternative might be to color the background of that area in a semitransparent yellow (a highlighter effect). This follows the principle of using just enough of a difference to attract a person's attention.

    I put an image of a note written by Abraham Lincoln on a Web site. I wanted to provide a "Next" link so people could view the second handwritten page. But I didn't want this link to interfere with someone's view of the image. Instead of using prominent bold text, in a fancy scrolling font, in a large point size, I made the text of the link a soft gray (went well with the black & white image). I chose a sans serif font (no fancy curly serifs on the letters). And used plain text, not bold (which would have risked competing for attention with the image).

    You can view the page at http://www.avrashow.com/lincoln/gettysburg1.htm

    Note: I believe this was written out by the President after the speech was given.

  • DeepZoom Tips and Techniques

    Deep Zoom Composer allows you to create graphic images that people can zoom in on interactively.

    Typically, people use DeepZoom to make collages (collections of images arranged irregularly) or tabular, grid-like arrangements of equal-sized images so viewers can choose an image to zoom in and see more detail. The Hard Rock Café memorabilia site created by Vertigo is an example of a large collection of individual graphics arranged on one page. Another use of DeepZoom is to show a photograph of a large area, such as a panorama of Yosemite, so people can click a selected feature to examine it in detail. DeepZoom is also useful for showing a map of a large area that someone could zoom down to street level.

    But you could also use DeepZoom to allow exploration of a single image. I created a website for a PCB layout and design engineering services company. They take schematic diagrams of circuits from electrical engineers (a logical view of a circuit) and arrange where the actual physical components should be placed on the rectangular area the actual circuit board size and wire up their interconnections along with power and ground connections.

    This process of determining where to place the interconnections between components is sometimes aided by autorouting software, but a skilled PCB designer is still needed for laying out complex dense digital circuitry on a small area circuit board. So the idea was to show samples of the company's work so that engineers could see the type of work the company was capable of doing for them.

    I did a slideshow of a board design in progress and another showcasing their finished work. But I thought that a design that engineers could explore interactively would give them a better idea of the company's workmanship (and get them involved, not just as passive viewers), so I created a DeepZoom image of one of the finished designs.

    A Printed circuit board

    On the finished page, you can zoom to an astonishing detail. You can fill your screen with one of the tiny red dots. But my first attempts were unsatisfactory. The image began looking jaggedy after one or two clicks. The problem is that the source image is a JPEG or PNG file, which is not resolution-independent (i.e., not a vector graphic).

    To solve the problem, I asked for a series of screen captures of the upperleft, upperright, lowerleft, lowerright portions of the design. They could zoom in using their design software and keep the edges and lines sharp. I used Photoshop to create a new blank image with a very large area and pasted the parts of the whole image in place.

    There were several places where the images didn't quite line up due to inconsistencies rounding off to the nearest pixel, but these would be overlooked as refresh problems on the screen. Once I had a large stitched-together unified image exported as a PNG file, I was ready to open DeepZoom Composer to place it on the design surface.

    The DeepZoom Composer provides you with an HTML page with a zoomable image in the top left corner. But this is just a starting point. I added large text to serve as a title and smaller text to alert the viewer that this was not merely a static image on the page. Underneath the image, I added additional instructions suggesting that viewers should consider viewing the image full screen. There are 4 small round buttons by default in the lower-right corner of the image when you mouse over it, but they do not prominently advertise their functionality. Since full screen allows a viewer to take in the scope of the whole design, I decided to reinforce this capability with explicit textual instructions.

    A graphic design principle when choosing colors is to use color purposefully. I wanted viewers to focus on the graphic, not the text, so instead of attention-getting white text I used a less prominent gray text color. I chose a sans serif font because the little serifs on letters might be disconcerting to an engineer because on a circuit board design, these would be weak points susceptible to breakage of the circuit (or simply because they would appear too fancy juxtaposed to the rectilinear lines and shapes of the image).

    On the actual company website, I ended up using a Photoshop "zoomit" representation of the circuit board because potential customers might not want to download Silverlight if they didn't have it installed already. If that weren't available, I would've displayed a static image of the circuit board with a message explaining that they could explore the design in detail by clicking to install Silverlight (giving them an incentive to download Silverlight to get the full interactive experience).

    Tim Heuer's Silverlight Firestarter presentation has more information on customizing the Silverlight installation experience.

  • Design principle: Shared features show a bunch of items belong together

    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.

    web page with 5 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

  • ASP.NET developer? New to Silverlight?

    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.

  • The Important Design Principle of Symmetry/Asymmetry

    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. 

    6w

    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."

  • Using Transparency

    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:

    Graphic image with white background

    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:

    seamless

    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.

  • Selecting Fonts: A Quick Lesson

    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:
      serif font
    • Sans serif fonts are often used for headings and do not have embellishments on the ends of letters:
      sans serif font

    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?

    newsSMALL   news-SERIF-SMALL

     

    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.

    quotes-ben-whitebg_3

    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:

    dotnetpage

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

    freeze2

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

    genericbusinesscard

    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.

    Posted Mar 12 2008, 12:46 PM by avrashow with 2 comment(s)
    Filed under:
  • Gradients

    Here is a Web page consisting of text.

    Quotes by Ben Franklin

    Here is an illustration of a child.

    Child card collector

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

    Airplane with fish design

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

    Knob

    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.

    Web page with gradient

    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.

    photo of child

    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.

    knob

    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.

  • Graphic Design for the Code-Centric Individual


    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.

More Posts