Corporate Website Design: Creative and Beautiful Solutions

Advertisement

What do corporate websites have in common with other people’s children? Three things: they have their charm, like finger-paintings on the refrigerator; they can be useful, if infrequently; they are usually admired only by the people who created them.

While designers know that a user’s experience on a website has a large impact on the way that customer will interact with them, impressing that concept on the corporate establishment has taken a very long time. Trends in design are making their way into corporate web, albeit slowly; with patience and a little luck, businesses will soon start to consider carefully coded and appropriately functional design as important as their mission statement and recent sustainability reports.

One unfortunate fact is evident above all else: despite having plenty of money at their disposal, many corporations are lost in sterile MS Word-esque designs that are more stagnant than a museum exhibit… though at least museums have dinosaurs and mummies and stuff. Here’s hoping we all will get new corporate clients soon.

Below, we present some interesting corporate websites, although the insight they offer may not be immediately apparent. This review is not about aesthetics or visual appeal, but rather about the design solutions the sites exhibit. In fact, corporate websites aren’t as visually arresting as you might think, so if the appeal isn’t immediately apparent in the previews below, take a moment to visit and interact with each of them.

Beautiful Corporate Websites

Levi Strauss & Co1
With its website, Levis demonstrates that it has not only a strong flair for style and interactivity, but a rich sense of history. Hover over or click the photographs to see some of the company’s defining moments; ever known for its sense of identity, Levis draws you into its past, present and future, excellently breaking through to customers and inviting them to stay.

Screenshot, LeviStrauss.com.2

McDonald’s3
By simplifying and softening the navigation, McDonald’s opens the entire screen up to use as canvas for their product. Harmonious colors in the typography complement the food (and exploit the visual association with hamburgers), while the vivid photography does not obscure surrounding elements.

Screenshot, McDonalds.com.4

Starbucks5
Gentle colors and careful hierarchy of elements aside, Starbucks’ strength is in the details. The navigation exhibits an attention to hierarchy not often seen on corporate websites, while offering alternative destination links, should you find yourself in the wrong section. Such consideration for the user would be a welcome trend in design going into 2011.

Screenshot, Starbucks.com.6

Sony7
You’ll see that this is a link to Sony Canada’s website. While the navigation and theme is the same as its American counterpart, the experience here is different: here you can see short films in which people relate their experiences of how Sony technology has enriched their lives. Best of all, a floating meter lets you sort stories into categories, giving you control of the content. Brilliantly executed.

Screenshot, Sony.ca.8

The Ones You Would Expect

Adidas9
Few websites employ a grid design that is at once so rigid and flexible. Individual modules expand and contract to allow for dynamic exploration—a lot of fun, particularly because the website has so many parts to explore. The only thing to note is that images do not obviously reflects the content they open to display, necessitating the standard top-menu — an important point in usability.

Screenshot, Adidas.com.10

Citroen11
While the technique of using tiny images to fill a shape has been done a million ways, Citroen takes an old technique to the next level. Draw your cursor across the world to see the photos dance around it, beckoning you to select a region. An excellent use of a landing page, effectively drawing in users without information inundation.

Screenshot, Citroen.com.12

Fender Guitars13
While you may need to be a guitar player to fully appreciate the beautiful lines and tones of Fender products, you need only a pair of eyes to appreciate the simplicity and functionality of Fender’s website. Unobtrusive navigation at the top and hot links lower down make way for a large stage on which Fender can showcase the stars of its website: its beautiful instruments.

Screenshot, Fender.com.14

Heinz15
One of the most recognizable brands in the world, Heinz has intelligently focused its website on its consumers. Rotate the globe by clicking on photos to see simple recipes from around the world. A design brilliantly suited to users of any skill level, Heinz has found a new means to engage their customers and entice them to visit more.

Screenshot, Heinz.com.16

Prologue Films17
Any company that designs opening credits and effects for movies needs a keen aesthetic sense, and Prologue Films’ visual dynamic is evident on its website. A clean grid with gray tones puts the company’s custom type and effects (an impressive collection) front and center, the same technique made famous by artists and photographers. Using a pop-up window for the content, though, is ill-advised.

Screenshot, PrologueFilms.com.18

Rolex19
The beauty of this website is in Rolex’ masterful attention to detail. With the gorgeous products on display, the eye almost misses the clever tricks contained therein, such as the clock face that adjusts to your time zone. The intuitive user experience reinforces the notion that great design blends together. When it works right, it’s seamless.

Screenshot, Rolex.com.20

Steinway & Sons21
Lucky for us, Steinway invests as much effort into its website as it does into its pianos. Elegant type and warm subtle imagery grace this design and project an image of quality, undoubtedly the intended effect.

Screenshot, Steinway.com.22

The Ones You Should Have Thought Of

Aflac23
While a blue and white palette is nothing new, Aflac has mastered the use of subtle gradients to enhance type. Smartly assembled, this site is intuitive and easily digestible. The clever part is the horizontal scrolling frame, a visual hook aptly used here to display customer testimonials.

Screenshot, Aflac.com (Individuals).24

American Standard25
A gorgeous website; American Standard exemplifies grid design, employing the majority of frame as a news scroller. Intelligent use of color, elegant type and thoughtful spacing make this website particularly easy on the eyes.

Screenshot, American Standard (americanstandard-us.com).26

Avery Dennison27
At first glance, this might look like the website of any old manufacturer of office supplies. At second glance, though, brilliant little touches leap out:: the subtle grid, the attention to readability, the side-scrolling frame that harmonizes type, color and imagery. Oddly dissonant, the side and top navigations make this website looks almost as if it were a composite of different designs over time, a curiosity.

Screenshot, AveryDennison.com.28

Con Edison29
While the Con Edison website doesn’t have much to look at, the section for the annual report has been capably executed. Great attention to space, clean type and subtle movement are all used to great effect in this section where Con Edison addresses its corporate responsibility.

Screenshot, ConEdison.com.30

Grow Interactive31
Most interactive firms don’t have exciting websites, which makes Grow stand out all the more. Grow demonstrates an expert use of type and illustration, moving your eye in perfect circles over the page, and nuances like the small interactive animals along the footer make it stand out among its peers.

Screenshot, Grow Interactive (thisisgrow.com).32

PGI33 (formerly Premiere Global)
Here is another rare instance of a Canadian version surpassing its regional siblings. A playful take on the boxed blog/corporate theme, the website for PGI puts an interactive panel into the fold, an attractive way to draw users further into the website. The layout and color elements are evidence of authentic design acumen.

Screenshot, PGI.com.34

Rohm and Haas35
This Fortune 500 company knows how to engage visitors online, with interactive features coming from every angle. The innovation in its products is reflected in the playfulness of the website, which encourages users to explore. Careful, effective use of otherwise familiar textures and themes support an engaging concept, to good effect.

Screenshot, RohmHaas.com.36

Society for Environmental Graphic Design37
While the inclusion of an organization of graphic designers in this showcase is no surprise, SEGD shines in its presentation of simple yet powerful elements. As any designer can attest, bold colorful shapes can easily run a design off course, but that isn’t the case here. SEGD has married vivid color with effective usability, creating a website that is smooth and wonderfully user-friendly.

Screenshot, SEGD.com.38

Virb39
Recently rebranded and redesigned, Virb demonstrates a capable grasp of visual elements even in this placeholder page: good typography, ample white space, soft shapes and forms — akin more to social media than standard corporate toadery, excellently indicative of the target demographic.

Screenshot, Virb.com.40

The Ones You Might Not Know About

Acro Media41
A Web development firm that knows exactly when to stick to the grid and when to break boundaries. The most impressive parts of this website are the way certain elements react to hovering, such as the company name in yellow at the top left. Mousing over it flips the logo around to display a toll-free number. Clever.

Screenshot, Acromediainc.com.42

AgencyNet Interactive43
The spirit of AgencyNet is clearly the team of creatives behind its work. Showing the team at work (and play) behind the scenes in the office is refreshing, well executed and a great way to engage viewers to learn about the company.

Screenshot, AgencyNet.com.44

AmoebaCorp45
A small creative firm, AmoebaCorp shows expert use of type on its website. The type establishes a strong hierarchy, enabling the content and navigation to coexist on the left without confusing the user about functionality.

Screenshot, AmoebaCorp.com.46

Imaginary Forces47
Less is more with Imaginary Forces, which displays its brilliant work as prominently as possible by cluttering the screen as little as possible. Even without the showcased work, the website would stand out: take away the grand images, and you’d still have a clever arrangement of type and navigation, which is more than can be said of most websites.

Screenshot, ImaginaryForces.com.48

Kurylowicz & Associates49
This Polish architecture firm has produced a website that bleeds inspiration from every pixel. Elegant in its use of gray tones, this website combines line, shape and space in a way no other website does. Perhaps it took an engineer to think abstractly enough to design with such abandon, but the result is brilliance online, from start to finish.

Screenshot, Kurylowicz & Associates, (apaka.com.pl).50

Vancouver Convention Centre51
Aside from the harmonious colors and subtle grid that frames the content, the Vancouver Convention Centre succeeds by going the extra mile to make its website visitors feel local: the “Cheers!” factor in action. Not many websites impart a sense of belonging with their welcome; that this one does makes a strong case for using heart as a design tool as much as shape, color and texture.

Screenshot, VancouverConventionCentre.com.52

What Have We Learned Today, Bobby?

Finding beautiful corporate websites proved to be quite a challenge, and we had to make a number of unusual choices along the way. We sought regional versions of international websites, for instance, because multi-national companies present a number of differences among their sister websites. Bizarrely, did you know that many Fortune 500 companies don’t even have websites? Or worse, have non-working ones?

Admittedly, the word “corporate” is pretty loose in definition here. For the sake of impartiality, we did not discriminate by industry or field. We were more interested in collecting websites that employ interesting techniques. Because innovative and fresh stand out on the Web whatever the industry, putting aside traditional definitions is crucial.

For further reading on corporate websites and design, you may be interested in Corporate Blog Design: Trends and Examples53, published August 2009.

Would you like to see more similar showcases on SM?


(al)

Footnotes

  1. 1 http://levistrauss.com/
  2. 2 http://levistrauss.com/
  3. 3 http://www.mcdonalds.com/
  4. 4 http://www.mcdonalds.com/
  5. 5 http://www.starbucks.com/
  6. 6 http://www.starbucks.com/
  7. 7 http://www.sony.ca/
  8. 8 http://www.sony.ca/
  9. 9 http://www.adidas.com/us/homepage.asp
  10. 10 http://www.adidas.com/us/homepage.asp
  11. 11 http://www.citroen.com/
  12. 12 http://www.citroen.com/
  13. 13 http://fender.com/
  14. 14 http://fender.com/
  15. 15 http://www.heinz.com/
  16. 16 http://www.heinz.com/
  17. 17 http://www.prologuefilms.com/
  18. 18 http://www.prologuefilms.com/
  19. 19 http://www.rolex.com/
  20. 20 http://www.rolex.com/
  21. 21 http://steinway.com/
  22. 22 http://steinway.com/
  23. 23 http://www.aflac.com/
  24. 24 http://www.aflac.com/
  25. 25 http://www.americanstandard-us.com/
  26. 26 http://www.americanstandard-us.com/
  27. 27 http://www.averydennison.com/avy/en_us/
  28. 28 http://www.averydennison.com/avy/en_us/
  29. 29 http://www.conedison.com/EHS/AnnualReport/
  30. 30 http://www.conedison.com/EHS/AnnualReport/
  31. 31 http://www.thisisgrow.com/
  32. 32 http://www.thisisgrow.com/
  33. 33 http://www.pgi.com/ca/en/
  34. 34 http://www.pgi.com/ca/en/
  35. 35 http://www.rohmhaas.com/
  36. 36 http://www.rohmhaas.com/
  37. 37 http://www.segd.org/
  38. 38 http://www.segd.org/
  39. 39 http://virb.com/
  40. 40 http://virb.com/
  41. 41 http://www.acromediainc.com/
  42. 42 http://www.acromediainc.com/
  43. 43 http://agencynet.com/
  44. 44 http://agencynet.com/
  45. 45 http://www.amoebacorp.com/
  46. 46 http://www.amoebacorp.com/
  47. 47 http://www.imaginaryforces.com/
  48. 48 http://www.imaginaryforces.com/
  49. 49 http://www.apaka.com.pl/
  50. 50 http://www.apaka.com.pl/
  51. 51 http://www.vancouverconventioncentre.com/
  52. 52 http://www.vancouverconventioncentre.com/
  53. 53 http://www.smashingmagazine.com/2009/08/20/corporate-blog-design-trends-and-examples/
  54. 54 http://polldaddy.com/poll/3670282/
  55. 55 http://polldaddy.com/features-surveys/

↑ Back to top Tweet itShare on Facebook

A compulsive student of graphic design, equally passionate about music — Bobby also writes extensively for Interrobang, a publication of Fanshawe College in London, Ontario.

Advertising
  1. 1

    That is an excellent corporate design design. I think the Aflac website looks awesome.

    0
  2. 52

    Kurylowicz & Associates,
    Which is my favorite design that I’ve ever seen.

    0
  3. 103

    Great list. There’s certainly many more out there!

    0
  4. 154

    Why doesn’t Smashing Magazine create a design gallery? You’re uniquely positioned to market the gallery – I’d expect you to become a market leader in design gallery/css gallery in a matter of months. I have no idea what the stats are for those galleries, but I’d expect it could be similar to Smashing Magazine.

    Feature selections of the gallery in posts just like this, but direct users to the gallery for an even broader selection. To monetize, offer positions in the gallery listings for sponsor to designers and service providers.

    If you’d like more advice/input on the topic, I’m available for a quick chat.

    0
  5. 256

    This is a great collection of truly “corporate” websites. Many of the supposed corporate design collections are not very corporate feeling. Great list. Thanks!

    0
  6. 307

    This article kept me wondering… if most of these websites are made in Flash and take so long to load, how do they look in a mobile browser? how many people would have left before even visiting it?

    0
    • 358

      I haven’t tried he others, but the Rolex site has an html version that looks pretty good on iPhone..

      0
  7. 409

    The Starbucks website header looks very attractive with the option to navigate through different featured posts.

    0
  8. 460

    Yes, these are good stuffs. I just hope my employer is not as conservative as he is now!

    c”,)

    0
  9. 511

    Thanks for great article. I need a help here. I have to choose a design for big Genband. But I am not sure about gredients. I can only present one design to marketing department so could you please help me which one is the best?

    http://www.persefer.com/genband3/index.php
    http://www.persefer.com/genband4/index.php
    http://www.persefer.com/genband5/index.php

    0
    • 562

      Difference between 2 and 3 is the gradient effect at right end left of menu panel. What is your chooise? 2 or 3?

      0
  10. 613

    Some nice websites listed, i like that they don’t conform to the standard layout restrictions that designing a corporate website can provide. The only concern i would have is, if the user isn’t web savvy then it will be more difficult to navigate the unusual layout and they may be put off.

    0
  11. 664

    Hate to say it but most of these are terrible and terribly over reliant on flash. Why the hell is the Grow site even in Flash?
    Standout for me is the Steinway site: classy, understated, beautiful typography, its homepage even validates.

    0
  12. 715

    Frankly the first 5 sites (including Sony) are derivative and unoriginal… Hardly worthy of mention… unless u really, really, like BIG N LARGE “step on me please” style brands that emulate yesterday’s designs.

    0
  13. 766

    very poor list

    0
  14. 817

    all flash websites? I remember back in 04 i used to do all flash sites and was like yea thats cool no restrictions, then a .net developer came over to me and said thats stupid. He was right, people want content now and clean designed. Its better to be a designer with restrictions then without, and I think flash now works on a couple mobile platforms. Flash is not mobile friendly yet, and more importantly, people dont just look at one website at a time. With at least 10 windows open, I dont want these all flash sites to slow down my comp. Seriously, I like flash used as elements of the site, but sick and tired of hearing every marketing director and owner of a company saying I like that cool flash stuff..yea I like cool effects too, I’ll just prefer to go to the imax to see cool effects.

    0
  15. 868

    Some inspiring website designs ideas, I like some of the imagery that the designers have used with these designs. Although some of the website are quite flash heavy, which created longer loading times.

    Jearky Oats

    0
  16. 919

    got some great ideas,
    really worth collection.
    Thanks for the share

    0
  17. 970

    Does anyone remember the Nikon D40 ‘Picturetown’ campaign and corresponding website? – It was entirely original and absolutely genius.

    0
  18. 1021

    Darrow Alexander

    August 30, 2010 9:16 am

    Impressive collection.

    0
  19. 1072

    For me, this list is 50-50. Some are gorgeous and really are beautiful and creative. Then the other half- (especially Avery, PGI, and even ((for me)) the Society for Env. Graphic Design) are not beautiful nor very creative.
    I do not click on the links, just look at the screen shots, so just going by visuals, but PGI is just, badly designed. The dots make the whole front page look cluttered and there’s no defining- this is the important (or main part) of our site. Just don’t like it.

    Really like Con Edison and Acro Media

    0
  20. 1123

    superb collection!

    0
  21. 1174

    I’d put IKEA up there.

    0
  22. 1225

    It’s interesting how companies are moving from the nonchalant approach to web design and making the design more friendly.

    0
  23. 1276

    I imagine you’ll see a lot of these guys on entire Flash-sites moving away from that.

    0
  24. 1327

    using beautiful in every title is annoying

    0
  25. 1378

    I hate how people exaggerate the difficulty of usability when a designer steps out of the box. The Rolex site is a breeze to navigate. A first grader could browse through that!

    0
  26. 1429

    Also, lovin the type on the Prologue website.

    0
  27. 1480
  28. 1531

    I love Smashing Magazine.

    0
  29. 1582

    I`m absolutely inspired

    0
  30. 1633

    Cracking list, but it’s only the US version of the site that Starbucks seem to have put any effort into.

    The UK site is pretty poor: http://starbucks.co.uk/en-GB/

    0
  31. 1684

    Nice Collection….

    Cheers

    0
  32. 1735

    Exemplary creativity that whets apetite

    0
  33. 1786

    Cool! was looking for a page i can gather some design idea. Thanks a lot.

    1
  34. 1837

    I Just redesigned my companys Corporate website’s front page, how well do you guys think It stacks up? Nordea we change the video top all the time..

    0
  35. 1888

    Great resource, have bookmarked your site (in the toolbar no less)!

    0
  36. 1939

    I like too much AgencyNet Interactive concept. It is so nice.

    0
  37. 1990

    Very very Thank UUUUUUUU!!!

    0
  38. 2041

    Nice stuff. Thanks for sharing.

    P.S : why you changed your website design? I think the previous one was much better!

    0
  39. 2092

    GReat collection..
    i really like vancouver convention centers design..
    thanks

    0
  40. 2143

    Wow, Rolex still using Flash…haha.

    0
  41. 2194

    How so? Heinz is a corporate holdings company that owns products/brands like the ketchup and beanz. It represents the corporation but speaks to the consumer and investor.

    0

↑ Back to top