Edward Tufte's site offers some great reading with great links to addtional resources about all kinds of interface design related topics.

http://www.edwardtufte.com/bboard/q-and-a?topic_id=1

Flash Website Awards people's choice.

Behold the beauty...

http://www.thefwa.com/pca2007/

What’s the best way to show design comps? Do you use FPO images and Latin text? Do you try to make the comp look as close to the final web page as possible?
 
Using FPO images and placeholder text can eliminate the need to have real content prepared for an initial design review, but the question here is, can your design be effectively communicated missing content? And does FPO content mislead or prohibit the client from seeing the final results?

There are times when FPO content is better (at least for the designer) than final content. A designer can pick an image that looks a certain way to strengthen the design or insert just the right amount of text to fill a space. When real content becomes available it may not fit in an allotted space or clash when juxtaposed with other content or the design itself. When this happens a seemingly solid design becomes useless.

Real content gives the client something to recognize, relate to, and judge. A design can be approved because of good content or tarnished in an instant by a typo. People know how to read words and most know how to interpret a photograph, but graphic design is a language few understand and content helps bridge the gap.

I like to have real content. It doesn’t have to be final, but it does have to represent the intended message in the amount of text and types images used. If you put in anything that can be interpreted as real content is must be error free. This is not my rule; it’s reality. No one ever found a typo in Latin, but clients love to point them out in real copy and they’ll dwell on these errors while the design suffers.

Sometimes FPO content is the only option available and other times real content is essential to validate a design and get it approved. Each client and project is different. However, it seems to work best when real content is present in layouts. Regardless of the situation, one needs to assess the client’s ability to visualize and present the design accordingly – easier said than done.

People love chocolate. Some even experience a kind of high from it and recently I witnessed the same phenomenon with good design.

We were in a client meeting. The first part of the meeting was technical requirements for a web site – important, but hardly exiting (except to me). We accomplished our goals and things went well. Everyone was serious and business-like.

The second half of the meeting was the presentation of several logos we created for a new identity for the company. The show started and by the time the third example was displayed everyone’s demeanor had totally changed. Gone were furled brows and looks of concern. A great dialog was happening. People shared personal anecdotes that related to the work they were seeing. By the time the last logotype was shown everyone was smiling and chatty. People were energized by design. Design communicated and resonated with everyone in the room, even those of us that had previously seen the work.

I witnessed the power of good design. The next time someone doubts the importance or value of design, this is a story I will tell. Design is important. It may not be quantifiable all the time, subjective things rarely are, but its importance is undisputable.

2e Creative created a cute little Flash piece to showcase their creativeness for the Holiday Season. Nice work, but to be in tune with the times they should have made a video and put it on YouTube.

Web 2.0 logos from TechCrunch. See any similarlities?

While at STLUX06 last week Nathan Verrill gave a thought provoking presentation on intuitive vs. learned behavior. Intuitive behavior is the natural ability to accomplish tasks without any training or prior experience, while learned behavior is the ability to accomplish tasks with training or prior experience.

Most folks think for something to have a high degree of usability, it must be intuitive. Cars that operate similarly and application interface menus that all begin with File, Edit, View… are easiliy understood, but can they be called intuitive? They're learned. Simple, but still learned. The practice of providing a predictable user experience is considered intuitive, perhaps wrongly, and is suited for certain situations where practicality is desired, but it’s boring.

Some web design projects call for good usability plus something extra that provides a memorable user experience - some excitement. In order to provide this type of experience standards must be pushed. This is fine as long as what is designed is easily learned. Whether it’s navigation menus, forms or rich media interaction, people are intrigued by a challenge -- as long as it isn’t too difficult. Once the “secret” is grasped, the user is off and running -- again, a learned behavior.

Not relying on user intuition and counting on learned behavior expands boundaries and keeps web sites interesting and evolving. If we did just the same ol’ thing all the time, sites would surely be usable, but the web wouldn’t be nearly as interesting.

The other day my son said something that resonated with me. He was practicing his printing skills -- he's six years old. He referred to what he was doing as drawing words, not writing, spelling or printing. What a simple yet accurate description. Isn't that what good typography is?

The act of writing is content creation, but laying out type is refinement of the display of the words. Much like drawing, typographic execution is important to communication. From now on when I'm thinking type, I'm drawing words too.

After spending some time searching the web for definitive answers on web page length and scrolling versus paging content and clicking, I concluded there weren’t any; content and users dictate best practices. Here are a few generalizations from “rules” I read:

1. Don’t split up related content un-logically. Related content should be kept together on the same page for uninterrupted flow. Arbitrary division of related content disorients people more than the act of clicking or scrolling.

2. File size and page load times should dictate how much stuff gets put on one page. Page content should facilitate quick load times. Recommended maximum page file size seems to be 50k.

3. If a web is well designed with visual clues, prudent use of space, subheads and good typography, and is structured into logical parts with not too much content, a page can be quit long and usable. Design plays an important role.

4. The hard and fast, old-school rules of lengths and click amounts have been proven inaccurate as usability data has been compiled over the past five years.

5. The key to getting users to scroll is how content is presented “above the fold”, in the visible part of the page, when it loads. Once they understand content lies below, they will follow.

6. If one is looking for a recommended web page length, 3-4 screen lengths was commonly cited as a maximum length.

7. Anchor tags (links jumping to a position on the same page), however useful, are often confusing to users since they can’t see the jump and loose all visual clues. If used, these should be denoted as such.

8. Horizontal scrolling is bad.

9. Proportional scrollbars, like a browser’s, help users determine how long the page is and should be used whenever possible.

Truer words were never spoken. Great post by Seth Godin.

STLToday has its new homepage up. From seeing the news page yesterday, I envisioned it would look better. I was wrong. It’s big. Really big. Wide and long. A sea of high-contrast. Why so much same size, no leading, bold type?

I guess you can say it’s newspaper-like because of its size, but it’s certainly not good web. Above the fold is prime web real estate. Could more space be wasted at the top? The feature callout in the center is weak, but I see Flash is suitable for their advertisers now. There’s inconsistent use of section headers. No hierarchy of content other than placement. What’s with the random colors in the “What You’re Looking For” section?

With all the fine examples of news sites and portals out there how can anyone think this design is acceptable? I give them a ‘F’.

STLToday, stop trying to design this site yourself. You don’t have what it takes. Hire professionals. The St. Louis Post-Dispatch newspaper was recently redesigned by professionals and it looks good. Do the same for this. Please!

I worked with the team that originally designed STLToday. The idea was to have a news site with a magazine layout: white space, uncluttered copy, limited use of banners ads, easy look at, and style. The Managing Director, who is no longer there, had a cutting-edge vision for a news web site.

When the site launched in 2000 the St. Louis Post-Dispatch newspaper, the owner, also had their news site running, postnet.com, but STLToday aggregated news from several sources – no easy task – and was intended to be different from the newspaper’s site.

Almost immediately the vision began to fade.

Within the first month all Flash was removed from the site. At that time the Macromedia Flash player has 92% market penetration and the few people that complained got their way. Luckily, we were able to replace the Flash elements with DHTML and kept the design intact.

The site lost money because of its policy not to have a lot of ads. They pursued sponsors for sections and tastefully displayed that affiliation, but it wasn’t profitable. The visionary Director was replaced and the site’s metamorphosis hastened.

Slowly, the new Creative Director began to change the look and in a few months the site did not resemble its original self; bevels, drop shadows and bad graphics invaded the tasteful layout. About that time the newspaper closed its site and decided STLToday would stand for all. Here came banner ads, a lot of banners. They also began to employ Flash overlay ads – those are sexy. White space was no more and clutter, compressed clutter, dominated the design.

Last year the site was completely redesigned. A hard-to-look-at red and 3D Photoshop effects prevailed. This design was ridiculous. People must have complained. (As of 6/14/2006 the homepage is this design.)

St. Louis’ number one web site, according to the STLToday, has a new look, or as of today, 6/14/2006, part of a new look.

The new design, shown on the main news and other sections, keeps the red, but it’s toned down a bit. The ads are still everywhere, but there’s more white space and they have widened the layout for 1024px wide screens. I bet they’ll hear about that. Gone are the Photoshop effects – must be a new Creative Director. This is a move in the right direction, but I wouldn’t call the design good, but it is much easier to look at. Hopefully they’ll continue to improve it and get rid of that red altogether.

I’d like to see STLToday be successful and look good, but they have a lot of work ahead. One of their biggest problems is their owner. Another is they run the site on an IBM Lotus Notes system and Domino server. This is not the easiest animal to tame. They would be better served with a different technology. There’s also the whole Web Standards thing. This is a perfect case for Web Standards. Just think of the flexibility they’ll have, less bandwidth use and improved accessibility.

I wish they would have left it as it was originally. Maybe it wasn’t perfect, but it was much better than anything they’ve had since.

I found this story quite interesting irritating. After being in the business of creating visual communication for over 15 years, I have never been a proponent of producing spec work.

The problem here is larger than spec work; it’s ethics -- as the post points out with its reference to the AIGA. Spec work, low-balling, plagiarism, bait and switch, work for hire, and flat-out lying are all related in my book and shouldn’t be done. They ruin the playing field and cheapen the services that are so difficult to keep priced appropriately.

The elimination of these practices has to come from the top, just as any example is set and the little guy always pays the price for such business practices.

It’s simple. Get paid for your work. Do your best job. Be respected. Everyone wins.

Unfortunately, It's not a utopia and you gotta do what you gotta do, but be prepared for the consequences of your actions and don't bitch when your working for half of what is appropriate.

I haven't found many sites about designing. Sure there's hundreds of sites that showcase work and have information on the act of producing the work or the author's experience, but not many that have information on designing from a academic or intellectual perspective.

Design Observer is just that

I just took a look at the newly designed Yahoo! homepage. While there are a few glitches and the design is not site wide, one can see what they are trying to achieve.  An opinion is worth want it costs and everybody has one, but I’ll offer a few anyway.

Goodbye 800x600 - The new design has been widened to fit in a 1024 pixel wide screen. Last I heard, web user’s monitor resolutions were about 50/50, 800x600/1024x768. I guess they are trying to appeal to those who have the latter – the cool people. One would think they would stick with the lowest common denominator for a site that is trying to appeal to everyone. At least they are providing an option to view the old design at the 800 pixel width. MSN and Google have the narrower format.

Web 2.0 Look - They’ve adopted some of the trendy web 2.0 design elements like gradients, 3-D icons and modular page architecture, but they didn’t go all the way by using nice font selection – not a serif on the page. This could have been pushed a bit farther.

DHTML – I like the DHTML used in the upper right box containing mail, weather, messenger…, but the tabs in the new areas are pretty weak.

Navigation – I question the order of the primary nav menu. Alphabetical is logical, but is it usable? They should have ordered items by traffic with the highest at the top. The small links at the very top of the page are useless. Most people won’t see them. The Small Business menu looks neglected. Business users need love too. I think more attention should have been put into that menu.

Image Use – The thumbnails are too small.

Advertising – I like the limited ad space, but I’m sure that will change.

Standards and Validation – Here’s the biggest question. If you are going to redesign a site like this, why is it not compliant to today’s web standards and have valid mark-up? Most of the layout is done using CSS and DIVs, but the architecture is not remotely semantic. I validated the old design using the W3C HTML validator. It had 158 errors, while the new design had only 114. I guess you can call this an improvement. (MSN had 24 validation errors) A portal for the masses that needs maximum accessibility should validate and have semantic mark-up. I’m sure they have tested the new design in a wide variety of devices, so it must display properly, or acceptably, but this is certainly not a case study for web standards. It would be interesting to learn the details on how they arrived here.

Overall, it’s a big improvement from the days when they didn’t have any design, just a logo, form and text links. They have a balance and it’s a much better site than MSN.

Nice post about the rash of similarly designed standards compliant sites from Some Random Dude.

I couldn't have said it better.

I'm a student of advertising and design and like to keep up on trends, movers & shakers and other noteworthy goings on. I've recently been seeing Stephen Sagmeister's name here and there so I thought I'd learn more about his work.

I don't get it. Why is this guy so acclaimed? After reading a few interviews and some facts about his work and business, he seems to have an intellegent approach to his craft, but his work is not that provacative or compelling. His scribled text isn't really visually appealing and he isn't the first designer to do that. Although having text scratched into one's skins does show passion. Is it the fact his work is more personal expression than good design? Does he manage to bridge the gap between art and commercial communication?

Since 95%+ web users are viewing sites using PCs and MS IE, wouldn’t it make sense to design web graphics on the same type of computer with similar monitor color temperature, resolution, aspect ratio, browser and gamma? Designers I work with often do not like how their work looks on PCs when compared to Macs. Web sites meant for public consumption should be designed for PC display. The easiest way to make things look good on a PC is to design on a PC. If you love your Mac, you can create designs that view well on a PC, but there must be some compensation and adjustment.

Gamma

Pertaining to computers and the web, gamma is the tonal curve that a monitor displays: shadow detail, highlight detail, contrast and color temperature. Default gamma for a Mac is 1.8 while a PC’s default gamma is 2.2, much more contrast. You can change a Mac’s gamma to 2.2, but it just doesn’t seem the same. Shadow detail viewable on a Mac is often lost on a PC, same for highlights.

Brightness

PC monitors are generally brighter and flat panel monitors are even harsher. When creating graphics on a Mac the brightness needs to be adjusted.

Color

PCs are much colder, or bluer by default. Be cautious about skin tones, and earth tones such as olive, taupe, dark red, and ochre.

Scale

Since Mac went to the wonderful wide screen OS X monitors, some designers have had difficulty with scale. Sure it’s easy to say my layout is 750 pixels wide, but on that huge screen designers new to that environment can design elements larger than they expect them to look. Mac monitors have a default resolution that does not match the conventional 800x600 or 1024x768 sizes of most users’ screens. It is important to check size on a PC. Type and detail in graphics may be difficult to read, or not be in balance with HTML type sizes.

Type Anti-aliasing

Mac’s display web type anti-aliased, not bitmapped. Some new PCs also have this option as a default setting. Most users do not view sites this way. It is important to see how type looks bitmapped. It affects the clarity and size of the characters and general copy volume. If type is supposed to be bitmapped make sure it is checked on a PC to see if it has the desired appearance.

Fine Tuning Color

Color management on the web is a difficult battle. There are huge variations between monitors, settings, and color profiles on user’s computers. Even different browsers can render colors differently.

The best approach is simply to test on various computers. What may look good on your screen may not on others. Remember, acceptable is not perfect; there has to be some compromise. Create images that look the best for the widest number of users. Techniques that work with print color management are not standardized for the web.