You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Sep 25

Greenpeace Green my Apple project

2007 at 04.19 pm posted by Veerle Pieters

It doesn’t happen that often that we receive an unusual project request. You know, *that* project that makes your eyebrows raise and where you need some time to think about it before agreeing to it. That’s exactly what happened to us a few months ago…

A head scratcher

I'm talking about the design for the "Green my Apple" campaign website. I've always been a passionate Mac user since the beginning of my design carreer. So the morning that I received this particular request, it raised my eyebrows a bit and had me stunned for a moment. Not only is it about one of my favorite brands, but also a tool that I use every day. So I had to let it all sink in a bit and read what the campaign was about. In the end I had the feeling the whole thing made some sense but that wasn't the only issue that bothered me.

Playing copy-cat

For me personally, the toughest part was that my job consisted of copying Apple's website design. This is against everything I stand for. OK I browse around, look in books etc. and I see a lot of inspiration and elements of designs that I think are useful and they give me new ideas. In a certain way you copy things that other designers already designed, but you always add your own twist. You mould it to your own interpretation. A great article on that subject is written by my friend Cameron Moll back in 2003: "Good Designers Copy, Great Designers Steal".

Greenpeace 'Green my Apple' .mAct front page design

Can I get into trouble?

What Greenpeace asked me to do was to literally copy Apple's website design and add a green touch to it. I needed some time to think about this. First of all I wondered about the consequences of doing this, but Greenpeace assured me (in writing) that they would take the full responsibility in case some legal action would be taken from Apple. Then I thought about the campaign itself if I stood behind the idea. I thought Apple was doing not too bad, but I thought if the whole idea is just to send out a positive message I'm OK with it. And so my answer was yes.

The design process

The briefing

I also wondered if the job would be creative enough since a big piece consisted of copying, so a lot of things were already defined. From the briefing it was clear to me that most pages needed a lot of Photoshop and illustration work, especially the .mAct pages which should reflect .Mac. Greenpeace delivered me the basic structure and wireframes of the site with the text for the content. I also received a description for some of the visuals and the headers and a set of photos for me to start with.

Creation of the visuals

However the set of photos I received to work with was rather limited. We also didn't have the luxury of high quality product shots. I used those that Greenpeace delivered me, not taken by a real professional photographer, but usable. I even used a photo I took myself of my laptop for the iPush page. Since this one required perfect 90° corners I had to do some Photoshop transform work to get that right. However the biggest challenge for me was to work with these images of dumps with Asian people. Absolutely unattractive photo material in comparison to the shiny professional looking promotional shots Apple uses.

Still, I've managed to give the pages a real Apple look and feel by using them in a creative way. Because of the way we implemented these, things ended up attractive. Especially on the .mAct front page I played around with them on the globe and I added the film and music elements so the similarity is rather striking. I mixed the images with a royalty free stock image of 2 hands holding a green Apple and I decided to use that image as central visual throughout the site.

The navigation, illustrations and icons

For the tabbed navigation I thought of using a slightly different glassy effect where I didn't add that much shadow, but Greenpeace really wanted me to create the exact effect. So even if I tried to make it a slightly bit different my client didn't want that. I can't stretch it enough how difficult it was to do this.

Greenpeace 'Green my Apple' navigation

This site needed the same slickness of its orignal. That's why the icons and illustrations were so important. They needed the same style, the same level of quality. Drawing these and creating them in Illustrator was one of the most fun parts of the project.

Greenpeace 'Green my Apple' icons and illustrations

The CSS of the navigation

For the coding part of the project I worked with Roger Johansson. I asked Roger if he was willing to share some of the CSS part of this project. He was, so I will pass on the mic to Roger:

One thing that is worth describing is how the menu is created. The design had to be exactly like Apple’s, which means using the same font they do for the menu tabs. That font is Myriad, which is not one of the fonts you can rely upon being available on visitors’ computers. So the menu had to use images not only for the tab backgrounds, but for the text itself as well.

The problem with doing that is that it prevents most people from increasing text size. Opera and IE 7 have zoom features that increase the size of images as well as text, but in other browsers increasing text will do nothing to the menu. That is a trade-off we had to make here. The text in the tabs is reasonably large as it is, so it shouldn’t cause too much trouble for too many people.

The HTML

The HTML for the menu is an unordered list contained in a div element, and looks like this:

  1. <div id="nav-main">
  2. <ul class="clearfix">
  3. <li id="nav-1"><a href="home"><em></em>Home</a></li>
  4. <li id="nav-2"><a href="about"><em></em>About</a></li>
  5. <li id="nav-3"><a href="itox"><em></em>iTox + iWaste</a></li>
  6. <li id="nav-4"><a href="mAct" class="sel"><em></em>.mAct</a></li>
  7. <li id="nav-5"><a href="procreate"><em></em>ProCreate</a></li>
  8. <li id="nav-6"><a href="ipush"><em></em>iPush</a></li>
  9. </ul>
  10. </div>

Each list item has a unique id which enabled us to style each tab differently. The links also each contain an empty em element since we used a variation of the Gilder/Levin Method for image replacement. It does introduce a non-semantic element into the markup, but since that element is there to increase the accessibility of the method, we think it’s worth it.

You may be wondering why we used em and not span elements for the image replacement. The answer is browser workarounds. The client required that the site works in Internet Explorer 5, including IE/Mac. When you use span elements, the links become unclickable in IE/Mac, but em elements work fine, as described by Michael Ryznar. Not a semantic use of the em element, but it’s better than making the links unclickable for anyone who happens to still be using IE/Mac.

The CSS

The relevant CSS used to create the tabs is this:

  1. body {
  2. background:url(/images/nav-main.gif) repeat-x 0 -336px;
  3. }
  4. #nav-main {
  5. width:588px;
  6. margin:0 auto 19px;
  7. padding:9px 0 21px;
  8. }
  9. #nav-main ul {
  10. margin:0;
  11. padding:0;
  12. list-style:none;
  13. }
  14. #nav-main li {
  15. float:left;
  16. width:auto;
  17. margin:0;
  18. padding:0;
  19. line-height:normal;
  20. }
  21. #nav-main a {
  22. position:relative;
  23. float:left;
  24. width:98px;
  25. height:28px;
  26. /* Hide from IE Mac \*/
  27. overflow:hidden;
  28. /* End hide from IE Mac */
  29. }
  30. #nav-main em {
  31. display:block;
  32. position:absolute;
  33. width:100%;
  34. height:100%;
  35. background-image:url(/images/nav-main.gif);
  36. background-repeat:no-repeat;
  37. cursor:pointer;
  38. }
  39. #nav-1 a em {background-position:0 0;}
  40. #nav-2 a em {background-position:0 -56px;}
  41. #nav-3 a em {background-position:0 -112px;}
  42. #nav-4 a em {background-position:0 -168px;}
  43. #nav-5 a em {background-position:0 -224px;}
  44. #nav-6 a em {background-position:0 -280px;}
  45. #nav-1 .sel em {background-position:0 -28px;}
  46. #nav-2 .sel em {background-position:0 -84px;}
  47. #nav-3 .sel em {background-position:0 -140px;}
  48. #nav-4 .sel em {background-position:0 -196px;}
  49. #nav-5 .sel em {background-position:0 -252px;}
  50. #nav-6 .sel em {background-position:0 -308px;}

The tabs all use the same fixed width, and as you may have noticed they all share the same background image (nav-main.gif), which is also used for the horizontal grey stripes and the green bar below the tabs.

Displaying each tab in its default and selected states is just a matter of positioning the background image. This can be a great way of saving bandwidth and cutting down on server requests, resulting in a faster-loading site.

One more problem we encountered is related to text size. Since the image replacement method we use only hides the actual text behind the image, the text will peek out from behind the image if text size is increased enough. That may or may not be a huge problem, but we decided to eliminate the risk of the menu becoming confusing by using overflow:hidden. This does cause an accessibility issue for people who have images disabled and increase text sizeto 150 % or so, but we decided that it is an acceptable compromise.

Thank you Roger

I thank Roger for taking the time to share this valuable information about one of the most challenging parts of the site to code in CSS.

This article is about the design, not the subject

The site launched last year and caused a lot of reactions. I'm glad it was a success. The site received a few awards, even a Webby award of which I'm pretty proud of :) It's now in 'inactive' mode and Greenpeace added a banner at the top with a message. Because of that the light gradient background on some of the pages doesn't show up and I didn't find the time so far to help them fix this issue. Back when the site launched I decided not to write about it yet because I didn't want to start a discussion about environment and Apple etc. I decided just to keep it quiet for a bit. Then time passed by and things got postponed because of too many other projects going on. To be absolutely clear here, I still don't want this discussion, so please if you comment stick to the design part, the challenge and CSS. Comments about environment and if you agree or not will be deleted. Don't say I didn't warn you :)


22served

gravatar

1

permalink this comment Colin Tue Sep 25, 2007 at 04.55 pm

However the biggest challenge for me was to work with these images of dumps with Asian people. Absolutely unattractive photo material.

What’s wrong with Asians?


gravatar

2

permalink this comment Veerle Tue Sep 25, 2007 at 05.06 pm

Colin said:

What’s wrong with Asians?

Duh! Nothing of course, in fact my best friend is Taiwanese. I thought people would understand what I mean here. So for your reading pleasure I adjusted the sentence ;)


gravatar

3

permalink this comment George Huf Tue Sep 25, 2007 at 05.33 pm

I usually avoid the “cookie-cutter” site requests out of principle for all the reasons you mentioned above.

However, the forbidden fruit of Apple must have been tempting - and if it’s being shed in a good light through Green peace, what tha heck?

I agree - it’s very good. When will they ask you for the refreshed Apple.com look?


gravatar

4

permalink this comment Jen Tue Sep 25, 2007 at 07.16 pm

I really like how there aren’t a lot of rollover “dramatics” on the page. I don’t like them very much (but I suppose context is everything) and I think that NOT having them adds an air of seriousness to the page aesthetic.

As always, thank you for the inspiration :)


gravatar

5

permalink this comment Unexpected Tue Sep 25, 2007 at 08.22 pm

I saw the site back then but never knew it was your work Veerle. Lovely job! Really.


gravatar

6

permalink this comment Alexander Wed Sep 26, 2007 at 02.18 am

George said:

I agree - it’s very good. When will they ask you for the refreshed Apple.com look?

Apple.com just recently did just that redesign of their page, I think we will have to wait a couple of years for next opportunity…

I think you have done a great work with this, Veerle. I thought I saw this in your previous article about how deadlines can kill inspiration (That image showing a lot of sites) and it puzzled me a little as I thought that you that site like the Mac-Inspired one would’ve been something you probably would’ve mentioned - if you were behind it (Doubt you would be showing a lot of pages that you haven’t done though); And voilá! Here we have it…

As I said, good work with it! And interesting to read about the working process…


gravatar

7

permalink this comment Jackie Wed Sep 26, 2007 at 02.51 am

Yes - I saw it too on the Webby Awards. Most impressed to find it was designed by you, but looking at it I can see much of your design style in it, so it makes total sense! I think it was a very clever design idea.


gravatar

8

permalink this comment Blair Wed Sep 26, 2007 at 03.24 am

Great Illustrtor work (as usual). I have to say you are one of my greatest inspirations!

... but what about http://www.apple.com/hotnews/agreenerapple/


gravatar

9

permalink this comment Jermayn Parker Wed Sep 26, 2007 at 05.45 am

Great work, the css menu looks complicated! but the end product works.

To be truthly honest I actually like the final version of the menu better than your proposed one. It has more guts and is beefer which means it stands out more imo.


gravatar

10

permalink this comment Veerle Wed Sep 26, 2007 at 08.16 am

George Huf said:

I agree - it’s very good. When will they ask you for the refreshed Apple.com look?

The campaign is over and Greenpeace got a response from Apple (see below) so there will be no new look.

Blair said:

... but what about http://www.apple.com/hotnews/agreenerapple/

Well that letter is a direct result of the campaign as mentioned in the orange banner at the top on the website.

Jermayn Parker said:

To be truthly honest I actually like the final version of the menu better than your proposed one. It has more guts and is beefer which means it stands out more imo.

To be honest me too and I guess that I subconsciously wanted it differently because of the copying. I had a hard time with that.


gravatar

11

permalink this comment Katie Wed Sep 26, 2007 at 09.31 am

Being asked to copy the Apple site would have given me pause too, but I think the way you replicated and modified the design is inspiring. I can only imagine the challenges involved.  Once again, your illustration skills have proven to be simply amazing.

Thanks to Roger for sharing the creation of the tabs though… as a web designer who is still learning all the ins and outs of Web 2.0 design standards, this was really interesting and helpful to me.


gravatar

12

permalink this comment Tom Wed Sep 26, 2007 at 09.47 am

I did wonder who made this site, I remember finding it a while back and thoroughly enjoying the mocked aspect. I loved all of the little adverts everywhere - unsure if you came up with the copy for them too, but they worked great! I agree it’s a bit odd to copy, especially from Apple, but at least the idea was to shadow the actual design as a joke, and not just a rip off for a rival company.


gravatar

13

permalink this comment Jackie Wed Sep 26, 2007 at 12.42 pm

Tom is right - in this case the copy was actually a parody used to bring attention to a good cause, which is perfectly okay to do.  The icon illustrations are very nice and the photos are too - on the About page - I like the way you put them into the computer screens.


gravatar

14

permalink this comment 74designs Wed Sep 26, 2007 at 08.54 pm

Fantastic work as usual.  Thank you for sharing.

Speaking of the design process…..When will we see the new duoh! site?


gravatar

15

permalink this comment Jens Schulze Thu Sep 27, 2007 at 07.16 pm

Hi, im sorry but dont get it. Why u use “<em></em>” for navigation links?


gravatar

16

permalink this comment Dustin Brewer Thu Sep 27, 2007 at 11.17 pm

Great post and I love the Green peace twist for the Apple site. I think the site used plenty of creativity, plus it is all for good causes.


gravatar

17

permalink this comment rick Fri Sep 28, 2007 at 06.45 am

Since Apple has a new design now, looks like it’s back to the drawing board!


gravatar

18

permalink this comment Tom Fri Sep 28, 2007 at 10.48 am

As the person who at Greenpeace who commissioned this work from Veerle, it’s a very interesting post to read about the thoughts and considerations on the other side of the commissioning process.

Of course we choose Veerle exactly because she is first a great designer, but clearly also passionate about Apple (so representing exactly the target audience of Green my Apple campaign). The fact that we could convince her to work on the site was the first good sign of the sort of response we would get from Mac users. As the site was targeted at Mac fans that’s why we asked for a design very close to Apple’s but using our own logo and photos.

Veerle has also been characteristically modest - the design also was nominated for a SXSW design award in 2007, which kinda brought it nicely full circle as we first met Veerle at SXSW in 2006.

The wonderful design helped make this site one of Greenpeace’s most popular websites and generated a lot of comments in the blogosphere. Thanks again for doing a great job and putting up with my sometimes demanding requests :-)

While Veerle understandably doesn’t want a discussion here about the environmental aspects of the campaign I’ll shamelessly use that to include some links to our site - the story of the campaign and everyone’s welcome to discuss the issues in our forum or weblog.

Cheers,
Tom@Greenpeace


gravatar

19

permalink this comment Roger Johansson Fri Sep 28, 2007 at 10.54 am

Jens Schulze said:

Hi, im sorry but dont get it. Why u use “<em></em>” for navigation links?

The article explains why we used em elements in the nav. There’s a whole paragraph about it before the CSS listing ;-).


gravatar

20

permalink this comment Joao Carvalhinho Fri Sep 28, 2007 at 12.30 pm

I remember this site very well… I thought that the web designer that did it must have been a great artist, as he/she had managed to create, not a simple copy of the original, but an entirely new site with exactly the same feeling, not only by maintaining the overall structure, but giving it the same sense of simplicity as the original, even on the new content.

Seeing now that it was you, one of my “muses”, it all makes sense and puts a smile in my face…

Congratulations… By the way… great post! Very detailed, and perfectly explained…as usual!
JPCarvalhinho


gravatar

21

permalink this comment Veerle Fri Sep 28, 2007 at 01.37 pm

Tom said:

I loved all of the little adverts everywhere - unsure if you came up with the copy for them too, but they worked great!

The design yes, but not the copywriting itself, Greenpeace did that. They did a good job indeed.

rick said:

Since Apple has a new design now, looks like it’s back to the drawing board!

As stated in my article, the site was launched about a year ago and is already inactive for while.

Tom said:

... The wonderful design helped make this site one of Greenpeace’s most popular websites and generated a lot of comments in the blogosphere. Thanks again for doing a great job and putting up with my sometimes demanding requests :-) ...

Thank you for the nice words here and for the good collaboration and for giving me the opportunity to work on this creative challenging project :)


gravatar

22

permalink this comment loptar Fri Oct 5, 2007 at 09.50 am

your work is great! it’s not a copy job but a parody with some objectives, that’s the meaning of creative works :-)

cheers,

loptar



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist