As I mentioned last week, I’m redesigning this website, which for non-colorblind visitors is the pukey–green monstrosity before you. The color combination has been a joy to me, watching people dry–heave and reach for their feed readers while they still had the chance. But those days are numbered. I consider it quite unacceptable to be creative director of a reputable web design firm and not have a personal site which shows the same amount of thought and effort that goes into client work.

I’ll be putting my money where my mouth is, and using the same process I’ve evangelized for years and use for clients all the time. The Design Funnel is nothing new; many designers follow similar processes. I claim no patented process. It’s simply a (traditional?) process which I’d like to see more designers utilize, especially in this age of jumping–right–into–Photoshop, but also for those who don’t sketch before designing in the browser. It’s about thinking through before doing. It’s about design instead of decoration, which is so prevalent on today’s Web. This site is an example of decoration, and that shows. And that’s a pity.

Step one is defining values and goals. Defining the problem isn’t enough (and defining possible solutions at this point borders on evil—if you’re a designer, you know that a lot of clients tend to do this). My problem is pretty much stated in the second paragraph. But what’s important to me? Let’s not worry about formulating at this stage. This stage is about aggregation. To do this, I’ll answer some of the questions I ask my own clients.

What do I want (the site) to communicate, show, tell or do?

I work hard, with a talented team, for some awesome clients, many of whom are very happy with our work. Client work is nevertheless sprinkled with compromise and factors such as existing brain–dead branding by brain–dead design firms. This is actually the hallmark of good designers: working within constraints. But that doesn’t mean it’s easy. It also doesn’t mean the end result will fit your personal taste.

The Haystack should fit my personal taste. It should be what I feel is appropriate design, and I want to design it myself. It should demonstrate my ability as a designer and art director, and should adapt to the content I choose to publish. It should not overpower the content, nor should it be mere decoration for the content. It should be pleasurable to visit and read (okay, calmly, slowly, place the feed reader on the ground and kick it over to me).

It should be an online repository for all thoughts, ideas, discoveries, code, images, sketches and anything else I’d like to share publicly. It should be technically adaptable to my usual flurries of endless ideas, re-evaluation and mind–changing. It’s a bird, it’s a plane, it’s…

For whom?

I’ll be writing and posting about things for which I have a passion, and that means mostly design and web development, art, technology and any combination thereof. Therefore the audience will be (and is) industry creatives, developers and perhaps a few societal misfits and some very nice people. Oh yeah—some family and friends who will get here by clicking on the little blue E.

Any branding guidelines or creative considerations?

No brand. But the site should make a mark by being recognizable. Creatively, I’d like to be able to tailor the design of posts and pages to the content. Being able to art direct my own posts will be one of the biggest advantages to the redesign. Jason Santa Maria does this fantastically; he’s chosen not to let his CMS determine his design possibilities. The new site should allow me to art direct the full design of a post: type, color, layout and imagery.

It should be standards–compliant. It should be accessible. It should uphold basic usability principles, but I’m giving myself some space on that one. Usability purists, simply turn off CSS completely, thank you.

Technical considerations?

• Write it in HTML5, just for the challenge of getting the design I want using a moving target. I will, however, think twice about using vague so-called “semantic” elements like <aside>.
• Use as much CSS3 as possible. Not necessarily the decorative stuff like border-radius et. al., but really cool stuff like media queries and the tastier selectors.
• Use Drupal, because I’ve got 2+ years experience with it, and it will allow me the flexibility I want in implementing a design. Plus, it is quite awesome.

Next steps

Reading through this, I realize that if a client had sent this to me as their wish list, I would’ve had a conniption fit at the office. It’s a good thing I know what I mean by all of the above. Now that I’ve got it typed out, though, it’s enough to get the ideas flowing. We’ll cover it and let it simmer for a while.

And then it will be time to start sketching.

Fact is, client work comes first during work time. And family comes first during personal time (and work creeps in all too often). So when to blog? When to play around with stuff I can’t play around with (yet) in client work?

In one of our recent conversations on the highs and woes :) of web work, ppk suggested that I kill two birds with one stone: design my blog and write about the process. So I can actually do my own blog design (the current one is a third-party WP theme) and write on the blog at the same time, instead of waiting until the design is “finished”, which all of you designers out there know is never the case.

It made me think about what Mark Boulton and Leisa Reichelt did for Drupal, and what Andy did with New Internationalist. Not necessarily the part about inviting feedback (which was a key factor in Mark’s process), but the part about publishing the process. Being open about this process will allow me to “think out loud”. And I’m sure some of my talented friends will give helpful and critical feedback along the way.

So my thoughts at this point are basically:

• Create the design I want, which should at least hint at the fact that I am an experienced designer.
• Switch from WordPress to Drupal. While I like WordPress, I love Drupal and know much more about using it.
• Use HTML5. Like it or not, HTML5 is coming, and now’s the time to start playing with it. Some problems with HTML5 are obvious, but others will only see light in practice.
• Although I’m not a fan of the mainly decorative parts of CSS3 which browsers have been quick to implement, there are some parts of CSS3 I’d already like to take advantage of.

That’s a start. I’ll be posting my thoughts, sketches and experiences here, documenting what I can for myself and whoever might be interested.

We’ll see where it goes.

If what Paul Rand once said is true, that design is a method of putting form and content together, then one of the fundamental tasks of a designer is to understand this content, and funnel the abstract wishes and values of the client into a usable design language (which can then be implemented using tools). Only then will the design have more meaning and creative depth.

I’ve advocated the large-to-small, abstract-to-specific process for years, and we utilize it at Cinnamon whenever possible. I’m happy to have had the opportunity to write a manifesto for ChangeThis describing this philosophy.

If you’re interested in a design process which encourages effective creative thinking (and therefore yields effective design), please check it out and give it away. And feel free to post your thoughts.

While you’re at it, go ahead and check out Hugh MacLeod’s famous and excellent manifesto on being more creative.

Assuming that Web 3.0 involves the emergence of practical Semantic Web applications, we can expect to see plenty of logos based on a visualization of graphs depicting nodes within a network. Ehm, like this:

Don’t underestimate the highly creative use of the dot on the lowercase letter i as a node within the network. Real cutting-edge designers will possibly use the letter o. Oh, and for goodness’ sake, use orange and blue in the logo, okay? Dare to be different.

If you want to really turn Web 3.0 on it’s head, join me in designing square, tree-hierarchical logos for semantic web applications. In Microsoft Word. No, make that Powerpoint. No, Paint. No, ASCII. Just to keep these people on their toes.

[On a serious note, I'm testing the Twine beta and find it an awesome concept. These types of apps will change how we as end users approach information. To their credit, they are also one of the first apps in this space to utilize the network-graph-logo-with-the-dot-on-the-i-as-a-network-node design meme.]

This imbalance, as it turns out, reveals itself not only in money, but in virtually any situation where there exists a relationship between input and output or cause and effect. And that’s just about everything. The imbalance is not necessarily 80/20. It can be 70/30 or 90/10. The point is that there is a significant imbalance.

It’s logical, when you think about it. Not all of what you do can possibly have the same effect on an outcome. Not every design will get the same amount of attention. In a 10-slide presentation, perhaps two or three slides will have the most impact. A site we just finished has several nice features, but only one or two of these will set it apart from similar sites. We paid the most attention to these features.

As a web designer, developer, or whatever it is you do, it’s a good idea to go into 80/20 mode at several points during your project. What are you doing right now? Is it part of the important 20% or the trivial 80%? Is that button really a show-stopper? The 80% is not bad, it’s just not as important. Utilizing the 80/20 Principle can help you set the right priorities. Short on time? Do 20% stuff. It will have the most effect.

Think about it… How much of Microsoft Word do you really use, Or any app for that matter?

Recommended reading: The 80/20 Principle by Richard Koch. This book is a must have. Richard really goes geekily in-depth. The 80/20 Individual is also quite good, but you should really like the subject if you decide to read both.

Update: Company X have changed their site as of May 22, 2007. They seem to have removed our material.

Note: This is my personal reaction to Company X’s violation of Cinnamon’s copyright, and is not necessarily the reaction of our company. Cinnamon’s post can be found at the Cinnamon Blog (in Dutch).

I hate it when people call themselves designers and then blatantly steal the work of other designers and imply that it’s their own. And that seems to be what Company X Design (“Design” is perhaps an overstatement) has done with elements of the Cinnamon design. It’s so blatantly done, it’s laughable. I mean, at least tweak the damn design—change the color or something—like any self-respecting talentless hack would. Once again, we seem to support my theory that most copycats are complete idiots. As opposed to the last time, I’m now armed with screenshots.

[screenshot removed]

This is not a debatable point. It’s not a question of if copyright has been violated, but in how many ways. Three, from my first observations. All in the header. Let’s examine this using some comment overlays.

First, the type image. [screenshot removed]

Secondly, the tagline under that image. [screenshot removed]

Thirdly, the small images used to lead to our portfolio. [screenshot removed]

I wrote a polite but firm e-mail to these people requesting that they remove the offending elements within 24 hours. They did not. (Update (2007.05.20): I did receive an e-mail from them today, dated May 18, in which they ask me to specify exactly which images and text I am referring to. No contact information and no name was given. I promptly sent a non-sarcastic version of the above screenshots.) I threatened appropriate action if they did not. Obviously this made no impression. Now I’ve posted this. Company X, it’s your own fault. This was the appropriate action I was going to take. A simple blog post. Everything I know about search engines tells me that when people search for you, there’s a decent chance they’ll see this post. Since every time someone comes to your site they see elements of our work passed off as yours, it seems a fair trade. Enjoy the free publicity.

Now I’m willing to bet a few things, and I’ll update this post as they happen, just to increase my Nostradamus-factor:

1. Company X have at least one very good reason to have not answered my e-mail (beware: I will post your sorry excuse here). I have received an e-mail response. See above.
2. They will indicate that someone else did the design for them, or they bought it, or some such worthless bullshit, and that they had no idea that copyright infringement had taken place.
3. Who? What? Huh?

I don’t mind if people allow themselves to be inspired by my work and the work of my team, but don’t steal it and pass it off as your own.

Have a nice day.

I’m an American expat living and working in the Netherlands, so I don’t know if House is hot in other countries or not. But it’s fairly popular here, and at the risk of being not cool, I like the show. No, wait: I love it. What’s not to love about Hugh Laurie’s self-sabotaging, über-cynical character and his onslaught of sarcastic commentary and complete disregard for every accepted form of social interaction? Pure pleasure, I say.

What’s that got to do with design? Not a thing. But if you’ve never seen House, watch an episode. Those who’ve seen it will confirm that for a good portion of the show, you’re more or less watching a group of professionals in a room, brainstorming about diagnosis and possible treatments of whatever weirdo illness the episode cooks up. Brainstorming purists might disagree, because brainstorming traditionally has only one rule: no judging of ideas during the session. Anything goes. In House, ideas noted as very unlikely are ruthlessly discarded.

Next time you watch the show, notice the dynamics of the brainstorming sessions. Personal differences are always lurking under the surface, but team members always keep the focus on the ideas. All ideas are welcome, even though they may be discarded. The pace is quick: we’ve got a deadline, someone’s going to die if we don’t come up with the right ideas, and fast. That’s where the immediate discarding of unlikely or impossible ideas comes in. Everyone takes it seriously, even when joking. Everyone contributes. Ideas are written on a board; relationships between ideas are examined (sometimes known as idea mapping). Once an idea is chosen, the subordinates are sent to run tests which will prove or disprove that choice.

I tend to agree that ideas shouldn’t be censored during brainstorming sessions. Outlandish ideas often lead to creative solutions to the problem at hand. And as web designers, we’re not brainstorming life or death situations (although some clients tend to think so). So for maxiumum creative associations during a session, I’d say don’t censor. But the rest of the House rules apply to web teams:

• Get the whole team involved. Everyone must contribute.
• Don’t be afraid to voice your ideas.
• Think fast. Develop focus and flow.
• Record the ideas. Have someone write them down. Draw them. Get them up on a wall or something some so team members can see/make any possible connections or relationships. Make it tactile.
• Get some energy into it. Stand up. Walk around. Move. Gesture. Draw. Look.
• Got some good ideas? Choose one and try it out. See if it works. You can always come back and revisit the other ideas or come up with new ones.
• Hurry up, dammit. The client wants it yesterday.

Whatever you do, just don’t go straight from the client meeting into Photoshop. Generate some ideas, and ask your team or friends to help.

And that’s it. Now the next time I watch House, I can say I’m doing research.

As far as I’m concerned, the quality of speakers is not on par with @media (save Andy Clarke), but let’s face it: it’s five times cheaper, there was water and wifi (@media2006-goers will know exactly what I mean) and some of the lesser known speakers did have very interesting things to say. I enjoyed almost all of them.

A few of the presentations seem to have been more sales pitches than anything else. One presentation made me want to hang myself from an eyelid. Andy Clarke’s TopGear style presentation definitely stole the show. He’s not only entertaining, but also made some great points, arguing his preference for using XHTML/CSS prototyping over Photoshop wireframes and mock-ups.

Rei Inamoto presented 5 ways to strengthen your brand. One of the speakers presenting material not explicitly dealing with web design, he obviously took the time to make the points relevant to the audience. Web designers need to look outside their medium and technique to become and remain creative. Inamoto is a strong creative, and Ryan Carson and team did well in choosing him to speak.

There were other good speakers, of course. As far as the sales pitches go, well, one can’t really complain. I’m sure that’s one of the many ways Ryan and crew were able to create a conference which costs roughly one-fifth of an @media ticket. For that price, it was well worth it.

Anything new here? Nothing mind-blowing. But I applaud Carson Systems for daring to throw some cross-media experts (like Inamoto) into the mix. I’m interested in seeing where this conference will go in the future.

See a few photos.

Well, I can do it, too. I’m going to go ahead and think up a name for this type of name… let’s see… Smoogly. Cute and fuzzy names which (often) don’t mean a thing, doing their best to create a Google-ish marketing tidal wave. But, as I’m sure people will point out to me, even Google means something. Actually, it makes complete sense.

Therefore, I shouldn’t complain (I’m not really complaining, just overreacting). These names are so very Web 2.0. They are so smoogly. Smoogly goo ga ga. Come on, brainstorm with me! Got a new AJAX e-mail-tagging-list-social-bookmark-photo-sharing-blog-pod-vid-narrow-casting-wiki company and don’t have a name for it? Help is on the way! How about the name Smogul? Take it, it’s yours! Peeza (AJAX Italian hotel-booking application)? Keepo (free 27Gb web storage?), Wanno (wish-list management application)? Bapplr? Pazaaaaka? Woozoo, Zipza, Yazdee? These names are all…well… smoogly, don’t you agree?