Tuesday, July 29, 2008

Who Knew, Eh?

"Most computer-aided design and computer graphics systems use bezier curves based on formulas developed by French automotive engineer Pierre Bezier. While working for Renault in 1972, he developed the mathematical representation used to describe curves in order to facilitate the design of Car bodies using computers."

    Page 22. - Practical Web Design, Feb. 2006, Issue #24

Monday, July 28, 2008

More Wisdom from Wilbert O. Galitz

More good stuff from old notes.

"Symbols have been found to be recognized faster and more accurately than text (Ellis & Dewar, 1979). The graphical attributes of icons such as shape and color are very useful for quickly classifying objects, elements, or text by some common property (Gittens, 1986). An example of a good classification scheme that speeds up recognition are the icons developed for indicating the kind of message being presented to the user of the system. The text of an informational message is preceded by an "i" in a circle, a warning message by an exclamation point, and a critical message by another unique symbol. These icons allow speedy recognition of the type of message being presented."

    Page 15. -The Essential Guide to User Interface Design by Wilbert O. Galitz


"visualization is a cognitive process that allows people to understand information that is difficult to perceive, because it is either too voluminous or too abstract. It involves changing an entity's representation to reveal gradually the structure and/or function of the underlying system or process. Visualization is facilitated by presenting specialized graphic portrayals. The best visualization method for an activity depends on what people are trying to learn from the data. The goal is not necessarily to reproduce a realistic graphical image, but one that conveys the most relevant information. Effective visualizations can facilitate mental insights, increase productivity, and foster faster and more accurate use of data."

    Page 24. -The Essential Guide to User Interface Design by Wilbert O. Galitz

Friday, July 25, 2008

Wisdom from Wilbert O. Galitz

I recently found notes on UI design that I took several years ago. Good Stuff.

"Graphic presentation of information utilizes a person's information processing capabilities much more effectively than other presentation methods. Properly used, it reduces the requirement for perceptual and mental information recoding and reorganization, and also reduces the memory loads. It permits faster information transfer between computers and people by permitting more visual comparisons of amounts, trends, or relationships; more compact representation of information; and simplification of the perception of structure. Graphics can also add appeal or charm to the interface and permit greater customization to create a unique corporate style. "

    Page 4. -The Essential Guide to User Interface Design by Wilbert O. Galitz

"A well-designed screen is terribly important to our users. It is their window to view the capabilities of the system. To many, it is the system..."

    Page 5. -The Essential Guide to User Interface Design by Wilbert O. Galitz

Friday, July 18, 2008

jQuery is amazing.

If you have any interest in Web Design or User Interface design for web applications (or UX Design, or Interaction Design... did I leave one out?), it would probably be a good idea to take a good long look at some of the JavaScript libraries that are currently available. Put simply, they are pre-written libraries that you reference inside your HTML file, and then communicate with using short, easy to read lines of code. Easier to read than JavaScript anyway. They have the benefit of being tested cross-browser, and do pretty much all the heavy lifting for you.

jQuery is the first one I have looked at, which has the benefit of being open source and seems to have a growing group of enthusiasts online. If you already know how CSS works, it's a snap to get some amazing effects that were previously left to either Flash, or a really good JavaScript programmer. What sold me was not simply the ability to animate a DIV, but that the developers had already added easing to the animations. The tutorials on the jQuery site are a good place to start, but they focus on every aspect of the library such as XML and AJAX. If you interested in UI and layout, I found these tutorials to be the most helpful so far:

How jQuery works is the first one, and helps quite a bit with understanding the syntax with simple examples.

Getting Started with jQuery has a short section called "Animate Me" that was very helpful explaining .toggle

Live Examples of jQuery is a simple page of examples that might come in handy for page layout.

Detached Designs has a great page on animations.

Web Designer Wall not only has a good page of examples of jQuery, but looks to be a killer blog about design in general.

Another library I've seen name checked around the web is MooTools but I will have to report back on that one at a later date.

Wednesday, July 16, 2008

CSS Layout and footers

Back in the days of table based site layouts, throwing a footer on the bottom of the page was easy. Put your birdseed into a table cell, and it would either stay under your content, or stick to the bottom edge of the browser window. I wasted days of my life trying to get this to work on a CSS based layouts, and finally found a way to do with with DISPLAY: table... Until IE 7 came out and removed that display option. Ryan Fait rocks harder than I do apparently. He found a great way to do this across the major browsers, and made it available to the world.

Thanks man!

Tuesday, July 15, 2008

Color Tools for Web Design

Finding the right colors for web design can be really tricky. Fortunately through the magic of math and color theory, you can take the edge off. In a back issue of Practical Web Design Magazine, I found a collection of links for web applications to help you pick colors and find matching hues and tones, and here they are:

100 Random Colors 2.0 is pretty much what the name implies. Written by Regnard Kreisler Raquedan, it picks random colors to help you get past Creative Block. This is an excellent starting place for a project. For example, you can pick a color you like, and then plug it into a palate generating web application, for example:

The Color Wizard is a great web app that lets you start with a HEX color, and generates a palate "by the numbers." Monochromatic, Analogous, Triadic, Complementary, and several others. In theory, most of these color combinations should work together, but if you start with a saturated color and hit "Tetradic"... well, your mileage may vary. If you want to find out why, the answer may be under the Color Info tab, which has a short overview of color physics and theory. If you memorize the information on this site, you should be able to bluff your way though any number of debates at Web 2.0 conventions.

Color Blender is similar to The Color Wizard, but lets you save and download your color "blends" which seems pretty cool. It has a standard RGB slider set up to start mixing your colors, although it would be nice to have a HEX option as well. You can also browse premixed palates for ideas. Right now there are well over 200 pages of blends, with something close to 250 palates on each page.

Colorcombos has a large collection of Palates, and a Combo Tester that lets you test large swatches on the screen. There is a short video at the bottom of the page that does a good job of explaining what they are up to. There are a number of short articles about color and color theory as well.

Another variation on the color palate picker is at Slayeroffice. This one lets you pick a base color, and creates variations based on opacity over 2 background colors. The defaults are black and white, but you can change them.

You now have no excuse for poor color choices, except for good old-fashioned bad taste.

Sunday, July 13, 2008

This is a test.

This is only a test.