medi um meet si t smessage
Websi t eDesi gnI V TheNeol ogyI nt er medi aQuar t er l yRevi ewofWebsi t eDesi gn Q42008
An Environmental Review of Website Design | 12.2008 This environmental review of websites across various business sectors demonstrates merits in online brand identity, design and interactivity; profiling sites that may not be the most artistically designed, or even the best functioning, yet each one clearly raises the bar in meeting their marketing and communications objectives. What creates good design online? Is it a matter of making a website functional enough for the broadest common denominator of users, or is it a more complex task? Arguably, although website design is one of most accessible design fields in which to gain a reasonable level of competency, the changes of the moment are so profound and far reaching that website design is gaining a complexity that it has seldom had in the past. Given that the idea of online design is now laden with technical subtleties and that it serves as a key component of workflow, usability and communicative understanding it is more critical to evaluate the role of design in meeting brand and business needs more thoroughly today than ever before. In this initial Neology environmental study paper, the author takes a keen eye to the review of a cross-section of websites and provides a thumbnail narrative on how design takes on this more mechanized and metaphorical form in today’s best website designs. The comparative websites have been organized into an initial benchmark of “best practice� and five main business sectors, each with its own unique markets and demands: A. B. C. D. E. F.
Benchmark (for Best Practices Average) Sporting Goods and Retail Automotive and Manufacturing News and Entertainment Architecture Tourism and Transport
info@neology.ca
Page 1 of 18
Index i. What Creates Good Design Online? ................................................................... 3 ii. What are the Leading Trends in Website Design Today? ......................................... 4 A. A Benchmark to Begin ................................................................................. 8 B. Sporting Goods and Retail ............................................................................ 9 C. Automotive and Manufacturing .................................................................... 12 D. News and Entertainment ............................................................................ 14 E. Architecture ........................................................................................... 16 F. Tourism and Transport............................................................................... 17
info@neology.ca
Page 2 of 18
i. What Creates Good Design Online? Could it be that there are three primary pillars that support good website design? This review suggests that the grouping of Presentation, Communication and Interaction are notable in their influence on websites achieving success or falling short. 1. Presentation
2. Communication
3. Interaction
Presentation governs many initial impressions of design success online; it is the look, the feel, the emotions called up by the use of colour, line and form to guide the eye, to respond and visually speak to the user on mouse-over.
Communication is the immediate follow-on from Presentation. Fundamentally, the goal of a website today is no different than it has always been; it is a medium through which communication is facilitated and ideas exposed.
Interaction is a curious mix of both Presentation and Communication; it is the technical and visual process flow that segues and shuttles the user in, through and out of the website. Good interaction wins and keeps users.
Good presentation never detracts from content, but supports it, supports understanding and it builds the metaphorical ideas and messaging semiotics that determine the response to the site by the collective user unconscious.
Good communication manages to provide just enough motivating data to fill the containers set by presentation, it adds greater breadth of understanding to the overall website philosophy and gives knowledge to the user.
Good interaction is a deft touch, silently shuttling the user to-andfro and providing the motive force behind the absorption of presentation and communication. It lives in clicks, mouse-overs, data entry; it is both passive and active.
Good presentation is also never a means to its own end; it should embrace and reflect the colours, forms and themes that have meaning and credibility in society and use these elements as shorthand for understanding.
Good communication serves as both an end and a means; it is at once the data sought by website users, but also has an inherent role as a director and wayfinder to other communication within and without the website.
Good interaction will immediately make the user feel at home, it buys time and draws the user into the website. By contrast, bad interaction is off-putting, rejecting and pushing users away from the website.
info@neology.ca
Page 3 of 18
ii. What are the Leading Trends in Website Design Today? Fashion can often be a ruthless arbiter, and in the case of website design this is no different; today’s technologies, design themes and trends are making yesterday’s standards obsolete more swiftly than could have been predicted. 1. Busy Surface
The increasing need to stream multiple user groups to increasingly diverse sections throughout websites has resulted in increased segmentation of homepage layouts and, by extension, interior page layouts. As the technology needed to fracture users into compartmentalized interest groups, subsets and adherents of sub brands, the natural evolution of the website has been away from pages as content and toward pages as drivers. This busy surface approach allows marketers and communicators to hit home with as many groups as possible, as quickly as possible, using Flash-style mouse-over and click-through interactivity to also give the user a simulation of touch and feel, to encourage belonging and ownership through presentation, communication and interaction. The technique also draws on concepts in industrial design that have been growing more prominent in the market over the past decade, where motor vehicles exhibit ticks and creases, winks and flashes to show “down the road graphics” and “flame surfacing”; each an attempt to differentiate brand identity within a restricted physical box through the exhibit of details.
info@neology.ca
Page 4 of 18
2. Midi Footprints
The accepted standard in website design for a number of years was to design for compatibility with 1024x768 resolutions as a maximum, but provide the possibility of 800x600 for users who were behind the curve. Inevitably, as technology has advanced, the default resolutions for many computers has crept up, making 1024x768 the new “behind the curve” default format. Moreover, as pages become less about written content and more about movement through navigation and experience, as users become more accustomed to blogs and threads, and as content pages shrink to vignettes – or are shuttled off to become downloads – vertical scrolling through a site has become more feasible and more acceptable. The result is that many new sites are Midi Footprints – meaning that they just fit within the browser frame horizontally on 1024x768 and feature extensive vertical scrolling. The page cut-off options for these midi sites becomes highly relevant to good design – where the cuts fall often determines the quality of the user interaction and care must be taken in visible sections of pages to ensure that the experience is as visually impactful as possible.
info@neology.ca
Page 5 of 18
3. Eco Thematics
Web technology is, with some justification, an environmentally friendly technology. Arguable though this is, today’s market demands and themes have been moving toward ecological thematic for at least three years, sometimes slowly, but lately with greater rapidity. For design, this has meant an increased adoption of ecocolours such as white, green, blue, silver and to a lesser extent the earth tones such as orange and brown (mixing cool and warm tones throughout). Today’s websites are taking a lighter, crisper feel, and there is a move away from heavy and claustrophobic layouts as consumers and website users start to more thoroughly equate colours and themes to commitment. Similarly, imagery such as trees, leaves, grasses, especially in knock-out design form – to maximize the crisp and crystalline feel – have risen to prominence and the overall trend in form is toward a greater purity of line throughout. The use of personal imagery – faces and people – and the deployment of high contrast photography, particularly in a panorama format, has also become a metaphor for a friendly and cleansing approach. This strategy also pays some functional dividends in that the more open a layout is, the less likely it is to look lost or too small on a large screen running a high resolution; hence background colours are more likely to complement or match foreground colours.
info@neology.ca
Page 6 of 18
4. Font Mixing
Mixing fonts has always been a somewhat contentious approach. On one hand, fonts have been subtly mixed in print publications for centuries, taking advantage of the characteristics of a particular font to meet the needs of a headline or of body text. Over the past handful of years however, the mixing of fonts has become more aggressive and perhaps more jarring, with designers taking the opportunity to mix fonts simply to create emphasis and interest in the design. Already this approach has begun to subside, marked out as somewhat of a gimmick, but a more restrained approach has grown to prominence, where mixes of serif and sans serif fonts from different families, with different weightings, have been deployed to add quiet emphasis to many sites. With greater support for a wider variety of fonts inherently feasible by designing them into graphics that are CSS generated, font mixing offers an opportunity add a presentational splash that communicates information while at the same time not hindering interaction.
info@neology.ca
Page 7 of 18
A. A Benchmark to Begin http://enroute.aircanada.com The objective for the redesign and redevelopment of the enRoute website was to transform the pre-existing, page-flipper enRoute site into a much more exciting and modern online experience. This makes it a valuable benchmark on the basis not only of its creative brief, but also based on the multi-dimensional nature needed to encompass print, television, on-board entertainment for Air Canada flights and sponsorship monetization all within a single website. The core strategy used in this website is to ‘fracture’ the traditional magazine format into a web presentation that broke the constraints of the publication layout and allowed for a busier, more flexible visual environment to accommodate articles, sublimated monetization, overt monetization, and allow for a three dimensional plane of navigation throughout multiple levels of a tiered, encapsulating online environment that embraced enRoute content and sponsor content within a common GUI. The goal was to bring more content and sublimated monetization to the surface by varying each individual navigation/promotion section’s footprint, segmenting the site and introducing refresh/request/push variability. Also required was a bigger footprint for the website that broke free of the 1024x768 compartmentalized, no scrolling homepage that had been best practices until recently (a bigger footprint needed to incorporate the wide range of features), and to further enhance the new footprint by lateral/vertical scrolling Flash and/or Java/CSS elements that could accommodate multiple sponsorships or articles thematically and eliminate the need for conventional banner ads. There was also a future objective to leverage customized content via GIS integration and piggy-backing offsite drive-to content by connecting with the Thales Group’s nascent proximity marketing systems in major air transport hubs (more popular in Europe and Asia where higher volumes and throughput to events and facilities can support passive proximity marketing and active proximity marketing – the latter ideally shown by the Spotme platform referenced below). When the new site was launched was badly segmented and badly asymmetrical. The overall look and feel was strong, but some elements of user customization and mouse-over experiential aspects had been missed. A subsequent design refresh has corrected the asymmetry and smoothed the design. Limitations of this site from a communication and interaction perspective include the use of a “Home” section that is arguably misguided when the main brand driver is the enRoute Magazine experience. This site could also benefit from greater colour differentiation between primary, secondary and tertiary articles, and mouseover article previews should be introduced for lead article. Nonetheless, this is still one of the best sites of its type and philosophizes the magazine concept online with greater flexibility and substantive possibilities than many other publications have achieved. See Also: http://www.thalesonline.com http://www.spotme.com
info@neology.ca
Page 8 of 18
B. Sporting Goods and Retail http://www.salomonsports.com The Salomon site does a great job of encapsulating the brand experience online. Although pushing for a rich visual experience has its risks in terms of accessibility and consistent performance, the site nevertheless works well enough to back up its visual promise. Note how the background thematic are changed in accordance to the equipment “experience” selected, and how the equipment profile boxes sit on top of that background to maintain the core idea of the usership model (fun, excitement, outdoors, perfect skiing). The navigation is simple, organizes parent and child relationships well, and the supplemental callout box navigation at the bottom of each page that can be changed by the administrators to cover off campaign needs are also excellent. Perhaps best of all is the Zoom feature for the equipment, which gives the user an interactive touchpoint that unites the idea of buying with the reality of ownership (chance to touch and feel in a virtual sense). Having the specs on each equipment item contained within a shout box is a great idea; it surprises the user by not having a link out to a secondary page and maintains the cohesive, high powered brand experience. Parent and child navigation, “Next Product” feature and “Associated Products” feature are first class experiential online retail marketing and communications. http://www.rossignol.com Although not quite as slick as the Salomon website, and using a design theme that will appeal to a younger audience and hence not be as long-lasting, this is nonetheless a great site for building user experience and reinforcing brand values. Each product is appropriately themed without breaking the overall brand; users can tier and tailor their equipment interests, get an idea of relative costs and touch/feel the products in depth through the virtual showroom. This season is the first for this site and although there are still some elements that seem to need some review (such as callout boxes not populating and site verticals changing based on tabular content chosen) it is overall one of the more enthusiastic sites currently available. The site also does a great job incorporating news and other sections without breaking the brand or losing navigation. http://www.burton.com One of the first companies to really push the limits in online retail branding, Burton is back for Winter 2008/2009 with a new site that takes the best qualities of the old site and rebuilds them into a bolder, more youthful panorama site. The homepage has some attractive features and although it currently suffers from too much dead space it has the opportunity to be revised with relative ease as needed to meet future needs. The Team section is particularly well designed, and incorporates the latest ideas in mouse-over shout boxes in an outstanding presentation. Profiles of Team members with slideshows, CVs, Gear Lockers all encompass what made the old Burton site a winner, but bring a better presentation this time. Unfortunately the new site cracks in some places and does not render properly, which is a failing of an otherwise good site. http://www.hp.com/burton Perhaps soon to be approaching retirement age, this site was one of the key pillars in HP’s outstanding rebranding initiatives over the past few years. Beset with a dull brand and a migration to trendy youthoriented equipment, HP stormed back with a multi-faceted Web/Print/TV/Product brand showcase that has resulted in the HP brand becoming the go-to source for high end computers and peripherals; a conquest beating of Apple and scavenging of IBM’s former hardware business lines. A classic drive-to site, it was one of the first to introduce high quality, complex, 2.0 interactivity and companion branding in a multimedia platform. The idea brings in high profile, high energy brands and shows how they’ve achieved success, emphasises their brand values and then subtly offers solutions from HP which, amusingly, are nothing more than printer paper templates. The design themes, subtle interactivities and showcase experiential all present a professional, lush experience and bring in the aspects of brands like Burton Snowboards and Burton’s ad agency. Unfortunately the site is not responding well to the latest updates to Flash 10. See Also: http://www.hp.com/gwen http://www.hp.com/paula
info@neology.ca
Page 9 of 18
http://www.campagnolo.com Once one of the only choices, now one of the rare choices, Campagnolo’s place in the bicycle component market has come under increasing attack from major competitors and an increasingly segmented range of smaller companies that specialize in smaller corners. As a result, Campagnolo has needed to focus on a boutique range in the consumer market, selling on exceptional industrial design, leading edge technology and unique features unavailable elsewhere. Redesigned for 2008, the new website is a hybrid of today’s best ideas and yesterday’s legacy standards in web design, using a left justified footprint for the homepage with a high emphasis on photographic rich media. Where this site really shines is in the interior pages; again using somewhat of a hybrid footprint, albeit now centre justified, and a range of Flash-driven navigational features and profiles, each one allowing the user to tailor the website experience to a particular typology with a crisp, clean design that is rich in technical details (capitalizing on a brand tradition) and even allows for technical document downloads in PDF. Simple, well branded and adherent to a no-nonsense design philosophy through clean photo illustrations, overlays, callouts and backgrounds, the site is serious, compelling and delivers exactly on the promises that buyers expect with a minimum of fuss. This is a clear example of a company knowing its market; whereas other players may pursue youth markets with trendy, seasonal designs, high risk web platforms and “fun” interactions, Campagnolo is targeting a more mature, well-monied and technically astute customer looking for serious performance sophistication and an embodiment of historical brand values. http://www.mavic.com One of the original niche players in the bicycle component market, Mavic has a long history of making some of the best and most innovative products but is increasingly being forced to focus on a minimal product line for knowledgeable enthusiasts with a greater than average technical interest. This site is a clever take on the modularity and robust simplicity in industrial design and engineering that Mavic has long stood for. Adhering to long standing brand ideas, the site is immensely modular in having ‘big button’ navigation that is point and shoot, well categorized and rendered in corporate colours and fonts. This is not just a simple site though, it is also informative, and shows a great understanding of detail taxonomy in its organization of product details, clever variable zoom feature and straightforward communications throughout. This site not only gives the user a chance to engage in virtual touch and feel tasks it also reminds the potential buyer what the company believes in and what advantages it offers. If there is one main drawback it’s the lack of main navigation, which breaks the control plane of the user experience unexpectedly and forces the user to use the Back button. Still, as a clean and bold design with class leading Point and Shoot ability this is a great design aimed at the iconoclastic, cosmopolitan buyer. http://www.trekbikes.com Arguably the apogee of the Trek brand’s ascent, this is a disarmingly traditional site, but one that incorporates new ideas in interaction and presentation without losing sight of the need for a detailed argument about the equipment. Trek has launched a new industrial design presence for itself across all of its equipment lines over the past year, incorporating thematic of subsidiary brands Gary Fisher, Bontrager and Klein into the mix and pushing the idea of what a Trek bike “is” out in new directions. Loaded with shout boxes and callout boxes, this site is a pleasure to work with, defining user-tailored navigation with a consistent look and feel, consistent fonts, using a minimal look and feel to offset the bold colour schemes of the machinery on offer. The use of fades, washouts and small font sizes also helps call attention to the product focus and callouts, shout boxes and experiential navigation on offer by perpetuating an inherent design contrast. Co-brands, add on sales, feature sections, opportunities to customize; all of these are abundant, but the neatest feature has to be the mouse-over magnifier, which makes the user experience a highly intuitive and exciting one. Although some design elements, such as the over states for the main navigation, could be improved, the rest of the site exudes the brand that users expect and introduces participatory elements such as blog reviews that begin to co-opt social networking sites and create verification points. See Also: http://www.fisherbikes.com http://www.bontrager.com
info@neology.ca
Page 10 of 18
http://www.adidas.com Never too far behind the leading edge of the curve, Adidas does not disappoint with its new 2008/2009 site, one that takes the latest technologies to the fore and reflects the award winning ideas introduced by Le Coq Sportif a few years ago in terms of having mouse-over interactivity driving the initial navigation through dynamic callout/shout box combinations, each with a vivid photo illustration. This is the current high water mark in site segmentation, allowing multiple messages to share the same space and be available immediately on user request but otherwise only metaphorically suggested. The numbers of user streams, stories and options available off the homepage is extensive, but each one is cohesively branded by fonts, stripes, colours, logos. The primary navigation is also class leading in that it hails the unexpected return of dropdown, foldout menus by automatically flipping all active menu options to the fore upon selection, cleverly using stripe and font branding in addition to surprise callout boxes. The rest of the Adidas site properties that spin from this site are similarly featured on all fronts, sometimes successfully, sometimes not. But at all times the Adidas family of sites is an experiential high water mark and allows the user to spend an afternoon completely absorbed in the brand and its products. http://www.nikegolf.com Not to say that the main Nike site is deficient – it still has a lot going for it and the Nike Running/iPod site from some years back is still one of the best ever – but the Nike Golf site is overall a stronger design in that it brings in the clean, panoramic photo idea, meshes that will strong, clean branding and the latest trends in dropdown menuing (as with Adidas). The current campaign refreshes the main banner photo on the homepage with every reload and, although hampered at times by eccentricities of its Flash platform (not being able to Back-button out of the Dealer Locator) the site has great flow, great detail, strong branding and multimedia opportunities with all the best flexibility thanks to the use of callouts for promotions. The Athletes section is also well done and brings in the “get to know you” experiences that Burton uses. http://www.lecoqsportif.com One of the original innovators that spawned imitators such as the Adidas and Burton sites, this is a remarkable example of a storied, but eccentric French brand reinventing itself to meet a modern audience through a comprehensive marketing campaign. This latest edition of the site offers up an experience that is similar to the enRoute site but arguably incorporates the ideas of segmentation, surfacing, articling and sublimation much better by being more creatively designed. The mix of technical forms that are traditionally “computer” and softer forms that are traditionally “print” create an excellent juxtaposition, while the straightforward navigation, bold photos with high contrast presentation, hotlinks, Top Searches and content previews drive a palpable sense of excitement on this site. For a truly outstanding experience though, click on one of the video vignettes under “Plus populaires” and visit the firm’s videography microsite, the award-winning site that has since become the absolute benchmark in online multimedia. See Also: http://www.levi.ca
info@neology.ca
Page 11 of 18
C. Automotive and Manufacturing http://www.bmw.com At the time of its launch, this was one of the better websites available. Now, some years later, it suffers in comparison to newer and smoother sites that offer a more astonishing first impression. Ongoing site updates, systems changes, workflow variations and brand fragmentation have not helped this site grow and there are some instances where it begins to crack with new features for which it was not designed. But, as a former measure of best practices in website design that encompassed a peculiar ability to render brand identity by co-opting the minimalist tenets of good industrial design, this site still stands the test of time. Bold, stark branding that pervades through all site properties, co-brand properties, the same layout and features for all elements, easy to use navigation and an ability to let the product do the talking all help drive this site. As one of the earliest sites with a model configurator engine it may lack the dash of today’s best ideas, but the technical look and feel to the interaction in the configurator sends a subtle but reliable brand message. The Energy Saving Mode hibernation feature is a final neat touch. Horrible reliance on badly airbrushed photos, due to be replaced, but it will stand out historically as good design and good development making a site that survived over the long term without significant revisions being needed. http://www.bmw-sauber-f1.com Arguably a half step forward for the core architecture of the parent BMW website, this site retains the footprint, the foundation branding, many of the systems and services, but takes the design and interaction up a level. Note that the photos are bigger and bolder in the frame, that the mouse-over interaction is greater and the multimedia elements more central to the user experience. As with all BMW sites, the logo and logotype use is strictly enforced for a rock solid grip on brand identity, but this is a less serious site and uses a lighter feel and colour palette throughout. As with the BMW site, the wait times for media loads are painful. But a perfect colour scheme and combination and great photography save the day, as do great interactivities that have been floated in on top of the old architecture, such as the Gallery module and Telemetry section. http://www.alfaromeo.com Arguably the prototype for the next generation of BMW site, the Alfa Romeo site is the embodiment of a marathon rebranding effort similar to that conducted by Trek, but for Alfa Romeo conducted in light of major corporate failings and subsequent restructuring successes. This site has an interesting design language; at once fun loving and whimsical, yet imbued with a serious side as evinced by the black and silver border details, clear sans serif fonts with varying cases and also by the smooth rollover states. Uniquely, this somewhat encompasses Alfa Romeo’s current ability to capitalize on a duality in its brand identity; one that sells the upscale economy car the MiTo at one end of the spectrum and the exotic 8C Competizione at the other. This is of course supported by the current economic and environmental climate that predicts a capacity to view even compact, fuel efficient vehicles as upscale. Arguably the best feature on this site, and its one ingenious selling feature, is the Centro Stile section; a multimedia section with video lectures on design (very similar to that used by HP in the Burton/Gwen/Paula sites) which does a great job of explaining the theories of the brand in a subtle and enjoyable fashion. In that the site has legacy Flash bugs with Back button navigation it isn’t perfect, but it has merit. See Also: http://www.fiat.com
info@neology.ca
Page 12 of 18
http://www.bombardier.com/ | http://www.thyssenkrupp.com/ | http://www.uponor.ca Consider these three sites to be variations on a similar theme: How do you design a generic corporate website that doesn’t look like a generic corporate website? Bombardier and ThyssenKrupp go about it roughly the same way; taking a clean canvass approach that adds content elements as easily replaceable design modules, adding drop-in banners and wrapping the package up in a common corporate font and icon pack. Simple, cold and corporate; these sites are great examples of information handling without looking frivolous. ThyssenKrupp takes the concept a step farther, and into what is potentially one of the better corporate sites today despite getting on in years. Note how the calendar items are tagged with shout boxes, note how the banners not only scroll and move but also have interactive elements to push the corporate message. Note too the outstanding, downloadable desktop calendar: http://www.thyssenkrupp.com/en/investor/finanzkalender.html This is a resource that may only have real world value as a gadget but nonetheless bonds the user with the brand. It also shows that although this site is no longer necessarily at the front end of marketing presentation it meets the goals of a good corporate website; don’t rock the boat, inform, involve, impress. Uponor goes about the corporate site slightly differently. As a 2008 build, this is the newest of the three sites here and it shows in the larger footprint, greater overt interactivity and easier data handling for downloads and resources. This is a clean, focused site that shows the end results of buying the firm’s products in a lush fashion, with emotive images, positive messaging and a subtle font mix (combining serif with sans serif and blending cases effortlessly). Yet this is still a site that does not neglect its core markets. Note the Technical Documents section: http://www.uponor.ca/Header/Service/For-Professionals/Tech-Documents/Specifications-andSubmittals.aspx Easily this is one of the better resource download pages on the market; it is not only easy to use, it looks good and manages to embody the Scandinavian design themes so prevalent in the site even though the design work is almost non-existent in any overt way (perfect amalgam of industrial design theories to the web).
info@neology.ca
Page 13 of 18
D. News and Entertainment http://www.drivers-republic.com Presumably, if we adhere to the theories posited at the outset of this document in the discussion of the enRoute website, the idea of a page-flip magazine online is one long past its sell-by date. And yet, Drivers Republic somehow manages to revive the idea of a page-flip magazine for the web with an eclectic mixture of textual media, video, and page-flip applications that render the physicality of magazine usership into a vivid on-screen experience. The core site layout is arguably wanting, the navigation sometimes cryptic, the overall branding a bit lacking (apart from DR logo use) and hence the idea of using this site as a benchmark for design is questionable, but the page-flip application – when used – is a remarkable last gasp for the idea online: http://viewer.zmags.com/showmag.php?mid=gfftt&preview=1&_x=1?fm=2#/page2/ The use of video on this website is also excellent and cannot help but connect with its chosen audience. http://www.theglobeandmail.com As common as white bread, but strangely enough one of the better designed online newspapers, combing a clean and simple header design and navigation with easy to read fonts, minimal framing and restrained use of banner ads this is a site that succeeds by not trying too hard. The Globe is also well organized online, with a traditionally boxed photo and text approach to major stories, tiered values of the same for subsidiary stories and a simple, vertical list for tertiary stories. The grid layout gives great potential to manage subtle callouts and drive-tos and the overall experience is seamless, unlike that used by the Toronto Star, which is overly cluttered and clumsy. http://www.cbc.ca Of the same generation of website philosophy as Le Coq Sportif, Campagnolo and Uponor, the only major weakness for the CBC site is the compromised footprint and left justification. It may be that left justification becomes a recurring stopgap measure until such times as stability in display resolution is achieved, but at present it is a slight impingement to good design. Otherwise this site – apparently running on the Interwoven platform – is a best practices take on the modern media site; clean, crisp, multiple paths of navigation that can be easily varied to meet ongoing need, excellent content tiers and interactivity, this site offers up the kind of simplify of feel and usable scale that the enRoute site is still struggling to achieve. Note how the visual branding is conducted subtly, through text headings and content rather than through logos. This is a site rich in information yet sublimely easy to use and review; for those who look to the CBC as a source of information it stands out as a first rate resource. http://www.bbc.co.uk Given roughly the same brief as CBC, BBC chose to move away from the restraint of an online newspaper philosophy in its design and toward a younger, bolder, grittier design that embraces the dark, technologicallythemed look from gaming dashboards and desktops. Although rough around the edges the site still manages to hold some strong appeal through high contrast photo editing, good segmentation and notable user touchpoints such as the customization taskbar. The capacity to edit content in callouts, move callouts and generally make the user experience one’s own is a clear co-option of Facebook, but this brings about a notable ability draw in younger audiences and ensures that they stay hooked to the site – because it works in a fashion they have adopted and are accustomed to. The subsidiary pages maintain the previous site’s branding – which conforms to BBC TV set decoration, and this may be somewhat anomalous, but overall the capacity to spend days browsing the site and all of its subsidiary properties is very real.
info@neology.ca
Page 14 of 18
http://www.darrentate.com One of the oldest sites on this list, it should have no business being marked as a leader in any respect given its age and the philosophy of design it was created under. And yet, despite the love it or hate it graphical presentation, despite the questionably formatted content and other rough edges that would otherwise mark it out as a failed effort, this site becomes a most engaging and interesting sites for the new user. Upon selecting “Access Site” from the splash page menu, the user is not only rewarded with a manageable backing track, but also with a multi-dimensional visual navigation that has intuitive feedback and reliable function. This alone would be a unique and laudable semiotic approach, but selecting the turntable gives access to the “Virtual Decks” where users can create their own mixes and crossfades in real time and do so reliably and easily; one of the great user interactions going in any site today; simple yet so compelling. http://www.redbull.com Think Adidas site with more structure and that about sums up the Red Bull site. Somewhat overly simplistic and driven too much by static content, the site nevertheless adheres to the overall brand and to the direction of being an aggregator for sponsored teams, events and individuals (although loses points for offsite outlinks directly from the homepage). The photo branding is strong throughout, which is easy to manage, but for a basic site in many respects it performs well and also incorporates the simple, “Big Button” ideas discussed earlier about the Mavic site. See Also: http://www.lindseyvonn.com
info@neology.ca
Page 15 of 18
E. Architecture http://www.fosterandpartners.com It could be said that average architectural firms aspire to design great buildings, whereas the exceptional firms aspire to build great art. As one of the premier global firms, with a Who’s-Who portfolio, Foster and Partners is certainly apt to fall into the latter category. As such, they should have a website that reflects that goal in a showcase form. Although this site is starting to date relative to some others (notable by the small footprint), it was far enough ahead of its time in terms of the general concept upon launch that it remains viable today. This is a simple, moderately imperfect site that presents a minimalist design face to world in order to delight users with photography of the firm’s work through lush, high contrast, professionally shot photos. With such results alone this site could be considered a good recommendation as a shortcut to designing an inexpensive, but good looking site; what takes it beyond that point into being a benchmark are the details, such as the font styling and sizing, the data organization and portfolio navigation, the structure of the content into lists and the corporate messaging that pervades the textual elements of the site. The ability to easily and consistently custom navigate the site (alphabetical, by date, by location, by type, etc) through secondary and tertiary navigation, tailoring the experience to the preferences of each user at a glance, gives this site a traditional simplicity that is often lost by newer sites that rely on rich media navigation. http://www.kpmb.com Much in the same vein as the Foster and Partners site, KPMB relies on a simple site design to showcase the firm’s work. However, this simplicity belies a strong applications and presentation engine and strong workflow supporting the site with the same types of experience profiling offered by Foster and Partners, albeit with added complexity, better consistency in the project photo lightboxes and a stylish approach to textual content organization that hides content until the user requests it. Given some of the functionality with show/hide content, project profiles, etc, the site could be at risk of introducing failings in the workflow and functionality, but it works almost faultlessly every time; every link, every function, every callout and dropdown menu works, pages navigate Back and Forward by last function in a reliable fashion. The overall spare design – indeed an anti-design – works well in this case thanks to the simple and clean font-based branding and predictable choices in font face, styling and finishing, Despite the minimalist take on design, this is arguably one of the more exceptional sites by virtue of the website designers knowing when to stop designing, which is a major step in the maturation process for most designers.
info@neology.ca
Page 16 of 18
F. Tourism and Transport http://www.bvg.de Superficially at least, this is hardly the most exciting or beautiful website. Yet it has a design strength that relies on strong tenets of user interface communications semiology, such as iconography, high usability, intense segmentation and colour coding. The structure, the fonts, the icons and layout have all been selected to ease navigation through the site for the broadest common denominator and with the most repeatability and highest referentiality to the iconographic signage and messaging that transit users will encounter in the city environment when using the service (signs, vehicle colours, logos, transit cards). This is an intensely functional and relational site that is based on the fundamentals of communication; incorporating a variety of subtleties in typesetting, user workflow logic and cross-browser compliance, assisted usership accommodation and more. And yet it has an industrial whimsy to the design; using well constructed photos, banner photo updates by season and time, and a no nonsense honesty, making it clearly a better site by far than that maintained by the TTC in Toronto (which was redesigned and redeveloped in 2008). http://www.tourisme-montreal.org The recently retired Tourism Montreal site was a class leader in its own right; a well thought out, diverse and well featured site that was driven by a segmented, busy surface style similar to that demonstrated by sites such as enRoute and Le Coq Sportif. That site was built on a smaller footprint and was limited in its functionality by the lack of ease in supporting rich media; hence the new Tourism Montreal site for 2008, a much richer, bolder and more energizing multimedia experience. This new site is an interesting amalgam of a variable footprint and intense media, using a modern colour palette that is understated and professional, perfectly offsetting the high contrast, gradient tinted photographs and nightlife thematic of the photography and photo animations and the bright accent photos. The design segmentation approach taken on this site carries forward the boxed and dotted thematic from the previous site, along with much of the colouration, but adds a wider range of photo illustration to information boxes, a wider range of downloadable resources and mapping. The collapsing information boxes (similar in execution to those used on the Uponor site only more elegant) in the Travel Information section are an exceptionally current idea and allow for maximum page flexibility at all times. As with many tourism sites today, this site offers user profiling (top right pulldown) to allow users to select the experience best suited to their objectives, with almost every section having a particular set of resources and information within the branded look and feel. Navigation iconography is excellent and informal yet upscale and the site looks and functions consistently well, the only drawback being the inability to use browser controls for Back and Forward as an alternative to on-site navigation. http://www.visitsweden.com This official Sweden tourism site may not make quite the initial splash as the Tourism Montreal site, but what it lacks in overt showiness it makes up for with a diligently well designed and highly functional approach that makes a strong impression while incorporating features and functions similar to Montreal. Clean and crisp on a mid-size horizontal/extended length vertical footprint, the visual presentation uses the expected Scandinavian design thematic throughout and maintains an excellent contrast between bold photography and whitespace, making it easy to browse and easy to understand. The otherwise spare design language – albeit with excellent use of shadow and gradient for navigation and callout boxes – is deftly offset by a graphic design colour field that brings a strong green colour into the mix, thereby marking the site with today’s most effective colour thematic structure: White, Silver, Blue, Green. This colour combination messages a focus on ecology, light environmental impact, frugality and modernity to today’s market audiences and is in many cases replacing the default black and silver combination as the choice for an upscale look and feel. Additionally, the navigable banner system, drop-in banner ad, user profiling/touch and feel interactivities (note how the calendar of events uses a collapsing system similar to that deployed on the Uponor and Montreal sites) all contribute to a site that is arguably one of the most current site design and interactive packages of this selection, and all within an understated style. See Also: http://communityofsweden.com
info@neology.ca
Page 17 of 18
http://www.seetorontonow.com Clearly an adherent to the current thinking in Canadian – and by extension, North American – economic development and tourism thinking, this site embraces a design language that is driven by a look and feel of technological busy-ness – somewhat akin to the slightly brittle, delicate thematic used on the Trek site - with main content sets in scrolling frames, interactive banners and streaming by user group. Note also the glib URL, which has become a growing trend in sites looking to differentiate themselves from the everyday and organizations looking to skirt unavailable domain names; unfortunately perhaps this strategy is not the most logical or effective. Overall this is a good site; using the hot colour schemes of today and deploying vibrant to draw attention to the main navigation. The usability is quite good in this midsize site, with user tailoring feasible through basic navigation selections and seasonal, interactive banners being used as browse arresters and a variety of fold out menus and resources. The basic Google Maps/GIS site profiling can be slow at times, but it offers users a quick review of targeted neighbourhoods with relative ease and with an amenable approach to colour coding. A more experiential, more lush approach as used by Montreal would give this site added kick, but as it stands it is certainly well within best practices parameters. See Also: http://www.thedrakehotel.com
info@neology.ca
Page 18 of 18
medi um meet si t smessage
www. neol ogy . ca Neol ogyI nt er medi apr ovi des compr ehensi vevi si oni ng, pr ocur ement ,depl oymentandsuppor tf or st r at egi ccommuni cat i onsandownedmedi apr oj ect s, exceptourownwebsi t e;t hat ’ sabusman’ shol i day .