Case Study: Creating a Website for a Cycling Legend

Behind the scenes at www.biciklifumic.hr, Awwwards site of the day for 4 July 2012

  • Share on Google
  • Share on Stumbleupon

We consider websites a great medium for telling someone’s story, be it a brand, company, a person or an idea. Not only are we able to use all the conventional storytelling tools like design, words, photography or videos, but we can mix them together into a powerful yet simple source of information and ideas. We want to share an example of our work that really illustrates the main principles of our approach to web design. In an ideal situation we’ll have two things: a story and a superhero.

So, we will describe the process of creating a website for the greatest Croatian cyclist – Vlado Fumi? (Fuma) and his bicycle store and workshop. With no less than 15 State Championship titles in ex Yugoslavia, you can probably look at Fuma as the “Lance Armstrong of South-East Europe”. The site we created is www.biciklifumic.hr and it won Awwwards “Site of the Day” on 4th July 2012.

  • When your client is a Superhero

    We try to visualize our client as a one-of-a-kind superhero. We use the term “superhero” to mean everything that makes our client stand out from the crowd. In reality, it’s not always easy to see your client as a superhero, and in such cases you might need to work hard to imagine it. However, with Fuma it was really easy and inspiring. And boy does he make a good superhero. What a great client he was, giving us complete creative freedom with his website.

    The next thing is the story. Before we could conceptualize his story, first of all we had to establish the main goals the story (website) had to achieve. This is where research comes in. We talked to our client a lot and gathered all the required information while establishing a relationship of trust. Thus, the main goals were successfully defined:

    Goal One: To tell the story of a cycling legend in an appropriate way.

    Goal Two: To show off his experience, knowledge and skills when it comes to bicycles. A wonderful basis for this is that he owns the oldest bicycle workshop in the Croatian capital – Zagreb.

  • And there you have it – the main purpose of this website is to revive the story of Fuma the Superhero and let people know what his store and workshop can offer. In marketing terms, it was more about personal than business branding. And that’s what’s really cool about this project.

    Just to make things clear, when we refer to storytelling, we don’t necessarily mean the design and UX approach in which the story is told in a linear way. It’s more that everything we put in a website needs to breathe together and tell a story.

    Photography – millions of pixels that tell millions of words

    We consider photography to be one of the most important elements of a web site, and by far the most powerful visually. There is no visual medium that can capture the atmosphere of a story better than a good photo. That’s why we always do all we can to get some really good shots for our projects.

  • In this case, we organized a photo shoot. We had beautiful weather and Fuma is such a nice guy, so we had a really great time doing this. The most challenging part was getting the single photo that would occupy 90% of Fuma’s homepage. The result was as pleasing as it could be. We could have spent hours and hours trying to design the homepage, but from our point of view, nothing could represent Fuma and what he is in the way the homepage photo does.

  • Besides the homepage, every other page has its own main photo which sets the beginning of every chapter. Because all content on the website is in Croatian, we’ll just give you a quick translation of the pages in the horizontal navigation. From left to right: “Servis” (bicycle workshop), “Trgovina” (store), “Biografija” (biography), “Iz medija” (stories from Fuma’s racing adventures), “Vijesti” (news), and “Kontakt” (of course, contact).

    Painting the story

    By now we had set the creative direction, we had some great photographs and were pretty well acquainted with our superhero. But every good superhero needs his colors, and for Fuma we chose black and yellow (remind you of someone? Hint: something to do with bats).

  • The goal was to find the color combination that would paint the story in a complementary way. As usual, we tried to make it as simple as possible. The combination is suitable because of its good contrast and we like the way it complements the photographs.

    Putting the storyline into a wireframe

    In the final pre-development stage, we had to create the main structure of the website. As we mentioned earlier, there are 6 links in the navigation bar (not counting the first one that links to the homepage). We’ll quickly go through the first four of them.

  • The first two pages (“Servis” and “Trgovina”) are organized in the same fashion: there are four buttons which can be activated by clicking or scrolling. The next page is Fuma’s biography (“Biografija”): vertically scrollable with some nice hover content and a horizontal gallery at the bottom. Also, a chronological menu pops up at the top so users can choose the way they want to browse Fuma’s bio.

    The next link (“Iz medija”) is a clickable collage of photos that Fuma collected throughout his successful career. The newspaper clippings marked with a yellow circle can be clicked and the relevant story pops in, describing the exciting bicycle adventures of our superhero. This page is a good example of the way we like to integrate photography into our web design.

    Throughout the website, the intention was to make visitors use their mouse’s scroll wheel in interesting ways, just as we all use our bicycle wheels to get to interesting places. In the end, this website is also about that beautiful feeling of riding a bicycle…

    Frontend! Backend! Boom! Wham! Pow!

    When the superhero’s designer sidekick finishes his job, it’s time for our developer to jump in and take the wheel. As some of you might have noticed, the backend development wasn’t too complicated. We used a proven and reliable combination of PHP and MySQL. Besides that, we also used the excellent open source MVC framework CakePHP and our own in-house CMS.

    But when it came to frontend development, things got a little more interesting and challenging. Every page required a lot of brainwork from our JavaScript programmers, and for this purpose we used JavaScript library YUI 3.5.1.

    The resulting website is semi-responsive and is made above all with desktop users in mind. That means it’s not adapted for viewing on mobile devices or in portrait view on tablets, but is friendly to displays from 1024px up to 1920px in width.

    Just like riding a bicycle on your favorite road

    The focus was on the smoothness of user experience and navigation. Every visitor’s scroll and click needed to result in a nice, smooth action, so they can already feel how their bicycle will go after Fuma is done with it.

    To achieve that feeling, we enabled asynchronous page loading, which gives that nice, smooth browsing experience (without reloading the whole page every time). Almost every page can be navigated by scrolling, which is usually complemented with extra features like arrow buttons, hover states and links. On the “Biografija” page, you can see a combination of Parallax scroll with additional navigation menu (by years). Then we spiced it up with some additional details and neat little features and mission accomplished- Fuma was ready for his online cycling adventures.

  • Conclusion

    The resulting website was greeted with enthusiasm both by Fuma himself and the public in general. We are really honored that it won Awwwards “Site of the Day”.

    We want to emphasize that what matters is not only the skills and experience of our designers and developers, but also the friendliness and trust the client gives us. If a client is ready to share his story with us in a friendly and responsive manner and give us creative freedom, that will probably be his one most valuable investment. For us, it makes a lot easier to see a superhero in him and put his story into a website.

    CREDITS

    • Agency: North2
    • Creative Direction and Design: Ivan Bošnjak
    • Frontend and backend direction: Osman Ajkić
    • Frontend development: Alan Kralj, Davor Glavaš
    • Backend development: Alan Kralj
    • Photography: Darko Novosel
    • Copywriting: Tomislav Škarica

Awwwards

By north2

We are north2, a supersmall web studio with a programmer's brain and a creative heart.

north2.net

1 ... 5 6 7