For example, what constitutes a wrong is an element or a motif that does not add to the cohesiveness of the communication. I have a hard time departing from an established visual language. If a link is blue, it makes sense for all links to be blue. If the color yellow is used to express “you are here”, it dilutes the communication to use it in another fashion. (This is an over-simplification and you can lean on things like context and established convention to bend the rules, but the concept remains).

In other words, what I’ve been doing is reducing design components to their atomic unit, attaching meaning to them, and using these basic building blocks to define the visual language.

However, what I consider good design is usually a bit more textured than the above methodology can justify. A better model for evaluating design is propositional density, which I’ll let Moritz Stefaner describe using the Fed Ex logo as an example:

Let us start with the notion of a proposition: in this context, a proposition is simply an elementary, atomic statement about the object at hand. “The FedEx logotype is purple” and “The FedEx logotype is set in a sans-serif font” are propositions, and because they describe salient, perceptible properties of the design, they are referred to as surface propositions.

Now, the FedEx logo became famous for a perceptual trick: The white space between the E and the x creates an arrow. This arrow induces, by its semiotic reading, a number of additional associations and readings of the design: “FedEx is on the go”, “FedEx is forward-thinking”, etc. Note that these propositions, unlike the surface propositions, are much harder to enumerate as they depend on the meaning that the observer ascribes to the arrow. These are called deep propositions as they describe underlying and often hidden meanings of the design. You can think of an iceberg, where the surface propositions are over the water – easy to see and clear cut – but the much larger part is under water.

These two concepts can be combined into a simple formula to calculate propositional density: # deep propositions / # surface propositions.

Generally speaking, good design usually has a high propositional density. On the other hand, if your propositional density is below one, you probably have superfluous, merely decorative elements in your design, which do not add to the deep reading.

Attempting to calculate this is neither practical or precise, but the recognition of deep propositions allows us to escape a rigorous system like the one I described and dabble in design elements that I would otherwise discard as decoration.

These monome devices, described as “adaptable, minimalist interfaces”, let you hack a grid of lights. The extreme design reduction liberates the device’s perceived potential. Adding any extra features to the device would be like replacing a blank canvas with a coloring book. The device is built by two people from the future, brian crabtree and kelli cain, where capitalization has long been regarded as superfluous decoration.

I found this description of product design particularly poignant, mostly because I’ve made this same mistake:

In general, most people think they’re building an everyday app, but they’re not. When the actual use patterns are discovered, most apps will be used every few days or less.

The rest of the article is spent postulating on how LinkedIn could bridge their ambitions to be an everyday site. For me, the more interesting problem is acknowledging that you’re not an everday app while still positioning the product to succeed.

To the contrary, I think Twitter is complicated as hell. Explaining the value proposition to an internet-savvy person accustomed to a service like Facebook can draw the same blank stares as explaining it to your grandparents. The 140-character limit feels arbitrary and limiting. Twitter search, a product with incredible value, remains hidden from the general public. Dozens of clients and hundreds of Twitter-based websites add to the cacophony.

Part of the reason it’s so difficult to explain is that it’s not a website and it doesn’t have an explicit purpose, meaning the conventional vocabulary to describe online properties fails here. It can be better seen as a medium of communication where the value proposition is completely contingent on how the person chooses to put this medium to use.

All this, just to say that I am loving the Cocoa IV drip from @scottstevenson and @cocoadevcentral even though it represents a departure from my approach of only following people that I’m somehow personally acquainted with. I also have a thing going on with the robot from @popurls, who’s got some jokes.

In the end, the affordance of the final implementation ended up getting in the way, but the concept was retained in a more understated form.

We’ve taken another tack this time at not breaking your train of thought by using default fonts and a Firefox-gray background. Instead of taking the over-the-top cognitive shield approach, we are trying to make the page “fit-in” to ameliorate a visually jarring experience. After a couple days of testing and feedback, it seems to work.

While I’m not willing to give up on the concept of abstracting secondary tasks / information in the bold way the original concept proposed, a sufficient cognitive shield will always be available in the form of a good visual hierarchy and adherence to the principals of information design.

While the data crunching wasn’t meant to be empirical or conclusive, it did offer a look at a new class of relationships: the relationships we maintain passively, through products like the Facebook News Feed. The number of people in this relationship segment was significantly higher per individual. Whereas we communicated directly with about a dozen people, we passively maintained a relationship with about 30 people. Cameron describes this class of relationship management:

This consumption is still a form of relationship management as it feeds back into other forms of communication in the future. For instance, a high school friend uploads a photo of her new puppy and this photo appears in your News Feed. You click on the photo, browse through a host of other photos and discover that she has also gotten engaged, which may lead you to reach out to her.

I think there are meaningful parallels (baseless assumptions) one can draw between our capacity to maintain relationships and how we interact with websites.

Without my RSS reader, I oscillate between a handful of sites, outside of which, I struggle to find a new vector for my web surfing. There is the “core” group of sites that I visit very regularly with maybe a couple of dozen supporting sites where my visits are driven by a specific context (i.e. share a photo, read product reviews, post a link, etc.) or because I happen to remember about it. This list of core sites has not grown much in size, but members of that exclusive club are always changing.

A lot of consumer sites that are being created are done so under the pretense that they will be “destination sites” — a site a user will explicitly choose to visit for one reason or another. Assuming the number of our core sites remains relatively constant — achieving destination-site-mindshare is an uphill battle, since it means unseating an existent core site. Your value proposition needs to be that much greater. For that reason, most people visiting your site will be new and most of them will not come back.

I think this stresses the importance for your website to broadcast in some capacity and provide the means for people to maintain a passive relationship with your website, which in turn creates inroads for a more directed interaction down the line.

Addendum

For the fun of it, without the aid of my feeds, my current core sites for an information fix are:

• Digg
• Reddit
• Hacker News
• Huffington Post
• Daring Fireball
• Boing Boing / Boing Boing Gadgets
• NYTimes

What are your core sites?

Maybe even more interesting than trying to guess on the sites, if you use Safari 4, a screenshot of the Top Sites feature would probably be quite telling. (The Top Sites feature seems to support the idea that the list of sites we interact with most-often is rather finite.)

Reset

Every single CSS framework out there that I’ve looked at ships with a reset stylesheet. I think even the most framework-averse CSS artisans can find value in reseting the browser defaults and have all the elements start off on equal footing, regardless of browser. There are a couple of options for this, you can go with the industrial reset.css, courtesy of YUI, or with the local, organic variety, via Eric Meyer.

Font Reset

Font-sizing is another area that is hard to do “right”. Ideally, you want your fonts to scale when the user changes their browser’s font-size setting. Doing so means using relative units, which means lots of added complexity (i.e. arithmetic), and even then, consistent results across browsers aren’t guaranteed.   There are a couple of schools of thoughts on text sizing, but I like to err on the side of Yahoo.  If anything, they’ve put their YUI framework through a testing gauntlet, so you can be confident that their methodology will produce good results.  You have to use percentages to set your font-size (easiest to reference their percentage → pixel translation table), but outside of that inconvenience, you get scalable font sizes virtually for free.

Neutering deprecated elements

I noticed Tripoli using this strategy. They take the likes of the <font> and the <center> tag and hinder their ability to affect the page style and layout. It’s a pretty interesting way to discourage their use and making bad habits a bit more toothless.

Setting good defaults for core elements

One of the most jarring things when you first switch to using a reset stylesheet is that writing simple, semantic markup no longer results in an intelligible document by default — all the headings, paragraphs and lists are the same size and so are the margins between the elements. You’ll feel like you’re doing a lot of extra work defining that which should be more implicit. Either way, if you’re far enough into a project, even if you didn’t use a reset stylesheet, you would probably have redefind those elements anyways , as the browser defaults aren’t good. Defining smart defaults on top of the reset stylesheet helps you save time redefining these basic elements, while establishing a more rigorous typographical system than the browser defaults could ever provide.

Concept of a template for basic layout

A lot of the frameworks use the concept of a template. You start off by marking-up your document with a pre-defined structure of common elements. For example, you’d add the header, navigation, content, primary-sidebar, secondary-sidebar and footer to your HTML.  Once these pieces are in place, you can liberally change the layout from fluid to fixed, as well as change the order  in which the sidebar and content elements display – all by adding one <div> around the common elements that specifies the template you’re using as a class.

Modular Components

There are many common interface patterns, but most don’t merit being included on every single page. Things like pagination and, arguably, form styles are great candidates for including individually on top of the core CSS framework. You would include these components only when you need them.  There are a lot of good thoughts in this presentation from Yahoo’s Nicole Sullivan on how to best abstract site components in terms of structural markup and CSS classes. Particularly, pay attention to the concepts of “extending” components by adding classes, as well as “separating the container from the content”.

Pseudo-namespacing

All re-usable CSS components should use class names with some standardized prefix. For example, instead of using “.block” you’d use “.ez-block” to define a generic class block. This helps identify the component as a piece of the framework and gives the developer working with the framework sufficient caution when over-riding those styles. This also helps minimize conflicts when including javascript and CSS modules that aren’t endemic to your CSS framework.

Bringing it all together

With all of this in mind, this is the list and order of all the CSS components that would be included to make up my ideal CSS workflow. 

Notable CSS Frameworks

• YUI
• Blueprint CSS Framework
• Object-oriented CSS
• Tripoli
• YAML: Yet Another Multi-column Layout
• 960 Grid System

In this shopping cart example, a lot of the variations have fundamental design problems, so my [unverified] prediction was dead on.

However, the latest gave me pause. I’ll let Harry Brignull set it up:

Which one of the designs below do you think got the highest number of clickthroughs to an item detail page? And which one do you think got the highest number of ‘call me back’ requests?

Best at Cruises - Variation A

Best at Cruises - Variation B

As an FYI, Google’s Website Optimizer helps you perform analogous tests on your site for free.