Apple: What Were You Thinking?

Apple’s reputation for bringing beautiful design to the world of technology is rock-solid, from products to packaging to marketing material. Whenever Steve Jobs has been at the helm, great design has been the focus.

But we’ve found an anomaly for you. Apple’s Summer Movie Guide features a pretty hard-to-look-at design, and it doesn’t look like something that should have gotten past Jobs’ watchful eye. Let’s take a look at the design, see what’s wrong with it and figure out how it could be remedied.

Color Scheme

The first thing that strikes me is the color scheme. The dull green-blue on a bright orange background immediately creates a contrast problem, drawing the eyes to the bright orange while making it difficult to concentrate on the dark, subdued center. While the use of such a bright background could be troublesome in any configuration, the contrast between the two is the main problem and even a white foreground replacing the green-blue would be preferable.

You’ll notice that, at the top of the page, “iTunes Movie Trailers” and the navigation links are nearly invisible against the bright orange background.

If you scroll down the page as the gradient progresses, instead of green-blue on orange you’ll see a brighter blue on a darker green background. This is much easier on the eyes and allows you to more easily focus on the text.

However, the orange text used in the heading for each month works much better at the top of the page. It clashes belligerently with the bright blue towards the second half of the page.

How can Apple fix it? Change the color scheme to use a darker background and a lighter foreground, as can be seen at the bottom of the page. Make the section headers white or something else that’s more neutral.

Summer Movie Guide Banner

To me, the banner — the first image inside the teal box — is one of the better designed components of the site. It could use a dash of familiar branding to engage the viewer’s loyalty, though.

How can Apple fix it? Apple could consider including the Apple logo to the left of the words “iTunes Movie Trailers” and redoing those words in the classic Apple font used for all headings on the site. The words “Summer Movie Guide” look great and on-theme as they are.

Here’s an example of the words “iTunes Movie Trailers” in the more traditional Apple font as seen elsewhere on the site:

Layout

The layout for this page puts the content — the movies — front and center, delineated by the most important information for the reader: when is a particular movie coming out?

Apple’s typical tiled look from the iTunes Store is missing, leaving some large gaps. Whitespace is important, but typically in an Apple design the only whitespace is there by design, not due to a lack of content.

One thing I love about Apple’s designers is that they make their store pages look alive and exciting, with moving elements and hover-over effects that reveal more information; this is missing from the page, which makes the design look comparatively dead. It’d be good to hover over a movie thumbnail and see more information overlaying the image.

How can Apple fix it? Explore a tiling layout that leaves no conspicuous empty spaces that aren’t helpful to developing the structure of the page. Provide some subtle movement and interactivity to elements such as the movie thumbnails; in the past year or so hovering for more information has become part of the user’s expectation.

Conclusion

The page has some good elements, but as a whole, it’s a disaster. Apple needs to make changes to the color scheme pronto, and consider some other improvements while they’re on the job. If you’ve got other suggestions for the page, let us know in the comments — we hope you enjoyed this deconstruction.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Taylor

    This summer movie guide is over 9 months old. It was put up last spring. Jobs was definitely alive when it went live.

  • http://zymora-tech.com Adrian

    Surprisingly that page is so badly designed that it doesn’t look anything like Apple Inc. From Apple website to iTunes to their packing, a lot of people can recognize the brand from far. Yet this page is weirdly un-Apple like.

  • ralph

    haha… as of today, they got rid of the awfull color scheme.

    • http://methodicstudios.com Joel Falconer

      I’m still seeing the teal-on-orange design

  • http://thegeekgrounds.com Jean-Pierre Gassin

    @ralph I am still seeing the same design as well, can you provide a link to a screenshot?

    • ralph

      okay… I didn’t check other browsers, but this is what I see in Firefox 9
      http://www.gentlemedia.nl/img/supermovie.jpg

      • Paul

        It’s using a webkit gradient so doesn’t work in Firefox. That makes the designers look even worse since they didn’t even know how to make it look the same on all platforms.

    • ralph

      I checked in Safari and see now indeed the awfull background. Not so strange since they’ve only declared the webkit prefix for that gradient in the css.

  • http://www.pragmaticdesign.co.uk Web Design Wolverhampton

    I actually thought that screen grab was a spoof! First they appoint a guy from Dixons to run their stores, now this. Is it all going horribly wrong at Apple?

  • Leandro

    you´re right! it´s a disaster! what´s wrong apple? You need a new designer? I´m here! haha! :P

  • batty13

    What a disaster even with “changes”. I am looking at this now in absolute disbelief and heartbreak. This is like something you would see from a first year web designer in their freshman class project. “Design a movie page for summer movies”. No, really. This is an utter catastrophe.

    The header image with the font and the warp used omfg, I died. The massive letter spacing for Itunes Movie Trailers is way over extended. And insult to injury there is a orange border around the summer font with one of those font glows.. no seriously, all we need now is a horrible cliche drop shadow.. oh wait, it has that too. I mean every classic Fubar from a first year designer is present in the train wreck.

    You cant even read the text titles above the dates in Firefox. You have to highlight the text to see they are even there.

    Then there’s the green border around the whole set and a huge blank white space up top with hidden elements which should be the top navigation bar.

    I’m selling all my apple stock pronto..

    • batty13

      Wow… I just looked at it in google chrome and saw the orange tiled background and the blue background on the inside with the orange text poorly contrasted like this post mentioned. They really need to hang their head in shame on this one, I dont see how this ever got off the test box.

      The site looks completely different in firefox btw. Talk about more bad design.

  • Ian

    Looks like they’ve changed the background to white but forgot to change the movie title text. White on white is just a little difficult…is this really Apple?

  • http://www.praveena.me Praveena Sarathchandra

    I couldn’t believe my eyes when I first saw this! I rechecked the address to see if it’s *really* Apple work! Must have been outsourced to some cheap designer! Bad Bad design

  • http://mapharo.com rlouisetee

    Okay I have now seriously seen everything! Horribly depressing….

  • http://www.charcoaldesign.com.au Michael Bretherton

    That background gradient alone is enough to turn my stomach. Not pretty.

  • http://twitter.com/pushingvision Penelope Singer

    In Safari you’ll see the version that’s orange & teal, which, being complementary colors, create a pretty hideous strobe-like illusion where they touch. Ironically enough, both Firefox and Internet Explorer render the background as white, and while it doesn’t fix the other serious design flaws, it does reduce them. I’m wondering too about the accessibility issues with the orange month titles on the teal background.

    Loved that this article was able to critique rather than lambast Apple, as well as give suggestions for improvements. All the points here are dead on.

    BTW: The site looks as bad on both the iPhone and iPad, although there’s not nearly as much orange background due to screen size. And yet somehow, despite this one lone website, I still love Apple products. Go figure.

  • http://www.motorcyclemelee.com Motorcycle Melee

    … or was was a marketing ploy. Look at the attention it got – all because we like to expose poor design. I’d be curious what their revenue was for the time period from when the site was launched through today? Did the ‘negative’ publicity create higher revenue? Was this “Guerrilla” marketing in action?

  • warren

    While this movie guide is clearly a non-Apple design and pretty hideous (probably farmed out to a 3rd party at the last minute) I’d say Apple’s site design, as well as the iOS graphic elements, are somewhat behind the times, with it’s Web 2.0 style gloss, shadow and reflections.

    Obviously this is a personal opinion, but I’ve always disliked the faux real world analogy when it comes to the design of buttons etc on a 2d interface.

  • http://www.phpfusion.ro/ kneekoo

    OMG… :( It looks like one of my designs. And I’m bad with design.

  • Ally

    I actually feel queasy looking at this site. First the awful leather-look iCal and Address book skins, now this. Apple please get it together!!

  • http://www.design-streams.com Ann Mehrman

    Looks like the same design team that influenced the Lion interface that doesn’t have the same clean “Apple” look either.

  • joe

    So what!
    It’s just an example of the many poorly designed web pages that exist – because we live in a world where design has become more important than function.

    Simplicity is the key.

    • Jason

      Joe, this site has terrible design AND lost functionality. If you hover in the bright orange space at the top (above the banner), you’ll see your cursor change to indicate a hyperlink. You can’t SEE the links because they’re set as the same color as the hideous background, but they’re there…if you can find them!

      Horrible design often leads to poor functionality…it’s not just gloss and “making things look pretty.”

  • Xplosiv

    Strangely, it looks best in IE9! Can even see the link on top clearly. Some collusion with Bill Gates maybe?

  • Paul

    Was this ever actually live? I tried navigating to it, but couldn’t find a way. Maybe it was never meant to be seen! It’s out of date, so why is it still there?

  • http://thegeekgrounds.com Jean-Pierre Gassin

    @Paul – It’s still live http://trailers.apple.com/trailers/summer/

  • Niko

    Maybe it’s the new web-fashion! Check this out:
    http://www.sourcebits.com/tangleddecals/

  • bhupal

    Some inspire, some need inspiration for others there’s always the bin. No room for errors plain and simple!

  • http://www.anchorstl.com Advertising Agencies St. Louis

    It’s definitely ugly and can use a lot of improvement.

  • http://www.anchorstl.com Michael Meininger

    Usually Mac does so many things right but this just comes across as a bad college project.

    Apple is known and renowned for the cleanliness and sleekness of what they create and this misses the mark on so many levels.

    People demand the crucial and easy information and this misses the mark.