.net Awards 2011: the 10 sites of the year

Over the last weeks we've profiled eight categories in the .net Awards 2011. Today it's the turn of the big one: site of the year.

We've asked you to nominate sites that offer a compelling user experience and are rich in visual flair and imagination. You've responded with an interesting mix that includes huge advertising and ecommerce campaigns for big brands, created by some of the world's biggest agencies, but also smaller client work built by just one lone designer. Plus, there are some experiments put together without the pressure of a client. But only one site can win...

.net: How many people worked on the site? And how long did the project take?
HK: Since it was a collaboration with Saatchi & Saatchi Dsseldorf I'm not sure how many people were involved in total. But our team from North Kingdom consisted of eight people including tech, creative direction, art direction/design, 3D, user experience, project management and sound. The development time of the project from start to launch was roughly four months.

.net: What was the brief?
David DeSandro, frontend developer: My team at nclud was planning an event at SXSW 2011. BeerCamp was a fun party that we throw for our fellow web designers and developers. We wanted the site to be a celebration of our community and be something that our peers would enjoy. We knew that we could tailor it to the early-adopter, tech-savvy demographic and leverage latest browser capabilities. Apart from making something fun and captivating, I was free to make whatever I wanted. This was a great opportunity to try something new and play around a bit.

.net: What was the brief?
Duane King, founder and managing partner of Thinking for a Living: Nike Better World is dedicated to serving the athlete and making a better world through sport. On New Year's day, the program was introduced to the world through a site that showcases Nike's initiatives for social good. The content was delivered through an interactive storytelling format that encouraged exploration and inspired sharing.

.net: What was the brief?
Jonah Goldstein, digital artisan: This was both Sophie's first website and first novel. It was clear that we needed to get her name out there, but beyond that there wasn't a true brief. Instead we embarked on an email chain of brainstorms since Sophie lives in Europe and my girlfriend and I were living in a small town in Nicaragua with limited net access. She began by sending along sites she liked, and what came through in her choices was a playfulness. That's what hooked me. I've tried to continue that feeling throughout the life of the project, even through a mini-campaign for the site in this competition.

.net: How many people worked on the site? And how long did the project take?
JG: I crafted the site myself, and as a solo designer/developer, I'm incredibly excited to be in the running with such super talented teams. My girlfriend was a great idea-sounding board (and I'm secretly training her to be a deadly frontend ninja at the moment).

The project faced a slight setback when my computer broke: getting a Mac fixed in Nicaragua is slightly difficult, so things didn't resume until we returned. The book's publishing timeline had analogous bumps in the road, and things progressed slowly but surely. All in all, I'd say four months off and on.

.net: How did you build it?
JG: I wanted the site to offer chances for discovery. The process of building the site was one of discovery as well, filled with little tests and prototypes that evolved over time. It was an enjoyable, creative process.

Underneath the flare I tried to build a good semantic structure ready for crawlers, screen readers, and non-JavaScript scenarios.

As for tools, I am forever indebted to the communities who tirelessly drive jQuery and WordPress development. They are amazing, and this site sits firmly on their shoulders.

.net: What's the feedback been like?
JG: I was very excited when the site first started showing up in tweets and design zines. People loved the tactile contact form and appreciated the attention paid to an often neglected user experience. The postcard went with the theme of the book, and I felt it was a nice reward for people taking time to write the author. Sophie is now receiving tons of test emails daily from designers and developers who are giving the site a spin. I'm hoping it also helps generate extra book sales for her.

Apparently, authors now have to pay for their promotional sites out of pocket, and since Sophie was a first-time author with a small budget, it was wonderful to create something that garnered public appeal and drive more eyes and ears to her work. I'm tickled pink (#FF6688).

.net: What was the brief?
James Aylett, founder, /dev/fort and Artfinder.com: Spacelog was built at a /dev/fort, so there was no 'brief' as such, just a bunch of people who turned up with enthusiasm. The core idea, of making NASA transcripts more accessible, was from Russ Garrett (who brought a bunch of the transcripts for us to work on), and everyone else got sufficiently fired up to make it happen.

.net: How did you build it?
JA: Spacelog runs Django with redis and Xapian behind it, and uses jQuery, backbone and underscore on the front end. Design elements not created by the team are the League Gothic typeface and the glyphish icons. There was also a bit of Perl that slipped past the censors.

The methodology used (a little tongue in cheek) is FORT; we have a way of running the week that’s designed to keep us on track while enabling us to get huge amounts done. Kind of agile but adapted for very short timespans, and fuelled by plenty of alcohol and bacon.

.net: How many people worked on the site? And how long did the project take?
TW: The project took three and a half months, and the team expanded from the typical Paravel trio to include Frank Chimero as well as the entire Do Lectures staff. In a highly collaborative fashion, Frank and our own Reagan Ray worked on the design while Alex Heslop provided the hand-drawn speaker illustrations. I worked with Dave Rupert on the responsive code-out and was thankful for his talent when the time came to make the videos fluid. Jon Heslop, who initially contacted us, worked with us daily to manage the project and migrate all the content.

Alongside David and Clare Hieatt, we credit Jon with fostering our newfound love for responsive web design. We all made the shift from thinking about the web in terms of desktops and pixels to content and proportions seamlessly, within project scope and budget.

.net: How did you build it?
TW: We’d worked with responsive web design techniques before, but not at this scale. At the time there weren’t too many responsive or adaptive sites to evaluate, but we quickly established some basic principles that we try to adhere to when building responsively. We are accustomed to spending a lot of time arranging the content on a page to establish hierarchy, and wanted to be sure that it was preserved as wider two- or three-column widths were combined into one for narrow views and mobile devices. The extra layer of planning went a long way not just in cramming content to fit a particular width but in choreographing it to provide the ideal experience at any width.

.net: How many people worked on the site? And how long did the project take?
RB: Any time we work on a project it’s a whole team effort. Ideas come from anywhere and the best ideas come when you least expect them. While there isn’t a person in our office that didn’t contribute to the project’s success, the primary team on the final project was myself and Jeff Jewiss, a frontend developer along with a melange of other freelancers who filled in the gaps. The project went through many phases, like we said, the brief was quite vague in spec and scope. When we started the project, the popular conventions to achieve our goals were: a website as well as native applications for a vast number of mobile and tablet devices.

We had been hearing all the racket about ‘Responsive Web Design’ and felt like this was the perfect opportunity to ask our clients to be brave and try something new. To give some perspective on how forward thinking we were asking the client to be on this project, ‘the book’ on Responsive Web Design was published 7 June, about 60 days after the launch of The Standard. In all, we spent about seven months working on the project with about four of it dedicated to the design and development of the responsive site you see today.

.net: What's the feedback been like?
RB: The feedback has been largely positive. It’s one of our greatest achievements as a company. The Standard continues to be a great talking point for us and a crown jewel in our portfolio. We’re certain that if we did it again we’d change an innumerable list of both design and functionality elements but we’re still very grateful for the opportunity to create the product we ended up with.

.net: What was the brief?
Sean Klassen, founding partner and creative director at Legwork Studio: Denver's historic Union Station is the centrepiece of a new neighbourhood and transportation hub that is one of the largest urban infill projects in the US. The Union Station Neighborhood Co. tasked us with making a site that mirrored the approach of the project: respect the history of the station while creating a forward-thinking experience centred on technology. By combining classic, editorial design principles with progressive web development we've done just that. The site uses modern JavaScript, HTML5 (video, canvas) and CSS3. It works across all modern browsers in addition to a targeted experience for the iPad. It even works in IE7. Hey, we wanted to respect history in all regards.

.net: How did you build it?
SK: Tools: Coda, Photoshop, Github, Google Web Fonts and our trusty whiteboard. Technologies: JavaScript, HTML5, CSS3. Methodologies: beyond the desktop experience, the site also needed to look and work great on an iPad as the client's staff use it as a resource when on site. So, we approached this site with an immersive magazine flare, giving the layout and structure of each primary section careful consideration based on the type of content being presented but following a strict grid and typographical rules throughout.

We saw a users interaction being analogous to a person first flipping through a magazine, looking at the pictures and short features; followed by choosing and reading an in-depth article. Considering this, we proposed to promote several of the more visual and immersive aspects of the site to a large marquee area that is featured on the home page, but available on every page by simply scrolling up.

Once we had the strategy from above in place, the rest of the site was built in a very Agile process. We were continually designing and building small pieces of the site and iterating on them until we had one cohesive unit. We learned a lot along the way and were able to make constant improvements during the process rather than being locked in to an approved information architecture, static design, etc.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.

.net Awards 2011: the 10 sites of the year

1. Auris Hybrid

2. Activate

3. Beer Camp 2011

4. Harvey Nichols

5. Nike Better World

6. Sophie Hardach

7. Spacelog

8. The Do Lectures

9. Toronto Standard

10. Union Station Neighborhood

Related articles