web.without.words

Facebook.com

Paul — Thu, 11 Dec 2008 00:00:00 EST

With Facebook one has the chance to reopen all those old wounds and secretly rejoice in the failings of those that threw stones at you when you went on that end of the year camping trip your sophomore year. Where suddenly those who never wanted to sit with you at lunch poke you, send you plants and even attempt to kidnap you. Facebook exists only to remind us that we're all desparate for friends and peer pressure still works, even at 36.

But I'm not here to commiserate about high school geekiness but rather to dissect the anti-MySpace social networking site. At first glance, with all the text and updates and friend images, Facebook feels as if its haphazard and overwhelming, which in one sense it can be. But when all the nuiance of images, colors and text variance is removed, Facebook stands as a solid, fairly organized interface.

Its easy to pile up hatred for anything popular in the web world (for every MySpace there's a Facebook, for every Facebook there's a LinkedIn, for every LinkedIn there's a VIRBº), and become persuaded by what you hear. I'm no different. Facebook isn't as bad as I want it to be -- and believe me, I really want to dislike it. The grid (of the profile page, which you see here) is simple and straight-forward, columns, the middle as the largest with the most relevant and revolving information and the right sidebar entirely for (nearly) seamlessly incorporated ads.

Where the site begins to fall apart is in the header (notice a theme throughout these posts?). At the top most you have a your main navigation (in a different color which makes it stand out without taking over), below there the columns begin; first in left sidebar (containing your profile picture and other profile related information), the main column contains your most recent "status'. There needs to be more distrinction made between the "tabs", which are more "pages" of your profile (and inexplicably breaking the established grid system) and the functional, action tabs (which are used to allow users to quickly add photos, videos, notes, etc). The functionality is actually more than expected (using complex AJAX elements for inline updating, etc), but the placement and differentiation of these actions elements could be vastily improved.

Overall, compared to its counterpart, Facebook is a far simplier and far more functional social media website (for the general, at large, user), and if I could find more things to complain about (in its form and function), I really would.

Apple

Nathan — Wed, 26 Nov 2008 00:00:00 EST

So how does the design company approach its own design on the web?

First and foremost, Apple brings their unparalleled design aesthetic. That should be no surprise, since it is their chief product and has proven the foundation for the growth of their consumer electronics empire. They stay true to form, and buck a few normative user experience details present on nearly every other major site on the Internet.

Apple's name is hidden until you scroll all the way down to the footer. Their text-less logo is a part of the top navigation, but none of the other corporate giants I checked were so brand-confident to omit the prominent above-the-fold inclusion of their name in conjunction with their textless logos. Without using a splash page, they also manage to have a home page free of the weight of substantive content. A huge ad, a few smaller ads and some links are their only initial content offerings - a far cry from any other online retailer that approaches their sale volume ($24b in 2007).

The other prominent feature of Apple's website is their attempt to co-opt the color white. Aside from the colors on their products, the site is white, the navigational element cover a range of grays and the text stays in the grey territory with the exception of a pleasant blue (#0088CC) link color, and various international flags in their footer, they offer a completely color-neutral framework.

Of course, Apple's site is not perfect. Leave their home page and you may find yourself lost in a link labyrinth, crowded with box after box of product. But those sins are magnified by the spartan joy of their home page (consistent with their physical products and store). A quick search on "history" leads to no results in their handy insta-results, onfocus search results—it's an odd omission for such a large and storied company to omit any reference to their own history, but that's what we have wikipedia for, I suppose.

As with any well executed product, Apple has plenty of room for criticism in the design options they didn't take. Does their approach leaves sales on the table with it's often airy design? Maybe, but apple.com is about one thing and one thing only—selling design—and on that merit, they hit the mark.

The Drudge Report

Paul — Fri, 21 Nov 2008 00:00:00 EST

The Drudge Report® was the recent subject of 37 Signals contributor Jason Fried, stating that The Drudge Report® is the best designed sites on the web. I'd like to believe (as do many others) that Jason was pulling our legs, but he swears by his stance. It got my attention (most likely the point of writing just an entry) In order to make any value judgement claims one must have a standard definition of a term or concept -- in this case: "design", and then define what qualifies an "effective" and another "ineffective". Without such a common ground of understanding states like "Best", "Greatest" are arbitrary and meaningless. Without getting theoritical about what is and isn't design (and the relativism of creavity), what is and isn't good design, I'll attempt to focus (as usual) on how The Drudge Report® functions on a structural and informational level.

Lets begin at the beginning -- the top 620 pixels of the screen real estate are occupied by a large banner ad followed by another large image on top of a 50 pixel bold headline and then the official masthead. I know that screens are larger and that scrolling is insignificant in today's age of scrollwheels and 22" monitors -- but this feels; disgusting. I chose to "crop" this wasted space and focus on the masthead and below, which gets the overall structure of the site.

If one values something for the sake of its lack of conformity and stubbornness then Drudge Report® succeeds in having that web "retro" feel of something stuck in the early 90s (which I think makes the site essentially 567 years old; in web years) -- sure its fast, easy, simple to maintain, but its also overloaded with text insufficiently disgustible from any other text, uneven in column width, random in its use of images and image placement. Drudge Report® is the equivalent of a butterface. The lack of care might to some be endearing, but for me the lack of care in the overall design (which includes structure, grid, hierarchy, graphic elements, continuity and overall "story") is like a book without the plot; artwork without color; music performed by robots.

I'll quote the following (from AIGA's Standards of Professional Practice):

"6.1 A professional designer shall avoid projects that will result in harm to the public."

Amen.

YouTube.com

Paul — Mon, 10 Nov 2008 00:00:00 EST

I want to hate YouTube, I want to be cool and talk about how awesome Vimeo is comparitively (and they are), but YouTube is the first place I go to look for any video clip of -- well just about anything. Sure the video quality is horrendous, and the player is clunkly, the comments/commentors assinine and the videos hardly original; but where would I go when I NEED to find a clip of a ninja cat.

Originally a tool for hosting and viewing orginal video content, YouTube today consists of clips from TV shows and movies, concert footage and music montages -- earning YouTube a "stink eye" from Hollywood and the RIAA (but who doesn't the RIAA hate? I suspect they even hate themselves). YouTube also has an active; though what some might consider "unsophisticated", community base. YouTube has become synoymous with online video and "viral" marketing -- making it an internet brand with equity rather than hype.

To my surprise, YouTube is organized, cohesive and fairly simple -- considering the vast amounts of information stored within the site (which might be attributed to the influence of company owner, Google). I truly wanted to find more flaws and other than the overused "tab" styled buttons and thankfully limited use of gradients, the content remains easy to read with clearly understood information hierarchy (for links, icons, videos and other information). The content does not feel boxed in or crowded (though what one might consider somewhat "under designed", which again, is not unexpected given the Google link) - opting for lines as dividers of content, light gray for text that isn't as important, bolds and underlines for headines and headline links. Video thumbnails are consistent in placemend and size, while icons are fairly uniform in size, color and style (with a few "rogue" colors and sizes). The overall site utilized a simple 2 column grid (with a "soft" inner 2 column split within content). The purpose of driving users to videos without unnecessary distraction is admirable and well executed, even banner ads fit as well as possible into the overall grid.

Except for the few color deviations (yellow, orange, green), the site remains neutral, if not a tad bland and flat, but giving more reason for the uses to watch a video, than be consumed (or distracted) by less important content or elements.

WikiPedia.com

Paul — Sat, 01 Nov 2008 00:00:00 EST

That was when people taught their babies to smoke, burned gasoline in ditch in their backyard, killed deer with dull hammers and believed in something caleld "God". And they paid for information. Thank goodness for today where our information is free and given to us by a team of regular citizens who gather information based on hearsay, gossip and passed down oral traditions from spooky ghost men.

WikiPedia is an information resource with no need for gloss or glam, but certainly the information could be presented with a tad more clarity or care. Nevermind the clear after thought of "design", but the information is so even and nondescript that the information ceases to be helpful and gets lost in the line by line by line by line nature of text slamming into your eyes. The "navigation" (thankfully so clearly labeled) takes a nice side-stroll with "Search", "Toolbox" and "Languages"; which only are different from the other text in their location in a small box to the left side of page. Images are at the least the same ratio but don't mingle well with their referring text (perhaps make the text that related to images stand out a bit more?).

As a tool, WikiPedia is amazing, regardless of the fact that the "facts" may not be accurate, the repository of information is mind-numbing; but how much more of an enjoyable experience would it be if you there was as much care given to the layout and context of the information as a well designed textbook?

As a tool WikiPedia is amazing, regardless that the "facts" may not always be accurate (or even correct), the repository of information is mind-numbing; but how much more of an enjoyable experience would it be if you there was as much care given to the layout and context of the information as a well designed textbook -- using clearly delineated areas for images, charts, timelines, headlines, etc? Sadly, the glut information contained within WikiPedia allows them to ignore any plea for an effective user interface, thoroughly defined hierarchy, or well implemented graphical language.

If I had the time (and if this site were my job and paid me) I would love to present an alternative design to this proojects, to put a solution to the critiques, but since I can't and don't; I'll have to settle with a stongly worded (and hopefully informative) critique.

JohnMcCain.com

Paul — Tue, 28 Oct 2008 00:00:00 EST

They start calling you "dude" or "broheim" through they're thinning hair, age spotted forehead and coffee-stained teeth in a desparate and obvious attempt to win your approve (when in reality, we ought to be winning there's, but nevermind the worship of youth, inexperience and shallowness), and forget they've had a liftetime to be themselves, a lifetime of trials, hurts, happiness, death, change, with nothing left to prove to anyone, nothing left to market and life that is itself in need of no defense only memory. But peer-pressure doesn't have age limits.

JohnMcCain.com could be worse - much worse, and you'd half expect it to be (perhaps more like this), yet the site somehow manages to neither be awful nor great, neither overly cluttered nor uniformly cohesive. Structurally the site is straight-forward with a soft 3 column grid; unoffensive and clean. The main navigation is standard CSS (using the font Trebuchet-MS), plainly presented and easily overlooked. The overall information structure has no uniformity -- no strongly presented color palette (blue, yellow, red, brown, green), no standardized iconography, no repetitive or predictable graphic elements (move from square, to archs to circles to boxes with borders to gradients) no hierarchy information (from navigation to main content to form text to links to stories -- all the sizes of the text remain simliar in size, weight and format). The right side 'action" form is so uninviting and haphazard one is curious how many users never see it.

And that bright green "Click Here". Yikes. It screams "we had a developers meeting and had so many complaints about the button not being 'obvious' that we had to throw in the brightest possible, round button so that 'Joe Web User' would know what to do". Yet another unrelated element and color (and by the way, if you're filling out a form online and don't know to look for a "submit" button of some sort, then you shouldn't be filling out an online form at all).

Perhaps a WordPress theme would be more wise next go around? As I like to say, if you're website is a story, then what story is it teling?

BarackObama.com

Paul — Wed, 22 Oct 2008 00:00:00 EST

I thought that now would be an appropriate time to do a political (without the politics) website break down. Its not often that a candidate has a website that is so impressive as the BarackObama.com website. Though the grid varies slightly from "box" to "box" and section by section, and the amount of background images and type images teeter on the edge of making it less a website and more a brochure, the overall visual appeal is undeniable. Smooth transitions, even and calm colors with an organic transition from one section to another, an impeccable sense of balance in color, font usage and space.

Compared with the 3 other websites thus broken apart in w.w.w. the BarackObama.com site is far more designed, utlizing space, hierachy, dramatic color interplay and the art of "story". There comes a point where the gradients and drop shadows begin to feel overwhelming, but there are enough "soft spots" for the eyes to rest and the repitition of similar shapes and graphic elements aid in tying all the units into a whole.

Regardless of your political views, BarackObama.com is an excellent website on many fronts.

Google.com

Paul — Mon, 20 Oct 2008 00:00:00 EST

As a child Google was a know it all, who thrived on being right. Even in the remote chance of him being wrong, and someone having the fortune to have caught his foible, Google managed to make anyone appear dumb. Yet through it all he remained charming, and endearing to most students - somehow managing to become class president (through process of accumulation, which infuriated his school-time rival Microsoft who did the exact same things but somehow always ended up in the school newspaper or principals office). Google can often be seen looking for his name in the library index cards.

Despite Google's purposeful lack of design and supreme faith in functionality the "main" website remains crowded amongst of vast open space -- like 3 people ass-to-elbows in a freight elevator. Why not align text and information page-center and flush left? As monitor resolutions grow (with 86% of screen at 1024x768 or higher) the triangulation of the "header" area, contrasted with the search area becomes tenuous (as the eye finds it harder to "connect" the space the wider it becomes). I've tried to admire the "simplicity" of the site, but find it superfluous.

Don't get me started on the logo (obviously designed by an IT guy who "had to throw something up" as they presented to investors) - I have never ever liked the Google logo ever; but that's not the point of w.w.w.. The overall sense one gets from any Google page; not merely the main landing pages, is that functionality and bare-bones simplicity -- reinforced with a sophisticated use of emerging technology in AJAX, etc -- trump any infusion of design to enhnace the user experience. I do admire their strict adherence to keeping the interface and overall look as simple as possible, and not succumbing to fads and trends, the lack of distractions makes the overall user experience (nearly) fool-proof.

Yahoo.com

Paul — Tue, 14 Oct 2008 00:00:00 EST

Church on Sunday's, only cursing when they stub their toe, with 2.5 kids (literally, 1 kid has been sawed in half just to make the statistic apply) with 3 bedrooms and 2.5 baths, working a 9 to 5 and overflowing with aquaintances. But deep down identitless, aimless and living one day after another without being anything but lukewarm.

Yahoo doesn't seem to be able to decide if its a "search engine", a news site, or a portal for everything imaginable. The icon system is varied, too complex (for their relative size). The images are inconsistent in size and scale, as are the text sizes. The hierarchy feels somewhat muddled and overly bland (using AJAX as a gimmick, more than an helpful tool).

And what don't I like about the site? The header. Again, a header that seems a thrown on after thought (though, I can't say that I have much room to talk) ... it seems like the idea was to hit every corner of the header and leave the "middle" for the logo and search; but the outcome makes ones eyes feel trapped. Yahoo doesn't so much hate you, as it does feel that you (the "average" user) isn't sophisticated enough to find what you need without blinking arrows, shiny buttons and a glut of information.

CNN.com

Paul — Wed, 08 Oct 2008 00:00:00 EST

It becomes clear - quickly - that the CNN.com site is content heavy (it is a news site after all). Even without the subtle visual noise that letter-forms create the site feels cluttered and somewhat overpowering; but vastly improved over previous incarnations of the site. To me, the header/top portion of the site feels incongruous with the "fixed" style of the rest of the template.

On the postivie side, the information stays along a visible grid with simliar sizes and line heights. The images also have a clear hierarchy that helps to break up the monontiny of text (the featured story occupying the most space in terms of text and image size). Compared to many other large news websites, CNN.com does the best it can at presenting vast quantities of information to a large and varied demographic while remaining clean, uncluttered and predictable (which is a good thing, really; it is).