Tag Archives: design

Do you want to be a designer? Study computer science! Wait, what?!

So, I was casually browsing the web when a job ad caught my eye. It was an offer by Google UK for an Interaction Designer. Now, I generally consider that these days people managing projects have gotten into the habit of overly dissecting design. You have the Interaction Designer, the Interface Designer (he does what, only the bits of the interface which aren’t interactive?), the Motion Designer, the User Experience Designer (wait, isn’t design all about the user experience?), but I got curious and read on.

Google says a bunch of things and then defines the job:

“The role: Interaction Designer

As a UI Designer, you will work closely with engineers and product managers throughout all stages of the product cycle. You are a critical thinker with a good design sense, a strong technical background, and an eye for making things better. Interaction Designers work on projects that have an impact on the web experience of millions of Google users.”

So, ok, they need a good interface designer for their team. Great. What would you expect the requirements to be? Let me help you there… Google wants you to, basically, be a computer engineer.

I know, right? I’d expect them to actually prefer a designer, but the line reads:

“Strong academic background in human-computer interaction or related field preferred (BS or MS in Computer Science or related field a big plus).”

I’m wondering if  this explains why, generally speaking, Google interfaces suck so bad. I mean, GMail is marginally usable, but I’ve had an account there since the time when you needed an invite to get in and I still struggle to find the compose button. But, then again, if they prefer to hire computer scientists to do interface design, I really shouldn’t be surprised.

…and don’t even get me started on Android…

Steve Jobs, designer

I’ve long held the belief that you should not idolize people. Being inspired by people is a lot more productive, whereas simply putting people on a pedestal and admiring them from afar accomplishes little more than replacing your ideas with theirs.

That’s why there is so much more value in understanding what Steve Jobs did, rather than idolizing him as an über-genius. I think Jobs died with a clear conscience, I believe he’s made his mark and was able to go into the great unknown able to say “my work will go on”.

To me, Steve Jobs was a designer.

He was a great businessman, for sure, but his thought was design thought and that, to me, was central to the evolution he brought to the world of personal electronics. And that evolution I see summed up in one product: the iPod.

I believe the iPod is the single most important product in Apple’s line-up under Jobs. It is the DNA of the new Apple. It could be the iMac, but that was just a computer in a good looking case. Sure, it made people show off their machines, rather than wanting to hide them in a cabinet, but the iPod did so much more.

An iPod was incredibly simple and spartan. It never offered all the features (top of the line, modern iPods still don’t allow you to manage music directly and have no removable media, for exemple), it was compact, it was sleek and looked like a luxury product. Even the box it came in, was a pleasure to open and you felt like you should keep it on display.

People wanted to have an iPod and when they did, they loved it. It worked all the time, it was dead easy to learn how to use, you did not have to RTFM and it had character with its Stormtrooper-white casing.

This is why I think design, not technology, is central to Apple. The technology is really important to the product development and to make sure it’s high quality, stable, innovative and reliable but it matters almost nothing to the user. To the user, the important thing is the experience: you take something out of a box, which looks great, feels like it belongs in your hand and works when you turn it on.

This is why most iPhone users don’t care or won’t know what processor speed or how much RAM is in their phones, this is why most of them will shrug when someone points out that some other phone’s camera has a lot more megapixels and just say “yeah, but I prefer my iPhone”. People are in love with the experience of the iPhone, the iPad, the iPod… not the specs.

This is Steve’s most important legacy: make products you want to use. Products that do things you’ll want to do. Products that look beautiful and feel great in your hands and are easy to use. Focus on the people, not the technology.

Don’t start from the hardware, don’t pile up the features. Start with you: what do you want? What do the people around you want, or might like? It’s not the “we have this, what do we do with it” mentality, it’s the “I want to accomplish this, how do I go about getting it?” mentality. It’s design.

In 1997, Apple launched its “Think Different” campaign. In my recent post about understanding design in day to day work, I mentioned this slogan. It’s interesting my immediate following post would mention it again. But I mention it once more for the same reason, because I want to reiterate: Goodbye and farewell, Steve Jobs, one of the greatest designers of our time, I leave you with the full text of the “Think Different” campaign posters:

“Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes.

The ones who see things differently.

They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them.

About the only thing you can’t do is ignore them. Because they change things. They invent. They imagine. They heal. They explore. They create. They inspire. They push the human race forward.

Maybe they have to be crazy.

How else can you stare at an empty canvas and see a work of art? Or sit in silence and hear a song that’s never been written? Or gaze at a red planet and see a laboratory on wheels?

We make tools for these kinds of people.

While some see them as the crazy ones, we see genius.

Because the people who are crazy enough to think they can change the world, are the ones who do.”

Design, motherfucker, do you speak it?

Jules Winnfield’s speech in Brett’s apartment has become the stuff of legend as Pulp Fiction quickly left the world of mere films and entered into pop culture.

A frightened punk, caught in the middle of lunch, is too nervous to answer any thing other than “what?”, back at all the questions Samuel L. Jackson’s character is firing at him.

(…)
Brett: What?
Jules: What country are you from?
Brett: What? What? Wh – ?
Jules: “What” ain’t no country I’ve ever heard of. They speak English in What?
Brett: What?
Jules: English, motherfucker, do you speak it?

Poor Brett ends up as dead as his friend on the couch, but that’s beside the point.

There’s a certain quality to good dialogue, good text, great writing that makes it easy to remove sentences from context and apply them liberally in other situations.

You can easily say “I find your lack of kerning… Disturbing!”, and you’ll saying much more than simply “your letters are out of whack”.

Such is the case with the title of this text.

After 15 years working as a designer for the web I still think people fail to understand it.

Design, that is.

Sure, one can’t expect everyone to understand everyone else’s work, but I believe there’s something to gain from better understanding design. The contribution of a good designer to almost any project can be priceless and sometimes signify the difference between following a predictable path and veering off into the unexpected.

And I think doing unexpected things is an important factor in innovating.

Being that I am approaching 40, a certain amused quietness has come over me and I just sort of quietly chuckle to myself whenever someone presents a set of wireframes and utters the words: “nevermind the look of it, this still has no design”.

I may just smile and wave at these shards of ignorance – and even understand that the people uttering them are doing so for the benefit of the audience – but I must confess that once in a while, I still feel like jumping on a table and just going on a Tarantinesque tirade which could only end in tears and gunfire.

“Everybody cool, I’m a designer! If any of you fucking pigs mention design one goddamn more time, I’mma execute every motherfucking last one of you!

Design is a fucking process, not some block of butter you spread on things all buttery-like! And it pretty much started when y’all threw your asses in a little air conditioned room and started tossing ideas around! See… that’s part of the process, right there… the design process, motherfucker!

If you don’t understand programming, you stay out of the way of the programmer, right? Then why is it that, if you don’t understand design, you won’t get out of the goddamn way of the designer, bitch?

Now, see… designers do crazy shit. That’s the point. If you have a guy that just throws colors and shit on your wireframes, then shoot the motherfucker, he’s not a designer, he’s a decorator, just throwing pillows and curtains around; go get the motherfucker who designed the wireframes, cause he’s your designer.

Not good at the visual side of things? Then get someone who is and make a design team. Or, hell, just shoot the wireframe guy and get a motherfucker who’s good at everything. Good luck, by the way.

Is this really that hard to get? You begin using design when you start using design thinking, that’s – and pardon my french here – a divergent cognitive process. What that means is that while your ass is going all “we should do this, because it’s been done before and it worked”, a design thinker will go: “fuck that shit, let’s raise puppies to lick our users every time they fill out our form!”

And you’ll all go: “whaaa…?”, but then, someone will take that stupid fucking idea and change it to “let’s mail our users a picture of a puppy, if they help us out with the survey”, and then soon enough, you’ll be at: “let’s create a badge system by which users get awarded a cute animal badge every time they do something for us and we’ll set up an online collection page for people to keep and show off their badges”.

BAM, motherfucker!

Because you let one crazy-ass designer into your team at an early stage you just increased your chances of actually having a cool product. Now, keep that motherfucker involved! Stop building your goddamn product all the way until you need visual design and then, at the last minute, asking some sorry-ass intern to “put a coat of paint” on a crappy product with a stupid layout built on top of some boring as fuck wireframes!¹

I mean, don’t y’all have a fucking Mac and a motherfucking iPhone in your pocket? Do you think those toys have gotten into your pants, no pun intended, simply because of a kickass business plan? Hell no! Those are design babies, right there, those things are so motherfuckingly designed they’re oozing with the stuff.

What was Apple’s motto again? Ah, yes… “Think different”.

That’s what motherfucking design is, right there: think different.

“Hell, shit…!” you might say, if your momma had raised you right, “if that’s the case, then why did I hire a designer? Hell, everyone can be a designer!”

Right, right, I see what you did there. Now, listen: designers are trained, right? They don’t have to be trained in a motherfucking University, but they are trained, they know the process, they cultivate their minds, they are curious, they absorb crap you wouldn’t even notice was there. Your number crunchers crunch numbers, your developers discuss languages and think of databases, right? So you need a design guy who’s trained to do design, it’s all because of the “think different” thing.

The same way an engineer will look at a bridge and tell you how it was built, a designer looks at the world and wonders what the thought process behind everything was. That’s why we’re so fucking annoying, always with the questions and then, when you least expect it, we’ll just go: fuck it, that bit is boring me, shut the fuck up. We want to know if you slipped in the bathroom, banged your head and invented the flux capacitor, we don’t exactly need to know how it works.

See, designers are like harvesters of ideas, collectors of crap they may find useful later, and that’s why they will usually bring stuff up that most other people will find odd or out of topic. The unexpected. But then, you’ve been paying attention, right? So you already know that shit.

Then, theres specialization, right? You need that too: visual design, industrial design, whatever, what I’m really trying to get across to your sorry ass is that the design process behind everything should be the same, and it’s that process that’s the real value of design.

Not the colors, not the symmetry, not the perfectly indented CSS, it’s the whacky thought process within the confines of a well-defined process. Shit, I’m impressing myself!

So, here we go: define the problem, research that motherfucker, brainstorm the fuck out of it – and I mean, get in a room with people and take off the gloves, make sure the stupidest idea of them all ends up in the final list, prototype it, test the prototypes and pick one and just fucking do it. Finally, look at the goddamn result and sketch out some rules; remember: design is repeatable, it came out of the fucking Industrial Revolution, for fuck’s sake!

Look at the “fucking do it”, bit, do you see that? Do you, bitch?! Because there, right there is the only bit you usually think of as design, that’s the bit you think design is. Look at all the shit you’re missing! That’s the specialized bit, that’s where you need your graphic designer to come up with awesome visuals for your  website or iPhone app, or whatever the hell you’re trying to make money out of.

For the rest of it, you need a design thinker. Most good designers are great design thinkers. They spend their lives looking everywhere, grabbing bits of info, collecting stuff, building a visual culture, an experience portfolio. Some people are computer geeks, some are sci-fi geeks, designers tend to be everything geeks. Ah, fuck it, I’m repeating myself.

Finally: how dare you to call yourself a designer and not know this shit? Seriously, motherfucker, are you fucking kidding me? Are you going around saying you’re a designer and that you just like pretty things, and colors and patterns? I will strike down upon thee with great vengeance and furious anger those who claim such bullshit and refuse to take responsibility for what should be the coolest motherfucking profession in the world, right now.

Own up, bitches!”

Me, designing stuff.
Me, designing stuff.

So, rant over, what can I tell you? Well, if you’re a designer, be whacky, be crazy, be funny. My greatest design professor once looked at some crap I’d constructed out of cardboard and said: “This is funny, there’s humor in your work. Even though it’s crumbling apart because you suck at paper & paste stuff, the idea is pretty good”, and then he said something I always try to remember when I’m working: “Never loose that humor”.

A lot of people don’t like a lot of things, but most people like being amused, people share funny stuff. It doesn’t have to be hilarious, but you’ll be better off making someone smile than frown, that’s for sure.

Try irony in your work, suggest awesomeness. Be involved, talk to people, let them know you can help.

Sit quietly in meetings until you feel a sudden silence then, make a wild suggestion. You’re not the accountant, you don’t have to be serious and rational, it’s your job to explore other options, if you’re there to explore the same options as everyone else, then you bring no real value as a designer.

Absorb stuff, look at everything, be annoying, ask people if you can try their stuff out, look at their gadgets, draw on their notebooks.

Don’t take notes, notes are for project management consultants. Just get stuff into your head, shake it on a regular basis (I suggest to music, but feel free to improvise), and allow that mishmash to influence your daily reality.

In short: be creative, you’ll notice that most people aren’t and that is your strength. Collaborate with creative people (you’ll find them in the oddest places and a lot of them aren’t doing creative work). Fool around. Turn ideas on their head. Joke. Make fun of yourself.

And finally: help the grey people, they don’t know any better, but they deserve love too.

¹ If you take nothing else away from this little extravangaza, at least understand this paragraph, please.

A brief introduction to Design

Design is a multifaceted discipline with many specializations. It is, by definition, a core discipline to every human activity.

People have been designing since they could use utensils, maybe even before: problem solving is at the center of the Design thought process, at its genesis and at its end.

Over the decades, Design has become more defined and compartmentalized; it has gained specialization.

Design has become a profession and Designers have acquired a set of abilities and knowledge, developed methodologies and processes that allow them to pick up the pieces, work with all involved and, keeping a bird’s eye view, help solve the puzzle.

Despite its many specializations, Design is essential. Graphic Designers, Industrial Designers, Interaction, Web and Motion Designers should always be, first and foremost, Designers.

The same way GPs, OB-GYNs and Plastic Surgeons are all, in essence, doctors, specialized Designers should never forget what Design, as a whole, is about.

This seems obvious, I know, but I’ve heard people say “I’m not a Designer, I’m a Web Designer”, which makes absolutely no sense. Specialization should never annul base knowledge, method and philosophy.

Historically, Design is the solving of a problem by giving form to a functioning concept which can be repeatable. Although I like to think of Design as something inherently human, it started to be defined as a professional activity by the drivers of the Industrial Revolution and was heralded as a way to create cheap, repeatable products that were, above all, highly functional, while looking as good as possible (“looking good” being a highly debatable subject).

It’s ironic how, in recent years, the term “design”, then, has been used as a substitute for expensive and exclusive. Designer clothes, designer furniture or designer jewelery are all meant to be exclusive products for wealthy people, often times made to be “good looking” more than useful or even usable. The antithesis of Design, one might say.

The two main components of Design are form and function, with none taking precedence; both are equally important and should be a consideration from early on. However, the mass production-oriented world that begat Design as a professional activity also had a great influence on its philosophy, which lingers to this day. The outcome of a Design project should be repeatable; if it’s an object, it should be possible to mass produce it, if it’s a communication piece it should be printable in quantity or broadcast, if it’s a website, it should be easy to develop for and expand on. A set of rules and guidelines should always come out of a Design project, helping others to repeat it or improve on it.

If you’re creating an unrepeatable object, you’re probably making Art, not Design. If you’re being exclusive, you’re defeating the purpose and are more akin to a Craftsman (yes, or woman), than a Designer.

Nothing of what I just said means the Design methodology cannot be applied to other fields (I started out defending Design is in everything we do), it just means Design is more than a methodology: it’s a mean to connect people by making certain objects available in the right time and social context, with the right function and wrapped in just the right form.

Horizontal CSS menu using a pointer and background images

OK, so the title is a bit too descriptive but I’m trying to make this post findable in case anyone out there needs to solve a similar problem. So this will be about… that’s right: creating a horizontal menu, using CSS and XHTML. Each menu item will have a small pointer underneath (an arrow if you will), and I want it all done using images, just to make it a little harder.

Here’s what I wanted the menu to look like:

menu

As you can see, some menu items are longer, some shorter. The menu sits in a gray bar and is separated from the remainder of the page by a green “tube”. I want the selected item and the hover state to be represented by a dark box with a pointer that breaks through the green tube.

At first I made the item an li which had the dark box as a background image and was immediately followed by an empty em tag which then had the pointer as a background image and was offset using relative positioning at 50% left.

A menu item looked a bit like this:

<li><a href="whatever">Homepage</a><em></em></li>

The problem was the positioning of the whole thing as in some browsers, the pointer would become detached from the dark box, and I couldn’t fix that with negative top margins because then the pointer would be offset in yet another browser. A mess. Plus, with this method, I needed a minimum width for each item, so I could then calculate the mid point to place the pointer. No good.

But there is quite a practical solution that came to me while thinking about the sliding doors method of making tabbed navigation menus: marvel then, at the ability to stack background images.

I couldn’t have used a single background image, because then, all my items would have to be the same width, since stretching the background image would distort the triangular pointer, so enter the bkg stack!

I took the li elements of an ul and styled them so they had the correct height: dark box plus triangular pointer. Then, I added a span inside each li, so I could style two overlapping elements with two different images. Then, in the CSS, I applied a background image to the li and another (the pointer) to the span. Keeping the stretching and centering is dead easy like this: you make the dark box around the text repeat on the x-axis and you turn off stretching on the pointer. Plus, you can easily center the pointer by just using “center” on the background declaration.

Here’s the HTML:

<div id="menuarea">
  <ul class="menu">
    <li class="current"><a href="#"><span>Homepage</span></a></li>
    <li><a href="#"><span>Funcionalidades</span></a></li>
    <li><a href="#"><span>Contactos</span></a></li>
    <li><a href="#"><span>SMS</span></a></li>
    <li><a href="#"><span>Chamadas</span></a></li>
    <li><a href="#"><span>Webmessenger</span></a></li>
    <li><a href="#"><span>Comunidade</span></a></li>
    <li><a href="#"><span>Passatempos</span></a></li>
  </ul>
</div>

And the CSS:

#menuarea {
  height:40px;
  background-color:#F0F0F0;
  background:url('images/menuarea_background.gif') repeat-x;
}

.menu {
  width:73.84em;
  margin:0 auto;
  padding:6px 0 0 0;
  white-space:nowrap;
  list-style-type:none;
}

.menu li {
  float:left;
  font-size:93%;
  text-align:center;
}

.menu a {
  position:relative;
  display:block;
  text-decoration:none;
  float:left;
}

.menu a span {
  display:block;
  color:#000;
  text-align:center;
  padding:9px 8px 8px 8px;
  cursor:pointer;
}

* html .menu a span {
  cursor:hand;
  width:66px;
} /*IE Fix*/

.menu a em {
  display:none;
}

.menu a:hover {
  color:#fff;
  background:url('images/menuhover_background.gif') repeat-x;
  height:34px;
}

.menu a:hover span {
  background:url('images/menu_pointer.gif') top center no-repeat;
  height:17px;
}

.menu a:hover {
  background-position:0 0;
} /*IE fix*/

.menu .current a {
  color:#fff;
  background:url('images/menuhover_background.gif') repeat-x;
  height:34px;
}

.menu .current span {
  background:url('images/menu_pointer.gif') top center no-repeat;
height:17px;
}

This is what the images look like:

menu area background The menu area background, which repeats along the x axis.

Menu item background The “dark box” that envelops each “current” or “hover” menu item

Menu pointer And the pointer.

As you can see, the dark box is as tall as a menu item plus the pointer and the pointer is the same height. They’re both transparent where they overlap and the pointer includes a bit of the green tube.

Overlapping background is a really powerful method of styling elements to make them look more complex than they actually are. It’s not *very* easy and you’ll notice the need for some IE 6 fixes and some weird height definitions that seem to make no sense. I know, I still can’t really explain some of it. But the truth is that the menu looks perfect in IE6, IE7 and Firefox for Windows as well as in Safari and Firefox for the Mac.

Something else to read

Since I’m not swimming in time to write stuff, here’s something else somone wrote and you should read.

In this instance, that someone is Bruce Mau, one of the most successful, prolific and indeed insightful designers of our time and the text you must not miss is his “incomplete manifesto for growth”.

Take a deep breath and read it. It should, at the very least, make you think a bit. Here’s the link.

Football frogs

As I continue to explore higher detailed icons, I’ve been having some fun redoing old emoticons. These are the representatives of the three main Portuguese football clubs: S.L. Benfica, Sporting C.P. and F.C. Porto. They are essentially the same frog, wearing the club colors in the shape of a scarf.

Football frogs

As with the Batman emoticon, I started out with a FreeHand drawing, imported into Photoshop as a smart object. Not much of the original vectorial is left as I redraw everything in Photoshop.

I believe in the flexibility of vectorial drawings, however, FreeHand is rather limited in what comes to gradients and so I’ve been exploring my options in Photoshop.

I know Illustrator is vastly better at gradients, with its mesh gradient tool. Sadly, my company has not bought me CS3 yet. I use the word ‘yet’ with some hope, you will notice.