iOS 7 Icon Rework

So I was home, having taken a few days off work to celebrate my 40th birthday, when I remembered the Apple WWDC Keynote was about to begin. I grabbed my iPad, and while the kids played around or sat on my lap, I watched the whole thing.

I must say I liked most of it, although I’m always expecting one of those “oh, and one more thing” moments, which, I know, will never happen again.

I was most interested in the iOS 7 portion of the show and when it came I was immediately struck with a mix of excitement and awkwardness. It seemed to me Apple was confusing a redesign with a restyling and as hard as I looked I only saw the same iOS design, wearing a different style. And that could be just a matter of semantics for almost everyone (unless you’re a designer), but if I disregarded the fact that Apple should’ve announced this as “the biggest restyling since iPhone”, there was still a basic problem: it looked very inconsistent in many aspects and some stuff was downright ugly to me.

I’ve since tried iOS 7 beta and I must say I’ve changed my mind a little bit about the redesign part: there are new design options all around the system, and although most aren’t really revolutionary they are very good and improve the interaction.

I have not, as yet, changed my mind in what comes to the visual aspect, though. The most blatant problem is in the iconography, which seems to have been designed by marketing and project management people who are, in my very personal experience, utterly useless at this job. They think they can do it, but they can’t, because icons and other visual aspects of the interface are not brand assets, they are interaction assets that can, at times, convey a sense of brand.

However, you need designers to achieve this, not market experts or brand managers.

Being on vacation, I jumped on my Mac and starting drawing some icons – I didn’t really design any, I kept the design standard to what everyone’s used to: a rounded corner rectangle with an image on top to indicate functionality – I focused on visual style and tried to incorporate some aspects of iOS 7, while making an effort to keep better consitency between them and trying very hard to not produce anything remotely as ugly as that horrifying Safari icon.

In the last few days, some people did the same exercise and there are already some published examples of how the home screen can look better. I took longer, because I didn’t want to fall prey to haste. I reworked some of the icons several times until I was happy with them. I’m still not completely happy with all of them, to be honest, but I think I have some good ideas and a better general sense of unity and style.

Here’s my reworked homescreen and I’ll move on to explaining each icon next.

ensaios_ios7_din

I kept the same order as seen in the iOS 7 screenshots, but to be honest, I think that deserves work too: some apps makes better sense next to others, instead of where they are today.

Base

For the base of the icons, I used a square with rounded corners, using roughly the same corner radius as iOS 7: I tried some other stuff, but that wasn’t my point anyway, so I kept them the same shape. I added a simple gradient to most icons (which is just a black to white gradient overlay at 20%) and I assumed top to bottom lighting, creating a very thin highlight and shadow, just to add the slightest sense of volume. I prefer icons I feel like touching, and honestly grow very quickly tired of flat squares.

Each icon also produces a subtle dropshadow as I found that really helps with distinguishing the icons well independently of the wallpaper you might put on your phone.

For typography, I used Helvetica Neue for the first studies, but then I thought that too could be changed and I went with Din Text, a typeface I really like but am not yet sure works well here. Still, I kept it for now.

Messages

ic_messagesI did very little to the Messages icon, except put the speech balloon on top of the new base I created and gracing it with a tiny dropshadow, again, trying to just hint at some volume to keep things interesting. I think you can’t underestimate how much people love to play with their phones, scrolling through their icons, just idly looking at things. If you oversimplify, you’ll end up with a vertical list of application names you can tap to run. Why use icons? There’s no need and no advantage – if you keep apps alphabetically ordered and use big text, whilst providing a search feature, you’re set.

But we don’t do that, because we like pictures and we relate to them better, faster and with more pleasure – cool looking icons are fun and I believe that delight is important in the interface.

Calendar

ic_calendarThe Calendar icon on iOS 7 is one of my favorites. It’s dead simple, looks great and conveys information with its great live update feature. I went for a mix between the old and the new here – not one of my favorites, I must say, but I’m sure I can improve it easily enough.

For the light background icons, I went with a light grey, instead of pure white.

Photos

ic_photosI struggled with the photos icon for quite a while, mostly because I think Photos could easily be inside Camera and you’d save an icon. Sure, you may want to quickly jump to your photos and save a tap (Camera > Photos), but you could have the app save state, which I guess would save you 50% of second taps.

Anyway, I ended up maintaining the sunflower idea, since users are used to it, but I simplified the flower and put it inside a photo frame, which was what kept coming to mind when I thought of “photos”. It may have helped that I did this project while sitting in front of our family’s photo wall, which bears a dozen or so photo frames of several generations up to our kids.

Camera

ic_cameraCamera was easier to create. Firstly because the iOS 7 icon is hideous. It looks like something out of my first 1.5 Android phone, and that’s saying a lot (not bashing Android here, but it did look awful in the begining).

Secondly: the camera is right there on the phone! Just flip it around and voilá! So I did just that: I reproduced the camera on my iPhone trying to balance a simplification of form with a few hints of realism, such as the reflection on the outter aluminum ring and on the lens.

I really like this one, as I think it hits all three points: it reminds me of the iOS 6 one, it relates to a real physical object while being a simplified geometric version of it and it quickly conveys what the app is: a camera!

And yes, I’m aware that if you meld Photos with Camera, then this icon would not represent both features in one, but you do keep your digital photos in your camera so camera can say photos as much as a photo album or picture frame do.

Weather

ic_weatherThis was one of the first icons I made. I used a cloud off of Font Awesome (which is awesome), and put it on a blue background. The main idea here, though, is to have an icon which changes according to weather, just like Calendar shows the date. You don’t really need to have 500 different states for all sorts of weather, but if you offer someting for clear, cloudy, rainy, snow and a couple of others, then you’d be set and have a very cool little feature. Again: delighting the users with little details can make a lot of difference.

I don’t know about you, but I’d sure love to see a dynamic weather icon.

Clock

ic_clockThis is an example of how simplification in iOS 7 could have gone further, in my opinion. So that’s what I did to clock.

I changed the background from dark to light and I’m not sure that’s a good idea, since people are used to the clock icon being dark. But I did keep the overall look of the clock, with the dark border and the seconds hand. It would also be nice if this icon could display the current time, although I suppose it would have to lose the seconds hand, since updating that every second might prove a useless waste of processing and battery.

Maps

ic_mapsI really went to town on this one (pardon the pun). I think the Maps icon had a lot of stuff that could be simplified, so I started with losing that road marker that makes sense only in the US, making the road a simple intersection and focusing on the navigation aspect by giving the location marker and route elements a center position.

Someone commented that there should be a turn in the route, otherwise you wouldn’t need navigation, but I thought about it and decided that was unnecessary complexity: sure there will be turns in the road, but we’re looking at a bit that simply tells you to keep going and cross the intersection.

I added two tones to the background as I found that a single color made the icon boring. So, again, I tried to make it simpler but still keep some superfulous elements that simply add to te visual experience.

Videos

ic_videosThis is another slightly confusing app. These aren’t the videos you made with your camera, they’re the videos you might have transfered to your device to watch or bought on iTunes. So I struggled with this for a while, trying a play sign (like the one on YouTube), or a film frame and not really finding anything I liked.

Then, I remembered the countdown sequence that’s used in film and video alike to cue, well, a video. I thought that would be immediately recognizable by anyone who’s been around long enough to have seen tv or movies a few times and would convey the idea very nicely. I really like this icon also because I think it’s quite original; I’m sure someone has had the same idea before, but I’ve never seen it which at least means it’s not that common.

Notes

ic_notesWas it so hard for Apple to update the Notes icon like I did? Isn’t it the obivous choice? Seemed like a no brainer to me, really! It echoes the previous icon, it’s completely clear and it almost invites you to grab a pencil and scribble something on the lines.

For a while I thought it would be cool to see a bit of the last note you took, right on the icon, but then I thought you might be taking notes that you don’t really want to see splattered on your home screen. That’s the same reason that having the last photo taken as the icon for Photos is a bad idea.

Reminders

ic_remindersThe iOS 6 icon for Reminders was kind of subtle in its own realistic way and the new one in 7 is such a departure from that, I actually had trouble finding it the first few times.

Again, I tried to simplify the iOS 6 idea, rather that go for something that looks like it came out of the Windows 3.1 Program Manager. I think this icon could live with live updates of your last three reminders. Maybe not your last three completed reminders, like I show here (again, using a checkbox icon borrowed from Font Awesome), but maybe your last three incomplete items, or your highest priority ones.

Stocks

ic_stocksMy icon for Stocks isn’t that radically different from the iOS 7 one. Still, I think I managed to achieve a cleaner look.

I had other ideas, namely, having a trend for your portfolio or maybe simply an up green arrow if your stocks were going up on average and a red down arrow if they were falling. But I figured that sort of broad information is mostly useless for actual investors, so I stuck to a line graph.

Game Center

ic_gamecenterWell, I really can’t describe the new Game Center icon. While most icons are simple and, clean, the Game Center icon (and the app, by the way), is made up of overlapping colorful spheres. It’s one of the worst, in my opinion and to be honest, it makes me miss green felt.

I went with the simplest piece of a game I could think of: a dice. There’s also a little playfulness to this icon: if you shake your device, the dice will “roll” and you get a different number. It’s nothing much but it’s fun, makes the icon change, while leaving the simple ivory background and dark dots take care of the familiarity issue and, well, it could actually come in handy!

News Stand

ic_newsstandThe new News Stand icon is graphically cool, but it looks more like a splash screen than an icon. I went with an open “magazine” and added the glasses, which are already used in Safari for “reading list”. I thought the whole thing said “reading”, to me, which is, I think, reasonably accurate for the News Stand app.

I like how it turned out, although it’s the least consistent of all my icons.

iTunes Store

ic_itunesIn iOS, the iTunes Store and the Music icon look the same, which makes little sense, considering iTunes sells videos as well as music.

I left this icon looking like the Music icon for a long time until I thought the play symbol fit it like a glove: the play triangle is very recognizable and is used both to start music and video. I drew the triangle to be the same proportion as the actual play symbol on the iTunes app, just to make things a little more proper.

I’m sure a lot of people will not agree with this icon, but then again, Apple could make things easier by creating a single Apple Store, where you could buy music, shows, movies and apps.

App Store

ic_appstoreI never liked the silly App Store icon, with the objects forming an “A”. Why not simply use the Apple logo? Sure enough, by the time I reached that idea, someone else suggested the same, and I’ve seen the Apple logo be used for App Store elsewhere.

It would be even better if this was the Apple Store app and included everything Apple sells, like I suggested on the iTunes icon.

You may have noticed the previous couple of icons have a stronger gradient to them. That was meant to highlight the ‘store’ apps in the middle of the rest and to echo the OS X Mavericks wave. Not sure it makes all that much sense, but I felt these were the “Apple” icons, whereas the others were their own app icons.

Passbook

ic_passbookMy version of this icon simply adds a bit more detail to the passes represented on the app.

I think it still needs a lot of worked, but to be honest, I got a bit bored with it and wanted to work on something else. 🙂

Compass

ic_compassThis is another one of those apps I think Apple could have integrated elsewhere, Maps comes to mind.

The iOS 7 version looks like something out of an airplane panel, which makes little sense when put together with the rest of the icons. I think it has way too much detail, so I focused on the simplest uses for a compass: finding North. I made the red needle have a light and a dark side, which gives it some volume, while it remains a simple triangle.

Settings

ic_settingsThe new settings icon is terrifying. Seriously, it’s terrible! It’s too complicated, but not for the sake of making it look good, it just looks a mess. Which is a shame, because the iOS 6 Settings icon was pretty cool, especially when it rotated, indicating a system update was underway.

I went back to the interlocked cogs. I did simplify them, but I kept a little bit of realism; for example: I gave each cog a central axis they could rotate on, but I did not make them look like oiled metal.

I really like this one, especially because one of the cogs is partially hidden, making me feel like we’re looking at only a small portion of a large machine. It should be animated, just like the iOS 6 one.

Phone

ic_phoneJust like the messages icon, I kept the phone icon and simply made the receiver horizontal. I don’t like it, I think we should have a different imag for phone than an old phone headset my kids have never even seen in their lives.

I did toy around with some sort of pictogram for a keypad, but came up with nothing really good, so I kept this one and will try to improve it later.

Mail

ic_mailNot much to say about the mail icon, except that I went back to a more realistic look to the envelope. This is another case in which we’re still using old metaphors for new things. They work, I guess, but they’re kind of boring by now.

Maybe I’ll have a better idea later.

Safari

ic_safariThe Safari icon is the culprit of all this exercise. When I first saw it on the keynote video I couldn’t believe how horrible it looked. The white background with the blue circle (I suppose it’s meant to indicate the Earth), the thin lines, everything in it looks like it was a rushed job by someone drawing their very first icon… on MS Paint.

Now, I don’t know who, at Apple, named their browser Safari and thought that a compass was a good icon. The two are vaguely related, I can admit, since you might need a compass to not get lost on a Safari, but, come on.

Anyway, the harm is done and the Safari icon is well known, so I wasn’t about to redesign it. I kept the design and changed the look, and it wasn’t very hard to come up with something simpler than the current iOS 6 version and better looking than the beta iOS 7 version. I really like it.

You may notice the Mail and Safari icons share the color. I thought it made sense, since both are the main “I’m going online” kind of apps in the system.

Music

ic_musicFinally, music. Having changed the iTunes Store icon, the music icon was free to, well, be the music icon. I kept the orange color and sat back, satisfied at the whole thing.

(Yes, it’s inset instead of dropping a shadow, like in the iTunes Store icon, see? They’re kind of related. Oh well, tiny details).

Final thoughts

iOS 7 is still in beta. A lot can change and I’m sure some of it will. I’ve never been a huge fan of Apple icons, to be honest, although I always liked how well they were crafted. And I think therein lies the problem: they were really good at making realistic icons and even if you didn’t like them much, you had to admit they were very well made; but they seem to not be very good at making simplified icons.

Perhaps they are learning, as it is a huge change. And maybe when iOS 7 launches later this year, the icons will look better.

The good part here is that the icons are a small detail in this new version of the operating system and the rest feels great. And, to me, iOS is all about how it feels, how you touch stuff and something happens, how the device reacts to you through the visual interface in such a way that is efficient as well as pleasing.

That’s why I scroll around my screens, open and close folders or swipe my iPad screen with five fingers to reveal running apps, just because. Because it’s there, because it’s animated, it’s responsive, quick and it’s kind of fun.

I think iOS 7 lost none of that, on the contrary, it gained a lot of little details that will make sure the experience of using it remains cohesive and interesting.

Now, if only they remake those hideous icons and control center, then it would rock.

 A bit of giving back

A couple of years after having designed these icons and written this post I got a comment, and later an e-mail, from user Travis who wanted to pick up the Safari icon and make a full set for Apple’s browser.

I think he did a really good job and is sharing it for anyone wanting to use it, so head on over to his Deviant Art page and download his Safari icon set. Thanks a lot, Travis!

UX within the open source community

Right. I’m going to use Git hub. OK? Never mind why, I have to use it and I’m actually kind of psyched to try it out, since I’m not a programmer and not really used to it, but since it sounds like a good idea, here I go.

I’m greeted with a tutorial, which is pretty cool. I go to step 1, and it’s this:

Super! So, I click the link and, for reasons not immediately apparent, I’m no longer at github.com, I’m now at git-scm.com. OK, fine, I’m not frazzled by a different URL and completely different website layout and graphics, because, hey, there’s a big box that reads:

Hey, that’s clear enough, latest version is 1.7.7.4 and I have a Mac, so here I go. Click.

What the…? So… let’s see. Latest version is 1.7.7.4, but when I clicked the Mac icon I got three files, one is labeled 1.7.7.3, so I know it’s not the latest and the description mentions Snow Leopard, but I have Lion. Does it matter? No idea.

Sure, I could have read the release notes, but who does that?

Also, what the hell are the other files? There’s no mention to them anywhere, thus far. Do I need them? What do they do? What are “Finder Droplets”? I have no idea.

OK, I’ll bite. I click the file and get sent to another page. There’s a QR code in the middle of the page. I have absolutely no idea what it does and I suppose it doesn’t matter, because there isn’t a legend or any explanation. I guess you have to be in on it to understand.

I download the DMG, mount it, run the installer. No sweat. It’s not horribly difficult, but I’ve been through this many times, with different software and I always wonder… who makes this? Why do they feel that this makes sense?

This, to me, is one of the problems with open source stuff. It’s a great community that puts out great software, but at the same time, the experience sucks. It’s always fragmented. You have to get this thing from here, that thing from there. Then, you need to configure some obscure stuff on your computer. You jump through different sites, which all look different and, sooner or later, you land on a directory listing longer than your forearm where you have to go through weird filenames to try to figure out which you should be using. In this example, as it turns out, I was told to use 1.7.7.4 and could only get 1.7.7.3, but, luckily enough, there weren’t dozens of weirdly labelled packages, such as alpha, beta, rc, and what have you. It’s ok, I’ve been around enough, I know these things, I’ve setup my share of Gentoo-based Squid proxies and mail servers, but it’s not about me.

It’s about everyone else. It’s not by accident that I emboldened that sentence up there. If you’re not in on it, your screwed. You’re going to eventually give up or spend an afternoon reading documentation to do something basic.

Software should be about the people; people use most software – only a fraction of it is just used by machines – and even though the Open Source community has improved a bit in what comes to user experience, it still remains a paradoxically closed universe that warmly welcomes hackers (yes, I mean actual hackers, not Hollywood hackers), and hobbyists, but leaves out the common Joe.

PS: I work surrounded by brilliant web developers and systems guys and I’m sure most of them would just roll their eyes at this post. Which just goes to show how right I am.

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 new job

Early 2010 my boss started talking to me about the need to make some changes in the way our designers worked and were organized.

I helped out and got involved in the discussion at its early stages, taking the chance to jot down some long-held ideas about how things could be improved.

Around June, ideas began to crystallize and roles be defined. As it seemed more and more likely two teams would be formed, I was asked to head the smaller, senior team. It was, evidently, something I could not refuse.

I was given freedom to pick my team and did so trying to assemble a group of highly experienced professionals which were also heterogeneous enough to provide a versatile team.

Internally, we are the Innovation & Design Team, although the corporation sees us as the Normalization Team, which is OK, since we do have that role as well.

The second, larger team – the Web and Media Design Team, or, not by accident, the WMD Team – deals with most of the creative and technical Design jobs that are at the core of the day to day business at sapo.

I’ve barely even started at my new position but challenges abound. Not only do the four Designers working with me on the I&D team have brought their ongoing projects with them, but we were almost immediately offered the challenge of designing all communication and graphic materials for this year’s Codebits, hands down the most important event sapo organizes yearly.

During the whole process of forming the teams, defining their parts and responsibilities, planning out future work and starting to learn about management, I was myself put ‘under new management‘ with a big internal reshuffling of the deck. For the (much) better, I believe.

2010 has been, undoubtedly, an interesting year. I bought an apartment, had it remodeled, moved, got promoted with a chance to learn a new job and see things from a new perspective, got a new boss and, as interesting as all that is, nothing can come close to the truly remarkable event this year has brought me: my daughter was born.

So, as we approach the end of this agitated year, I feel as if the roller-coaster wagon is just reaching the very top of the highest peak in the track. Hold on, folks.

CSS for Beginners

Recently I was invited to give a short talk on basic CSS at work, as part of a session of four presentations on web development.

Despite my lack of experience with public talking I think it went pretty well and I got the message across. I was happy to find people were coming up to me at the end letting me know they had learned something new.

Although this is an English language blog and most my readers are from the US I haven’t had the time to translate my slides into English for publishing. So, I’ll leave you with the Portuguese presentation for now and later I’ll post the translated version.

Here are the slides:

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.

Safari with the best CSS3 support, IE ruining it for everyone again

Once in a while I go read up on CSS3, then I get frustrated that it’s not a standard yet because it’s so great.

Today I decided to run CSS3.info’s selectors compatibility test. Not that I needed confirmation but, obviously, the (still large), installed base of IE6 around the world is mucking things up for everybody else.

The test is here: http://www.css3.info/selectors-test/test.html

Safari (3.1.2), performed the best passing all the tests. Firefox (3.0), a bit to my surprise – it being so recent and all – only supported 36 of the 43 selectors tested but it was Internet Explorer 6, which I tested because it’s still the standard installed browser on workstations at where I work passed only 10 of the 43 selectors tested.

And, get this, it passed all the #id tests but it failed one of the .class tests! IE6 doesn’t even fully support .class which is the basic CSS selector.

I’d still like to test IE7 and Opera, but I don’t have them right now. I’ll check later and update.

In the meanwhile, we’d better sit down, if we’re waiting for CSS3 to “come out”.