webcreme is cool

Webcreme is an index of well designed web pages going back to 2005. So far it contains 300 pages choc-full of great designs. For extra fun you can sort them by color. Large screen shots show you what to expect at each link, which is much more helpful than the usual page full of bookmarks. Webcreme itself is well designed and simple to use.

Some Cool Free Fonts

Usually if you run across "free fonts" on the web, what you probably have found is a web site full of bad, old, quasi-legit truetype fonts. Pop-ups will abound. License agreements will say "for non-commercial use only."

Brian Kent is a type designer that has done something really great. He has made well over 100 fonts, and put them online for free at Aenigmafonts... most of them are good, and some are fantastic. Further, he goes out of his way to say you can use them however you like, which is extra cool if you want to use them for something like a CD cover. Right now I'm really digging Dynamic.

Notes from Luke Wroblewski

"Usually the main navigation system is your site's organization progressively revealed in visual form. I say progressively, because each level of information in our schematics most often translates to one set of navigation menu options. And while the first level of navigation should show up on every page in our site, putting the entire organazation on each page is likely to add lots of clutter and just confuse our audience. As a result, we frequently reveal each level of organization only when a user selects its "parent" category."

Page 48-49. - Site-Seeing A visual Approach To Web Usability by Luke Wroblewski

"Your audience will be confident that they can get through your site if they know they can count on a set of consistent links to be there when they need them... Retaining consistency within a navigation system means keeping the location, order, amount, and relative visual characteristics the same throughout the site. A continually moving navigation system with disappearing options is a surefire way to diminish user confidence."

Page 50. - Site-Seeing A visual Approach To Web Usability by Luke Wroblewski

How to include a Blog on you web page.

It seems like a simple enough task, but adding copy from a blog into a static web page proved to be more complicated than I originally thought. Mr. Wiggins was kind enough to tip me off to Magpie, but my irrational fear of PHP kept me looking. My new found love, jQuery lead me to jFeed but I wasn't able to get my FeedBurner feeds to work in Firefox under OS X. I finally found my answer in a blog on Vandelaydesign.com. The short version is FeedBurner its self has an application called BuzzBoost under the publicize tab. Activate it, configure it, and it creates a small chunk of JavaScript to paste into your page. Hopefully when Google crawls my homepage it will index my sourced in posts. Read the original if you need the nitty gritty.

Notes on Memory I'd like to Remember.

My edition of The Essential Guide to User Interface Design is from the 1990's, but it is still a fantastic book. A new edition is out, if you are interested.

"Memory is not one of the most developed of human attributes. Short-term memory is highly susceptible to the interference of such distracting tasks as thinking, reciting, or listening, which are constantly erasing and overwriting it. Remembering a telephone number long enough to complete the dialing operation taxes the memory of many people. The short-term memory limit is generally viewed as 7 +/- 2 "Chunks" of information (Miller, 1956), and knowledge, experience, and familiarity govern the size and complexity of chunks that can be recalled. To illustrate, most native English-speaking people would find recalling seven English words much easier than recalling seven Russian words... The human active vocabulary (words that can be recalled) typically ranges between 2,000 and 3,000 words. Our power of recognition is much greater than our power of recall, and this phenomenon should be utilized in design."

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

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

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

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

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.

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!

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.

This is a test.

This is only a test.