.net showcase gallery

The cells react to the soundtrack, moving in time to the music. Pixelinglife’s main aim was to make users dive straight into a relaxing experience in an audiovisual way.

Christian Hall reveals this month’s hottest new websites
1-10 Ceranco
URL www.ceranco.com Company Pixelinglife URL www.pixelinglife.com Ceranco is one of the more recent brands from the well-known ceramics and decoration company Porcelanosa. Each branch of the group already had its own website, so Spanish designers Pixelinglife were asked to develop one for Ceranco, based upon its specific features and values. “We understood that the brand is focused on final clients instead of distributors. This premise gave us the opportunity to create an interactive experience based on emotional values and not just rational ones,” says account director Miguel Simón. The website pulls the visitor in thanks to a suggestive audiovisual landscape that’s fun to hover over – literally. The aim, says Simón, was to produce a cool feeling for the target audience, recreating the emotion of entering an ideal home, yet not to the extent that it overpowered the brand. “To avoid an excessive stylistic categorising and to give the idea neither of elitism nor unattainable luxury, we had to use a universal and up to date design code,” he says. “That’s why we chose a minimal, clean interface, based on the use of white and black and on the lack of superfluous elements.” Much of the ‘cool’ sense is actually achieved through the inspiration of a Japanese concept called kansei, or ‘sensory pleasure’. This is seen on the homepage with the contoured white landscape, which was one concept the client was particularly keen on. They wanted topography to symbolise the path to the perfect home. “Our challenge was to give expression to the concept our client used on their editorial graphic design, to take it into an interactive stage and thus to provide a real meaning to the metaphor for the user’s journey home,” adds Simón.

3

1

2

4

The coloured cells represent each catalogue of Ceranco’s products, and users can fly from one to the other above the white landscape.

5

6

“Our challenge was to give expression to our client’s editorial graphic”
Miguel Simón

7

8

9

10

58

.net june 2009

NET189.gallery 58

7/4/09 1:16:18 pm

.net showcase gallery

2

1-5 Churaumi Hakken
URL www.churaumi-hakken.jp/p3/full.html Company Asahi Advertising URL www.asakonet.co.jp
1 3

4

5

This beautiful 3D site for the Churaumi Aquarium in Okinawa, Japan, pieces together dozens of videos in a giant wall. Even more impressive, the video wall is actually a giant shark that swims around the screen, animating the small video screens in various directions as it goes. It’s a stunning piece of animation, and the technical achievement of dealing with such a large amount of video at the same time deserves high praise. If you’ll excuse the pun, this aquarium site is truly immersive, bringing your browser to life, particularly if you expand it to full screen. The accompanying ethereal music also adds to the experience, making you feel like you’re in an underwater world.

6-10 Cynosura Blog
URL weblog.cynosura.eu Company In house (Ray Glover) URL In house Cynosura blog is home to the articles, computer thoughts and portfolio of user interface, infographics and software developer Ray Glover. It’s designed to look like a real academic journal. “I’ve always used text as a graphical tool,” says Glover. “I think too many designers don’t treat actual content as first-class design elements.” Glover looks to offline media for typesetting ideas – the typography helps boost the content. “I love typography, but it’s only been in the past couple of years that anti-aliasing technology has become good enough to allow improved readability with serif fonts. So I’ve taken the plunge and made my first 100 per cent serif layout.”
8

6

7

9

10

“I’ve always used text as a graphical tool – I think too many designers don’t”
Ray Glover

.net june 2009 59

next>

NET189.gallery 59

7/4/09 1:16:21 pm

.net showcase gallery

1

2

3

1-5 Re-Reserved
URL www.re-reserved.com Company Huncwot URL www.huncwot.com This intriguing fashion site for the Reserved label stems from a TV commercial that was made in the style of a lost 1970s sci-fi film – The Stardust Girl. “It’s always hard to design fashion sites if you want to make something more than a cute photo slideshow,” says designer Lukasz Knasiecki. “That’s why, following the trailer, we expanded the story of a lost stardust girl who falls to Earth and falls in love with an Earthman.” All the layouts, with their horizontal/vertical divs and style of movement, were inspired by 1970s films and David Bowie tracks from Knasiecki’s iPod. The cinematic feel to the site is found in everything from the multipicture widescreen layout to the running clock, which is actually slowed down to make it more unreal.
5

4

6-10 +1
URL www.plusonemusic.net Company Kuro URL www.thekuro.com This site for music management company +1 was inspired by a brief to design a page where all the artists were equal. The solution involved an organic canvas that flows in an ever-expanding way. “We decided to develop a system that was structured, but had no limitations in terms of growth,” says creative director Justin Dionisio. “The randomly generated canvas allowed each experience to be unique – providing an entirely new site every time the user returns.” By rebuilding the site around the user’s selection, Kuro could simplify direction and provide a more gratifying experience. “We were able to bypass the confusion associated with sublevel navigation. All choices are displayed visually – it becomes a ‘choose your own adventure’.”

6

7

8

“All choices are displayed visually – it becomes a ‘choose your own adventure’”
<prev 60 .net june 2009

9

Justin Dionisio

10

NET189.gallery 60

7/4/09 1:16:24 pm

.net showcase gallery

1

2

3

1-6 Ochs Schmidhuber Architekten
5

URL www.ochs-schmidhuber.de Company de-construct URL www.de-construct.com Content is often treated as if it can only be accessed by clicking through to another section, but slide effects, keeping a website to just one page, are seriously underused. This site for a German architects’ firm demonstrates just how good slide effects can be. It makes for one of the most fluid navigation systems we’ve seen, as the menus pull out from the next and stack up behind one another. It’s particularly suited to widescreen and, though the content to the right seems to get pushed by the menus, it’s easily expanded by clicking on an image that pushes them back again. To save space and add impact, each image is numbered, making this one of the tidiest ‘one page’ sites around.

6

4

7-11 Ciril Jazbec Photography
URL www.ciriljazbec.com Company DrawingArt URL www.drawingart.org
7

8

9

This photographic portfolio site uses full screen to an excellent degree. “In general, I wanted to achieve a full screen look, with content as big as possible, so that thumbnails, galleries and fonts in news and info weren’t too small as a result,” says designer Miroslav Koljanin. “At the same time I was brainstorming ideas from a user’s point of view: ‘How many clicks is the maximum I’d like to have until I come to final view?’ – that sort of thing.” DrawingArt’s main challenge was with the deeplinking system and full screen pictures, which are connected to an automatic slideshow. “The fit in/out and panning image functions were a bit tricky to connect, together with deeplinking, but in the end it all turned out perfectly,” says Koljanin.

10

11

“I wanted to achieve a full screen look with content that’s as big as possible”
Miroslav Koljanin

.net june 2009

61

next>

NET189.gallery 61

7/4/09 1:16:28 pm

.net showcase gallery

1

2

3

1-6 Kia UK
URL www.kia.co.uk Company E3 Media URL www.e3media.co.uk “Kia asked us to evoke their brand concept – ‘the power to surprise’ – in an engaging digital experience,” says joint MD Stuart Avery. E3 created a scrollscape navigation with individually animated sections to capture the attention of visitors. “The scrollscape works well with the ‘facet’ system, a key feature of the new global Kia brand identity,” continues Avery. The homepage scrollscape enabled E3 to create and display a huge variety of content, which can be changed to support campaigns and launches. “We feel it’s a new experience for users and not what they expect from Kia. The feature blocks also have a high attention to detail, with individual animations, content and functionality for each one.”
4

6

5

7-12 Oops, I Tweeted My Pants
URL www.fl-2.com/itweetedmypants/ itweetedmypants.html Company FL2 URL www.fl-2.com This unusual Twitter project is a colourful lesson in how to play with data, but it’s also a glimpse of the future of web design in the way it treats it. The beta project is a preloader experiment using Twitter data visualisation. FL2 says it decided to “nerd out a bit” with this one. “Lately, I’ve been obsessing about data and ways to make it look cool,” says FL2’s David Snyder. “It’s the preview release of what we hope to be an ongoing experiment, where we play with ActionScript, design and Twitter data.” The beta currently tracks five of FL2’s own Twitter accounts, reporting on the number of characters typed, number of tweets, tweets per day, mobile tweets vs desktop tweets and even alphabet usage.

7

8

9

“Lately, I’ve been obsessing about data and ways to make it look cool”
<prev 62 .net june 2009

10

11

David Snyder

12

NET189.gallery 62

7/4/09 1:16:31 pm

.net showcase gallery

1

4

2

3

1-6 Borghierh/Lowe
URL www.borghierhlowe.com.br Company Grafikonstruct URL www.grafikonstruct.com.br
6

5

The brief for this site for a Brazilian Ad agency was to provide something imaginative with a portfolio-centric site. “We tried to mix institutional content, portfolio content and inspirational content without divisions,” says designer Marcelle de Castro Naguib. “We needed a big mix of who they are without using a link called ‘About Us’.” The simple alphabetical approach to non-linear content organisation has an instant impact because it makes it easy to understand it from an international perspective. “The A-Z concept was to show more than what everybody expects from an ad agency site, that you can find anything!” says Naguib. The A-Z was assisted by a tagging structure to ensure the site made sense to anyone accessing it.

7-11 In2Media
URL in2media.com Company In house URL In house
8

7

9

Danish agency In2Media understands that a good site gets people to visit again, and recognises the importance of providing something useful the next time a visitor lands. The solution is a browsing history, a suggestions tab and a new material section. “With the browse history we give a new kind of overview of the path that the user has travelled,” says creative director Pelle Martin. The site also uses an interesting diagonal split animation for the images. “This was born from using the diagonal of the 16:9 aspect that most picture/video content is in. Initially, we wanted to use this angle even more, but in the final product we use it as a loader.” Flash 10 and Flex Builder were the main tools on top of the Sitecore CMS.

10

11

“We give a new kind of overview of the path that the user has travelled”
Pelle Martin

.net june 2009

63

next>

NET189.gallery 63

7/4/09 1:16:34 pm

.net showcase gallery
Want to see your work here?
Think your work should be in Gallery? Tell us about it at netmag@futurenet.com

1

2

3

1-5 Nokia: Beautiful Connections
URL www.nokia.co.uk/e71 Company Wieden + Kennedy London & Hi-ReS! URL www.wklondon.com & www.hi-res.net The common denominator of any mobile phone is its central directional button, which enables people to browse menus. It’s so important to the way people use their phones yet, until now, it’s been largely ignored by mobile brands on websites. Here it forms the central point of the whole site, being both the navigation and container for content. This site is for the new Nokia E71 and its theme is messaging, highlighting the BlackBerry-like features of the handset and its multimedia capabilities. The supersized button with four directions leads on to new content areas, but the actual animation of the button itself has been crafted to look as polished as possible. Such a simple theme, yet so effective.

5

4

6-10 Cartelle
URL www.cartelle.nl Company In house URL In house Dutch design duo Cartelle (Stevjin van Olst and Johnny Slack) have created a site that shows off their skills by being an experimental playground for their ideas. Johnny Slack says: “We like experimenting with navigation mechanisms, especially intuitive navigations that unlock contextual items without clicking.” So the guys chose a simple, responsive list view because of its convention and accessibility across all users. They consciously chose not to go over the top with 3D and animation because they wanted the site to stand the test of time and focus on content. As well as the Adobe Creative Suite, Maxon Cinema4D, Autodesk 3DSMax/Combustion and Logic Pro were all required.

6

7

8

“We like intuitive navigation systems that unlock items without the need for clicking”
Johnny Slack

10

9

<prev

64

.net june 2009

NET189.gallery 64

7/4/09 1:16:36 pm