Here is a link to the Pong landing page (you’ll see) and the actual game of Pong.

Here is my (slightly edited) letter.

Why not. I appreciate crits too, hopefully you take mine for whatever they are.

All in the spirit of love, as I saw some of your guys’ work, and love it. (Specifically Crop Hair Boutique from Design Work Life).

In my opinion:

3 column layout on the web is too much. I’ve never seen a 3 column layout that was working as well as it should (Apple Store, Amazon, all of them could be better if they only had 2 columns IMO)..

Two sidebars means there isn’t a good editor to rip out the content you don’t need.

Enter the content mantras: less is more, clutter is the enemy.

If the average user spends seconds on any given page, this is not telling me anything about you in that amount of time. Showcase sexy work that I get at a glance, big type, lots o hierarchy, something cool, more concentrated area of focus.

Beefy margins and the stark nature of the home page create a lot of visual tension, and only one area to focus on (the radio video), which doesn’t have anything to say off the bat.

A lot o fuzzy and pixelated images.

• Every image on the homepage looks fuzzy.
• Grass bg on Our story is pixelated and a little fuzzy, as well as the image on the top
• All logos on Case Studies are fuzzy. These could all be PNG8s, there’s no good reason for these to be fuzzy
• There are probably more but I’ll leave it at that

The Work gallery is nice. Arrows on project page could be more obvious, as well as the buttons in the top right. All of the white space and small buttons make for important elements that I have to look for, instead of them being obvious.

Also, about the Work gallery, the initial page with the thumbnails, I think it needs to be proportionately more image heavy in the view. The text size is fine, but the thumbs should be bigger, and more eye-grabbing.

How to get a job is cool. Feels like it should be a blog though, and not a part of your professional “we want clients” site

Love the Job Openings clip look. Simple, witty and purty.

Under Fun, there’s only one item in that menu, why have a drop down menu for it? Just put Pong in the top menu

A Simple Use Case: The Journey to the Almighty Pong

On the Pong Landing Page

• Love the animation on the page, but it is a little distracting if you actually wanted me to read that text.
• Secondly, I don’t want to read that text. I was promised sweet sweet pong. The four paragraphs of text here is not a well used opportunity for branding, it’s an extra click and will likely never be read.
• “Play now” should be bigger and or more obvious
• The animation should be clickable
• My final point on this page, why does this page exist? Why doesn’t the Pong link in the menu take me directly to Pong?

The actual Pong

• Tooooo small!! Why isn’t it 100% by 100% and keep the scale mode proportional (don’t remember the actual parameter or value)
• ALL of the buttons on the opening Pong page are TERRIBLE. I have to click the stroke of the type that makes up the button. Let me repeat, the stroke of the type is the hit area.
• When I can hover over the play click area and play, I would expect that my mouse would disappear and i’d instantly be controlling the paddle no matter where my mouse was or what the state of the buttons are (nothing, hover, click, release)On second thought, click (anywhere since the mouse is invisible) could be pause.A simple listener and the smallest bit of math can make this happen. If you want it even sexier, the paddle could have a bit of a delay on it, rub on a polynomial equation of funk for this effect.

I feel robbed of the sweet promise of pong.

That’s it.

Again, love your work, hope you don’t think I’m trying to be a dick, congrats on the new site, and the awesome work

- Wes

]]> http://www.monkeyswithhandguns.com/a-letter-to-a-webmaster/feed/ 0 http://www.monkeyswithhandguns.com/the-5-rules-for-web-design/ http://www.monkeyswithhandguns.com/the-5-rules-for-web-design/#comments Thu, 20 Aug 2009 00:59:38 +0000 wesruv http://www.monkeyswithhandguns.com/?p=256 The 1st rule of web design is:

Just because you use the web, doesn’t mean you’d be good at making web sites.

The 2nd  rule of web design is:

Just because you use the web, doesn’t mean you’d be good at making web sites.

This may seem obvious to some, but I think it needs to be said. Clients, developers and graphic designers seem to think that one can pick up web design after reading a few books or putzing around on Youtube for a few minutes (dripping sarcasm).

Trained monkeys can use Photoshop and learn HTML. Adults that deserve money for it work hard to get good at it. Interactive design, standards compliant HTML/CSS and having a site that functions in every web browser is a rare talent.

The 3rd rule of web design is:

As a new web designer devote a lot of time, thought and user testing into hammering your terrible designs into workable shape.

In doing this, prepare to have your ego hammered to shit- then, you have to grow it back and in full force (and then some) once you know what you’re talking about. This will allow you to talk clients out of terrible terrible ideas.

Most people (maybe even you, reading this, right now) think that good web design somehow falls out of the sky, perhaps from angel farts. I assure you this is not  the case.

Ask for critiques from pro web designers often, and do user testing early and often, even if it’s bugging your friends or cubicle neighbors. You’ll be shocked to find out what works and what doesn’t.

As a rule, most site designs are missing one of two things:

1. The “design” looks like hell. The colors are weird, disagreeable, or not there (it’s bland, and not minimalist). Or maybe the typography is poorly spaced, sized or illegible for other reasons.
2. How do you use this damn thing? So maybe it looks AMAZING, you open up Photoshop and crap your pants thinking about how sweet it will be. But your menu doesn’t look like a menu, no one knows what’s a link and what isn’t, or maybe the user has no sense of the scope, purpose or their location in the site.

Web design is a two legged beast, form and function. It’s not multiple choice, you’ll need both. Occasionally a designer will be forced to negotiate something that isn’t the best visual choice in the world, but really makes intuitive sense.

Don’t be the guy that makes something look a little bit nicer, but harder to use.

Don’t tell this to 2advanced, they’d have to go back to school to unlearn all of the poor UI design they’re so used to making.

The 4th rule of web design is:

When you are but a grasshopper, and you feel something is cool and different, it’s probably been done before and failed miserably.

Human computer interaction is still in it’s early teens, it’s cranky, whines a lot, and doesn’t want to work. You have to meet it halfway, because it’s ass isn’t going to budge.

Unless your site is only for trendy web designers or database jockeys (both of which tend to have “bad UI blindness”), you’ll need an easy to understand UI.

Create your site for Grandma Jenkins, who can’t read small type, is unsure and untrustworthy of things that look strange, and things Google is the internet.

Web sites shouldn’t have a learning curve, leverage the design conventions that are out there on sites people use every day. Once you know what you’re doing you can add to the web design lexicon.

Usability, interactive elements looking “clickable”, readability are all priority 1.

The 5th, and final rule of web design is:

No one cares about your design concept.
No one cares how long it took to make it.
No one cares about your concept.
No one cares about all of the cool new technologies you used to make it.

At the end of the day, the only thing that matters is what the design contributes to the experience. It should be KY Jelly for all of the information  or experience on the web site.

Web design is creating picture frames, if your frame is louder than the painting inside of it, you’re doing it wrong.

I’d like to start my portion of this blog off right. By making fun of any site that gets more visitors than us.

Because screw them, and their visitors.

You may have heard of a little saying “Good design goes unnoticed“, and the converse can also be proven to be true.

Exhibit A

I will spend my next 6 articles making fun of all of these sites. Although I can complain all day, as my co-bloggers can attest to, I will keep it down to three strikes, or occasional compliments on each example.

Site #1 : Evangelical Cathedral

Disclaimer: If you have a history of seizure, you are pregnant, drunk, a typographer, allergic to enthusiasm, or any combination of those, please do not visit this site. It is the worst thing to happen to eyeballs since grunge type in the early 90s.

I believe all of us, from every creed and color need to unite against terrible design, can I get an “Amen”?

Strike 1: All Flash site for no reason.

Unless you count the visuals as a good reason to do anything, other than vomit or shake violently in a ball, this site should really be static HTML. Unless Jesus healed all of the blind people already, this site is only usable by sighted users that don’t get motion sick easily.

Strike 2: Someone actually made this, then someone else approved it

May there be a curse on the mind that imagined this. I can’t imagine what kind of horse tranquilizers the creator must be on to be able to just interact with another human beings…

But the sadder part, someone saw this and decided that this accurately represents what they are all about. Which must be CRAZY BULLSHIT AUGMENTED BY SPECIAL EFFECTS!!!11
If they don’t have fireworks that emit from all corners and sides of the stage after a good “HALLELUJAH”, I’d be really disappointed.

Strike 3: Try to read any of the body copy on this site without losing your mind

I dare you. Go ahead. Try.
Click on About > Bishop Don Meares, if you haven’t lost your mind yet, try to read one paragraph of his bio. Semi-transparent backgrounds on all of the containers allow you to enjoy the ENERGETIC BACKGROUND GRAPHIX as they FLY BY AS GRACEFUL AS A ONE WINGED DOVE ON FIRE.

Site #2 : MSN

We’ve all seen it, at least once. Install Windows XP, power up IE6 and this is what you get, Microsoft’s poor understanding of the Web, design and usability. Yessss.

I’ll ignore the “US Weekly” style web content, the images that are saved at 40% quality, and all of the tacky ads everywhere. That’s just the tip of the iceberg.

Strike 1: Hierarchy Please?

Nope, not allowed. There are at least two Ad locations that are larger than any one content area, almost all of the type  is the same exact size, and there are very few clear divisions telling the eye what’s associated with what.

It’s fine tho, if you can’t wade your way through the poor design, maybe you don’t deserve MSN’s content. Did you ever think of that?

Strike 2: Would somebody please think of the grandmas?

I don’t know what alternate plane of reality a lot of web designers live on, but 11px font size for body content is a dick move. We all know that Grandma Jenkins doesn’t know how to get to the Accessibility options in the Control Panel or the browser settings.

Unfortunately for Grandma Jenkins, even if she could find Accessibility options, they’ve used white type on a medium blue. Of all of the rods and cones in your eye, the blue cones are the first to go, meaning white type on a medium blue is going to be a problem for Ol’ Lady Jenkins.

Strike 3: Designing with an Iron Fist

Like most of Microsoft’s products, MSN has been designed by some intern for a few beers. What little visual separation that is there is either to subtle or really harsh. Not only is your eye looking for anything that resembles organization, it’s constantly being irritated by the tight spacing, hard lines, and uncontrolled palette.

Welcome to the jungle, we’ve got… bad content n’ games?

The interface is what makes the Wii interesting. But even as the Wii was just getting off the ground, a young UI engineer name Johnny Chung flipped the Wii concept on its head…sort of literally! While at Carnegie Mellon, Chung posted a YouTube video showing how you could do fairly accurate head tracking by using the Wii’s infrared bar (watch the video and it will all make sense):

Chung got hired on by Microsoft. His interface work isn’t limited to playing games either. Check out his Johnny’s personal web site to see his projects and vitae. Microsoft didn’t waste any time putting Lee to work on its escalation of the console video game interface war. Microsoft announced “Project Natal” at its E3 media presentation in June of 2009. Project Natal is a controller-less interface…or perhaps more accurately, a human-powered interface. In other words, the video game hardware will interact with you based on a combination of body movements/gestures and voice commands. The system is also said to do facial recognition allowing individual users to be differentially recognized by the system. Again, a brief video makes it all clear:

Not to be left out, Sony’s Playstation 3 group made an announcement that brought the controller back to the equation…two of them in fact. And most interesting of all, the technology uses the Playstation Eye camera that has been around for several years. Video break time yet again (hey, would you rather have me write a thousand words asking you to imagine how this stuff works or would you rather see it in action? I thought as much.):

The Playstation Motion Controller extends the Wii methodology and blends it with the emerging concept of “augmented reality” (AR). Unless I miss my guess, AR is going to be a big thing in the next year. It’s popping up all over the place. Augmented reality is already being used for games, iPhone apps, and even a business card that you will eventually be able to make yourself:

Speaking of the iPhone, it has quickly become a very prominent gaming platform. Forget Solitaire, Minesweeper, Bejeweled and Tetris. High quality games are being produced for the iPhone right now including many ports from other platforms. Given that the iPhone is a multitouch interface with a single button that can’t really be used with applications, this presents some interesting new interface challenges.

There are rumors circulating that Apple is also developing a tablet computer that utilizes much of what they have learned in developing the multitouch iPhone interface. You might be thinking “Tablet PC’s have been around for years and haven’t ever really taken off….so what?” Maybe nothing, but Apple has a track record of introducing new interface modalities into the public consciousness. They aren’t the first ones to create such a system either. HP already has a multitouch tablet on the market. There are even demo stations in airports and other high traffic areas.  Video. Thousand words. You know the drill:

I’ve been lucky enough to have had a lot of interesting experiences in my career. I’ve worked at big companies and small companies in a variety of industries that have really excited me. This new set of interface challenges are definitely in need of the same scrutiny, research and innovation that has allowed the web to evolve from personal web sites that listed people’s CD collections to the web we see today complete with Rich Internet Applications. And don’t even get me started on Google with its proposed Chrome web operating system and Google Wave (a potential revolution to electronic communication). That’s for another time. For now, let’s just say that these are interesting times for those of us interested in user interface, usability, and user experience.